[Feat/#361] 공연 수정하기 Step2(스태프&캐스트 리스트) 수정 가능하도록 변경 + 상세 이미지 추가 및 변경

src/apis/domains/performances/api.ts

@@ -18,13 +18,13 @@ export const getMakerPerformance = async (): Promise<MakerPerformanceResponse |
 };
 
 // 공연 수정 페이지 정보 조회 API (GET)
-type PerformanceEditResponse = components["schemas"]["PerformanceEditResponse"];
+type PerformanceModifyDetailResponse = components["schemas"]["PerformanceModifyDetailResponse"];
 
 export const getPerformanceEdit = async (
   performanceId: number
-): Promise<PerformanceEditResponse | null> => {
+): Promise<PerformanceModifyDetailResponse | null> => {
   try {
-    const response: AxiosResponse<ApiResponseType<PerformanceEditResponse>> = await get(
+    const response: AxiosResponse<ApiResponseType<PerformanceModifyDetailResponse>> = await get(
       `performances/${performanceId}`
     );
     return response.data.data;
@@ -47,7 +47,7 @@ export const deletePerformance = async (
     return response.data.data;
   } catch (error) {
     console.log("error", error);
-    throw error;
+    throw new Error(error);
   }
 };
 
@@ -129,19 +129,18 @@ export const postPerformance = async (formData): Promise<PerformanceResponse | n
   }
 };
 
-export type PerformanceUpdateResponse = components["schemas"]["PerformanceUpdateResponse"];
+export type PerformanceModifyResponse = components["schemas"]["PerformanceModifyResponse"];
 
 // 공연 수정 API (PUT)
 export const updatePerformance = async (
   formData
-): Promise<PerformanceUpdateResponse | null | any> => {
+): Promise<PerformanceModifyResponse | null | any> => {
   try {
     const response = await put("/performances", formData);
 
     return response.data;
   } catch (error) {
     console.error("error", error);
-
-    return null;
+    throw error;
   }
 };

src/apis/domains/performances/queries.ts

@@ -1,5 +1,10 @@
 import { SHOW_TYPE_KEY } from "@pages/gig/constants";
-import { BANK_TYPE, Cast, Staff } from "@pages/modifyManage/typings/gigInfo";
+import {
+  BANK_TYPE,
+  Cast,
+  PerformanceImageModifyRequest,
+  Staff,
+} from "@pages/modifyManage/typings/gigInfo";
 import { QueryClient, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Dayjs } from "dayjs";
 import { useNavigate } from "react-router-dom";
