Fix: 이미지 관련 문의사항 해결 (#204)

seung365 · web-flow · commit 37dca811c389 · 2025-08-25T12:48:52.000+09:00
* fix: 모달 닫힘 경고 팝업 뜨도록 수정 및 esc props 전달 * Squashed commit of the following: commit c07799a Merge: 0b2fa2b 6d6f73e Author: 백승범 <bdh3659@naver.com> Date: Sat Aug 23 00:58:43 2025 +0900 Merge branch 'develop' of https://github.com/YAPP-Github/26th-Web-Team-3-FE into qa/additional/#199 commit 0b2fa2b Author: 백승범 <bdh3659@naver.com> Date: Sat Aug 23 00:43:48 2025 +0900 style: grid-layout 모바일 view 수정 commit 278afe5 Author: 백승범 <bdh3659@naver.com> Date: Sat Aug 23 00:24:26 2025 +0900 fix: 편지 담기 reset 추가 commit 6d6f73e Author: beom <74394824+seung365@users.noreply.github.com> Date: Sat Aug 23 00:05:59 2025 +0900 fix: 모달 닫힘 경고 팝업 뜨도록 수정 및 esc props 전달 (#198) * fix: 모바일에서 간헐적으로 이미지 업로드 안되는 현상 수정 * feat: objectKey를 선택적 속성으로 변경 * feat: 사진 업로드 로직 변경 * chore: 줄간격 추가 * chore: type 충돌 해결 * chore: 코드 리뷰 반영
diff --git a/app/(sub)/capsule-detail/_components/write-modal/_hooks/use-image-upload.ts b/app/(sub)/capsule-detail/_components/write-modal/_hooks/use-image-upload.ts
@@ -1,74 +1,77 @@
 import { useFileUpload } from "@/shared/api/mutations/file";
-import { useEffect, useState, useCallback } from "react";
+import type { ChangeEvent } from "react";
+import { useEffect, useState } from "react";
 
-interface useImageUploadProps {
-  onObjectKeyChange: (value: string) => void;
-}
-
-export const useImageUpload = ({ onObjectKeyChange }: useImageUploadProps) => {
+export const useImageUpload = () => {
   const fileUploadMutation = useFileUpload();
-  const [uploadedImageUrl, setUploadedImageUrl] = useState<string | null>(null);
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
 
   useEffect(() => {
     return () => {
-      if (uploadedImageUrl) {
-        URL.revokeObjectURL(uploadedImageUrl);
+      if (previewUrl) {
+        URL.revokeObjectURL(previewUrl);
       }
     };
-  }, [uploadedImageUrl]);
+  }, [previewUrl]);
 
-  const handleImageUpload = async (): Promise<void> => {
-    const input = document.createElement("input");
-    input.type = "file";
-    input.accept = "image/*";
+  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) {
+      return;
+    }
 
-    return new Promise((resolve, reject) => {
-      input.onchange = async (e) => {
-        const file = (e.target as HTMLInputElement).files?.[0];
-        if (!file) {
-          resolve();
-          return;
-        }
+    const extension = file.name.split(".").pop();
+    if (!extension) {
+      alert("파일 확장자를 찾을 수 없습니다.");
+      return;
+    }
 
-        try {
-          const fileName = "LETTER";
-          const extension = file.name.split(".").pop();
+    if (previewUrl) {
+      URL.revokeObjectURL(previewUrl);
+    }
 
-          if (!extension) {
-            throw new Error("파일 확장자를 찾을 수 없습니다.");
-          }
+    const objectUrl = URL.createObjectURL(file);
 
-          const uploadedObjectKey = await fileUploadMutation.mutateAsync({
-            fileName,
-            extension,
-            file,
-          });
+    setSelectedFile(file);
+    setPreviewUrl(objectUrl);
+  };
 
-          setUploadedImageUrl(URL.createObjectURL(file));
-          onObjectKeyChange(uploadedObjectKey);
-          resolve();
-        } catch (error) {
-          console.error("이미지 업로드 실패:", error);
-          reject(error);
-        }
-      };
+  const uploadFile = async (): Promise<string> => {
+    if (!selectedFile) {
+      throw new Error("선택된 파일이 없습니다.");
+    }
 
-      input.click();
+    const fileName = "LETTER";
+    const extension = selectedFile.name.split(".").pop();
+
+    if (!extension) {
+      throw new Error("파일 확장자를 찾을 수 없습니다.");
+    }
+
+    const uploadedObjectKey = await fileUploadMutation.mutateAsync({
+      fileName,
+      extension,
+      file: selectedFile,
     });
+
+    return uploadedObjectKey;
   };
 
-  const removeImage = useCallback(() => {
-    if (uploadedImageUrl) {
-      URL.revokeObjectURL(uploadedImageUrl);
+  const removeImage = () => {
+    if (previewUrl) {
+      URL.revokeObjectURL(previewUrl);
     }
-    setUploadedImageUrl(null);
-    onObjectKeyChange("");
-  }, [uploadedImageUrl, onObjectKeyChange]);
+    setPreviewUrl(null);
+    setSelectedFile(null);
+  };
 
   return {
-    uploadedImageUrl,
-    handleImageUpload,
+    previewUrl,
+    handleFileChange,
     removeImage,
+    uploadFile,
+    hasFile: !!selectedFile,
     isUploading: fileUploadMutation.isPending,
   };
 };
diff --git a/app/(sub)/capsule-detail/_components/write-modal/index.tsx b/app/(sub)/capsule-detail/_components/write-modal/index.tsx
@@ -36,19 +36,11 @@ const WriteModal = ({
   const [isWarningOpen, setIsWarningOpen] = useState(false);
   const [isConfirmOpen, setIsConfirmOpen] = useState(false);
 
-  const {
-    handleSubmit,
-    setValue,
-    getValues,
-    control,
-    reset,
-    formState: { errors },
-  } = useForm<WriteLetterReq>({
+  const { handleSubmit, getValues, control, reset } = useForm<WriteLetterReq>({
     defaultValues: {
       capsuleId: capsuleData.result.id.toString(),
       content: "",
       from: "",
-      objectKey: "",
     },
   });
 
@@ -62,10 +54,14 @@ const WriteModal = ({
     control,
   });
 
-  const { uploadedImageUrl, handleImageUpload, removeImage, isUploading } =
-    useImageUpload({
-      onObjectKeyChange: (value) => setValue("objectKey", value),
-    });
+  const {
+    previewUrl,
+    handleFileChange,
+    removeImage,
+    uploadFile,
+    hasFile,
+    isUploading,
+  } = useImageUpload();
 
   const onSubmit = (data: WriteLetterReq) => {
     if (!data.content?.trim()) {
@@ -75,42 +71,63 @@ const WriteModal = ({
     setIsConfirmOpen(true);
   };
 
-  const handleConfirm = (data: WriteLetterReq) => {
-    if (isPending) return;
-    writeLetterMutate(data, {
-      onSuccess: () => {
-        setIsConfirmOpen(false);
-        reset({
-          capsuleId: capsuleData.result.id.toString(),
-          content: "",
-          from: "",
-          objectKey: "",
-        });
-        if (uploadedImageUrl) {
-          removeImage();
-        }
-        onClose();
-        onSuccess();
-      },
-      onError: (error) => {
-        setIsConfirmOpen(false);
-        console.error("편지 제출 실패:", error);
-      },
-    });
+  const handleConfirm = async (data: WriteLetterReq) => {
+    if (isPending || isUploading) return;
+
+    try {
+      const submitData = { ...data };
+
+      if (hasFile) {
+        const objectKey = await uploadFile();
+        submitData.objectKey = objectKey;
+      } else {
+        delete submitData.objectKey;
+      }
+
+      writeLetterMutate(submitData, {
+        onSuccess: () => {
+          setIsConfirmOpen(false);
+          reset({
+            capsuleId: capsuleData.result.id.toString(),
+            content: "",
+            from: "",
+            objectKey: undefined,
+          });
+          if (previewUrl) {
+            removeImage();
+          }
+          onClose();
+          onSuccess();
+        },
+        onError: (error) => {
+          setIsConfirmOpen(false);
+          console.error("편지 제출 실패:", error);
+        },
+      });
+    } catch (error) {
+      setIsConfirmOpen(false);
+      console.error("파일 업로드 실패:", error);
+      alert(
+        `업로드 실패: ${
+          error instanceof Error ? error.message : "알 수 없는 오류"
+        }`,
+      );
+    }
   };
 
   const handleCloseWithWarning = (e: React.MouseEvent) => {
     e.stopPropagation();
 
     const hasContent =
-      contentField.value?.trim() || fromField.value?.trim() || uploadedImageUrl;
+      contentField.value?.trim() || fromField.value?.trim() || previewUrl;
 
     if (hasContent) {
       setIsWarningOpen(true);
     } else {
       onClose();
     }
   };
+
   return (
     <>
       <Modal
@@ -174,7 +191,7 @@ const WriteModal = ({
                   </span>
                 </div>
 
-                {uploadedImageUrl ? (
+                {previewUrl ? (
                   <div className={styles.imagePreviewContainer}>
                     <button
                       type="button"
@@ -184,7 +201,7 @@ const WriteModal = ({
                       <Close />
                     </button>
                     <Image
-                      src={uploadedImageUrl}
+                      src={previewUrl}
                       alt="업로드된 이미지"
                       width={80}
                       height={80}
@@ -193,20 +210,21 @@ const WriteModal = ({
                   </div>
                 ) : (
                   <div className={styles.imageAddButtonContainer}>
-                    <button
-                      type="button"
-                      className={styles.imageAddButton}
-                      onClick={handleImageUpload}
-                      disabled={isUploading}
-                      aria-label="이미지 추가"
-                    >
+                    <label className={styles.imageAddButton}>
+                      <input
+                        type="file"
+                        accept="image/*"
+                        onChange={handleFileChange}
+                        disabled={isUploading}
+                        style={{ display: "none" }}
+                      />
                       <div className={styles.plusIconWrapper}>
                         <Plus className={styles.plusIcon} />
                       </div>
                       <span className={styles.imageCaption}>
                         {isUploading ? "업로드 중..." : "이미지 추가"}
                       </span>
-                    </button>
+                    </label>
                   </div>
                 )}
               </div>
@@ -234,6 +252,7 @@ const WriteModal = ({
         </form>
         {isConfirmOpen && (
           <PopupConfirmLetter
+            isLoading={isPending || isUploading}
             openDate={formatOpenDateString(capsuleData.result.openAt)}
             isOpen={isConfirmOpen}
             close={() => setIsConfirmOpen(false)}
@@ -260,9 +279,9 @@ const WriteModal = ({
               capsuleId: capsuleData.result.id.toString(),
               content: "",
               from: "",
-              objectKey: "",
+              objectKey: undefined,
             });
-            if (uploadedImageUrl) {
+            if (previewUrl) {
               removeImage();
             }
             onClose();
diff --git a/app/(sub)/capsule-detail/_components/write-modal/write-modal.css.ts b/app/(sub)/capsule-detail/_components/write-modal/write-modal.css.ts
@@ -175,6 +175,10 @@ export const senderTitle = style({
   marginLeft: "0.6rem",
 });
 
+export const imageInput = style({
+  display: "none",
+});
+
 export const textareaContainer = style({
   position: "relative",
   height: "38.8rem",
diff --git a/shared/api/mutations/file.ts b/shared/api/mutations/file.ts
@@ -30,11 +30,5 @@ export const useFileUpload = () => {
 
       return objectKey;
     },
-    onSuccess: (data) => {
-      console.log("File uploaded successfully:", data);
-    },
-    onError: (error) => {
-      console.error("File upload failed:", error);
-    },
   });
 };
diff --git a/shared/types/api/letter.ts b/shared/types/api/letter.ts
@@ -32,6 +32,6 @@ export interface LetterListRes {
 export interface WriteLetterReq {
   capsuleId: string;
   content: string;
-  objectKey: string;
+  objectKey?: string;
   from: string;
 }
diff --git a/shared/ui/popup/popup-confirm-letter/index.tsx b/shared/ui/popup/popup-confirm-letter/index.tsx
@@ -2,16 +2,19 @@ import Lettie from "@/shared/assets/character/lettie_animate.png";
 import Popup from "@/shared/ui/popup";
 
 import Image from "next/image";
+import { PulseLoader } from "react-spinners";
 import * as styles from "./popup-confirm-letter.css";
 
 interface PopupConfirmLetterProps {
+  isLoading: boolean;
   openDate: string;
   isOpen: boolean;
   close: () => void;
   onConfirm: () => void;
 }
 
 const PopupConfirmLetter = ({
+  isLoading,
   openDate,
   isOpen,
   close,
@@ -28,10 +31,18 @@ const PopupConfirmLetter = ({
       </Popup.Content>
       <Image src={Lettie} alt="apng" width={200} height={200} />
       <Popup.Actions>
-        <Popup.Button onClick={close} className={styles.content}>계속 쓰기</Popup.Button>
-        <Popup.Button className={styles.putButton} onClick={onConfirm}>
-          편지 담기
-        </Popup.Button>
+        {isLoading ? (
+          <PulseLoader color="white" size={10} />
+        ) : (
+          <>
+            <Popup.Button onClick={close} className={styles.content}>
+              계속 쓰기
+            </Popup.Button>
+            <Popup.Button className={styles.putButton} onClick={onConfirm}>
+              편지 담기
+            </Popup.Button>
+          </>
+        )}
       </Popup.Actions>
     </Popup>
   );
diff --git a/shared/ui/popup/popup.stories.tsx b/shared/ui/popup/popup.stories.tsx

Original file line number	Diff line number	Diff line change
`@@ -32,6 +32,6 @@ export interface LetterListRes {`
`32`	`32`	`export interface WriteLetterReq {`
`33`	`33`	`capsuleId: string;`
`34`	`34`	`content: string;`
`35`		`- objectKey: string;`
	`35`	`+ objectKey?: string;`
`36`	`36`	`from: string;`
`37`	`37`	`}`