Merge pull request #35 from next-engineer/feature/30-api

Feature/30 api

Author: Mminzy22

src/App.tsx

@@ -23,9 +23,11 @@ import MyMatchesPage from './pages/MyMatchesPage';
 import CreateMatchPage from './pages/CreateMatchPage';
 
 export default function App() {
+  const { syncFromStorage } = useAuthStore();
+
   useEffect(() => {
-    useAuthStore.getState().syncFromStorage();
-  }, []);
+    syncFromStorage();
+  }, [syncFromStorage]);
 
   return (
     <BrowserRouter>
@@ -39,6 +41,7 @@ export default function App() {
           <Route path="/home" element={<HomePage />} />
           <Route path="/notfound" element={<NotFoundPage />} />
           <Route path="/matches" element={<MatchesPage />} />
+          <Route path="/unauthorized" element={<NotFoundPage />} />
 
           {/* 로그인하지 않은 사용자만 접근 가능 */}
           <Route
@@ -57,13 +60,6 @@ export default function App() {
               </PublicOnlyRoute>
             }
           />
-          {/* <Route 
-            path="/auth/callback" 
-            element={
-              <ProtectedRoute>
-                <AuthCallbackPage />
-              </ProtectedRoute>} 
-          /> */}
 
           {/* 로그인한 사용자만 접근 가능 */}
           <Route
@@ -75,7 +71,7 @@ export default function App() {
             }
           />
           <Route
-            path="/mymatches"
+            path="/matches/me"
             element={
               <ProtectedRoute>
                 <MyMatchesPage />
@@ -85,7 +81,7 @@ export default function App() {
 
           {/* 관리자만 접근 가능 */}
           <Route
-            path="/createMatch"
+            path="/admin/matches/new"
             element={
               <AdminRoute>
                 <CreateMatchPage />

src/api/axiosInstance.ts

@@ -1,9 +1,8 @@
-// src/api/axiosInstance.ts
 import axios, { AxiosError } from 'axios';
 import type { AxiosResponse, InternalAxiosRequestConfig } from 'axios';
 import { useAuthStore } from '../store/useAuthStore';
 
-// --- 기본 설정 & 환경 변수 검증 ---
+// 기본 환경 변수와 설정
 const baseURL = import.meta.env.VITE_API_BASE_URL as string | undefined;
 if (!baseURL) {
   throw new Error('VITE_API_BASE_URL environment variable is required');
@@ -15,7 +14,7 @@ export const api = axios.create({
   timeout: 10000,
 });
 
-// --- 유틸들 ---
+// 토큰 관리 함수
 function getAccessToken(): string | null {
   const { tokens } = useAuthStore.getState();
   return tokens?.accessToken ?? localStorage.getItem('access_token');
@@ -26,50 +25,32 @@ function getIdToken(): string | null {
   return tokens?.idToken ?? localStorage.getItem('id_token');
 }
 
-function toAbsoluteURL(url?: string, cfgBaseURL?: string): URL | null {
-  if (!url) return null;
-  try {
-    return new URL(url); // 절대 URL
-  } catch {
-    try {
-      return new URL(url, cfgBaseURL ?? baseURL); // 상대 → 절대
-    } catch {
-      return null;
-    }
-  }
-}
-
-const SKIP_AUTH_PATHS = ['/auth/refresh', '/auth/logout', '/health'];
+// 인증이 필요하지 않은 경로
+const SKIP_AUTH_PATHS = ['/', '/auth/refresh', '/auth/logout', '/health'];
 
 function shouldSkipAuth(config: InternalAxiosRequestConfig): boolean {
-  // 사용자가 직접 Authorization을 준 경우 존중
-  const hasAuthHeader =
-    (config.headers?.Authorization as string | undefined) ??
-    (config.headers as Record<string, unknown> | undefined)?.authorization;
+  // Authorization 헤더가 이미 있으면 스킵
+  const hasAuthHeader = config.headers?.Authorization || config.headers?.authorization;
   if (hasAuthHeader) return true;
 
-  const reqUrl = toAbsoluteURL(config.url, config.baseURL ?? baseURL);
-  if (!reqUrl) return false;
-
-  // baseURL과 동일한 오리진에만 토큰 부착
-  const base = new URL(baseURL!);
-  if (reqUrl.origin !== base.origin) return true;
-
-  // baseURL에 path prefix가 있는 경우(예: https://host/api) 그 하위 경로만 적용
-  if (!reqUrl.pathname.startsWith(base.pathname)) return true;
-
-  // 스킵 리스트 적용 (base pathname 이후의 상대 경로 기준)
-  const relPath = reqUrl.pathname.slice(base.pathname.length) || '/';
-  return SKIP_AUTH_PATHS.some((p) => relPath.startsWith(p));
+  // 스킵 경로 확인
+  const url = config.url || '';
+  return SKIP_AUTH_PATHS.some((path) => url.startsWith(path));
 }
 
+// 로그 함수들 (토큰 마스킹)
 function safeRequestLog(config: InternalAxiosRequestConfig) {
   if (!DEBUG) return;
   const headers = { ...(config.headers as Record<string, unknown>) };
   if ('Authorization' in headers) headers.Authorization = 'Bearer ***';
   if ('authorization' in headers) headers.authorization = 'Bearer ***';
   if ('X-ID-Token' in headers) headers['X-ID-Token'] = '***';
   if ('x-id-token' in headers) headers['x-id-token'] = '***';
+  console.log('API Request:', {
+    method: config.method?.toUpperCase(),
+    url: config.url,
+    headers,
+  });
 }
 
 function safeResponseLog(res: AxiosResponse) {
@@ -91,41 +72,45 @@ function safeErrorLog(err: AxiosError) {
   });
 }
 
-// --- 인터셉터들 ---
-// Request: Bearer 자동 부착(+ 안전 로깅)
+// Request 인터셉터 - 자동 토큰 부착
 api.interceptors.request.use((config) => {
   if (!shouldSkipAuth(config)) {
-    const token = getAccessToken();
-    if (token) {
+    const accessToken = getAccessToken();
+    const idToken = getIdToken();
+
+    if (accessToken) {
       config.headers = config.headers ?? {};
-      (config.headers as Record<string, string>).Authorization = `Bearer ${token}`;
+      config.headers.Authorization = `Bearer ${accessToken}`;
     }
-    const idToken = getIdToken();
+
     if (idToken) {
       config.headers = config.headers ?? {};
-      (config.headers as Record<string, string>)['X-ID-Token'] = idToken;
+      config.headers['X-ID-Token'] = idToken;
     }
   }
+
   safeRequestLog(config);
   return config;
 });
 
-// Response: 공통 로깅 + 401 처리(토큰 정리)
+// Response 인터셉터 - 401 에러 처리
 api.interceptors.response.use(
-  (res) => {
-    safeResponseLog(res);
-    return res;
+  (response) => {
+    safeResponseLog(response);
+    return response;
   },
-  (err: AxiosError) => {
-    if (err.response?.status === 401) {
-      // 토큰 정리
+  (error: AxiosError) => {
+    safeErrorLog(error);
+
+    // 401 에러 시 토큰 정리
+    if (error.response?.status === 401) {
       const { clearTokens } = useAuthStore.getState();
-      if (clearTokens) clearTokens();
+      clearTokens?.();
       localStorage.removeItem('access_token');
       localStorage.removeItem('id_token');
       localStorage.removeItem('refresh_token');
     }
-    safeErrorLog(err);
-    return Promise.reject(err);
+
+    return Promise.reject(error);
   },
 );

src/api/matchApi.ts

@@ -1,57 +1,48 @@
 import { api } from './axiosInstance';
-import type { Match, CreateMatchRequest, MatchParticipant } from '../types';
+import type {
+  Match,
+  CreateMatchRequest,
+  MatchParticipant,
+  MatchInfo,
+  MyMatchesResponse,
+} from '../types';
 
-// API: GET /api/matches
-// (Authorization: Bearer <access_token>)
+// GET /api/matches - 전체 매치 조회
 export async function fetchAllMatches(): Promise<Match[]> {
-  const { data } = await api.get<Match[]>('/api/matches');
+  const { data } = await api.get<Match[]>('matches');
   return data;
 }
 
-// API: GET /api/matches/me
-// (Authorization: Bearer <access_token>)
-export async function fetchMyMatches(): Promise<{
-  items: Match[];
-  page: number;
-  size: number;
-  total: number;
-}> {
-  const { data } = await api.get('/api/matches/me');
-  return data;
+// GET /api/matches/me - 내 참여 매치 조회
+export async function fetchMyMatches(): Promise<MatchInfo[]> {
+  const { data } = await api.get<MyMatchesResponse>('matches/me');
+  return data.matches;
 }
 
-// API: POST /api/matches
-// (Authorization: Bearer <access_token>)
+// POST /api/matches - 매치 생성 (관리자)
 export async function createMatch(matchData: CreateMatchRequest): Promise<Match> {
-  const { data } = await api.post<Match>('/api/matches', matchData);
+  const { data } = await api.post<Match>('matches', matchData);
   return data;
 }
 
-// API: POST /api/matches/{matchId}/participants
-// (Authorization: Bearer <access_token>)
+// POST /api/matches/{matchId}/participants - 매치 참여 (일반 사용자)
 export async function joinMatch(matchId: number): Promise<MatchParticipant> {
-  const { data } = await api.post<MatchParticipant>(`/api/matches/${matchId}/participants`, {});
+  const { data } = await api.post<MatchParticipant>(`matches/${matchId}/participants`);
   return data;
 }
 
-// API: DELETE /api/matches/{matchId}/participants
-// (Authorization: Bearer <access_token>)
+// DELETE /api/matches/{matchId}/participants - 매치 참여 취소 (일반 사용자)
 export async function leaveMatch(matchId: number): Promise<void> {
-  await api.delete(`/api/matches/${matchId}/participants`);
+  await api.delete(`matches/${matchId}/participants`);
 }
 
-// API: DELETE /api/matches/{matchId}
-// (Authorization: Bearer <access_token>)
+// DELETE /api/matches/{matchId} - 매치 삭제 (관리자)
 export async function deleteMatch(matchId: number): Promise<void> {
-  await api.delete(`/api/matches/${matchId}`);
+  await api.delete(`matches/${matchId}`);
 }
 
-// API: PUT /api/matches/{matchId}/status
-// (Authorization: Bearer <access_token>)
-export async function updateMatchStatus(
-  matchId: number,
-  status: Match['matchStatus'],
-): Promise<Match> {
-  const { data } = await api.put<Match>(`/api/matches/${matchId}/status`, { status });
+// GET /api/matches/{matchId}/participants - 매칭 참가자 조회 (관리자)
+export async function fetchMatchParticipants(matchId: number): Promise<MatchParticipant[]> {
+  const { data } = await api.get<MatchParticipant[]>(`matches/${matchId}/participants`);
   return data;
 }

src/api/userApi.ts

@@ -5,7 +5,30 @@ export async function postUserMe(): Promise<void> {
   await api.post('users/signin-up', null);
 }
 
-export async function getMyProfile(): Promise<User> {
+// GET /api/users/me - 내 프로필 조회
+export async function fetchUserProfile(): Promise<User> {
   const { data } = await api.get<User>('users/me');
   return data;
 }
+
+// PUT /api/users/me - 프로필 수정
+export async function updateUserProfile(profileData: Partial<User>): Promise<User> {
+  const { data } = await api.put<User>('users/me', profileData);
+  return data;
+}
+
+// POST /api/uploads/profile-image - 프로필 이미지 업로드
+export async function uploadProfileImage(formData: FormData): Promise<{ url: string }> {
+  const { data } = await api.post<{ url: string }>('uploads/profile-image', formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+  });
+  return data;
+}
+
+// PUT /api/users/me - 랭크 업데이트 (별도 함수로 분리)
+export async function updateUserRank(rank: string): Promise<User> {
+  const { data } = await api.put<User>('users/me', { rank });
+  return data;
+}

src/auth/callback.ts

@@ -1,6 +1,6 @@
 import { COGNITO } from './config';
 import { useAuthStore } from '../store/useAuthStore';
-import { postUserMe, getMyProfile } from '../api/userApi';
+import { fetchUserProfile, postUserMe } from '../api/userApi';
 
 export type TokenResponse = {
   id_token: string;
@@ -57,7 +57,7 @@ export async function handleAuthCallback(): Promise<TokenResponse | null> {
 
   try {
     await postUserMe();
-    const me = await getMyProfile();
+    const me = await fetchUserProfile();
     useAuthStore.getState().setUser(me);
   } catch (e) {
     console.error('[callback] user sync failed', e);

src/components/AppLayout.tsx

@@ -53,7 +53,7 @@ export default function AppLayout() {
 
   const navigationItems = [
     { label: '전체 매칭', path: '/matches', icon: '⚽' },
-    ...(user?.role === 'USER' ? [{ label: '내 매칭', path: '/matches/mine', icon: '📋' }] : []),
+    ...(user?.role === 'USER' ? [{ label: '내 매칭', path: '/matches/me', icon: '📋' }] : []),
     ...(user?.role === 'ADMIN'
       ? [{ label: '매칭 개설', path: '/admin/matches/new', icon: '➕' }]
       : []),