refactor: 64자리 PK 도입에 따른 프론트엔드에서의 타입 수정(number -> string)

frontend/src/api/member/memberTypes.ts

@@ -1,5 +1,5 @@
 export interface MemberRetrieveResponse {
-    id: number;
+    id: string;
     name: string;
 }
 
@@ -14,6 +14,6 @@ export interface SignupRequest {
 }
 
 export interface SignupResponse {
-    id: number;
+    id: string;
     name: string;
 }

frontend/src/api/reservation/reservationAPI.ts

@@ -30,7 +30,7 @@ export const searchReservations = async (params: ReservationSearchQuery): Promis
 };
 
 // DELETE /reservations/{id}
-export const cancelReservationByAdmin = async (id: number): Promise<void> => {
+export const cancelReservationByAdmin = async (id: string): Promise<void> => {
     return await apiClient.del(`/reservations/${id}`, true);
 };
 
@@ -55,16 +55,16 @@ export const createWaiting = async (data: WaitingCreateRequest): Promise<Reserva
 };
 
 // DELETE /reservations/waiting/{id}
-export const cancelWaiting = async (id: number): Promise<void> => {
+export const cancelWaiting = async (id: string): Promise<void> => {
     return await apiClient.del(`/reservations/waiting/${id}`, true);
 };
 
 // POST /reservations/waiting/{id}/confirm
-export const confirmWaiting = async (id: number): Promise<void> => {
+export const confirmWaiting = async (id: string): Promise<void> => {
     return await apiClient.post(`/reservations/waiting/${id}/confirm`, {}, true);
 };
 
 // POST /reservations/waiting/{id}/reject
-export const rejectWaiting = async (id: number): Promise<void> => {
+export const rejectWaiting = async (id: string): Promise<void> => {
     return await apiClient.post(`/reservations/waiting/${id}/reject`, {}, true);
 };

frontend/src/api/reservation/reservationTypes.ts

@@ -14,7 +14,7 @@ export type ReservationStatus =
     | typeof ReservationStatus.WAITING;
 
 export interface MyReservationRetrieveResponse {
-    id: number;
+    id: string;
     themeName: string;
     date: string;
     time: string;
@@ -29,7 +29,7 @@ export interface MyReservationRetrieveListResponse {
 }
 
 export interface ReservationRetrieveResponse {
-    id: number;
+    id: string;
     date: string;
     member: MemberRetrieveResponse;
     time: TimeRetrieveResponse;
@@ -43,15 +43,15 @@ export interface ReservationRetrieveListResponse {
 
 export interface AdminReservationCreateRequest {
     date: string;
-    timeId: number;
-    themeId: number;
-    memberId: number;
+    timeId: string;
+    themeId: string;
+    memberId: string;
 }
 
 export interface ReservationCreateWithPaymentRequest {
     date: string;
-    timeId: number;
-    themeId: number;
+    timeId: string;
+    themeId: string;
     paymentKey: string;
     orderId: string;
     amount: number;
@@ -60,13 +60,13 @@ export interface ReservationCreateWithPaymentRequest {
 
 export interface WaitingCreateRequest {
     date: string;
-    timeId: number;
-    themeId: number;
+    timeId: string;
+    themeId: string;
 }
 
 export interface ReservationSearchQuery {
-    themeId?: number;
-    memberId?: number;
+    themeId?: string;
+    memberId?: string;
     dateFrom?: string;
     dateTo?: string;
 }

frontend/src/api/theme/themeAPI.ts

@@ -13,6 +13,6 @@ export const mostReservedThemes = async (count: number = 10): Promise<ThemeRetri
     return await apiClient.get<ThemeRetrieveListResponse>(`/themes/most-reserved-last-week?count=${count}`, false);
 };
 
-export const delTheme = async (id: number): Promise<void> => {
+export const delTheme = async (id: string): Promise<void> => {
     return await apiClient.del(`/themes/${id}`, true);
 };

frontend/src/api/theme/themeTypes.ts

@@ -5,14 +5,14 @@ export interface ThemeCreateRequest {
 }
 
 export interface ThemeCreateResponse {
-    id: number;
+    id: string;
     name: string;
     description: string;
     thumbnail: string;
 }
 
 export interface ThemeRetrieveResponse {
-    id: number;
+    id: string;
     name: string;
     description: string;
     thumbnail: string;

frontend/src/api/time/timeAPI.ts

@@ -9,10 +9,10 @@ export const fetchTimes = async (): Promise<TimeRetrieveListResponse> => {
     return await apiClient.get<TimeRetrieveListResponse>('/times', true);
 };
 
-export const delTime = async (id: number): Promise<void> => {
+export const delTime = async (id: string): Promise<void> => {
     return await apiClient.del(`/times/${id}`, true);
 };
 
-export const fetchTimesWithAvailability = async (date: string, themeId: number): Promise<TimeWithAvailabilityListResponse> => {
+export const fetchTimesWithAvailability = async (date: string, themeId: string): Promise<TimeWithAvailabilityListResponse> => {
     return await apiClient.get<TimeWithAvailabilityListResponse>(`/times/search?date=${date}&themeId=${themeId}`, true);
 };

frontend/src/api/time/timeTypes.ts

@@ -3,12 +3,12 @@ export interface TimeCreateRequest {
 }
 
 export interface TimeCreateResponse {
-    id: number;
+    id: string;
     startAt: string;
 }
 
 export interface TimeRetrieveResponse {
-    id: number;
+    id: string;
     startAt: string;
 }
 
@@ -17,7 +17,7 @@ export interface TimeRetrieveListResponse {
 }
 
 export interface TimeWithAvailabilityResponse {
-    id: number;
+    id: string;
     startAt: string;
     isAvailable: boolean;
 }

frontend/src/pages/MyReservationPage.tsx

@@ -26,11 +26,11 @@ const MyReservationPage: React.FC = () => {
       .catch(handleError);
   }, []);
 
-  const _cancelWaiting = (id: number) => {
+  const _cancelWaiting = (id: string) => {
     cancelWaiting(id)
       .then(() => {
         alert('예약 대기가 취소되었습니다.');
-        setReservations(reservations.filter(r => r.id !== id));
+        setReservations(reservations.filter(r => r.id.toString() !== id));
       })
       .catch(handleError);
   };
@@ -74,7 +74,7 @@ const MyReservationPage: React.FC = () => {
               <td>{getStatusText(r.status, r.rank)}</td>
               <td>
                 {r.status === ReservationStatus.WAITING &&
-                  <button className="btn btn-danger" onClick={() => _cancelWaiting(r.id)}>취소</button>}
+                  <button className="btn btn-danger" onClick={() => _cancelWaiting(r.id.toString())}>취소</button>}
               </td>
               <td>{r.paymentKey}</td>
               <td>{r.amount}</td>

frontend/src/pages/ReservationPage.tsx

@@ -18,9 +18,9 @@ declare global {
 const ReservationPage: React.FC = () => {
     const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
     const [themes, setThemes] = useState<ThemeRetrieveResponse[]>([]);
-    const [selectedTheme, setSelectedTheme] = useState<number | null>(null);
+    const [selectedTheme, setSelectedTheme] = useState<string | null>(null);
     const [times, setTimes] = useState<TimeWithAvailabilityResponse[]>([]);
-    const [selectedTime, setSelectedTime] = useState<{ id: number, isAvailable: boolean } | null>(null);
+    const [selectedTime, setSelectedTime] = useState<{ id: string, isAvailable: boolean } | null>(null);
     const paymentWidgetRef = useRef<any>(null);
     const paymentMethodsRef = useRef<any>(null);
     const navigate = useNavigate();

frontend/src/pages/admin/ReservationPage.tsx

@@ -90,7 +90,7 @@ const AdminReservationPage: React.FC = () => {
             .catch(handleError);
     };
 
-    const deleteReservation = async(id: number) => {
+    const deleteReservation = async(id: string) => {
         if (!window.confirm('정말 삭제하시겠어요?')) {
             return;
         }

frontend/src/pages/admin/ThemePage.tsx

@@ -49,7 +49,7 @@ const AdminThemePage: React.FC = () => {
             .catch(handleError);
     }
 
-    const deleteTheme = async (id: number) => {
+    const deleteTheme = async (id: string) => {
         if (!window.confirm('정말 삭제하시겠어요?')) {
             return;
         }

frontend/src/pages/admin/TimePage.tsx

@@ -62,7 +62,7 @@ const AdminTimePage: React.FC = () => {
             .catch(handleError);
     };
 
-    const deleteTime = async (id: number) => {
+    const deleteTime = async (id: string) => {
         if (!window.confirm('정말 삭제하시겠어요?')) {
             return;
         }

frontend/src/pages/admin/WaitingPage.tsx

@@ -29,7 +29,7 @@ const AdminWaitingPage: React.FC = () => {
         fetchData();
     }, []);
 
-    const approveWaiting = async (id: number) => {
+    const approveWaiting = async (id: string) => {
         await confirmWaiting(id)
             .then(() => {
                 alert('대기 중인 예약을 승인했어요. 결제는 별도로 진행해주세요.');
@@ -38,7 +38,7 @@ const AdminWaitingPage: React.FC = () => {
             .catch(handleError);
     };
 
-    const denyWaiting = async (id: number) => {
+    const denyWaiting = async (id: string) => {
         await rejectWaiting(id)
             .then(() => {
                 alert('대기 중인 예약을 거절했어요.');

src/main/resources/test.http

@@ -0,0 +1,4 @@
+### GET request to example server
+POST localhost:8080/savetest
+
+###