Merge branch 'develop'

DSM-PICK · Aug 13, 2024 · b0a6901 · b0a6901
2 parents e9c3127 + a87bc10
commit b0a6901
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 33 deletions.
diff --git a/src/apis/bug/index.ts b/src/apis/bug/index.ts
@@ -9,18 +9,17 @@ interface BugProp {
 }
 
 export const BugImg = () => {
-  const { handleError } = ApiError();
   return useMutation<string[], Error, { file: File[] }>({
     mutationFn: async (param) => {
       try {
         const formData = new FormData();
         param.file.forEach((file) => {
           formData.append("file", file);
         });
-        const result = await instance.post(`/bug/upload`, formData);
-        return result.data;
+        const { data } = await instance.post(`/bug/upload`, formData);
+        return data;
       } catch (error) {
-        handleError(error);
+        alert("이미지 용량이 너무 큽니다");
         throw error;
       }
     },

diff --git a/src/app/bugReport/page.tsx b/src/app/bugReport/page.tsx
@@ -19,7 +19,6 @@ interface BugProp {
 const BugReport = () => {
   const router = useRouter();
 
-  const [image, setImage] = useState<string[]>([]);
   const [data, setData] = useState<BugProp>({
     title: "",
     content: "",
@@ -67,7 +66,6 @@ const BugReport = () => {
           content: "",
           file_name: [],
         });
-        setImage([]);
         router.push("/main");
       },
       onError: () => {
@@ -108,26 +106,56 @@ const BugReport = () => {
           />
         </div>
         <div className="mb-11">
-          <>
-            <p>버그 사진을 첨부해주세요</p>
-            <label
-              htmlFor="file-input"
-              className="cursor-pointer flex flex-col p-8 justify-center items-center w-full h-max rounded-md bg-neutral-900 text-gray-500 mb-9"
-              onClick={() => {
-                setModal(true);
-              }}
-            >
-              <img src={BugReportImg.src} alt="bug report icon" />
-              <p>사진을 첨부해주세요</p>
-            </label>
-            <div
-              id="file-input"
-              className="hidden"
-              onChange={() => {
-                setModal(!modal);
-              }}
-            />
-          </>
+          {data.file_name.length === 0 ? (
+            <>
+              <p>버그 사진을 첨부해주세요</p>
+              <label
+                htmlFor="file-input"
+                className="cursor-pointer flex flex-col p-8 justify-center items-center w-full h-max rounded-md bg-neutral-900 text-gray-500 mb-9"
+                onClick={() => {
+                  setModal(true);
+                }}
+              >
+                <img src={BugReportImg.src} alt="bug report icon" />
+                <p>사진을 첨부해주세요</p>
+              </label>
+              <div
+                id="file-input"
+                className="hidden"
+                onChange={() => {
+                  setModal(!modal);
+                }}
+              />
+            </>
+          ) : (
+            <div className=" flex gap-1">
+              {data.file_name.map((item, index) => (
+                <img
+                  key={index}
+                  src={`${process.env.NEXT_PUBLIC_FILE_APP}${item}`}
+                  width={200}
+                  height={200}
+                />
+              ))}
+              <label
+                htmlFor="file-input"
+                className="cursor-pointer flex flex-col p-8 justify-center items-center w-full h-max rounded-md bg-neutral-900 text-gray-500 mb-9"
+                onClick={() => {
+                  setModal(true);
+                }}
+              >
+                <img src={BugReportImg.src} alt="bug report icon" />
+                <p>사진을 첨부해주세요</p>
+              </label>
+              <div
+                id="file-input"
+                className="hidden"
+                onChange={() => {
+                  setModal(!modal);
+                }}
+              />
+            </div>
+          )}
         </div>
         <ImgModal
           onClick={handleImgUpload}

diff --git a/src/app/components/common/modal/imgModal.tsx b/src/app/components/common/modal/imgModal.tsx
@@ -66,12 +66,10 @@ const ImgModal: React.FC<ModalProps> = ({ isOpen, onClose, onClick }) => {
 
   const onCancle = () => {
     onClose();
-    setImages([]);
   };
 
   const AddImg = () => {
     onClick(images);
-    setImages([]);
     onClose();
   };
 
@@ -108,14 +106,12 @@ const ImgModal: React.FC<ModalProps> = ({ isOpen, onClose, onClick }) => {
           </span>
           <div className="absolute left-0 top-1/2 w-full h-px bg-gray-300 transform -translate-y-1/2"></div>
         </div>
-        <div
-          ref={pasteDivRef}
+        <input
           contentEditable="true"
           onPaste={handlePaste}
           className="border border-gray-300 rounded-lg w-full p-2 mb-4"
-        >
-          이미지를 붙여넣기 해주세요.
-        </div>
+          placeholder="이미지를 붙여넣기 해주세요"
+        />
         <div className="my-4 w-full grid grid-cols-3 gap-2">
           {images.map((image, index) => (
             <div key={index} className="relative">