add :: 버그이미지 미리보기

DSM-PICK · Aug 13, 2024 · e94a8eb · e94a8eb
2 parents 4f06498 + 9271708
commit e94a8eb
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 22 deletions.
diff --git a/src/app/bugReport/page.tsx b/src/app/bugReport/page.tsx
@@ -106,26 +106,55 @@ 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) => (
+                <img
+                  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();
   };