#121 refactor(architecture): Global Layout, Route Guard, Query Key Factory, 타입 분리 아키텍처 리팩토링

src/api/auth.ts → src/api/auth/auth.ts

@@ -1,7 +1,7 @@
 // 로그인, 정보 조회를 위한 API 호출 함수 정의
-import type { User } from "../store/authStore";
-import { authedJSON, publicJSON } from "../lib/apiClient.ts";
-import { LoginResponse } from "../types/ApiDataTypes.ts";
+import type { User } from "../../store/authStore";
+import { authedJSON, publicJSON } from "../../lib/apiClient.ts";
+import { LoginResponse } from "../../types/ApiDataTypes.ts";
 
 const apiUrl = process.env.BACKEND_SRT_API;
 

src/api/confirmPayment.ts → src/api/payment/confirmPayment.ts

@@ -1,5 +1,5 @@
-import { authedJSON } from "../lib/apiClient.ts";
-import { ConfirmPaymentResponse } from "../types/ApiDataTypes.ts";
+import { authedJSON } from "../../lib/apiClient.ts";
+import { ConfirmPaymentResponse } from "../../types/ApiDataTypes.ts";
 
 const apiUrl = process.env.BACKEND_PAYMENT_API;
 

src/api/ReviewLikes.ts → src/api/performance/ReviewLikes.ts

@@ -1,4 +1,4 @@
-import { authedJSON } from "../lib/apiClient.ts";
+import { authedJSON } from "../../lib/apiClient.ts";
 
 const apiUrl = process.env.BACKEND_SRT_API;
 

src/api/performance.ts → src/api/performance/performance.ts

@@ -1,5 +1,5 @@
-import { publicJSON } from "../lib/apiClient.ts";
-import { PerformanceData } from "../types/ApiDataTypes.ts";
+import { publicJSON } from "../../lib/apiClient.ts";
+import { PerformanceData } from "../../types/ApiDataTypes.ts";
 
 const apiUrl = process.env.BACKEND_SRT_API;
 

src/api/performanceDetail.ts → src/api/performance/performanceDetail.ts

@@ -1,5 +1,5 @@
-import { PerformanceDetailData } from "../types/ApiDataTypes.ts";
-import { authedJSON } from "../lib/apiClient.ts";
+import { PerformanceDetailData } from "../../types/ApiDataTypes.ts";
+import { authedJSON } from "../../lib/apiClient.ts";
 
 const apiUrl = process.env.BACKEND_SRT_API;
 

src/api/performanceReview.ts → src/api/performance/performanceReview.ts

@@ -1,5 +1,5 @@
-import { authedJSON } from "../lib/apiClient.ts";
-import { reviewData } from "../types/ApiDataTypes.ts";
+import { authedJSON } from "../../lib/apiClient.ts";
+import { reviewData } from "../../types/ApiDataTypes.ts";
 
 const apiUrl = process.env.BACKEND_SRT_API;
 

src/api/popularPerformance.ts → src/api/performance/popularPerformance.ts

@@ -1,5 +1,5 @@
-import { PopularPerformanceData } from "../types/ApiDataTypes.ts";
-import { publicJSON } from "../lib/apiClient.ts";
+import { PopularPerformanceData } from "../../types/ApiDataTypes.ts";
+import { publicJSON } from "../../lib/apiClient.ts";
 
 const apiUrl = process.env.BACKEND_SRT_API;
 

src/api/queryKeys.ts

@@ -0,0 +1,31 @@
+// Query Key Factory, 모든 TanStack Query의 queryKey를 중앙 관리
+
+export const performanceKeys = {
+	all: ["performances"] as const,
+	lists: () => [...performanceKeys.all, "list"] as const,
+	list: (size: number) => [...performanceKeys.lists(), size] as const,
+	popular: () => [...performanceKeys.all, "popular"] as const,
+	details: () => [...performanceKeys.all, "detail"] as const,
+	detail: (id: string) => [...performanceKeys.details(), id] as const,
+} as const;
+
+export const reviewKeys = {
+	all: ["reviews"] as const,
+	lists: () => [...reviewKeys.all, "list"] as const,
+	list: (performanceId: string) =>
+		[...reviewKeys.lists(), performanceId] as const,
+} as const;
+
+export const seatKeys = {
+	all: ["seats"] as const,
+	definitions: (stadiumId: string) =>
+		[...seatKeys.all, "definitions", stadiumId] as const,
+	states: (scheduleId: string) =>
+		[...seatKeys.all, "states", scheduleId] as const,
+} as const;
+
+export const paymentKeys = {
+	all: ["payments"] as const,
+	confirm: (reservationId: string) =>
+		[...paymentKeys.all, "confirm", reservationId] as const,
+} as const;

