fix: support image editing in archive forms

YeongJae0114 · YeongJae0114 · commit dd16f6bef9d6 · 2026-06-12T21:58:09.000+09:00
diff --git a/src/app/art/[id]/edit/page.tsx b/src/app/art/[id]/edit/page.tsx
@@ -3,11 +3,13 @@
 import { useState } from "react";
 
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import Image from "next/image";
 import { useParams, useRouter } from "next/navigation";
 
 import DatePicker from "@/components/archive-form/DayPicker";
 import Dropdown from "@/components/archive-form/Dropdown";
+import EditableImageUploader, {
+  type EditableArchiveImage,
+} from "@/components/archive-form/EditableImageUploader";
 import Input from "@/components/archive-form/Input";
 import Label from "@/components/archive-form/Label";
 import RegionSelect from "@/components/archive-form/RegionSelect";
@@ -16,6 +18,7 @@ import Textarea from "@/components/archive-form/Textarea";
 import ToggleButton from "@/components/archive-form/ToggleButton";
 import Header from "@/components/common/Header";
 import { ART_TYPES } from "@/constants/art";
+import { useUploadImage } from "@/hooks/useImageUploader";
 import { useRequireAuth } from "@/hooks/useRequireAuth";
 import { getMyArtworkDetail, updateArtwork } from "@/services/artworks";
 import type { ArtworkDetail } from "@/types/archiveDetail";
@@ -46,9 +49,30 @@ function getErrorMessage(error: unknown) {
   return error instanceof Error ? error.message : "작품 수정에 실패했습니다.";
 }
 
