Merge pull request TEAM-BEAT#387 from TEAM-BEAT/feat/TEAM-BEAT#380/gu…

…estManageRenewal

[Feat/TEAM-BEAT#380] 예매자(게스트) 관리하기 리뉴얼

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/apis/domains/tickets/api.ts

@@ -1,7 +1,7 @@
-import { del, get, put } from "@apis/index";
+import { get, patch, put } from "@apis/index";
 import { components } from "@typings/api/schema";
 import { ApiResponseType } from "@typings/commonType";
-import { DeleteFormDataProps } from "@typings/deleteBookerFormatProps";
+import { PatchFormDataProps } from "@typings/deleteBookerFormatProps";
 import { AxiosResponse } from "axios";
 
 // 예매자 목록 조회 API (GET)
@@ -60,19 +60,17 @@ export const putTicketUpdate = async (
   }
 };
 
-// 예매자 삭제 API (DELETE)
+// 예매자 취소 API (PATCH)
 //이거 타입 잘못되었을 수도..? bookingList 가 number를 담은 배열로 되어 있는데, 실제로는 아니었음
 //export type TicketDeleteRequest = components["schemas"]["TicketDeleteRequest"];
 
-export const deleteTicketDelete = async (
-  formData: DeleteFormDataProps
+export const patchTicketCancel = async (
+  formData: PatchFormDataProps
 ): Promise<SuccessResponseVoid | null> => {
-  // console.log("fromdata", formData);
   try {
-    const response: AxiosResponse<ApiResponseType<SuccessResponseVoid>> = await del(
+    const response: AxiosResponse<ApiResponseType<SuccessResponseVoid>> = await patch(
       "tickets",
-      //DELETE요청의 경우 두번째 인자가 좀 다름. - config 파일을 넣어야 함
-      { data: formData }
+      formData
     );
     return response.data.data;
   } catch (error) {

src/apis/domains/tickets/queries.ts

@@ -1,9 +1,9 @@
 import { QueryClient, useMutation, useQuery } from "@tanstack/react-query";
-import { DeleteFormDataProps } from "@typings/deleteBookerFormatProps";
+import { PatchFormDataProps } from "@typings/deleteBookerFormatProps";
 import {
-  deleteTicketDelete,
   getTicketReq,
   getTicketRetrieve,
+  patchTicketCancel,
   putTicketUpdate,
   TicketUpdateRequest,
 } from "./api";
@@ -37,12 +37,12 @@ export const useTicketUpdate = () => {
   });
 };
 
-// 예매자의 정보를 삭제하는 API (DELETE)를 위한 쿼리 작성
-export const useTicketDelete = () => {
+// 예매자를 취소하는 API (PATCH)를 위한 쿼리 작성
+export const useTicketPatch = () => {
   const queryClient = new QueryClient();
 
   return useMutation({
-    mutationFn: (formData: DeleteFormDataProps) => deleteTicketDelete(formData),
+    mutationFn: (formData: PatchFormDataProps) => patchTicketCancel(formData),
     onSuccess: (res) => {
       queryClient.invalidateQueries({ queryKey: [QUERY_KEY.LIST, BOOKING_QUERY_KEY.BOOKING_LIST] });
       queryClient.refetchQueries({ queryKey: [QUERY_KEY.LIST, BOOKING_QUERY_KEY.BOOKING_LIST] });

src/assets/svgs/IconCheckboxDisabledOn.tsx

@@ -0,0 +1,9 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgIconCheckboxDisabledOn = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18" {...props}>
+    <rect width={17} height={17} x={0.5} y={0.5} stroke="#3E3E3E" rx={1.5} />
+    <path stroke="#3E3E3E" d="M5 9h7.5" />
+  </svg>
+);
+export default SvgIconCheckboxDisabledOn;

src/assets/svgs/index.ts

@@ -0,0 +1,61 @@
+export { default as BannerBasic } from "./BannerBasic";
+export { default as BtnFloating } from "./BtnFloating";
+export { default as ButtonDelete24 } from "./ButtonDelete24";
+export { default as CarouselPartInactive } from "./CarouselPartInactive";
+export { default as Empty } from "./Empty";
+export { default as IcHamburgar } from "./IcHamburgar";
+export { default as IcomCopy } from "./IcomCopy";
+export { default as IconArrowDown } from "./IconArrowDown";
+export { default as IconArrowLeft } from "./IconArrowLeft";
+export { default as IconArrowRight } from "./IconArrowRight";
+export { default as IconArrowUp } from "./IconArrowUp";
+export { default as IconBnk } from "./IconBnk";
+export { default as IconCalendar } from "./IconCalendar";
+export { default as IconCamera } from "./IconCamera";
+export { default as IconCheck } from "./IconCheck";
+export { default as IconCheckboxDisabledOn } from "./IconCheckboxDisabledOn";
+export { default as IconCheckboxSelectedOn } from "./IconCheckboxSelectedOn";
+export { default as IconCheckboxUnselectedOn } from "./IconCheckboxUnselectedOn";
+export { default as IconChecked } from "./IconChecked";
+export { default as IconChevronBack } from "./IconChevronBack";
+export { default as IconEmpty } from "./IconEmpty";
+export { default as IconEyeOff } from "./IconEyeOff";
+export { default as IconEyeOn } from "./IconEyeOn";
+export { default as IconFooterLogo } from "./IconFooterLogo";
+export { default as IconHanna } from "./IconHanna";
+export { default as IconIbk } from "./IconIbk";
+export { default as IconIm } from "./IconIm";
+export { default as IconKabank } from "./IconKabank";
+export { default as IconKb } from "./IconKb";
+export { default as IconLargeBand } from "./IconLargeBand";
+export { default as IconLargeDance } from "./IconLargeDance";
+export { default as IconLargeEtc } from "./IconLargeEtc";
+export { default as IconLargeMusical } from "./IconLargeMusical";
+export { default as IconLogo } from "./IconLogo";
+export { default as IconMinus } from "./IconMinus";
+export { default as IconNonghyup } from "./IconNonghyup";
+export { default as IconPhotoDelete } from "./IconPhotoDelete";
+export { default as IconPlus } from "./IconPlus";
+export { default as IconProfile } from "./IconProfile";
+export { default as IconRoleAdd } from "./IconRoleAdd";
+export { default as IconSaemauel } from "./IconSaemauel";
+export { default as IconSc } from "./IconSc";
+export { default as IconShinhan } from "./IconShinhan";
+export { default as IconShinhyup } from "./IconShinhyup";
+export { default as IconSmallBand } from "./IconSmallBand";
+export { default as IconSmallDance } from "./IconSmallDance";
+export { default as IconSmallEtc } from "./IconSmallEtc";
+export { default as IconSmallMusical } from "./IconSmallMusical";
+export { default as IconSoohyup } from "./IconSoohyup";
+export { default as IconTextfiedlDelete } from "./IconTextfiedlDelete";
+export { default as IconTime } from "./IconTime";
+export { default as IconToggleOff } from "./IconToggleOff";
+export { default as IconToggleOn } from "./IconToggleOn";
+export { default as IconToss } from "./IconToss";
+export { default as IconWoochaegook } from "./IconWoochaegook";
+export { default as IconWoori } from "./IconWoori";
+export { default as IconXButton } from "./IconXButton";
+export { default as IcOutlinePlace } from "./IcOutlinePlace";
+export { default as NotFoundAsset } from "./NotFoundAsset";
+export { default as Subtract } from "./Subtract";
+export { default as Union } from "./Union";

src/assets/svgs/index.tsx

@@ -4,7 +4,6 @@ export { default as ButtonDelete24 } from "./ButtonDelete24";
 export { default as CarouselPartInactive } from "./CarouselPartInactive";
 export { default as Empty } from "./Empty";
 export { default as IcHamburgar } from "./IcHamburgar";
-export { default as IcOutlinePlace } from "./IcOutlinePlace";
 export { default as IcomCopy } from "./IcomCopy";
 export { default as IconArrowDown } from "./IconArrowDown";
 export { default as IconArrowLeft } from "./IconArrowLeft";
@@ -14,6 +13,7 @@ export { default as IconBnk } from "./IconBnk";
 export { default as IconCalendar } from "./IconCalendar";
 export { default as IconCamera } from "./IconCamera";
 export { default as IconCheck } from "./IconCheck";
+export { default as IconCheckboxDisabledOn } from "./IconCheckboxDisabledOn";
 export { default as IconCheckboxSelectedOn } from "./IconCheckboxSelectedOn";
 export { default as IconCheckboxUnselectedOn } from "./IconCheckboxUnselectedOn";
 export { default as IconChecked } from "./IconChecked";
@@ -55,6 +55,7 @@ export { default as IconToss } from "./IconToss";
 export { default as IconWoochaegook } from "./IconWoochaegook";
 export { default as IconWoori } from "./IconWoori";
 export { default as IconXButton } from "./IconXButton";
+export { default as IcOutlinePlace } from "./IcOutlinePlace";
 export { default as NotFoundAsset } from "./NotFoundAsset";
 export { default as Subtract } from "./Subtract";
-export { default as Union } from "./Union";
+export { default as Union } from "./Union";

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>