src/api/reservation.ts → src/api/reservation/reservation.ts

@@ -1,8 +1,8 @@
 import {
 	ReservationRequest,
 	ReservationResponse,
-} from "../types/ApiDataTypes.ts";
-import { authedJSON } from "../lib/apiClient.ts";
+} from "../../types/ApiDataTypes.ts";
+import { authedJSON } from "../../lib/apiClient.ts";
 
 const apiUrl = process.env.BACKEND_SRT_API;
 

src/api/seats.ts → src/api/reservation/seats.ts

@@ -1,5 +1,5 @@
-import { authedJSON } from "../lib/apiClient.ts";
-import { selectSeatsData } from "../types/ApiDataTypes.ts";
+import { authedJSON } from "../../lib/apiClient.ts";
+import { selectSeatsData } from "../../types/ApiDataTypes.ts";
 
 const apiUrl = process.env.BACKEND_SRT_API;
 

src/api/seatsStates.ts → src/api/reservation/seatsStates.ts

@@ -1,5 +1,5 @@
-import { seatStateData } from "../types/ApiDataTypes.ts";
-import { authedJSON } from "../lib/apiClient.ts";
+import { seatStateData } from "../../types/ApiDataTypes.ts";
+import { authedJSON } from "../../lib/apiClient.ts";
 
 type Raw = { code: string; data: { seats: seatStateData[] } };
 

src/components/__tests__/reservation/SendSeatsButton.test.tsx

@@ -4,7 +4,7 @@ import sendSeatsData from "../../__mocks__/sendSeatsData.ts";
 import SendSeatsButton from "../../reservation/SendSeatsButton.tsx";
 import useElapsedTime from "../../../hooks/useElapsedTime.ts";
 import "@testing-library/jest-dom";
-import fetchPostReservation from "../../../api/reservation.ts";
+import fetchPostReservation from "../../../api/reservation/reservation.ts";
 
 // useNavigate mocking
 const navigateMock = jest.fn();
