fix: 이미지 개수 카운팅 버그 픽스, 이미지 3개에서 추가버튼 누르면 토스트 띄우는 것으로 수정

Author: anyl92

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

@@ -38,19 +38,24 @@ const ThemeDrawerAnswer = ({
       setImgCnt(
         3 - answerImages.length - selectedHint.answerImageUrlList.length
       );
+      return;
     }
+    setImgCnt(3 - answerImages.length);
   }, [answerImages, selectedHint.answerImageUrlList]);
 
   // 이미지 파일 핸들러
-  const handleAnswerFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
+  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;
     }
@@ -129,6 +134,7 @@ const ThemeDrawerAnswer = ({
           <input
             type="file"
             multiple
+            onClick={handleHintFileClick}
             onChange={handleAnswerFileChange}
             accept="image/*"
             style={{ display: "none" }}

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

@@ -37,19 +37,24 @@ const ThemeDrawerHint = ({
   useEffect(() => {
     if (selectedHint.hintImageUrlList) {
       setImgCnt(3 - hintImages.length - selectedHint.hintImageUrlList.length);
+      return;
     }
+    setImgCnt(3 - hintImages.length);
   }, [hintImages, selectedHint.hintImageUrlList]);
 
   // 이미지 파일 핸들러
-  const handleHintFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
+  const handleHintFileClick = (e: MouseEvent<HTMLInputElement>) => {
     if (imgCnt === 0) {
+      e.preventDefault();
       setToast({
         isOpen: true,
         title: "이미지는 3개까지 추가할 수 있습니다.",
         text: "",
       });
       return;
     }
+  };
+  const handleHintFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
     if (!e.target.files) {
       return;
     }
@@ -127,6 +132,7 @@ const ThemeDrawerHint = ({
           <input
             type="file"
             multiple
+            onClick={handleHintFileClick}
             onChange={handleHintFileChange}
             accept="image/*"
             style={{ display: "none" }}