From 06d5a04ceae94d31cac80e7afee38fc7dd012e32 Mon Sep 17 00:00:00 2001
From: imddoy <imddoy@duksung.ac.kr>
Date: Tue, 20 Aug 2024 03:40:50 +0900
Subject: [PATCH 1/7] =?UTF-8?q?feat:=20=EC=83=81=EC=84=B8=20=EC=9D=B4?=
 =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=EB=A1=9C=EC=A7=81=20=EA=B5=AC=ED=98=84=20?=
 =?UTF-8?q?=EB=B9=84=EB=8F=99=EA=B8=B0=EC=A0=81=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=ED=8C=8C=EC=9D=BC=EC=9D=84=20=EC=9D=BD=EC=96=B4=EC=99=80?=
 =?UTF-8?q?=EC=84=9C=20=EC=88=9C=EC=84=9C=EB=8C=80=EB=A1=9C=20=EB=AF=B8?=
 =?UTF-8?q?=EB=A6=AC=EB=B3=B4=EA=B8=B0=20=EA=B5=AC=ED=98=84=20max=EA=B0=92?=
 =?UTF-8?q?=EC=9D=B8=2010=EC=9D=84=20=EB=84=98=EA=B8=B0=EB=A9=B4=20?=
 =?UTF-8?q?=EC=9E=91=EC=97=85=20=EC=9D=B4=ED=96=89=EB=90=98=EC=A7=80=20?=
 =?UTF-8?q?=EC=95=8A=EA=B3=A0=20=EC=95=88=EB=82=B4=ED=95=98=EA=B8=B0=20?=
 =?UTF-8?q?=EC=A0=95=ED=99=95=ED=95=9C=20=EC=86=8D=EC=84=B1=20=EC=9D=B4?=
 =?UTF-8?q?=EB=A6=84=EC=9D=80=20=EB=AA=85=EC=84=B8=EC=84=9C=20=EB=82=98?=
 =?UTF-8?q?=EC=98=A4=EB=A9=B4=20=EB=B3=80=EA=B2=BD=ED=95=A0=20=EC=98=88?=
 =?UTF-8?q?=EC=A0=95(=EA=B5=AC=EC=84=B1=EB=8F=84=20=EB=B3=80=EA=B2=BD=20?=
 =?UTF-8?q?=EC=98=88=EC=A0=95)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/register/Register.styled.ts         |  20 ++++
 src/pages/register/Register.tsx               |   9 ++
 src/pages/register/components/DetailImage.tsx | 110 ++++++++++++++++++
 src/pages/register/typings/gigInfo.ts         |   6 +
 src/pages/register/utils/handleEvent.ts       |  13 ++-
 5 files changed, 157 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/register/components/DetailImage.tsx

diff --git a/src/pages/register/Register.styled.ts b/src/pages/register/Register.styled.ts
index dd6c03d6..567cf16d 100644
--- a/src/pages/register/Register.styled.ts
+++ b/src/pages/register/Register.styled.ts
@@ -114,6 +114,25 @@ export const FileInputWrapper = styled.div`
 
   ${Generators.flexGenerator("row", "center", "start")}
   gap: 1.4rem;
+  overflow-x: scroll;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+
+export const FilesInputWrapper = styled.div`
+  position: relative;
+
+  ${Generators.flexGenerator("row", "center", "start")}
+  gap: 1.4rem;
+  width: calc(100% + 2.4rem);
+  padding-right: 2.4rem;
+  overflow-x: scroll;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 `;
 
 export const HiddenFileInput = styled.input`
@@ -122,6 +141,7 @@ export const HiddenFileInput = styled.input`
 
 export const CustomFileInput = styled.label<{ width?: number; height?: number }>`
   ${Generators.flexGenerator()}
+  flex-shrink: 0;
   width: ${({ width }) => (width ? width : 10.8)}rem;
   height: ${({ height }) => (height ? height : 15.4)}rem;
 