@@ -20,7 +20,7 @@ jest.mock("../../../hooks/useElapsedTime.ts", () => ({
 
 const mockedUseElapsedTime = useElapsedTime as jest.Mock;
 
-jest.mock("../../../api/reservation.ts", () => ({
+jest.mock("../../../api/reservation/reservation.ts", () => ({
 	__esModule: true,
 	default: jest.fn().mockReturnValue({ id: "reservation-1" }),
 }));

src/components/layout/GlobalLayout.tsx

@@ -0,0 +1,17 @@
+// 전역 레이아웃: Header + 페이지 콘텐츠(Outlet) + Footer를 자동 적용
+// React Router의 Layout Route 패턴을 활용하여, 하위 Route가 <Outlet /> 위치에 렌더링됨
+import { Outlet } from "react-router-dom";
+import Header from "./Header.tsx";
+import Footer from "./Footer.tsx";
+
+export default function GlobalLayout() {
+	return (
+		<div className="min-h-screen flex flex-col bg-[#FBFBFB]">
+			<Header />
+			<main className="flex-1">
+				<Outlet />
+			</main>
+			<Footer />
+		</div>
+	);
+}

src/components/performance/detail/review/ReviewItem.tsx

@@ -2,7 +2,7 @@
 import { FormEvent, useState } from "react";
 import { reviewList } from "../../../../types/ApiDataTypes.ts";
 import ReviewLikeButton from "./ReviewLikeButton.tsx";
-import fetchReviewLikes from "../../../../api/ReviewLikes.ts";
+import fetchReviewLikes from "../../../../api/performance/ReviewLikes.ts";
 import ReviewRating from "./ReviewRating.tsx";
 import DeleteConfirmModal from "../../../common/DeleteConfirmModal.tsx";
 
@@ -39,7 +39,7 @@
 			setIsEditing(false);
 		} catch (err) {
 			if (err instanceof Error) {
 				alert(err.message);
 			}
 		}
 	};
@@ -50,7 +50,7 @@
 			setShowDeleteModal(false);
 		} catch (err) {
 			if (err instanceof Error) {
 				alert(err.message);
 			}
 		}
 	};

src/components/reservation/SendSeatsButton.tsx

@@ -4,7 +4,7 @@ import {
 	ReservationRequest,
 	ReservationResponse,
 } from "../../types/ApiDataTypes.ts";
-import fetchPostReservation from "../../api/reservation.ts";
+import fetchPostReservation from "../../api/reservation/reservation.ts";
 
 interface SendSeatsButtonProps {
 	performanceId: string;

src/components/reservation/loading/WaitingRoom.tsx

@@ -1,8 +1,9 @@
 import { useQueryClient } from "@tanstack/react-query";
 import { useEffect } from "react";
-import fetchSeats from "../../../api/seats.ts";
+import fetchSeats from "../../../api/reservation/seats.ts";
 import Countdown from "./Countdown.tsx";
-import fetchSeatsStates from "../../../api/seatsStates.ts";
+import fetchSeatsStates from "../../../api/reservation/seatsStates.ts";
+import { seatKeys } from "../../../api/queryKeys.ts";
 
 interface WaitingRoomProps {
 	stadiumId: string;
@@ -27,13 +28,13 @@ export default function WaitingRoom({
 
 			await Promise.all([
 				qc.prefetchQuery({
-					queryKey: ["seats", scheduleId],
+					queryKey: seatKeys.definitions(stadiumId),
 					queryFn: () => fetchSeats(stadiumId),
 					staleTime: 15 * 60 * 1000,
 					cacheTime: 30 * 60 * 1000,
 				}),
 				qc.prefetchQuery({
-					queryKey: ["seatStatus", scheduleId],
+					queryKey: seatKeys.states(scheduleId),
 					queryFn: () => fetchSeatsStates(scheduleId),
 					staleTime: 60 * 1000,
 					cacheTime: 30 * 60 * 1000,

src/hooks/usePerformances.ts

@@ -1,11 +1,12 @@
 import { useInfiniteQuery } from "@tanstack/react-query";
-import fetchPerformances from "../api/performance.ts";
+import fetchPerformances from "../api/performance/performance.ts";
 import { PerformanceData } from "../types/ApiDataTypes.ts";
 import { ApiError } from "../lib/apiClient.ts";
+import { performanceKeys } from "../api/queryKeys.ts";
 
 export default function usePerformances(size = 32) {
 	return useInfiniteQuery<PerformanceData, ApiError>({
-		queryKey: ["performances", size],
+		queryKey: performanceKeys.list(size),
 		queryFn: ({ pageParam = 0 }) => fetchPerformances(pageParam, size),
 		getNextPageParam: (lastPage) => {
 			const { pagination } = lastPage;

src/hooks/useReviews.ts

@@ -5,14 +5,15 @@ import {
 	fetchGetReview,
 	fetchPatchReview,
 	fetchPostReview,
-} from "../api/performanceReview.ts";
+} from "../api/performance/performanceReview.ts";
 import { ApiError } from "../lib/apiClient.ts";
+import { reviewKeys } from "../api/queryKeys.ts";
 
 export default function useReviews(id: string) {
 	const queryClient = useQueryClient();
 
 	const { data, status, error } = useQuery<reviewData, ApiError>({
-		queryKey: ["performanceReviews", id],
+		queryKey: reviewKeys.list(id),
 		queryFn: () => fetchGetReview(id!),
 		enabled: !!id,
 		useErrorBoundary: false,
@@ -25,7 +26,7 @@ export default function useReviews(id: string) {
 		onSubmit: async (content: string, star: number) => {
 			try {
 				await fetchPostReview(id, content, star);
-				queryClient.invalidateQueries({ queryKey: ["performanceReviews", id] });
+				queryClient.invalidateQueries({ queryKey: reviewKeys.list(id) });
 			} catch (err) {
 				if (err && typeof err === "object" && "status" in err) {
 					const apiError = err as { status: number };
@@ -44,21 +45,21 @@ export default function useReviews(id: string) {
 		onEdit: async (reviewId: string, content: string, star: number) => {
 			try {
 				await fetchPatchReview(reviewId, content, star);
-				queryClient.invalidateQueries({ queryKey: ["performanceReviews", id] });
+				queryClient.invalidateQueries({ queryKey: reviewKeys.list(id) });
 			} catch {
 				throw new Error("리뷰 수정 중 오류가 발생했습니다.");
 			}
 		},
 		onDelete: async (reviewId: string) => {
 			try {
 				await fetchDeleteReview(reviewId);
-				queryClient.invalidateQueries({ queryKey: ["performanceReviews", id] });
+				queryClient.invalidateQueries({ queryKey: reviewKeys.list(id) });
 			} catch {
 				throw new Error("리뷰 삭제 중 오류가 발생했습니다.");
 			}
 		},
 		onLikeToggle: () => {
-			queryClient.invalidateQueries({ queryKey: ["performanceReviews", id] });
+			queryClient.invalidateQueries({ queryKey: reviewKeys.list(id) });
 		},
 	};
 }