Merge branch 'develop'

DSM-PICK · Aug 14, 2024 · 5352131 · 5352131
2 parents 13096f6 + a5b96a0
commit 5352131
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 35 deletions.
diff --git a/.github/workflows/gitAction.yml b/.github/workflows/gitAction.yml
@@ -21,5 +21,3 @@ jobs:
           environment: prod
           access_key: ${{ secrets.XQUAER_ACCESS_KEY }}
           github_token: ${{ secrets.PICK_WEB_TEACHER }}
-          buildargs: |
-            BASE_URL=${{ secrets.BASE_URL }}
diff --git a/.github/workflows/stagGitAction.yml b/.github/workflows/stagGitAction.yml
@@ -21,5 +21,3 @@ jobs:
           environment: stag
           access_key: ${{ secrets.XQUAER_ACCESS_KEY }}
           github_token: ${{ secrets.PICK_WEB_TEACHER }}
-          buildargs: |
-            BASE_URL=${{ secrets.STAG_BASE_URL }}
diff --git a/Dockerfile b/Dockerfile
@@ -10,9 +10,6 @@ COPY . .
 
 RUN yarn build
 
-ARG BASE_URL
-ENV NEXT_PUBLIC_API_KEY $BASE_URL
-
 EXPOSE 3000
 
 CMD ["yarn", "dev"]

diff --git a/src/api/bug/index.ts b/src/api/bug/index.ts
@@ -27,7 +27,6 @@ export const BugPost = () => {
 };
 
 export const BugImg = () => {
-  const { handleError } = apiError();
   return useMutation<string[], Error, { file: File[] }>({
     mutationFn: async (param) => {
       try {

diff --git a/src/app/BugReport/page.tsx b/src/app/BugReport/page.tsx
@@ -63,6 +63,13 @@ const BugReport = () => {
     });
   };
 
+  const handleRemoveImage = (index: number) => {
+    setData((prevData) => ({
+      ...prevData,
+      file_name: prevData.file_name.filter((_, i) => i !== index),
+    }));
+  };
+
   return (
     <>
       <Header />
@@ -92,26 +99,65 @@ const BugReport = () => {
           </div>
           <div className="flex flex-col gap-2">
             <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) => (
+                    <div
+                      key={index}
+                      className="relative w-32 h-32 overflow-hidden border border-gray-200"
+                    >
+                      <img
+                        src={`${process.env.NEXT_PUBLIC_FILE_APP}${item}`}
+                        key={index}
+                      />
+                      <button
+                        onClick={() => handleRemoveImage(index)}
+                        className="absolute top-1 right-1 text-white bg-black bg-opacity-50 rounded-full px-2 py-1"
+                      >
+                        &times;
+                      </button>
+                    </div>
+                  ))}
+                  <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>
           </div>
           <ImgModal

diff --git a/src/components/modal/imgModal.tsx b/src/components/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();
   };
 
@@ -106,14 +104,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 w-25 h-25 overflow-hidden">