+function toEditableImages(artwork: ArtworkDetail): EditableArchiveImage[] {
+  return artwork.imageIds.map((id, index) => ({
+    kind: "existing",
+    id,
+    url: normalizeImageUrl(artwork.imageUrls[index]),
+  }));
+}
+
+function resolveThumbnailIndex(
+  images: EditableArchiveImage[],
+  originalImageIds: number[],
+  originalThumbnailIndex: number | null
+) {
+  const thumbnailImageId = originalImageIds[originalThumbnailIndex ?? 0];
+  const currentThumbnailIndex = images.findIndex(
+    image => image.kind === "existing" && image.id === thumbnailImageId
+  );
+  return currentThumbnailIndex >= 0 ? currentThumbnailIndex : 0;
+}
+
 function ArtEditForm({ artwork, artworkId }: { artwork: ArtworkDetail; artworkId: string }) {
   const router = useRouter();
   const queryClient = useQueryClient();
+  const { mutateAsync: uploadImage } = useUploadImage();
   const [artType, setArtType] = useState(artwork.artworkType ?? "");
   const [title, setTitle] = useState(artwork.title ?? "");
   const [description, setDescription] = useState(artwork.description ?? "");
@@ -59,11 +83,23 @@ function ArtEditForm({ artwork, artworkId }: { artwork: ArtworkDetail; artworkId
   const [height, setHeight] = useState(artwork.heightCm ? String(artwork.heightCm) : "");
   const [notes, setNotes] = useState(artwork.caution ?? "");
   const [isPublic, setIsPublic] = useState(artwork.status === "PUBLISHED");
+  const [images, setImages] = useState<EditableArchiveImage[]>(() => toEditableImages(artwork));
   const [submitErrorMessage, setSubmitErrorMessage] = useState<string | null>(null);
 
   const updateMutation = useMutation({
-    mutationFn: () =>
-      updateArtwork(artworkId, {
+    mutationFn: async () => {
+      const uploadedImages = await Promise.all(
+        images.filter(image => image.kind === "new").map(image => uploadImage(image.file))
+      );
+      let uploadedImageIndex = 0;
+      const imageIds = images.map(image => {
+        if (image.kind === "existing") {
+          return image.id;
+        }
+        return uploadedImages[uploadedImageIndex++].imageId;
+      });
+
+      return updateArtwork(artworkId, {
         title: title.trim(),
         artworkType: artType,
         description: description.trim(),
@@ -74,10 +110,11 @@ function ArtEditForm({ artwork, artworkId }: { artwork: ArtworkDetail; artworkId
         depthCm: toNullableNumber(depth),
         createdDate: toDateString(date),
         isPublic,
-        imageIds: artwork.imageIds,
-        thumbnailIndex: artwork.thumbnailIndex ?? 0,
+        imageIds,
+        thumbnailIndex: resolveThumbnailIndex(images, artwork.imageIds, artwork.thumbnailIndex),
         availableRegions: selectedRegions,
-      }),
+      });
+    },
     onSuccess: () => {
       void queryClient.invalidateQueries({ queryKey: ["mypage", "feed"] });
       void queryClient.invalidateQueries({ queryKey: ["artwork-detail", artworkId] });
@@ -90,6 +127,7 @@ function ArtEditForm({ artwork, artworkId }: { artwork: ArtworkDetail; artworkId
   });
 
   const isFormValid =
+    images.length > 0 &&
     title.trim() !== "" &&
     artType !== "" &&
     description.trim() !== "" &&
@@ -101,27 +139,7 @@ function ArtEditForm({ artwork, artworkId }: { artwork: ArtworkDetail; artworkId
       <section className="flex flex-col gap-6 px-5 py-6 pb-32">
         <FieldWrapper>
           <Label required>사진</Label>
-          <div className="flex flex-wrap gap-3">
-            {artwork.imageUrls.map((url, index) => {
-              const imageUrl = normalizeImageUrl(url);
-              if (!imageUrl) return null;
-              return (
-                <div
-                  key={`${imageUrl}-${index}`}
-                  className="border-border-primary relative h-18 w-18 overflow-hidden rounded-sm border"
-                >
-                  <Image
-                    src={imageUrl}
-                    alt={`작품 이미지 ${index + 1}`}
-                    fill
-                    sizes="72px"
-                    unoptimized
-                    className="object-cover"
-                  />
-                </div>
-              );
-            })}
-          </div>
+          <EditableImageUploader images={images} onChange={setImages} />
         </FieldWrapper>
 
         <FieldWrapper>
diff --git a/src/app/space/[id]/edit/page.tsx b/src/app/space/[id]/edit/page.tsx
@@ -3,18 +3,21 @@
 import { useState } from "react";
 
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import Image from "next/image";
 import { useParams, useRouter } from "next/navigation";
 
 import AddressSearch from "@/components/archive-form/AddressSearch";
 import Dropdown from "@/components/archive-form/Dropdown";
+import EditableImageUploader, {
+  type EditableArchiveImage,
+} from "@/components/archive-form/EditableImageUploader";
 import Input from "@/components/archive-form/Input";
 import Label from "@/components/archive-form/Label";
 import SizeInput from "@/components/archive-form/SizeInput";
 import Textarea from "@/components/archive-form/Textarea";
 import ToggleButton from "@/components/archive-form/ToggleButton";
 import Header from "@/components/common/Header";
 import { ART_TYPES } from "@/constants/art";
+import { useUploadImage } from "@/hooks/useImageUploader";
 import { useRequireAuth } from "@/hooks/useRequireAuth";
 import { getMySpaceDetail, updateSpace } from "@/services/spaces";
 import type { SpaceDetail } from "@/types/archiveDetail";
@@ -33,9 +36,18 @@ function getErrorMessage(error: unknown) {
   return error instanceof Error ? error.message : "공간 수정에 실패했습니다.";
 }
 
+function toEditableImages(space: SpaceDetail): EditableArchiveImage[] {
+  return space.imageIds.map((id, index) => ({
+    kind: "existing",
+    id,
+    url: normalizeImageUrl(space.imageUrls[index]),
+  }));
+}
+
 function SpaceEditForm({ space, spaceId }: { space: SpaceDetail; spaceId: string }) {
   const router = useRouter();
   const queryClient = useQueryClient();
+  const { mutateAsync: uploadImage } = useUploadImage();
   const [spaceType, setSpaceType] = useState(space.spaceType ?? "");
   const [title, setTitle] = useState(space.title ?? "");
   const [description, setDescription] = useState(space.description ?? "");
@@ -45,11 +57,23 @@ function SpaceEditForm({ space, spaceId }: { space: SpaceDetail; spaceId: string
   const [height, setHeight] = useState(space.heightCm ? String(space.heightCm) : "");
   const [notes, setNotes] = useState(space.caution ?? "");
   const [isPublic, setIsPublic] = useState(space.isPublic);
+  const [images, setImages] = useState<EditableArchiveImage[]>(() => toEditableImages(space));
   const [submitErrorMessage, setSubmitErrorMessage] = useState<string | null>(null);
 
   const updateMutation = useMutation({
-    mutationFn: () =>
-      updateSpace(spaceId, {
+    mutationFn: async () => {
+      const uploadedImages = await Promise.all(
+        images.filter(image => image.kind === "new").map(image => uploadImage(image.file))
+      );
+      let uploadedImageIndex = 0;
+      const imageIds = images.map(image => {
+        if (image.kind === "existing") {
+          return image.id;
+        }
+        return uploadedImages[uploadedImageIndex++].imageId;
+      });
+
+      return updateSpace(spaceId, {
         title: title.trim(),
         spaceType,
         address: address.trim(),
@@ -59,8 +83,9 @@ function SpaceEditForm({ space, spaceId }: { space: SpaceDetail; spaceId: string
         heightCm: toNullableNumber(height),
         depthCm: toNullableNumber(depth),
         isPublic,
-        imageIds: space.imageIds,
-      }),
+        imageIds,
+      });
+    },
     onSuccess: () => {
       void queryClient.invalidateQueries({ queryKey: ["mypage", "feed"] });
       void queryClient.invalidateQueries({ queryKey: ["space-detail", spaceId] });
@@ -73,6 +98,7 @@ function SpaceEditForm({ space, spaceId }: { space: SpaceDetail; spaceId: string
   });
 
   const isFormValid =
+    images.length > 0 &&
     title.trim() !== "" &&
     spaceType !== "" &&
     address.trim() !== "" &&
@@ -85,27 +111,7 @@ function SpaceEditForm({ space, spaceId }: { space: SpaceDetail; spaceId: string
       <section className="flex flex-col gap-6 px-5 py-6 pb-32">
         <FieldWrapper>
           <Label required>사진</Label>
-          <div className="flex flex-wrap gap-3">
-            {space.imageUrls.map((url, index) => {
-              const imageUrl = normalizeImageUrl(url);
-              if (!imageUrl) return null;
-              return (
-                <div
-                  key={`${imageUrl}-${index}`}
-                  className="border-border-primary relative h-18 w-18 overflow-hidden rounded-sm border"
-                >
-                  <Image
-                    src={imageUrl}
-                    alt={`공간 이미지 ${index + 1}`}
-                    fill
-                    sizes="72px"
-                    unoptimized
-                    className="object-cover"
-                  />
-                </div>
-              );
-            })}
-          </div>
+          <EditableImageUploader images={images} onChange={setImages} />
         </FieldWrapper>
 
         <FieldWrapper>
diff --git a/src/components/archive-form/EditableImageUploader.tsx b/src/components/archive-form/EditableImageUploader.tsx
@@ -0,0 +1,129 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+import Image from "next/image";
+
+export type EditableArchiveImage =
+  | {
+      kind: "existing";
+      id: number;
+      url: string | null;
+    }
+  | {
+      kind: "new";
+      file: File;
+      url: string;
+    };
+
+interface EditableImageUploaderProps {
+  images: EditableArchiveImage[];
+  onChange: (images: EditableArchiveImage[]) => void;
+}
+
+export default function EditableImageUploader({ images, onChange }: EditableImageUploaderProps) {
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const imagesRef = useRef(images);
+
+  useEffect(() => {
+    imagesRef.current = images;
+  }, [images]);
+
+  useEffect(
+    () => () => {
+      imagesRef.current.forEach(image => {
+        if (image.kind === "new") {
+          URL.revokeObjectURL(image.url);
+        }
+      });
+    },
+    []
+  );
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(event.target.files || []);
+    if (files.length === 0) return;
+
+    if (images.length + files.length > 10) {
+      setErrorMessage("사진은 최대 10장까지만 업로드할 수 있습니다.");
+      event.target.value = "";
+      return;
+    }
+
+    const nextImages: EditableArchiveImage[] = files.map(file => ({
+      kind: "new",
+      file,
+      url: URL.createObjectURL(file),
+    }));
+    onChange([...images, ...nextImages]);
+    setErrorMessage(null);
+    event.target.value = "";
+  };
+
+  const handleRemove = (indexToRemove: number) => {
+    const imageToRemove = images[indexToRemove];
+    if (imageToRemove?.kind === "new") {
+      URL.revokeObjectURL(imageToRemove.url);
+    }
+    onChange(images.filter((_, index) => index !== indexToRemove));
+    setErrorMessage(null);
+  };
+
+  return (
+    <div className="mt-2 flex flex-col gap-2">
+      <div className="flex flex-wrap items-center gap-3">
+        <label className="bg-bg-primary-darker flex h-18 w-18 shrink-0 flex-col items-center justify-center rounded-sm">
+          <input
+            type="file"
+            accept="image/*"
+            multiple
+            onChange={handleFileChange}
+            className="hidden"
+          />
+          <Image src="/camera-icon.svg" alt="camera" width={24} height={24} />
+          <div className="text-caption font-regular text-text-secondary">{images.length}/10</div>
+        </label>
+
+        {images.map((image, index) => {
+          const imageUrl = image.kind === "existing" ? image.url : image.url;
+
+          return (
+            <div
+              key={image.kind === "existing" ? `existing-${image.id}` : image.url}
+              className="bg-bg-primary-darker relative h-18 w-18 shrink-0 overflow-hidden rounded-sm"
+            >
+              {imageUrl ? (
+                <Image
+                  src={imageUrl}
+                  alt="미리보기"
+                  fill
+                  unoptimized
+                  className="object-cover"
+                  sizes="72px"
+                />
+              ) : (
+                <div className="text-caption text-text-secondary flex h-full w-full items-center justify-center">
+                  이미지
+                </div>
+              )}
+              <button
+                type="button"
+                onClick={() => handleRemove(index)}
+                className="absolute top-2 right-2 h-4 w-4"
+                aria-label="이미지 삭제"
+              >
+                <Image src="/cancel-icon.svg" alt="" width={16} height={16} />
+              </button>
+            </div>
+          );
+        })}
+      </div>
+
+      {errorMessage && (
+        <p role="alert" className="text-caption text-error-default">
+          {errorMessage}
+        </p>
+      )}
+    </div>
+  );
+}
