diff --git a/src/api/bug/index.ts b/src/api/bug/index.ts
index c03e687..2de129d 100644
--- a/src/api/bug/index.ts
+++ b/src/api/bug/index.ts
@@ -1,11 +1,11 @@
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMutation } from "@tanstack/react-query";
 import { instance } from "..";
 import apiError from "@/hook/errorHandling";
 
 interface BugProp {
   title: string;
   content: string;
-  file_name: string;
+  file_name: string[];
 }
 
 export const BugPost = () => {
@@ -28,11 +28,13 @@ export const BugPost = () => {
 
 export const BugImg = () => {
   const { handleError } = apiError();
-  return useMutation<string, Error, { file: File }>({
+  return useMutation<string[], Error, { file: File[] }>({
     mutationFn: async (param) => {
       try {
         const formData = new FormData();
-        formData.append("file", param.file);
+        param.file.forEach((file) => {
+          formData.append("file", file);
+        });
         const result = await instance.post(`/bug/upload`, formData);
         return result.data;
       } catch (error) {
diff --git a/src/api/index.ts b/src/api/index.ts
index 1eca8c3..895dbc1 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -34,7 +34,6 @@ refreshInstance.interceptors.request.use(
   },
   (error: AxiosError) => Promise.reject(error)
 );
-
 instance.interceptors.response.use(
   (response) => response,
   async (error: AxiosError) => {
@@ -42,22 +41,25 @@ instance.interceptors.response.use(
       const { status } = error.response;
       if (status === 401) {
         const refreshToken = cookie.get("refresh_token");
-        if (refreshToken) {
-          try {
-            await axios
-              .put(`${BASEURL}/admin/refresh`, null, {
-                headers: {
-                  "X-Refresh-Token": `${refreshToken}`,
-                },
-              })
-              .then((response) => {
-                const data = response.data;
-                cookie.set("access_token", data.access_token);
-                cookie.set("refresh_token", data.refresh_token);
-              });
-          } catch (refreshError) {
-            return Promise.reject(refreshError);
+        try {
+          await axios
+            .put(`${BASEURL}/admin/refresh`, null, {
+              headers: {
+                "X-Refresh-Token": `${refreshToken}`,
+              },
+            })
+            .then((response) => {
+              const data = response.data;
+              cookie.set("access_token", data.access_token);
+              cookie.set("refresh_token", data.refresh_token);
+            })
+            .catch(() => {
+              window.location.href = "login";
+            });
+          {
           }
+        } catch (refreshError) {
+          return Promise.reject(refreshError);
         }
       }
     }
diff --git a/src/app/BugReport/page.tsx b/src/app/BugReport/page.tsx
index 6f5787d..b8e727a 100644
--- a/src/app/BugReport/page.tsx
+++ b/src/app/BugReport/page.tsx
@@ -5,11 +5,13 @@ import Input from "@/components/input";
 import TextArea from "@/components/input/textarea";
 import Button from "@/components/button";
 import { BugPost, BugImg } from "@/api/bug/index";
+import ImgModal from "@/components/modal/imgModal";
+import BugReportImg from "@/assets/svg/bugreport.svg";
 
 interface bugProp {
   title: string;
   content: string;
-  file_name: string;
+  file_name: string[];
 }
 
 const BugReport = () => {
@@ -18,42 +20,32 @@ const BugReport = () => {
   const [data, setData] = useState<bugProp>({
     title: "",
     content: "",
-    file_name: "",
+    file_name: [],
   });
-  const [filename, setFilename] = useState<string>("");
+  const [modal, setModal] = useState<boolean>(false);
 
   const handleContent = ({ text, name }: { text: string; name: string }) => {
     setData({ ...data, [name]: text });
   };
 
-  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const selectedFile = e.currentTarget.files?.[0];
-    if (selectedFile) {
-      try {
-        await BugImgMutate(
-          { file: selectedFile },
-          {
-            onSuccess: (data) => {
-              setFilename(data);
-            },
-            onError: (error) => {
-              alert(error.message);
-            },
-          }
-        );
-      } catch (error) {
-        console.log(error);
-      }
+  const handleImgUpload = async (images: File[]) => {
+    try {
+      await BugImgMutate(
+        { file: images },
+        {
+          onSuccess: (data) => {
+            setData((prevData) => ({
+              ...prevData,
+              file_name: data,
+            }));
+          },
+        }
+      );
+    } catch (error) {
+      console.error("Upload failed:", error);
     }
   };
 
-  useEffect(() => {
-    setData({
-      ...data,
-      file_name: filename,
-    });
-  }, [filename]);
-
   const Bug = async () => {
     await BugPostMutate(data, {
       onSuccess: () => {
@@ -61,7 +53,7 @@ const BugReport = () => {
         setData({
           title: "",
           content: "",
-          file_name: filename ? filename : "",
+          file_name: [],
         });
       },
       onError: () => {
@@ -98,9 +90,36 @@ const BugReport = () => {
             />
           </div>
           <div className="flex flex-col gap-2">
-            <div className="text-sub-title4-M">버그 사진을 첨부해주세요</div>
-            <input type="file" onChange={handleFileChange} />
+            <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);
+                  }}
+                />
+              </>
+            </div>
           </div>
+          <ImgModal
+            onClick={handleImgUpload}
+            isOpen={modal}
+            onClose={() => {
+              setModal(!modal);
+            }}
+          />
         </div>
         <Button onClick={Bug} buttonSize="full" colorType="primary">
           버그 제보하기
diff --git a/src/assets/svg/bugreport.svg b/src/assets/svg/bugreport.svg
new file mode 100644
index 0000000..53a391e
--- /dev/null
+++ b/src/assets/svg/bugreport.svg
@@ -0,0 +1,3 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.75 26.75L12.3483 18.1517C12.6966 17.8034 13.11 17.5272 13.5649 17.3388C14.0199 17.1503 14.5075 17.0533 15 17.0533C15.4925 17.0533 15.9801 17.1503 16.4351 17.3388C16.89 17.5272 17.3034 17.8034 17.6517 18.1517L26.25 26.75M23.75 24.25L26.0983 21.9017C26.4466 21.5534 26.86 21.2772 27.3149 21.0888C27.7699 20.9003 28.2575 20.8033 28.75 20.8033C29.2425 20.8033 29.7301 20.9003 30.1851 21.0888C30.64 21.2772 31.0534 21.5534 31.4017 21.9017L36.25 26.75M6.25 33H33.75C34.413 33 35.0489 32.7366 35.5178 32.2678C35.9866 31.7989 36.25 31.163 36.25 30.5V10.5C36.25 9.83696 35.9866 9.20107 35.5178 8.73223C35.0489 8.26339 34.413 8 33.75 8H6.25C5.58696 8 4.95107 8.26339 4.48223 8.73223C4.01339 9.20107 3.75 9.83696 3.75 10.5V30.5C3.75 31.163 4.01339 31.7989 4.48223 32.2678C4.95107 32.7366 5.58696 33 6.25 33ZM23.75 14.25H23.7633V14.2633H23.75V14.25ZM24.375 14.25C24.375 14.4158 24.3092 14.5747 24.1919 14.6919C24.0747 14.8092 23.9158 14.875 23.75 14.875C23.5842 14.875 23.4253 14.8092 23.3081 14.6919C23.1908 14.5747 23.125 14.4158 23.125 14.25C23.125 14.0842 23.1908 13.9253 23.3081 13.8081C23.4253 13.6908 23.5842 13.625 23.75 13.625C23.9158 13.625 24.0747 13.6908 24.1919 13.8081C24.3092 13.9253 24.375 14.0842 24.375 14.25Z" stroke="#8C8A8F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/modal/imgModal.tsx b/src/components/modal/imgModal.tsx
new file mode 100644
index 0000000..0a9e235
--- /dev/null
+++ b/src/components/modal/imgModal.tsx
@@ -0,0 +1,153 @@
+import React, { useState, useRef } from "react";
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onClick: (images: File[]) => void;
+}
+
+const ImgModal: React.FC<ModalProps> = ({ isOpen, onClose, onClick }) => {
+  const [dragActive, setDragActive] = useState(false);
+  const [images, setImages] = useState<File[]>([]);
+  const pasteDivRef = useRef<HTMLDivElement>(null);
+
+  if (!isOpen) return null;
+
+  const handleDragOver = (e: React.DragEvent<HTMLLabelElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent<HTMLLabelElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(false);
+  };
+
+  const handleDrop = (e: React.DragEvent<HTMLLabelElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(false);
+
+    const files = Array.from(e.dataTransfer.files);
+    if (files.length > 0) {
+      setImages((prevImages) => [...prevImages, ...files]);
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || []);
+    if (files.length > 0) {
+      setImages((prevImages) => [...prevImages, ...files]);
+    }
+  };
+
+  const handlePaste = (e: React.ClipboardEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    const items = Array.from(e.clipboardData.items);
+    const pastedFiles = items
+      .filter((item) => item.kind === "file" && item.type.startsWith("image/"))
+      .map((item) => item.getAsFile())
+      .filter((file): file is File => file !== null);
+
+    if (pastedFiles.length > 0) {
+      setImages((prevImages) => [...prevImages, ...pastedFiles]);
+    }
+
+    if (pasteDivRef.current) {
+      pasteDivRef.current.innerHTML = "";
+    }
+  };
+
+  const handleRemoveImage = (index: number) => {
+    setImages((prevImages) => prevImages.filter((_, i) => i !== index));
+  };
+
+  const onCancle = () => {
+    onClose();
+    setImages([]);
+  };
+
+  const AddImg = () => {
+    onClick(images);
+    setImages([]);
+    onClose();
+  };
+
+  return (
+    <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
+      <div className="bg-white rounded-lg p-6 w-full max-w-md flex flex-col items-end">
+        <button className=" text-2xl mb-3" onClick={onClose}>
+          &times;
+        </button>
+        <label
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+          className={`border-2 border-dashed border-gray-300 rounded-lg p-8 w-full flex flex-col items-center bg-gray-200 ${
+            dragActive ? "bg-gray-300" : ""
+          }`}
+          htmlFor="imgUpload"
+        >
+          <div className="text-4xl mb-4">&#128247;</div>
+          <span>이미지를 끌어오거나 업로드 할 파일을 선택해 주세요</span>
+          <input
+            type="file"
+            id="imgUpload"
+            className="hidden"
+            onChange={handleChange}
+            multiple
+          />
+        </label>
+        <div className="my-4 relative w-full text-center">
+          <span className="bg-white px-2 absolute -top-3 z-10 left-40% text-gray-300 ">
+            또는
+          </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}
+          contentEditable="true"
+          onPaste={handlePaste}
+          className="border border-gray-300 rounded-lg w-full p-2 mb-4"
+        >
+          이미지를 붙여넣기 해주세요.
+        </div>
+        <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">
+              <img
+                src={URL.createObjectURL(image)}
+                alt={`Uploaded ${index}`}
+                className="min-w-full min-h-full rounded-lg"
+              />
+              <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>
+          ))}
+        </div>
+        <div className="flex gap-2">
+          <button
+            className="bg-gray-300 text-white py-2 px-4 rounded-lg"
+            onClick={onCancle}
+          >
+            취소
+          </button>
+          <button
+            className="bg-purple-600 text-white py-2 px-4 rounded-lg"
+            onClick={AddImg}
+          >
+            추가
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ImgModal;
diff --git a/src/hook/errorHandling.ts b/src/hook/errorHandling.ts
index e09c1cd..261c524 100644
--- a/src/hook/errorHandling.ts
+++ b/src/hook/errorHandling.ts
@@ -13,9 +13,7 @@ const apiError = () => {
     alert("400 잘못된 요청입니다");
   };
 
-  const handle401: ErrorHandler = () => {
-    router.push("login");
-  };
+  const handle401: ErrorHandler = () => {};
 
   const handle403: ErrorHandler = () => {
     alert("403 권한이 없습니다");
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 3ebf9e6..90e4876 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -347,6 +347,7 @@ const config: Config = {
       },
       spacing: {
         "4%": "4%",
+        "40%": "44%",
       },
     },
   },