[S3] 메뉴 페이지 오류 수정

TEAM-FLASH · Dec 20, 2024 · c15fb1f · c15fb1f
2 parents 6e54d9e + f6ff5f3
commit c15fb1f
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 12 deletions.
diff --git a/src/components/ImageSwiper/ImageSwiper.tsx b/src/components/ImageSwiper/ImageSwiper.tsx
@@ -15,15 +15,13 @@ interface ImageSwiperProps extends SwiperProps {
     onLoad?: (e: React.SyntheticEvent<HTMLImageElement>) => void;
   };
 }
-
 const ImageSwiper = ({
   images,
   modules = [Mousewheel, Pagination],
   mousewheel = { forceToAxis: true, sensitivity: 1 },
   spaceBetween = 3,
   slidesPerView = 3.6,
   imageStyle,
-  customStyle,
   ...props
 }: ImageSwiperProps) => {
   const isPaginationActive = slidesPerView === 1;
@@ -48,7 +46,7 @@ const ImageSwiper = ({
   return (
     <div css={conditionalContainerStyle}>
       <Swiper
-        css={[swiperStyle, customStyle]}
+        css={swiperStyle}
         modules={modules}
         mousewheel={mousewheel}
         spaceBetween={spaceBetween}

diff --git a/src/pages/Studio/StudioMenu/StudioMenu.tsx b/src/pages/Studio/StudioMenu/StudioMenu.tsx
@@ -1,6 +1,5 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import BackButton from '@components/BackButton/BackButton';
 import StudioNavigator from '@components/Navigator/StudioNavigator';
 import StudioMenuItem from './StudioMenuItem';
 import { useParams } from 'react-router-dom';
@@ -40,8 +39,8 @@ const StudioMenu = () => {
   const StudioMenuList = data?.map((item) => <StudioMenuItem key={item.id} StudioId={_id} data={item} />);
   return (
     <>
-      <Header title={`${data && data[0].studioName}`} />
-      <StudioNavigator _id={String(_id)} />
+      <Header title={`${data ? data[0].studioName : ''}`} />
+      <StudioNavigator _id={_id || ''} />
       <div css={ItemLIstStyle}>{StudioMenuList}</div>
     </>
   );

diff --git a/src/pages/Studio/StudioMenu/StudioMenuDetail.tsx b/src/pages/Studio/StudioMenu/StudioMenuDetail.tsx
@@ -16,7 +16,7 @@ const StudioMenuDetail = () => {
   const [data, setData] = useState<IMenuListRes>();
   const [scrollY, setScrollY] = useState(false);
   const [tabMenuState, setTabMenuState] = useState('info');
-  const [totalPrice, setTotalPrice] = useState<number>(data ? data.price : 0);
+  const [totalPrice, setTotalPrice] = useState<number>(0);
   const [checkState, setCheckState] = useState<Record<number, boolean>>({});
 
   const fetchMenuDetail = async () => {

diff --git a/src/pages/Studio/StudioMenu/StudioMenuDetailInfo.tsx b/src/pages/Studio/StudioMenu/StudioMenuDetailInfo.tsx
@@ -16,6 +16,9 @@ const StudioMenuDetailInfo = ({
   checkState: Record<number, boolean>;
   setCheckState: Dispatch<SetStateAction<Record<number, boolean>>>;
 }) => {
+  const [hours, minutes, seconds] = infoItem.duration ? infoItem.duration.split(':').map(Number) : [0, 0, 0];
+  const totalMinutes = hours * 60 + minutes + seconds / 60;
+
   const handleOptionClick = (price: number, id: number, e: React.ChangeEvent<HTMLInputElement>) => {
     const isChecked = e.target.checked;
     setTotalPrice((prev) => (isChecked ? prev + price : prev - price));
@@ -28,25 +31,27 @@ const StudioMenuDetailInfo = ({
   //   console.log('최종 결제 금액:', totalPrice);
   // };
 
+  console.log(infoItem);
+
   return (
     <>
       <div css={MenuInfoWrapperStyle}>
         <section css={MenuInfoStyle}>
           <div className="menuInfoItem">
             <h4 className="time">예상 소요 시간</h4>
-            <p>약 60분</p>
+            <p>약 {infoItem.duration ? totalMinutes : 60}분</p>
           </div>
           <div className="menuInfoItem">
             <h4 className="camera">기본 촬영 수</h4>
-            <p>70-80컷</p>
+            <p>{infoItem.pictureNum ? infoItem.pictureNum : `70-80컷`}</p>
           </div>
           <div className="menuInfoItem">
             <h4 className="crop">인화 사이즈</h4>
-            <p>4x6in</p>
+            <p>{infoItem.pictureSize ? infoItem.pictureSize : '4x6in'}</p>
           </div>
           <div className="menuInfoItem">
             <h4 className="folder">기본 제공 파일</h4>
-            <p>3포즈 리터칭 JPG파일</p>
+            <p>{infoItem.offerFile ? infoItem.offerFile : '3포즈 리터칭 JPG파일'}</p>
           </div>
         </section>
 

diff --git a/src/types/types.ts b/src/types/types.ts
@@ -112,9 +112,12 @@ export interface IMenuListRes {
   name: string;
   description: string;
   price: number;
-  duration: string | null;
   additionalOptions: IAdditionalOptionsRes[];
   menuImages: IPortfolio[] | IReviewImages[];
+  duration: string | null; //소요시간
+  offerFile: string | null; //기본 제공 파일
+  pictureNum: string | null; //촬영 수
+  pictureSize: string | null; //인화 사이즈
   avgScore: number;
   reviews: { content: Review[] };
   reviewCount: number;