diff --git a/src/components/home/BottomSheet.tsx b/src/components/common/BottomSheet.tsx similarity index 80% rename from src/components/home/BottomSheet.tsx rename to src/components/common/BottomSheet.tsx index 5a51a5a..ab98975 100644 --- a/src/components/home/BottomSheet.tsx +++ b/src/components/common/BottomSheet.tsx @@ -1,14 +1,14 @@ -import { ICoordinateDetailInfoResponse } from '@/types/coordinate'; import styled from 'styled-components'; import { motion } from 'framer-motion'; import { MdClose } from 'react-icons/md'; interface IBottomSheet { - data?: ICoordinateDetailInfoResponse; + title?: string; + children?: React.ReactNode; handleCloseBottomSheet: () => void; } -export default function BottomSheet({ data, handleCloseBottomSheet }: IBottomSheet) { +export default function BottomSheet({ title, handleCloseBottomSheet, children }: IBottomSheet) { return (
-

{data?.value.title}

+

{title}

+
{children}
); } @@ -41,6 +42,7 @@ const S = { bottom: 0px; overflow: hidden; background-color: ${(props) => props.theme.colors.white}; + padding: 0 10px; .bottom-sheet { &__header { width: 100%; @@ -50,6 +52,7 @@ const S = { padding: 10px 10px; &__title { font-size: 1.3rem; + font-weight: 600; } &__mock { width: 30px; diff --git a/src/components/home/BottomSheetShopInfo.tsx b/src/components/home/BottomSheetShopInfo.tsx new file mode 100644 index 0000000..5a1646f --- /dev/null +++ b/src/components/home/BottomSheetShopInfo.tsx @@ -0,0 +1,50 @@ +import { textEllipsis } from '@/styles/Common'; +import { ICoordinateDetailInfoResponse } from '@/types/coordinate'; +import styled from 'styled-components'; + +interface IProps { + data?: ICoordinateDetailInfoResponse; +} + +export default function BottomSheetShopInfo({ data }: IProps) { + if (!data) return <>; + return ( + + 좌표상 이미지 정보 +
+

+ 주소: {data.value.address} +

+

+ 번호: {data.value.phoneNumber} +

+
+
+ ); +} + +const S = { + BottomSheetShopInfo: styled.div` + display: flex; + gap: 10px; + img { + object-fit: cover; + } + p { + ${textEllipsis}; + max-width: calc(100% - 20px - 0.5rem); + strong { + font-weight: 600; + padding-right: 0.5rem; + } + } + .bottom-sheet-shop-info { + &__content { + padding: 5px 0; + display: flex; + flex-direction: column; + gap: 10px; + } + } + `, +}; diff --git a/src/containers/home/BottomSheetContainer.tsx b/src/containers/home/BottomSheetContainer.tsx index a9bd855..c0d71e2 100644 --- a/src/containers/home/BottomSheetContainer.tsx +++ b/src/containers/home/BottomSheetContainer.tsx @@ -3,7 +3,8 @@ import queryKeys from '@/constants/queryKeys'; import useSimpleQuery, { IUseSimpleQuery } from '@/hooks/useSimpleQuery'; import { ICoordinateDetailInfoResponse } from '@/types/coordinate'; import { IBottomSheetState } from '.'; -import BottomSheet from '@/components/home/BottomSheet'; +import BottomSheet from '@/components/common/BottomSheet'; +import BottomSheetShopInfo from '@/components/home/BottomSheetShopInfo'; interface IBottomSheetContainer { bottomSheetState: IBottomSheetState; @@ -21,12 +22,19 @@ export default function BottomSheetContainer({ bottomSheetState, setBottomSheetS }, requestQuery: { coordinateId: bottomSheetState.coordinateId }, }; + const { data } = useSimpleQuery(request); + const handleCloseBottomSheet = () => { setBottomSheetState({ isShow: false, coordinateId: 0, }); }; - return ; + + return ( + + + + ); }