[Feat/#351] 공연 등록하기 상세 이미지 클라 구현

src/pages/register/Register.styled.ts

@@ -114,14 +114,35 @@ 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`
   display: none;
 `;
 
 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;
 
@@ -130,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;

src/pages/register/Register.tsx

@@ -40,13 +40,15 @@ import {
   handleChange,
   handleDateChange,
   handleGenreSelect,
+  handleImagesUpload,
   handleImageUpload,
   handleTotalTicketCountChange,
   isAllFieldsFilled,
   onFreeClick,
   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
+    performanceImageList: [], // 상세 이미지 URL
     performanceTeamName: "", // 공연 팀명
     performanceVenue: "", // 공연 장소
     performanceContact: "", // 대표자 연락처
@@ -123,6 +126,7 @@ const Register = () => {
     accountNumber,
     accountHolder,
     posterImage,
+    performanceImageList,
     performanceTeamName,
     performanceVenue,
     performancePeriod,
@@ -221,6 +225,9 @@ const Register = () => {
             };
           }),
           bankName: bankInfo ? bankInfo : "NONE",
+          performanceImageList: gigInfo.performanceImageList.map((image) => ({
+            performanceImage: image.performanceImage,
+          })),
         };
         try {
           await postPerformance(formData);
@@ -364,6 +371,11 @@ const Register = () => {
             />
           </InputRegisterBox>
           <S.Divider />
+          <DetailImage
+            value={performanceImageList}
+            onImagesUpload={(performanceImage) => handleImagesUpload(performanceImage, setGigInfo)}
+          />
+          <S.Divider />
           <InputRegisterBox title="공연 소개">
             <TextArea
               name="performanceDescription"

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;
+}
+
+interface PreviewImageList {
+  id: number;
+  performanceImage: 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) {
+      // 최대 5장 업로드 안내
+      if (previewImgs.length + files.length > 5) {
+        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 중복되지 않도록 랜덤 값 추가
+              performanceImage: imageUrl,
+            });
+          };
+          fileReader.readAsDataURL(file);
+        });
+      };
+
+      // 모든 파일 처리 완료 후 상태 업데이트
+      const processAllFiles = async () => {
+        const newPreviewImgs = await Promise.all(
+          Array.from(files).map((file) => processFile(file))
+        );
+        const updatedPreviewImgs = [...previewImgs, ...newPreviewImgs];
+        onImagesUpload(updatedPreviewImgs);
+      };
+
+      processAllFiles();
+    }
+  };
+
+  const removeImage = (id: number) => {
+    onImagesUpload(previewImgs.filter((detail) => detail.id !== id)); // 비동기적으로 반영되는 setState때문에 내부에 넣어야 필터링된 최신 이미지들을 바로 반영됨
+
+    setInputKey(Date.now());
+  };
+
+  return (
+    <S.InputRegisterBox $marginBottom={2.8}>
+      <S.InputTitle>공연 상세 이미지</S.InputTitle>
+      <S.InputDescription>선택 사항입니다. (최대 5장)</S.InputDescription>
+      <Spacing marginBottom="1.4" />
+      <S.FilesInputWrapper>
+        <S.HiddenFileInput
+          key={inputKey}
+          type="file"
+          id="files"
+          accept="image/png, image/jpg, image/jpeg, image/svg"
+          onChange={uploadFile}
+          multiple
+          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) => (
+            <S.PreviewImageWrapper key={previewImg.id} width={15.7} height={21}>
+              <S.PreviewImage
+                src={previewImg.performanceImage}
+                alt={`Preview-${previewImg.id}`}
+                width={15.7}
+                height={21}
+              />
+              <S.RemoveImageButton onClick={() => removeImage(previewImg.id)} />
+            </S.PreviewImageWrapper>
+          ))}
+      </S.FilesInputWrapper>
+    </S.InputRegisterBox>
+  );
+};
+
+export default DetailImage;

src/pages/register/typings/gigInfo.ts

@@ -19,6 +19,11 @@ export interface Staff {
   staffPhoto: string;
 }
 
+export interface PerformanceImage {
+  id: number;
+  performanceImage: string;
+}
+
 export interface GigInfo {
   performanceTitle: string;
   genre: SHOW_TYPE_KEY;
@@ -29,6 +34,7 @@ export interface GigInfo {
   accountNumber: string;
   accountHolder: string;
   posterImage: string;
+  performanceImageList: PerformanceImage[];
   performanceTeamName: string;
   performanceVenue: string;
   performanceContact: string;

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 { PerformanceImage, GigInfo } from "../typings/gigInfo";
 import { SHOW_TYPE_KEY } from "@pages/gig/constants";
 
 // Image 핸들링
@@ -14,6 +14,17 @@ export const handleImageUpload = (
   }));
 };
 
+// Images 핸들링
+export const handleImagesUpload = (
+  performanceImage: PerformanceImage[],
+  setGigInfo: Dispatch<SetStateAction<GigInfo>>
+) => {
+  setGigInfo((prev) => ({
+    ...prev,
+    performanceImageList: performanceImage,
+  }));
+};
+
 // Genre 핸들링
 export const handleGenreSelect = (
   selectedGenre: SHOW_TYPE_KEY,