Merge pull request #174 from WishPool-dev/develop

배포

Author: kwonsaebom

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

@@ -11,6 +11,7 @@ import Button from '@/components/common/Button';
 import Icon from '@/components/common/Icon';
 import Loading from '@/components/common/Loading';
 import { PATH } from '@/constants/common/path';
+import { WISHPOOL_IMAGE_BASE_URL } from '@/constants/wishpool/image';
 import { useGetChosenUrl } from '@/hooks/pick/useGetChosenUrl';
 
 const InviteHandler = () => {
@@ -35,10 +36,12 @@ const InviteHandler = () => {
   if (isPending) {
     return <Loading />;
   }
-
+  const displayImageSrc = pickData?.imageKey
+    ? `${WISHPOOL_IMAGE_BASE_URL}/${pickData.imageKey}`
+    : WishpoolCardImage;
   return (
     <>
-      <div className="relative mt-[6rem] w-full rounded-[16px] bg-white">
+      <div className="relative mt-[14rem] w-full rounded-[16px] bg-white">
         <Icon
           name="ribbon"
           width={120}
@@ -58,7 +61,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

@@ -53,13 +53,14 @@ const InfoPage = () => {
           birthDay={getSlashDateFmt(wishpoolData?.birthDay) ?? ''}
         />
 
-        <Image
-          src={displayImg}
-          width={430}
-          height={240}
-          className="w-full"
-          alt="위시풀 대표 이미지"
-        />
+        <div className="relative h-[18.7rem] w-[35.3rem] overflow-hidden">
+          <Image
+            src={displayImg}
+            fill
+            className="object-cover"
+            alt="위시풀 대표 이미지"
+          />
+        </div>
         <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

@@ -64,14 +64,13 @@ const PreviewPage = () => {
               className="flex flex-col items-center justify-center"
             >
               {gift.imageUrl ? (
-                <div className="relative h-[15.5rem] w-[15.5rem]">
-                  <Image
-                    src={`${WISHPOOL_IMAGE_BASE_URL}/${gift.imageUrl}`}
-                    alt="등록 선물 이미지"
-                    fill
-                    className="object-cover"
-                  />
-                </div>
+                <Image
+                  src={`${WISHPOOL_IMAGE_BASE_URL}/${gift.imageUrl}`}
+                  alt="등록 선물 이미지"
+                  width={155}
+                  height={155}
+                  className="h-[15.5rem] w-[15.5rem] rounded-[12px] object-cover"
+                />
               ) : (
                 <Image
                   src={GiftCardImage}

src/components/pick/list/GiftCard.tsx

@@ -19,7 +19,8 @@ const GiftCard = ({
   const isSmall = size === 'small';
 
   const { data: imageData } = useGetWishpoolImage(imageUrl);
-  const finalSrc = imageData && imageData.key ? imageData.key : GiftCardImage;
+  const finalSrc =
+    imageUrl && imageData && imageData.key ? imageData.key : GiftCardImage;
 
   return (
     <div

src/components/pick/select/CarouselCard.tsx

@@ -81,7 +81,7 @@ export default function CarouselCard({
           alt="선물 카드 이미지"
           width={133}
           height={133}
-          className="rounded-[12px] transition-all duration-300"
+          className="h-[13.3rem] w-[13.3rem] rounded-[12px] object-cover transition-all duration-300"
         />
         <span
           className={[

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

@@ -20,10 +20,11 @@ const ItemCard = ({ guest, itemName, itemUrl, imageUrl }: ItemCardProps) => {
     <>
       <Link href={itemUrl} className="flex grow-1 flex-col">
         <Image
+          width={171}
+          height={171}
           src={finalSrc}
           alt="프로필 이미지"
-          sizes="100vw"
-          className="rounded-[12px] object-cover"
+          className="h-[17.1rem] w-[17.1rem] rounded-[12px] object-cover"
         />
 
         <div className="mt-[0.8rem] flex items-center gap-[0.8rem]">