Merge pull request #165 from WishPool-dev/feat/#164-product-image

[Feat] 상품 이미지 추가

Author: kwonsaebom

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "packageManager": "pnpm@10.11.0",
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --webpack",
     "build": "next build --webpack",
     "start": "next start",
     "lint": "eslint .",

src/app/pick/list/page.tsx

@@ -20,12 +20,13 @@ const ListPage = () => {
         <span>{items.length}개</span>
       </div>
       <section className="grid grid-cols-2 gap-[1.1rem]">
-        {items.map(({ giftId, itemName, itemUrl }) => (
+        {items.map(({ giftId, itemName, itemUrl, imageUrl }) => (
           <GiftCard
             key={giftId}
             giftId={giftId}
             itemName={itemName}
             itemUrl={itemUrl}
+            imageUrl={imageUrl}
           />
         ))}
       </section>

src/app/pick/preview/page.tsx

@@ -48,13 +48,14 @@ const PreviewPage = () => {
       <h1 className="text-blue-primary caption1">최종 점검</h1>
       <h2 className="head1 text-text">최종 선택한 선물</h2>
       <section className="my-[2.8rem] space-y-[1.2rem]">
-        {pickedItems.map(({ giftId, itemName, itemUrl }) => (
+        {pickedItems.map(({ giftId, itemName, itemUrl, imageUrl }) => (
           <GiftCard
             key={giftId}
             size="big"
             giftId={giftId}
             itemName={itemName}
             itemUrl={itemUrl}
+            imageUrl={imageUrl}
           />
         ))}
       </section>

src/app/pick/select/page.tsx

@@ -52,7 +52,7 @@ const SelectPage = () => {
         className="no-scrollbar bg-blue-5 flex snap-x snap-mandatory gap-[2.4rem] overflow-x-auto overflow-y-hidden px-[2rem] pt-[7rem] pb-[5rem]"
       >
         <div aria-hidden className="w-[calc(50vw-9rem)] shrink-0 snap-none" />
-        {items.map(({ giftId, itemName, itemUrl }, i) => (
+        {items.map(({ giftId, itemName, itemUrl, imageUrl }, i) => (
           <CarouselCard
             key={giftId}
             giftId={giftId}
@@ -61,6 +61,7 @@ const SelectPage = () => {
             itemName={itemName}
             itemUrl={itemUrl}
             onRemove={handleRemove}
+            imageUrl={imageUrl}
           />
         ))}
         <div aria-hidden className="w-[calc(50vw-9rem)] shrink-0 snap-none" />

src/app/wishpool/(viewer)/[id]/date/page.tsx

@@ -36,9 +36,9 @@ const DatePage = () => {
         pickDate: endDate,
       });
 
-      const chosenUrl = res.chosenUrl;
-      sessionStorage.setItem('chosenUrl', chosenUrl);
-      router.push(PATH.WISHPOOL_INVITE(wishpoolId));
+      router.push(
+        PATH.WISHPOOL_INVITE(wishpoolId) + `?chosenUrl=${res.chosenUrl}`,
+      );
     } catch {
       alert('선물 고르기 마감일 설정에 실패했습니다.');
     }

src/app/wishpool/(viewer)/[id]/final/page.tsx

@@ -49,6 +49,7 @@ const FinalPage = () => {
               giftId={giftId}
               itemName={giftName}
               itemUrl={giftImage}
+              imageUrl={giftImage}
             />
           ),
         )}

src/app/wishpool/(viewer)/[id]/gifts/page.tsx

@@ -30,6 +30,7 @@ const GiftPage = () => {
             guest={gift.guest || ''}
             itemName={gift.itemName}
             itemUrl={gift.itemUrl}
+            imageUrl={gift.imageUrl}
           />
         ))}
       </div>

src/app/wishpool/(viewer)/[id]/invite/page.tsx

@@ -7,6 +7,7 @@ import invite from '@/assets/images/invite.png';
 import WishpoolShareSection from '@/components/common/WishpoolShareBox';
 import { PATH } from '@/constants/common/path';
 import { useGetWishpoolId } from '@/hooks/common/useGetWishpoolId';
+import { useGetChosenUrl } from '@/hooks/pick/useGetChosenUrl';
 import { ShareSectionType } from '@/types/common/ShareSectionType';
 
 const getOrigin = () => {
@@ -17,7 +18,7 @@ const getOrigin = () => {
 const InvitePage = () => {
   const content = 'invite' as ShareSectionType;
 
-  const chosenUrl = sessionStorage.getItem('chosenUrl') || '';
+  const chosenUrl = useGetChosenUrl();
   const origin = getOrigin();
   const inviteUrl = `${origin}${PATH.PICK_INVITE}?chosenUrl=${chosenUrl}`;
 

src/components/pick/list/GiftCard.tsx

@@ -1,5 +1,6 @@
 import Image from 'next/image';
 
+import { useGetWishpoolImage } from '@/api/domain/detail/hooks';
 import GiftCardImage from '@/assets/images/gift-card.png';
 import type { GiftCardType } from '@/types/common/giftCardType';
 
@@ -13,16 +14,19 @@ const GiftCard = ({
   size = 'small',
   giftId,
   itemName,
-  //itemUrl,
+  imageUrl,
 }: GiftCardProps) => {
   const isSmall = size === 'small';
 
+  const { data: imageData } = useGetWishpoolImage(imageUrl);
+  const finalSrc = imageData && imageData.key ? imageData.key : GiftCardImage;
+
   return (
     <div
       className={`bg-background-01 flex grow-1 flex-col items-center gap-[2.4rem] rounded-[16px] ${isSmall ? 'p-[2.2rem]' : 'p-[6.4rem]'}`}
     >
       <Image
-        src={GiftCardImage}
+        src={finalSrc}
         alt={`선물 카드 이미지 - ${giftId}`}
         width={isSmall ? 126 : 170}
         height={isSmall ? 126 : 170}

src/components/pick/select/CarouselCard.tsx

@@ -4,6 +4,7 @@ import { motion } from 'framer-motion';
 import type { PanInfo } from 'framer-motion';
 import Image from 'next/image';
 
+import { useGetWishpoolImage } from '@/api/domain/detail/hooks';
 import GiftCardImage from '@/assets/images/gift-card.png';
 import { useDeleteCard } from '@/hooks/pick/useDeleteCard';
 import type { GiftCardType } from '@/types/common/giftCardType';
@@ -25,7 +26,7 @@ export default function CarouselCard({
   onRemove,
   giftId,
   itemName,
-  // giftImage,
+  imageUrl: imageKey,
 }: CarouselCardProps) {
   const isActive = index === activeIndex;
 
@@ -39,6 +40,9 @@ export default function CarouselCard({
     handleDragEnd,
   } = useDeleteCard({ onRemove, id: giftId });
 
+  const { data: imageData } = useGetWishpoolImage(imageKey);
+  const finalSrc = imageData && imageData.key ? imageData.key : GiftCardImage;
+
   return (
     <>
       {renderSpacer && (
@@ -73,7 +77,7 @@ export default function CarouselCard({
         ].join(' ')}
       >
         <Image
-          src={GiftCardImage}
+          src={finalSrc}
           alt="선물 카드 이미지"
           width={133}
           height={133}