fix: 저장하기 버튼 활성화/비활성화 로직 수정,

- createHint atom에 selectedHint의 initial값 import
- DrawerHint/Answer에서 중복되는 로직을 useImages로 분리

Author: anyl92

app/admin-new/(components)/ThemeDrawer/Container.tsx

@@ -81,13 +81,15 @@ const ThemeDrawer = ({
         </div>
 
         <ThemeDrawerHint
-          hintImages={hintImages}
-          setHintImages={setHintImages}
+          imageType={"hint"}
+          images={hintImages}
+          setImages={setHintImages}
         />
 
         <ThemeDrawerAnswer
-          answerImages={answerImages}
-          setAnswerImages={setAnswerImages}
+          imageType={"answer"}
+          images={answerImages}
+          setImages={setAnswerImages}
         />
       </div>
 

app/admin-new/(components)/ThemeDrawer/ThemeDrawerAnswer.tsx

@@ -1,125 +1,29 @@
 import Image from "next/image";
-import {
-  ChangeEvent,
-  Dispatch,
-  MouseEvent,
-  SetStateAction,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import { Dispatch, SetStateAction } from "react";
 
 import { useSelectedHint } from "@/components/atoms/selectedHint.atom";
-import { useToastWrite } from "@/components/atoms/toast.atom";
-import { subscribeLinkURL } from "@/admin-new/(consts)/sidebar";
-import { useCreateHint } from "@/components/atoms/createHint.atom";
-import { getStatus } from "@/utils/localStorage";
 
-import { compressImage, convertToPng } from "./helpers/imageHelpers";
 import { GalleryImageProps } from "./consts/themeDrawerProps";
+import useImages from "./hooks/useImages";
 const ThemeDrawerAnswer = ({
-  answerImages,
-  setAnswerImages,
+  imageType,
+  images,
+  setImages,
 }: {
-  answerImages: File[];
-  setAnswerImages: Dispatch<SetStateAction<File[]>>;
+  imageType: string;
+  images: File[];
+  setImages: Dispatch<SetStateAction<File[]>>;
 }) => {
-  const status = getStatus();
-
-  const [selectedHint, setSelectedHint] = useSelectedHint();
-  const [, setCreateHint] = useCreateHint();
-  const [imgCnt, setImgCnt] = useState<number>(3);
-  const setToast = useToastWrite();
-  const answerRef = useRef<string>("");
-
-  // 가지고 있던 이미지 갯수를 빼줘서 남은 imgCnt 계산
-  useEffect(() => {
-    if (selectedHint.answerImageUrlList) {
-      setImgCnt(
-        3 - answerImages.length - selectedHint.answerImageUrlList.length
-      );
-      return;
-    }
-    setImgCnt(3 - answerImages.length);
-  }, [answerImages, selectedHint.answerImageUrlList]);
-
-  // 이미지 파일 핸들러
-  const handleHintFileClick = (e: MouseEvent<HTMLInputElement>) => {
-    if (imgCnt === 0) {
-      e.preventDefault();
-      setToast({
-        isOpen: true,
-        title: "이미지는 3개까지 추가할 수 있습니다.",
-        text: "",
-      });
-      return;
-    }
-  };
-  const handleAnswerFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
-    if (!e.target.files) {
-      return;
-    }
-    const files: File[] = [];
-    const file = e.target.files[0];
-    if (file.size > 5 * 1024 * 1024) {
-      try {
-        const compressedFile = await compressImage(file);
-
-        if (compressedFile.type !== "image/png") {
-          const pngFile = await convertToPng(compressedFile);
-          files.push(pngFile);
-        } else {
-          files.push(compressedFile);
-        }
-      } catch (error) {
-        console.error("Image compression failed", error);
-        files.push(file);
-      }
-    } else {
-      files.push(file);
-    }
-    setAnswerImages((prev) => [...prev, ...files]);
-  };
-
-  const answerInputRef = useRef<HTMLInputElement>(null);
-
-  const handleAnswerClick = (e: MouseEvent<HTMLButtonElement>) => {
-    if (!status?.includes("SUBSCRIPTION")) {
-      e.preventDefault();
-      window.open(subscribeLinkURL, "_blank", "noopener,noreferrer");
-      return;
-    }
-    answerInputRef.current?.click(); // 숨겨진 input 클릭 트리거
-  };
-
-  const handleAnswerChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
-    answerRef.current = e.target.value;
-    setCreateHint((prev) => ({ ...prev, answer: answerRef.current }));
-  };
-
-  // 힌트 추가 중 삭제 (로컬 이미지)
-  const deleteLocalAnswerImg = (index: number) => {
-    const newImages = [
-      ...answerImages.slice(0, index),
-      ...answerImages.slice(index + 1),
-    ];
-    setAnswerImages(newImages);
-    if (answerInputRef.current) {
-      answerInputRef.current.value = "";
-    }
-  };
-  // 수정 시 삭제
-  const deleteServerAnswerImg = (index: number) => {
-    const answerServerImages = selectedHint.answerImageUrlList;
-    const newImages = [
-      ...answerServerImages.slice(0, index),
-      ...answerServerImages.slice(index + 1),
-    ];
-    setSelectedHint((prev) => ({ ...prev, answerImageUrlList: newImages }));
-    if (answerInputRef.current) {
-      answerInputRef.current.value = "";
-    }
-  };
+  const [selectedHint] = useSelectedHint();
+  const {
+    handleFileInputClick,
+    handleFileInputChange,
+    handleAddImageBtnClick,
+    handleTextAreaChange,
+    deleteLocalImage,
+    deleteServerImage,
+    answerInputRef,
+  } = useImages({ imageType, images, setImages });
 
   return (
     <div className="drawer-answer">
@@ -128,67 +32,64 @@ const ThemeDrawerAnswer = ({
         <button
           className="secondary_button28"
           type="button"
-          onClick={handleAnswerClick}
+          onClick={handleAddImageBtnClick}
         >
           <Image {...GalleryImageProps} />
           <input
             type="file"
             multiple
-            onClick={handleHintFileClick}
-            onChange={handleAnswerFileChange}
+            onClick={handleFileInputClick}
+            onChange={handleFileInputChange}
             accept="image/*"
             style={{ display: "none" }}
             ref={answerInputRef}
           />
           이미지 추가
-          {(answerImages.length > 0 ||
+          {(images.length > 0 ||
             selectedHint?.answerImageUrlList?.length > 0) &&
             `(${
-              (answerImages.length || 0) +
+              (images.length || 0) +
               (selectedHint.answerImageUrlList?.length || 0)
             }/3)`}
         </button>
       </div>
-      {selectedHint?.answerImageUrlList?.map((src, idx) => (
-        <div className="drawer-images" key={src}>
-          <div className="drawer-image-box">
+      <div className="drawer-images">
+        {selectedHint?.answerImageUrlList?.map((src, idx) => (
+          <div className="drawer-image-box" key={src}>
             <img src={src} alt={`answer-preview-${src}`} />
             <div
               className="drawer-image-dimmed"
-              onClick={() => deleteServerAnswerImg(idx)}
+              onClick={() => deleteServerImage(idx)}
             >
               <button className="button28" type="button">
                 삭제하기
               </button>
             </div>
           </div>
-        </div>
-      ))}
-      {answerImages.length > 0 && (
-        <div className="drawer-images">
-          {answerImages.map((file, index) => (
+        ))}
+        {images.length > 0 &&
+          images.map((file, index) => (
             <div key={file.name} className="drawer-image-box">
               <img
                 src={URL.createObjectURL(file)}
                 alt={`answer-preview-${index}`}
               />
               <div
                 className="drawer-image-dimmed"
-                onClick={() => deleteLocalAnswerImg(index)}
+                onClick={() => deleteLocalImage(index)}
               >
                 <button className="button28" type="button">
                   삭제하기
                 </button>
               </div>
             </div>
           ))}
-        </div>
-      )}
+      </div>
 
       <textarea
         className="drawer-content-textarea"
         placeholder="정답 내용을 입력해 주세요."
-        onChange={handleAnswerChange}
+        onChange={handleTextAreaChange}
         defaultValue={selectedHint.answer}
       />
     </div>