) => {
const newItemName = e.target.value;
onChangeItemName(newItemName);
@@ -61,6 +49,23 @@ const GiftField = ({
patchGift(index, { itemUrl: newUrlName });
};
+ useEffect(() => {
+ if (!imageKey) return;
+ onChangeImage(imageKey);
+ patchGift(index, { imageUrl: imageKey });
+ }, [imageKey]);
+
+ const handleDeleteImage = () => {
+ reset();
+ onChangeImage('');
+ patchGift(index, { imageUrl: '' });
+ };
+
+ const imageSrc = valueImageUrl
+ ? `${WISHPOOL_IMAGE_BASE_URL}/${valueImageUrl}`
+ : null;
+
+ const displayImageSrc = preview ?? imageSrc;
return (
<>
@@ -100,6 +105,59 @@ const GiftField = ({
className="body1 flex h-[5.6rem] w-full rounded-[12px] border border-gray-400 px-[1.6rem] py-[1.6rem] placeholder:text-gray-400 focus:border-gray-400 focus:outline-none"
/>
+
+
+
+ {displayImageSrc ? (
+
+
+
+
+
+
+ ) : (
+
+
+
+
선물 사진 추가
+
+
+ *사진을 추가하지 않을 때는 기본 이미지로 보여줄게요.
+
+
+ )}
+
{renderSpacer && (
@@ -73,7 +77,7 @@ export default function CarouselCard({
].join(' ')}
>
{
transition={{ duration, ease: 'linear', repeat: Infinity }}
aria-hidden
>
- {items.map(({ giftId, itemName, itemUrl }) => (
+ {items.map(({ giftId, itemName, itemUrl, imageUrl }) => (
))}
diff --git a/src/components/wishpool/viewer/list/ItemCard.tsx b/src/components/wishpool/viewer/list/ItemCard.tsx
index 19d8dbbf..94fcdb0c 100644
--- a/src/components/wishpool/viewer/list/ItemCard.tsx
+++ b/src/components/wishpool/viewer/list/ItemCard.tsx
@@ -1,6 +1,7 @@
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';
@@ -8,14 +9,18 @@ type ItemCardProps = {
guest: string;
itemName: string;
itemUrl: string;
+ imageUrl: string;
};
-const ItemCard = ({ guest, itemName, itemUrl }: ItemCardProps) => {
+const ItemCard = ({ guest, itemName, itemUrl, imageUrl }: ItemCardProps) => {
+ const { data: imageData } = useGetWishpoolImage(imageUrl);
+ const finalSrc = imageData && imageData.key ? imageData.key : GiftCardImage;
+
return (
<>
{
}
};
+ const reset = () => {
+ if (preview?.startsWith('blob:')) URL.revokeObjectURL(preview);
+ setPreview(null);
+ setImageKey(null);
+ setError(null);
+ };
+
return {
preview,
error,
imageKey,
handleImageChange,
isUploading: uploadMutation.isPending,
+ reset,
};
};
diff --git a/src/types/common/giftCardType.ts b/src/types/common/giftCardType.ts
index 8c00338c..7691adb3 100644
--- a/src/types/common/giftCardType.ts
+++ b/src/types/common/giftCardType.ts
@@ -3,4 +3,5 @@ export type GiftCardType = {
itemUrl: string;
itemName: string;
giftId: number;
+ imageUrl: string;
};
diff --git a/src/utils/wishpool/viewer/manageGifts.ts b/src/utils/wishpool/viewer/manageGifts.ts
new file mode 100644
index 00000000..41083c64
--- /dev/null
+++ b/src/utils/wishpool/viewer/manageGifts.ts
@@ -0,0 +1,30 @@
+import { GiftItemDto } from '@/api/domain/join/types';
+const STORAGE_KEY = 'wishpool_gifts';
+
+export function readGifts(): GiftItemDto[] {
+ try {
+ const raw = sessionStorage.getItem(STORAGE_KEY);
+ if (!raw) return [];
+ const parsed = JSON.parse(raw);
+ return Array.isArray(parsed) ? parsed : [];
+ } catch {
+ return [];
+ }
+}
+
+export function writeGifts(next: GiftItemDto[]) {
+ sessionStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+}
+
+export function patchGift(index: number, patch: Partial) {
+ const current = readGifts();
+
+ const base: GiftItemDto = current[index] ?? {
+ itemName: '',
+ itemUrl: '',
+ imageUrl: '',
+ };
+ const next = [...current];
+ next[index] = { ...base, ...patch };
+ writeGifts(next);
+}