Merge pull request TEAM-BEAT#228 from TEAM-BEAT/feat/TEAM-BEAT#215/PresignedUrl

[Feat/TEAM-BEAT#215] presigned url 및 공연 등록 API 추가

Author: pepperdad

package.json

@@ -39,6 +39,7 @@
     "lottie-react": "^2.4.0",
     "postcss": "^8.4.38",
     "postcss-scss": "^4.0.9",
+    "qs": "^6.12.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-lottie-player": "^2.0.0",
@@ -65,6 +66,7 @@
     "@storybook/react-vite": "^8.1.11",
     "@storybook/test": "^8.1.11",
     "@types/prettier-linter-helpers": "^1",
+    "@types/qs": "^6",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/shelljs": "^0",

src/apis/domains/files/api.ts

@@ -0,0 +1,68 @@
+import { get } from "@apis/index";
+import axios, { AxiosResponse } from "axios";
+import qs from "qs";
+
+interface ImageInterface {
+  [key: string]: string;
+}
+
+export interface PresignedResponse {
+  poster: ImageInterface;
+  cast: ImageInterface;
+  staff: ImageInterface;
+}
+
+export interface GetPresignedUrlParams {
+  posterImage: string;
+  castImages: string[];
+  staffImages: string[];
+}
+
+export const getPresignedUrl = async (
+  params: GetPresignedUrlParams
+): Promise<PresignedResponse | null> => {
+  try {
+    const paramsWithEmptyArrays = {
+      ...params,
+      castImages: params.castImages.length === 0 ? [""] : params.castImages,
+      staffImages: params.staffImages.length === 0 ? [""] : params.staffImages,
+    };
+
+    const response: AxiosResponse<PresignedResponse> = await get("/files/presigned-url", {
+      params: paramsWithEmptyArrays,
+      paramsSerializer: (params) => {
+        const queryString = qs.stringify(params, { arrayFormat: "repeat" });
+
+        const modifiedQueryString = queryString
+          .replace(/castImages=%5B%5D/g, "castImages")
+          .replace(/staffImages=%5B%5D/g, "staffImages");
+        return modifiedQueryString;
+      },
+    });
+
+    return response.data;
+  } catch (error) {
+    console.error("error", error);
+    return null;
+  }
+};
+
+export interface PutImageUploadParams {
+  url: string;
+  file: File;
+}
+
+export const putS3ImageUpload = async ({ url, file }: PutImageUploadParams) => {
+  try {
+    const response = await axios.put(url, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    });
+
+    return response;
+  } catch (err) {
+    console.error(err);
+  }
+  return null;
+};

src/apis/domains/files/queries.ts

@@ -0,0 +1,26 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import {
+  getPresignedUrl,
+  GetPresignedUrlParams,
+  PresignedResponse,
+  PutImageUploadParams,
+  putS3ImageUpload,
+} from "./api";
+
+const QUERY_KEY = {
+  PRESIGNED_URL: "presignedURL",
+};
+
+export const useGetPresignedUrl = (params: GetPresignedUrlParams) => {
+  return useQuery<PresignedResponse>({
+    queryKey: [QUERY_KEY.PRESIGNED_URL],
+    queryFn: () => getPresignedUrl(params),
+    enabled: false,
+  });
+};
+
+export const usePutS3Upload = () => {
+  return useMutation({
+    mutationFn: ({ url, file }: PutImageUploadParams) => putS3ImageUpload({ url, file }),
+  });
+};

src/apis/domains/home/queries.ts

@@ -1,14 +1,14 @@
 import { useQuery } from "@tanstack/react-query";
 import { getAllScheduleList } from "./api";
 