@@ -189,7 +194,6 @@ interface Schedule {
 
 // gigInfo 타입 정의 예제
 export interface PerformanceUpdateFormData {
-  accountHolder: string;
   performanceId: number;
   performanceTitle: string;
   genre: SHOW_TYPE_KEY;
@@ -198,16 +202,18 @@ export interface PerformanceUpdateFormData {
   performanceAttentionNote: string;
   bankName: BANK_TYPE;
   accountNumber: string;
+  accountHolder: string;
   posterImage: string;
   performanceTeamName: string;
   performanceVenue: string;
   performanceContact: string;
   performancePeriod: string;
-  ticketPrice?: number | null;
   totalScheduleCount: number;
-  scheduleList: Schedule[];
-  castList: Cast[];
-  staffList: Staff[];
+  ticketPrice?: number | null;
+  scheduleModifyRequests: Schedule[];
+  castModifyRequests: Cast[];
+  staffModifyRequests: Staff[];
+  performanceImageModifyRequests: PerformanceImageModifyRequest[];
 }
 
 export const useUpdatePerformance = () => {

src/pages/modifyManage/ModifyMaker.tsx

@@ -4,69 +4,77 @@ import RoleLayout from "./components/RoleLayout";
 import * as S from "./ModifyManage.styled";
 import { Cast, Staff } from "./typings/gigInfo";
 interface ModifyManageMakerProps {
-  castList: Cast[];
-  staffList: Staff[];
+  castModifyRequests: Cast[];
+  staffModifyRequests: Staff[];
   handleModifyManageStep: () => void;
-  updateGigInfo: (newInfo: Partial<{ castList: Cast[]; staffList: Staff[] }>) => void;
+  updateGigInfo: (
+    newInfo: Partial<{ castModifyRequests: Cast[]; staffModifyRequests: Staff[] }>
+  ) => void;
 }
 
 const ModifyManageMaker = ({
-  castList: prevCastList,
-  staffList: prevStaffList,
+  castModifyRequests: prevcastModifyRequests,
+  staffModifyRequests: prevstaffModifyRequests,
   handleModifyManageStep,
   updateGigInfo,
 }: ModifyManageMakerProps) => {
-  const [castList, setCastList] = useState<Cast[]>(prevCastList);
-  const [staffList, setStaffList] = useState<Staff[]>(prevStaffList);
+  const [castModifyRequests, setcastModifyRequests] = useState<Cast[]>(prevcastModifyRequests);
+  const [staffModifyRequests, setstaffModifyRequests] = useState<Staff[]>(prevstaffModifyRequests);
 
   const [isButtonDisabled, setIsButtonDisabled] = useState(true);
 
   useEffect(() => {
-    const allCastFieldsFilled = castList.every(
+    const allCastFieldsFilled = castModifyRequests.every(
       (cast) => cast.castName && cast.castRole && cast.castPhoto
     );
 
-    const allStaffFieldsFilled = staffList.every(
+    const allStaffFieldsFilled = staffModifyRequests.every(
       (staff) => staff.staffName && staff.staffRole && staff.staffPhoto
     );
 
     setIsButtonDisabled(
       !(
-        (castList?.length <= 1 &&
-          !castList[0]?.castName &&
-          !castList[0]?.castRole &&
-          !castList[0]?.castPhoto) ||
+        (castModifyRequests?.length <= 1 &&
+          !castModifyRequests[0]?.castName &&
+          !castModifyRequests[0]?.castRole &&
+          !castModifyRequests[0]?.castPhoto) ||
         allCastFieldsFilled
       ) ||
         !(
-          (castList?.length <= 1 &&
-            !staffList[0]?.staffName &&
-            !staffList[0]?.staffRole &&
-            !staffList[0]?.staffPhoto) ||
+          (castModifyRequests?.length <= 1 &&
+            !staffModifyRequests[0]?.staffName &&
+            !staffModifyRequests[0]?.staffRole &&
+            !staffModifyRequests[0]?.staffPhoto) ||
           allStaffFieldsFilled
         )
     );
-  }, [castList, staffList]);
+  }, [castModifyRequests, staffModifyRequests]);
 
   const handleUpdateList = (title: string, updatedList: Cast[] | Staff[]) => {
     if (title === "출연진") {
-      setCastList(updatedList as Cast[]);
+      setcastModifyRequests(updatedList as Cast[]);
     } else if (title === "스태프") {
-      setStaffList(updatedList as Staff[]);
+      setstaffModifyRequests(updatedList as Staff[]);
     }
-    updateGigInfo({ castList, staffList });
+    updateGigInfo({
+      castModifyRequests: castModifyRequests,
+      staffModifyRequests: staffModifyRequests,
+    });
   };
 
   const handleList = () => {
     // 모든 속성이 비어있는 객체들 필터링
-    const filteredCastList = castList.filter(
+    const filteredcastModifyRequests = castModifyRequests.filter(
       (cast) => cast.castName || cast.castRole || cast.castPhoto
     );
-    const filteredStaffList = staffList.filter(
+    const filteredstaffModifyRequests = staffModifyRequests.filter(
       (staff) => staff.staffName || staff.staffRole || staff.staffPhoto
     );
 
-    updateGigInfo({ castList: filteredCastList, staffList: filteredStaffList });
+    updateGigInfo({
+      castModifyRequests: filteredcastModifyRequests,
+      staffModifyRequests: filteredstaffModifyRequests,
+    });
     handleModifyManageStep();
   };
 
@@ -75,13 +83,13 @@ const ModifyManageMaker = ({
       <S.ModifyManageContainer>
         <RoleLayout
           title="출연진"
-          list={castList}
+          list={castModifyRequests}
           updateList={(list) => handleUpdateList("출연진", list)}
         />
         <S.Divider />
         <RoleLayout
           title="스태프"
-          list={staffList}
+          list={staffModifyRequests}
           updateList={(list) => handleUpdateList("스태프", list)}
         />
       </S.ModifyManageContainer>

src/pages/modifyManage/ModifyManage.styled.ts

@@ -121,6 +121,20 @@ export const FileInputWrapper = styled.div`
   gap: 1.4rem;
 `;
 
+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;
 `;
@@ -135,6 +149,15 @@ 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;