diff --git a/src/pages/register/Register.tsx b/src/pages/register/Register.tsx
index 325fd233..2f263c12 100644
--- a/src/pages/register/Register.tsx
+++ b/src/pages/register/Register.tsx
@@ -40,6 +40,7 @@ import {
   handleChange,
   handleDateChange,
   handleGenreSelect,
+  handleImagesUpload,
   handleImageUpload,
   handleTotalTicketCountChange,
   isAllFieldsFilled,
@@ -47,6 +48,7 @@ import {
   onMinusClick,
   onPlusClick,
 } from "./utils/handleEvent";
+import DetailImage from "./components/DetailImage";
 
 const Register = () => {
   const { isLogin } = useLogin();
@@ -84,6 +86,7 @@ const Register = () => {
     accountNumber: "", // 계좌번호
     accountHolder: "", // 예금주
     posterImage: "", // 포스터 이미지 URL
+    detailImages: [], // 상세 이미지 URL
     performanceTeamName: "", // 공연 팀명
     performanceVenue: "", // 공연 장소
     performanceContact: "", // 대표자 연락처
@@ -123,6 +126,7 @@ const Register = () => {
     accountNumber,
     accountHolder,
     posterImage,
+    detailImages,
     performanceTeamName,
     performanceVenue,
     performancePeriod,
@@ -364,6 +368,11 @@ const Register = () => {
             />
           </InputRegisterBox>
           <S.Divider />
+          <DetailImage
+            value={detailImages}
+            onImagesUpload={(detailImage) => handleImagesUpload(detailImage, setGigInfo)}
+          />
+          <S.Divider />
           <InputRegisterBox title="공연 소개">
             <TextArea
               name="performanceDescription"
diff --git a/src/pages/register/components/DetailImage.tsx b/src/pages/register/components/DetailImage.tsx
new file mode 100644
index 00000000..4210bee8
--- /dev/null
+++ b/src/pages/register/components/DetailImage.tsx
@@ -0,0 +1,110 @@
+import { ChangeEvent, useEffect, useState } from "react";
+import * as S from "../Register.styled";
+import { IconCamera } from "@assets/svgs";
+import Spacing from "@components/commons/spacing/Spacing";
+import useModal from "./../../../hooks/useModal";
+
+interface DetailImageProps {
+  value?: PreviewImageList[] | undefined;
+  onImagesUpload: (detailImage: PreviewImageList[]) => void;
+}
+
+type PreviewImageList = {
+  id: number;
+  url: string;
+};
+
+const DetailImage = ({ value, onImagesUpload }: DetailImageProps) => {
+  const { openAlert } = useModal();
+  const [previewImgs, setPreviewImgs] = useState<PreviewImageList[] | null>(value || null);
+  const [inputKey, setInputKey] = useState<number>(Date.now());
+
+  useEffect(() => {
+    setPreviewImgs(value || null);
+  }, [value]);
+
+  const uploadFile = (e: ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (files && files.length > 0) {
+      // 최대 10장 업로드 안내
+      if (previewImgs.length + files.length > 10) {
+        openAlert({
+          title: "가능한 이미지 수를 초과했습니다.",
+          okText: "확인",
+        });
+        return;
+      }
+
+      // 파일 순서대로 처리하기 위해 비동기 작업
+      const processFile = (file: File) => {
+        return new Promise<PreviewImageList>((resolve) => {
+          const fileReader = new FileReader();
+          fileReader.onload = function (event) {
+            const imageUrl = event.target?.result as string;
+            resolve({
+              id: Date.now() + Math.floor(Math.random() * 1000), // ctrl 키로 동시에 이미지 선택해도 id 중복되지 않도록 랜덤 값 추가
+              url: imageUrl,
+            });
+          };
+          fileReader.readAsDataURL(file);
+        });
+      };
+
+      // 모든 파일 처리 완료 후 상태 업데이트
+      const processAllFiles = async () => {
+        const newPreviewImgs = await Promise.all(
+          Array.from(files).map((file) => processFile(file))
+        );
+        const updatedPreviewImgs = [...previewImgs, ...newPreviewImgs];
+        setPreviewImgs(updatedPreviewImgs);
+        onImagesUpload(updatedPreviewImgs);
+      };
+
+      processAllFiles();
+    }
+  };
+  const removeImage = (id: number) => {
+    setPreviewImgs((prev) => {
+      const updatedPreviewImgs = prev.filter((detail) => detail.id !== id);
+      onImagesUpload(updatedPreviewImgs); // 비동기적으로 반영되는 setState때문에 내부에 넣어야 필터링된 최신 이미지들을 바로 반영됨
+
+      return updatedPreviewImgs;
+    });
+    setInputKey(Date.now());
+  };
+
+  return (
+    <S.InputRegisterBox $marginBottom={2.8}>
+      <S.InputTitle>공연 상세 이미지</S.InputTitle>
+      <S.InputDescription>선택 사항입니다. ({previewImgs.length}/10)</S.InputDescription>
+      <Spacing marginBottom="1.4" />
+      <S.FilesInputWrapper>
+        <S.HiddenFileInput
+          key={inputKey}
+          type="file"
+          id="files"
+          onChange={uploadFile}
+          multiple
+          disabled={previewImgs.length >= 10}
+        />
+        <S.CustomFileInput htmlFor="files" width={15.7} height={21}>
+          <IconCamera width={"3.2rem"} />
+        </S.CustomFileInput>
+        {previewImgs &&
+          previewImgs.map((previewImg) => (
+            <S.PreviewImageWrapper width={15.7} height={21}>
+              <S.PreviewImage
+                src={previewImg.url}
+                alt={`Preview-${previewImg.id}`}
+                width={15.7}
+                height={21}
+              />
+              <S.RemoveImageButton onClick={() => removeImage(previewImg.id)} />
+            </S.PreviewImageWrapper>
+          ))}
+      </S.FilesInputWrapper>
+    </S.InputRegisterBox>
+  );
+};
+
+export default DetailImage;
diff --git a/src/pages/register/typings/gigInfo.ts b/src/pages/register/typings/gigInfo.ts
index a3ca157a..943a4c78 100644
--- a/src/pages/register/typings/gigInfo.ts
+++ b/src/pages/register/typings/gigInfo.ts
@@ -19,6 +19,11 @@ export interface Staff {
   staffPhoto: string;
 }
 
+export interface DetailImage {
+  id: number;
+  url: string;
+}
+
 export interface GigInfo {
   performanceTitle: string;
   genre: SHOW_TYPE_KEY;
@@ -29,6 +34,7 @@ export interface GigInfo {
   accountNumber: string;
   accountHolder: string;
   posterImage: string;
+  detailImages: DetailImage[];
   performanceTeamName: string;
   performanceVenue: string;
   performanceContact: string;
diff --git a/src/pages/register/utils/handleEvent.ts b/src/pages/register/utils/handleEvent.ts
index 98c9ffb4..f3f5df53 100644
--- a/src/pages/register/utils/handleEvent.ts
+++ b/src/pages/register/utils/handleEvent.ts
@@ -1,6 +1,6 @@
 import { Dayjs } from "dayjs";
 import { ChangeEvent, Dispatch, SetStateAction } from "react";
-import { GigInfo } from "../typings/gigInfo";
+import { DetailImage, GigInfo } from "../typings/gigInfo";
 import { SHOW_TYPE_KEY } from "@pages/gig/constants";
 
 // Image 핸들링
@@ -14,6 +14,17 @@ export const handleImageUpload = (
   }));
 };
 
+// Images 핸들링
+export const handleImagesUpload = (
+  detailImage: DetailImage[],
+  setGigInfo: Dispatch<SetStateAction<GigInfo>>
+) => {
+  setGigInfo((prev) => ({
+    ...prev,
+    detailImages: detailImage,
+  }));
+};
+
 // Genre 핸들링
 export const handleGenreSelect = (
   selectedGenre: SHOW_TYPE_KEY,

From 01800d4d2bb20a54efe3b7c04e8696cd2d677b11 Mon Sep 17 00:00:00 2001
From: imddoy <imddoy@duksung.ac.kr>
Date: Fri, 23 Aug 2024 23:47:07 +0900
Subject: [PATCH 2/7] =?UTF-8?q?feat:=20=EC=B5=9C=EB=8C=80=20=EC=82=AC?=
 =?UTF-8?q?=EC=A7=84=20=EC=88=98=20=EB=B3=80=EA=B2=BD=20input=EC=97=90=20?=
 =?UTF-8?q?=ED=98=84=EC=9E=AC=20=EC=82=AC=EC=A7=84=20=EC=88=98=20=EB=B3=B4?=
 =?UTF-8?q?=EC=9D=B4=EB=8F=84=EB=A1=9D=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/register/Register.styled.ts         | 10 +++++++++-
 src/pages/register/components/DetailImage.tsx | 18 ++++++++----------
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/pages/register/Register.styled.ts b/src/pages/register/Register.styled.ts
index 567cf16d..dc18a8e2 100644
--- a/src/pages/register/Register.styled.ts
+++ b/src/pages/register/Register.styled.ts
@@ -140,7 +140,8 @@ export const HiddenFileInput = styled.input`
 `;
 
 export const CustomFileInput = styled.label<{ width?: number; height?: number }>`
-  ${Generators.flexGenerator()}
+  ${Generators.flexGenerator("column", "center", "center")}
+
   flex-shrink: 0;
   width: ${({ width }) => (width ? width : 10.8)}rem;
   height: ${({ height }) => (height ? height : 15.4)}rem;
@@ -150,6 +151,13 @@ export const CustomFileInput = styled.label<{ width?: number; height?: number }>
   border-radius: 6px;
 `;
 
+export const CustomFileInputCounter = styled.p`
+  color: ${({ theme }) => theme.colors.gray_500};
+  ${({ theme }) => theme.fonts["body1-normal-medi"]};
+`;
+export const CustomFileInputLength = styled.span`
+  color: ${({ theme }) => theme.colors.white};
+`;
 export const PreviewImageWrapper = styled.article<{ width?: number; height?: number }>`
   position: relative;
   width: ${({ width }) => (width ? width : 10.8)}rem;
diff --git a/src/pages/register/components/DetailImage.tsx b/src/pages/register/components/DetailImage.tsx
index 4210bee8..0b3df74d 100644
--- a/src/pages/register/components/DetailImage.tsx
+++ b/src/pages/register/components/DetailImage.tsx
@@ -26,8 +26,8 @@ const DetailImage = ({ value, onImagesUpload }: DetailImageProps) => {
   const uploadFile = (e: ChangeEvent<HTMLInputElement>) => {
     const files = e.target.files;
     if (files && files.length > 0) {
-      // 최대 10장 업로드 안내
-      if (previewImgs.length + files.length > 10) {
+      // 최대 5장 업로드 안내
+      if (previewImgs.length + files.length > 5) {
         openAlert({
           title: "가능한 이미지 수를 초과했습니다.",
           okText: "확인",
@@ -56,7 +56,6 @@ const DetailImage = ({ value, onImagesUpload }: DetailImageProps) => {
           Array.from(files).map((file) => processFile(file))
         );
         const updatedPreviewImgs = [...previewImgs, ...newPreviewImgs];
-        setPreviewImgs(updatedPreviewImgs);
         onImagesUpload(updatedPreviewImgs);
       };
 
@@ -64,19 +63,15 @@ const DetailImage = ({ value, onImagesUpload }: DetailImageProps) => {
     }
   };
   const removeImage = (id: number) => {
-    setPreviewImgs((prev) => {
-      const updatedPreviewImgs = prev.filter((detail) => detail.id !== id);
-      onImagesUpload(updatedPreviewImgs); // 비동기적으로 반영되는 setState때문에 내부에 넣어야 필터링된 최신 이미지들을 바로 반영됨
+    onImagesUpload(previewImgs.filter((detail) => detail.id !== id)); // 비동기적으로 반영되는 setState때문에 내부에 넣어야 필터링된 최신 이미지들을 바로 반영됨
 
-      return updatedPreviewImgs;
-    });
     setInputKey(Date.now());
   };
 
   return (
     <S.InputRegisterBox $marginBottom={2.8}>
       <S.InputTitle>공연 상세 이미지</S.InputTitle>
-      <S.InputDescription>선택 사항입니다. ({previewImgs.length}/10)</S.InputDescription>
+      <S.InputDescription>선택 사항입니다. (최대 5장)</S.InputDescription>
       <Spacing marginBottom="1.4" />
       <S.FilesInputWrapper>
         <S.HiddenFileInput
@@ -85,10 +80,13 @@ const DetailImage = ({ value, onImagesUpload }: DetailImageProps) => {
           id="files"
           onChange={uploadFile}
           multiple
-          disabled={previewImgs.length >= 10}
+          disabled={previewImgs.length >= 5}
         />
         <S.CustomFileInput htmlFor="files" width={15.7} height={21}>
           <IconCamera width={"3.2rem"} />
+          <S.CustomFileInputCounter>
+            <S.CustomFileInputLength>{previewImgs.length}</S.CustomFileInputLength>/5
+          </S.CustomFileInputCounter>
         </S.CustomFileInput>
         {previewImgs &&
           previewImgs.map((previewImg) => (

From e8bda9c37a4b5df0ea4eef418dee6e83c83cb682 Mon Sep 17 00:00:00 2001
From: imddoy <imddoy@duksung.ac.kr>
Date: Sat, 24 Aug 2024 00:01:24 +0900
Subject: [PATCH 3/7] =?UTF-8?q?style:=20type=EC=9D=84=20interface=EB=A1=9C?=
 =?UTF-8?q?=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/register/components/DetailImage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/register/components/DetailImage.tsx b/src/pages/register/components/DetailImage.tsx
index 0b3df74d..4eb5c271 100644
--- a/src/pages/register/components/DetailImage.tsx
+++ b/src/pages/register/components/DetailImage.tsx
@@ -9,10 +9,10 @@ interface DetailImageProps {
   onImagesUpload: (detailImage: PreviewImageList[]) => void;
 }
 
-type PreviewImageList = {
+interface PreviewImageList {
   id: number;
   url: string;
-};
+}
 
 const DetailImage = ({ value, onImagesUpload }: DetailImageProps) => {
   const { openAlert } = useModal();

From 16cbd648ff09148afa0e430e76516e5318aaa195 Mon Sep 17 00:00:00 2001
From: imddoy <imddoy@duksung.ac.kr>
Date: Sat, 24 Aug 2024 00:05:19 +0900
Subject: [PATCH 4/7] =?UTF-8?q?chore:=20=ED=95=9C=EC=A4=84=20=EB=9D=84?=
 =?UTF-8?q?=EC=9A=B0=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/register/components/DetailImage.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/register/components/DetailImage.tsx b/src/pages/register/components/DetailImage.tsx
index 4eb5c271..1c4ee74e 100644
--- a/src/pages/register/components/DetailImage.tsx
+++ b/src/pages/register/components/DetailImage.tsx
@@ -62,6 +62,7 @@ const DetailImage = ({ value, onImagesUpload }: DetailImageProps) => {
       processAllFiles();
     }
   };
+
   const removeImage = (id: number) => {
     onImagesUpload(previewImgs.filter((detail) => detail.id !== id)); // 비동기적으로 반영되는 setState때문에 내부에 넣어야 필터링된 최신 이미지들을 바로 반영됨
 

From 47337d8968004014eb7423980175df5247505ef1 Mon Sep 17 00:00:00 2001
From: imddoy <imddoy@duksung.ac.kr>
Date: Sat, 24 Aug 2024 00:08:59 +0900
Subject: [PATCH 5/7] =?UTF-8?q?feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EC=A7=80=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/register/components/DetailImage.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/register/components/DetailImage.tsx b/src/pages/register/components/DetailImage.tsx
index 1c4ee74e..14ff373a 100644
--- a/src/pages/register/components/DetailImage.tsx
+++ b/src/pages/register/components/DetailImage.tsx
@@ -79,6 +79,7 @@ const DetailImage = ({ value, onImagesUpload }: DetailImageProps) => {
           key={inputKey}
           type="file"
           id="files"
+          accept="image/*"
           onChange={uploadFile}
           multiple
           disabled={previewImgs.length >= 5}

From eba241bbcba0c7a77ba532caf7c1f95e27bc5e5d Mon Sep 17 00:00:00 2001
From: imddoy <imddoy@duksung.ac.kr>
Date: Thu, 29 Aug 2024 00:57:12 +0900
Subject: [PATCH 6/7] =?UTF-8?q?feat:=20=EC=83=81=EC=84=B8=20=EC=9D=B4?=
 =?UTF-8?q?=EB=AF=B8=EC=A7=80=20id=20=EC=A0=9C=EA=B1=B0=20=ED=9B=84=20?=
 =?UTF-8?q?=EC=84=9C=EB=B2=84=20=EC=9A=94=EC=B2=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/register/Register.tsx               | 11 +++++++----
 src/pages/register/components/DetailImage.tsx |  8 ++++----
 src/pages/register/typings/gigInfo.ts         |  6 +++---
 src/pages/register/utils/handleEvent.ts       |  6 +++---
 4 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/pages/register/Register.tsx b/src/pages/register/Register.tsx
index 2f263c12..394f4d3e 100644
--- a/src/pages/register/Register.tsx
+++ b/src/pages/register/Register.tsx
@@ -86,7 +86,7 @@ const Register = () => {
     accountNumber: "", // 계좌번호
     accountHolder: "", // 예금주
     posterImage: "", // 포스터 이미지 URL
-    detailImages: [], // 상세 이미지 URL
+    performanceImageList: [], // 상세 이미지 URL
     performanceTeamName: "", // 공연 팀명
     performanceVenue: "", // 공연 장소
     performanceContact: "", // 대표자 연락처
@@ -126,7 +126,7 @@ const Register = () => {
     accountNumber,
     accountHolder,
     posterImage,
-    detailImages,
+    performanceImageList,
     performanceTeamName,
     performanceVenue,
     performancePeriod,
@@ -225,6 +225,9 @@ const Register = () => {
             };
           }),
           bankName: bankInfo ? bankInfo : "NONE",
+          performanceImageList: gigInfo.performanceImageList.map((image) => ({
+            performanceImage: image.performanceImage,
+          })),
         };
         try {
           await postPerformance(formData);
@@ -369,8 +372,8 @@ const Register = () => {
           </InputRegisterBox>
           <S.Divider />
           <DetailImage
-            value={detailImages}
-            onImagesUpload={(detailImage) => handleImagesUpload(detailImage, setGigInfo)}
+            value={performanceImageList}
+            onImagesUpload={(performanceImage) => handleImagesUpload(performanceImage, setGigInfo)}
           />
           <S.Divider />
           <InputRegisterBox title="공연 소개">
diff --git a/src/pages/register/components/DetailImage.tsx b/src/pages/register/components/DetailImage.tsx
index 14ff373a..e6d15fea 100644
--- a/src/pages/register/components/DetailImage.tsx
+++ b/src/pages/register/components/DetailImage.tsx
@@ -11,7 +11,7 @@ interface DetailImageProps {
 
 interface PreviewImageList {
   id: number;
-  url: string;
+  performanceImage: string;
 }
 
 const DetailImage = ({ value, onImagesUpload }: DetailImageProps) => {
@@ -43,7 +43,7 @@ const DetailImage = ({ value, onImagesUpload }: DetailImageProps) => {
             const imageUrl = event.target?.result as string;
             resolve({
               id: Date.now() + Math.floor(Math.random() * 1000), // ctrl 키로 동시에 이미지 선택해도 id 중복되지 않도록 랜덤 값 추가
-              url: imageUrl,
+              performanceImage: imageUrl,
             });
           };
           fileReader.readAsDataURL(file);
@@ -92,9 +92,9 @@ const DetailImage = ({ value, onImagesUpload }: DetailImageProps) => {
         </S.CustomFileInput>
         {previewImgs &&
           previewImgs.map((previewImg) => (
-            <S.PreviewImageWrapper width={15.7} height={21}>
+            <S.PreviewImageWrapper key={previewImg.id} width={15.7} height={21}>
               <S.PreviewImage
-                src={previewImg.url}
+                src={previewImg.performanceImage}
                 alt={`Preview-${previewImg.id}`}
                 width={15.7}
                 height={21}
diff --git a/src/pages/register/typings/gigInfo.ts b/src/pages/register/typings/gigInfo.ts
index 943a4c78..e2900174 100644
--- a/src/pages/register/typings/gigInfo.ts
+++ b/src/pages/register/typings/gigInfo.ts
@@ -19,9 +19,9 @@ export interface Staff {
   staffPhoto: string;
 }
 
-export interface DetailImage {
+export interface PerformanceImage {
   id: number;
-  url: string;
+  performanceImage: string;
 }
 
 export interface GigInfo {
@@ -34,7 +34,7 @@ export interface GigInfo {
   accountNumber: string;
   accountHolder: string;
   posterImage: string;
-  detailImages: DetailImage[];
+  performanceImageList: PerformanceImage[];
   performanceTeamName: string;
   performanceVenue: string;
   performanceContact: string;
diff --git a/src/pages/register/utils/handleEvent.ts b/src/pages/register/utils/handleEvent.ts
index f3f5df53..612d10a6 100644
--- a/src/pages/register/utils/handleEvent.ts
+++ b/src/pages/register/utils/handleEvent.ts
@@ -1,6 +1,6 @@
 import { Dayjs } from "dayjs";
 import { ChangeEvent, Dispatch, SetStateAction } from "react";
-import { DetailImage, GigInfo } from "../typings/gigInfo";
+import { PerformanceImage, GigInfo } from "../typings/gigInfo";
 import { SHOW_TYPE_KEY } from "@pages/gig/constants";
 
 // Image 핸들링
@@ -16,12 +16,12 @@ export const handleImageUpload = (
 
 // Images 핸들링
 export const handleImagesUpload = (
-  detailImage: DetailImage[],
+  performanceImage: PerformanceImage[],
   setGigInfo: Dispatch<SetStateAction<GigInfo>>
 ) => {
   setGigInfo((prev) => ({
     ...prev,
-    detailImages: detailImage,
+    performanceImageList: performanceImage,
   }));
 };
 

From 31d18ace65975164e3289b5094d3d2f04db46558 Mon Sep 17 00:00:00 2001
From: imddoy <imddoy@duksung.ac.kr>
Date: Thu, 29 Aug 2024 01:28:06 +0900
Subject: [PATCH 7/7] =?UTF-8?q?chore:=20=EC=82=AC=EC=A7=84=20=ED=99=95?=
 =?UTF-8?q?=EC=9E=A5=EC=9E=90=20=EA=B5=AC=EC=B2=B4=EC=A0=81=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EC=A0=9C=ED=95=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/register/components/DetailImage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/register/components/DetailImage.tsx b/src/pages/register/components/DetailImage.tsx
index e6d15fea..7999ab48 100644
--- a/src/pages/register/components/DetailImage.tsx
+++ b/src/pages/register/components/DetailImage.tsx
@@ -79,7 +79,7 @@ const DetailImage = ({ value, onImagesUpload }: DetailImageProps) => {
           key={inputKey}
           type="file"
           id="files"
-          accept="image/*"
+          accept="image/png, image/jpg, image/jpeg, image/svg"
           onChange={uploadFile}
           multiple
           disabled={previewImgs.length >= 5}