feat: 바텀시트 컴포넌트 공통화 및 세부정보 작성

JoStar33 · May 26, 2024 · a9de297 · a9de297
1 parent d6efbd6
commit a9de297
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 6 deletions.
diff --git a/src/components/home/BottomSheet.tsx → src/components/common/BottomSheet.tsx b/src/components/home/BottomSheet.tsx → 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 (
     <S.BottomSheet
       exit={{
@@ -23,9 +23,10 @@ export default function BottomSheet({ data, handleCloseBottomSheet }: IBottomShe
     >
       <div className="bottom-sheet__header">
         <div className="bottom-sheet__header__mock" />
-        <p className="bottom-sheet__header__title">{data?.value.title}</p>
+        <p className="bottom-sheet__header__title">{title}</p>
         <MdClose size={30} cursor="pointer" onClick={handleCloseBottomSheet} />
       </div>
+      <div>{children}</div>
     </S.BottomSheet>
   );
 }
@@ -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
@@ -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 (
+    <S.BottomSheetShopInfo>
+      <img src={data.value.image} alt="좌표상 이미지 정보" width={100} height={100} />
+      <div className="bottom-sheet-shop-info__content">
+        <p>
+          <strong>주소:</strong> {data.value.address}
+        </p>
+        <p>
+          <strong>번호:</strong> {data.value.phoneNumber}
+        </p>
+      </div>
+    </S.BottomSheetShopInfo>
+  );
+}
+
+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
@@ -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<ICoordinateDetailInfoResponse>(request);
+
   const handleCloseBottomSheet = () => {
     setBottomSheetState({
       isShow: false,
       coordinateId: 0,
     });
   };
-  return <BottomSheet data={data} handleCloseBottomSheet={handleCloseBottomSheet} />;
+
+  return (
+    <BottomSheet title={data?.value.title} handleCloseBottomSheet={handleCloseBottomSheet}>
+      <BottomSheetShopInfo data={data} />
+    </BottomSheet>
+  );
 }