-const QUERY_KEY = {
+export const HOME_QUERY_KEY = {
   LIST: "list",
 };
 
 // 2. 쿼리 작성
 export const useGetAllScheduleList = () => {
   return useQuery({
-    queryKey: [QUERY_KEY.LIST],
+    queryKey: [HOME_QUERY_KEY.LIST],
     queryFn: () => getAllScheduleList(), // API 요청 함수
     staleTime: 1000 * 60 * 60,
     gcTime: 1000 * 60 * 60 * 24,

src/apis/domains/performance/api.ts

@@ -1,4 +1,4 @@
-import { get } from "@apis/index";
+import { get, post } from "@apis/index";
 import { components } from "@typings/api/schema";
 import { ApiResponseType } from "@typings/commonType";
 import axios, { AxiosResponse } from "axios";
@@ -62,3 +62,17 @@ export const getScheduleAvailable = async (
     return -1;
   }
 };
+
+export type PerformanceResponse = components["schemas"]["PerformanceResponse"];
+
+export const postPerformance = async (formData): Promise<PerformanceResponse | number> => {
+  try {
+    const response = await post("/performances", formData);
+
+    return response.data;
+  } catch (error) {
+    console.error("error", error);
+
+    return null;
+  }
+};

src/apis/domains/performance/queries.ts

@@ -1,5 +1,14 @@
-import { useQuery } from "@tanstack/react-query";
-import { getBookingPerformanceDetail, getPerformanceDetail, getScheduleAvailable } from "./api";
+import { SHOW_TYPE_KEY } from "@pages/gig/constants";
+import { QueryClient, useMutation, useQuery } from "@tanstack/react-query";
+import { Dayjs } from "dayjs";
+import { useNavigate } from "react-router-dom";
+import { HOME_QUERY_KEY } from "../home/queries";
+import {
+  getBookingPerformanceDetail,
+  getPerformanceDetail,
+  getScheduleAvailable,
+  postPerformance,
+} from "./api";
 
 export const QUERY_KEY = {
   DETAIL: "detail",
@@ -31,3 +40,67 @@ export const useGetScheduleAvailable = (scheduleId: number, purchaseTicketCount:
     enabled: false,
   });
 };
+
+interface PerformanceFormData {
+  posterImage: string;
+  castList: {
+    castPhoto: string;
+    castName: string;
+    castRole: string;
+  }[];
+  staffList: {
+    staffPhoto: string;
+    staffName: string;
+    staffRole: string;
+  }[];
+  performanceTitle: string;
+  genre: SHOW_TYPE_KEY;
+  runningTime: number | null;
+  performanceDescription: string;
+  performanceAttentionNote: string;
+  bankName: string;
+  accountNumber: string;
+  accountHolder: string;
+  performanceTeamName: string;
+  performanceVenue: string;
+  performanceContact: string;
+  performancePeriod: string;
+  ticketPrice: number | null;
+  totalScheduleCount: number;
+  scheduleList: {
+    performanceDate: Dayjs | Date | null | string;
+    totalTicketCount: number | null;
+    scheduleNumber: string;
+  }[];
+}
+
+interface PerformanceResponse {
+  status: number;
+  data: {
+    performanceId: number;
+  };
+}
+
+const isPerformanceResponse = (res: any): res is PerformanceResponse => {
+  return res && typeof res === "object" && "status" in res && "data" in res;
+};
+
+export const usePostPerformance = () => {
+  const queryClient = new QueryClient();
+  const navigate = useNavigate();
+
+  return useMutation({
+    mutationFn: (formData: PerformanceFormData) => postPerformance(formData),
+    onSuccess: (res) => {
+      queryClient.invalidateQueries({ queryKey: [HOME_QUERY_KEY.LIST] });
+
+      if (isPerformanceResponse(res) && res.status === 201) {
+        navigate("/register-complete", {
+          state: { performanceId: res.data.performanceId },
+        });
+      } else {
+        console.error("Unexpected response type", res);
+      }
+    },
+  });
+};

src/apis/index.ts

@@ -1,11 +1,25 @@
 import axios from "axios";
 
+const getAccessToken = (): string | null => {
+  const user = localStorage.getItem("user");
+  if (user) {
+    try {
+      const userObj = JSON.parse(user);
+      return userObj.accessToken || "";
+    } catch (error) {
+      console.error("Failed to parse user from localStorage", error);
+      return "";
+    }
+  }
+  return "";
+};
+
 export const instance = axios.create({
   baseURL: import.meta.env.VITE_API_BASE_URL,
   withCredentials: true,
 
   headers: {
-    Authorization: `Bearer ${localStorage.getItem("accessToken") || ""}`,
+    Authorization: `Bearer ${getAccessToken()}`,
   },
 });
 

src/components/commons/label/Label.styled.ts

@@ -15,7 +15,7 @@ export const CountLabel = styled(Subtract)`
 export const CountDueDate = styled.div`
   position: absolute;
   width: 3.6rem;
-  margin: 1.3rem 0 0 0.6rem;
+  margin: 1.3rem 0 0 ;
 
   color: ${({ theme }) => theme.colors.pink_400};
 

src/constants/bankList.ts

@@ -19,7 +19,7 @@ import {
 export const BANK_LIST = [
   {
     id: 1,
-    name: "NH_NONHYUP",
+    name: "NH_NONGHYUP",
     nameKr: "NH농협",
     bankImg: IconNonghyup,
   },

src/hooks/useTokenRefresher.tsx

@@ -1,15 +1,19 @@
 import { instance } from "@apis/index";
 import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
+import useModal from "./useModal";
 
+// TODO: 추후 수정
 export default function TokenRefresher() {
   const navigate = useNavigate();
+  const { openAlert } = useModal();
 
   useEffect(() => {
     const interceptor = instance.interceptors.response.use(
       // 성공적인 응답 처리
+
       (response) => {
-        console.log("Starting Request", response);
+        // console.log("Starting Request", response);
         return response;
       },
       async (error) => {
@@ -56,7 +60,8 @@ export default function TokenRefresher() {
           else {
             localStorage.clear();
             navigate("/main");
-            alert("토큰이 만료되어 자동으로 로그아웃 되었습니다.");
+
+            openAlert({ title: "토큰이 만료되어 자동으로 로그아웃 되었습니다." });
           }
         } else if (status === 400 || status === 404 || status === 409) {
           console.log("hi3");