Feat/#149 add img

src/api/domain/detail/types.ts

@@ -33,6 +33,7 @@ export type WishpoolChosenGiftListResponse = {
       giftId: number;
       giftName: string;
       giftImage: string;
+      imageUrl: string;
     },
   ];
 };

src/api/domain/pick/types.ts

@@ -6,6 +6,7 @@ export type PickGiftListResponse = {
   celebrant: string;
   birthDay: string;
   endPickDate: string;
+  imageKey?: string;
 };
 
 export type PickGiftRequest = {

src/app/pick/invite/page.tsx

@@ -36,6 +36,10 @@ const InviteHandler = () => {
     return <Loading />;
   }
 
+  const displayImageSrc = pickData?.imageKey
+    ? `${process.env.NEXT_PUBLIC_WISHPOOL_IMAGE_BASE_URL}/${pickData.imageKey}`
+    : WishpoolCardImage;
+
   return (
     <>
       <div className="relative mt-[6rem] w-full rounded-[16px] bg-white">
@@ -58,7 +62,7 @@ const InviteHandler = () => {
 
         <div className="relative aspect-[353/199] w-full">
           <Image
-            src={WishpoolCardImage}
+            src={displayImageSrc}
             alt="이벤트 카드 이미지"
             fill
             sizes="100vw"

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

@@ -42,14 +42,14 @@ const FinalPage = () => {
           className="absolute -top-5 left-1/2 -translate-x-1/2 -translate-y-1/2"
         />
         {giftData?.selectedGiftsListDto.map(
-          ({ giftId, giftName, giftImage }) => (
+          ({ giftId, giftName, giftImage, imageUrl }) => (
             <GiftCard
               key={giftId}
               size="big"
               giftId={giftId}
               itemName={giftName}
               itemUrl={giftImage}
-              imageUrl={giftImage}
+              imageUrl={imageUrl}
             />
           ),
         )}
@@ -59,7 +59,7 @@ const FinalPage = () => {
           <div className="flex flex-col gap-[1.2rem]">
             <KakaoButton
               shareType="complete"
-              linkUrl={PATH.WISHPOOL_FINAL(wishpoolId)}
+              linkUrl={`${origin}${PATH.WISHPOOL_FINAL(wishpoolId)}`}
               name={giftData?.celebrant || ''}
             />
             <Button textSize="lg" onClick={() => router.push(PATH.HOME)}>

src/app/wishpool/join/[id]/info/page.tsx

@@ -52,14 +52,15 @@ const InfoPage = () => {
           celebrant={wishpoolData?.celebrant ?? ''}
           birthDay={getSlashDateFmt(wishpoolData?.birthDay) ?? ''}
         />
+        <div className="relative h-[18.7rem] w-[35.3rem] overflow-hidden">
+          <Image
+            src={displayImg}
+            fill
+            className="object-cover"
+            alt="위시풀 대표 이미지"
+          />
+        </div>
 
-        <Image
-          src={displayImg}
-          width={430}
-          height={240}
-          className="w-full"
-          alt="위시풀 대표 이미지"
-        />
         <div className="body2 flex gap-[1.2rem] p-[1.6rem]">
           <span className="shrink-0 text-gray-600">소개</span>
           <p className="whitespace-pre-line text-gray-800">

src/app/wishpool/join/[id]/preview/page.tsx

@@ -9,8 +9,8 @@ import GiftCardImage from '@/assets/images/gift-card.png';
 import Button from '@/components/common/Button';
 import UserTag from '@/components/common/UserTag';
 import { PATH } from '@/constants/common/path';
-import { WISHPOOL_IMAGE_BASE_URL } from '@/constants/wishpool/image';
 import { useGetWishpoolId } from '@/hooks/common/useGetWishpoolId';
+
 const PreviewPage = () => {
   const router = useRouter();
   const wishpoolId = useGetWishpoolId();
@@ -64,9 +64,9 @@ const PreviewPage = () => {
               className="flex flex-col items-center justify-center"
             >
               {gift.imageUrl ? (
-                <div className="relative h-[15.5rem] w-[15.5rem]">
+                <div className="relative h-[15.5rem] w-[15.5rem] overflow-hidden">
                   <Image
-                    src={`${WISHPOOL_IMAGE_BASE_URL}/${gift.imageUrl}`}
+                    src={`${process.env.NEXT_PUBLIC_WISHPOOL_IMAGE_BASE_URL}/${gift.imageUrl}`}
                     alt="등록 선물 이미지"
                     fill
                     className="object-cover"

src/components/common/Form/GiftField.tsx

@@ -2,7 +2,6 @@
 import { useEffect, useRef } from 'react';
 
 import Icon from '@/components/common/Icon';
-import { WISHPOOL_IMAGE_BASE_URL } from '@/constants/wishpool/image';
 import { useImageUpload } from '@/hooks/wishpool/useImageUpload';
 import { patchGift } from '@/utils/wishpool/viewer/manageGifts';
 
@@ -53,7 +52,7 @@
     if (!imageKey) return;
     onChangeImage(imageKey);
     patchGift(index, { imageUrl: imageKey });
   }, [imageKey]);
 
   const handleDeleteImage = () => {
     reset();
@@ -62,7 +61,7 @@
   };
 
   const imageSrc = valueImageUrl
-    ? `${WISHPOOL_IMAGE_BASE_URL}/${valueImageUrl}`
+    ? `${process.env.NEXT_PUBLIC_WISHPOOL_IMAGE_BASE_URL}/${valueImageUrl}`
     : null;
 
   const displayImageSrc = preview ?? imageSrc;
@@ -122,7 +121,7 @@
               alt="선물 이미지 미리보기"
               width={82}
               height={82}
-              className="h-[8.2rem] w-[8.2rem] rounded-[12px] border border-gray-400"
+              className="h-[8.2rem] w-[8.2rem] rounded-[12px] border border-gray-400 object-cover"
             />
             <span className="absolute top-[0.6rem] left-[6rem]">
               <button

src/components/pick/list/GiftCard.tsx

@@ -1,6 +1,6 @@
 import Image from 'next/image';
+import Link from 'next/link';
 
-import { useGetWishpoolImage } from '@/api/domain/detail/hooks';
 import GiftCardImage from '@/assets/images/gift-card.png';
 import type { GiftCardType } from '@/types/common/giftCardType';
 
@@ -14,29 +14,33 @@ 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={finalSrc}
-        alt={`선물 카드 이미지 - ${giftId}`}
-        width={isSmall ? 126 : 170}
-        height={isSmall ? 126 : 170}
-        className={`rounded-[12px] object-cover`}
-      />
-      <span
-        className={`subtitle2 text-text line-clamp-2 h-[4.8rem] text-center ${isSmall ? 'w-[12.6rem]' : ''}`}
-      >
-        {itemName}
-      </span>
+      <Link href={itemUrl} className="flex flex-col gap-[2.8rem]">
+        <Image
+          src={
+            imageUrl
+              ? `${process.env.NEXT_PUBLIC_WISHPOOL_IMAGE_BASE_URL}/${imageUrl}`
+              : GiftCardImage
+          }
+          alt={`선물 카드 이미지 - ${giftId}`}
+          width={isSmall ? 126 : 170}
+          height={isSmall ? 126 : 170}
+          className={`rounded-[12px] object-cover`}
+        />
+        <span
+          className={`subtitle2 text-text line-clamp-2 text-center ${isSmall ? 'w-[12.6rem]' : ''}`}
+        >
+          {itemName}
+        </span>
+      </Link>
     </div>
   );
 };

src/components/wishpool/viewer/list/ItemCard.tsx

@@ -1,29 +1,29 @@
 import Image from 'next/image';
 import Link from 'next/link';
 
-import { useGetWishpoolImage } from '@/api/domain/detail/hooks';
 import GiftCardImage from '@/assets/images/gift-card.png';
 import UserTag from '@/components/common/UserTag';
-
 type ItemCardProps = {
   guest: string;
   itemName: string;
   itemUrl: string;
-  imageUrl: string;
+  imageUrl?: string;
 };
 
 const ItemCard = ({ guest, itemName, itemUrl, imageUrl }: ItemCardProps) => {
-  const { data: imageData } = useGetWishpoolImage(imageUrl);
-  const finalSrc = imageData && imageData.key ? imageData.key : GiftCardImage;
-
   return (
     <>
       <Link href={itemUrl} className="flex grow-1 flex-col">
         <Image
-          src={finalSrc}
-          alt="프로필 이미지"
-          sizes="100vw"
-          className="rounded-[12px] object-cover"
+          src={
+            imageUrl
+              ? `${process.env.NEXT_PUBLIC_WISHPOOL_IMAGE_BASE_URL}/${imageUrl}`
+              : GiftCardImage
+          }
+          alt="선물 이미지"
+          width={155}
+          height={155}
+          className="h-[15.5rem] w-[15.5rem] rounded-[12px] object-cover"
         />
 
         <div className="mt-[0.8rem] flex items-center gap-[0.8rem]">