From 646e3a909fb5e4c9d796968d271822d1d93e58b5 Mon Sep 17 00:00:00 2001
From: nijesmik <bkybb@duck.com>
Date: Mon, 27 Oct 2025 19:53:42 +0900
Subject: [PATCH 1/3] :truck: rename api instance

---
 src/features/auth/api.ts         |  8 ++---
 src/features/game/api.ts         |  4 +--
 src/features/room-setting/api.ts | 14 ++++-----
 src/features/sign-up/api.ts      |  8 ++---
 src/models/collection/api.ts     |  4 +--
 src/models/room/api.ts           |  4 +--
 src/models/user/api.ts           |  4 +--
 src/pages/collection/api.ts      | 16 +++++-----
 src/pages/play/lobby/api.ts      |  6 ++--
 src/pages/play/mode/api.ts       |  6 ++--
 src/pages/ranking/api.ts         |  4 +--
 src/pages/result/api.ts          |  4 +--
 src/pages/settings/api.ts        | 10 +++---
 src/shared/api/axios.ts          | 52 ++------------------------------
 src/shared/api/index.ts          |  2 +-
 15 files changed, 47 insertions(+), 99 deletions(-)

diff --git a/src/features/auth/api.ts b/src/features/auth/api.ts
index 89d24b3b..8390b391 100644
--- a/src/features/auth/api.ts
+++ b/src/features/auth/api.ts
@@ -1,4 +1,4 @@
-import { client } from '@/shared/api';
+import { api } from '@/shared/api';
 
 const setToken = (token: string, status: number) => {
   if (status === 200) {
@@ -15,7 +15,7 @@ const axiosConfig = {
 };
 
 export const loginAsMember = async (account: Account) => {
-  const { data, status } = await client.post<string>(
+  const { data, status } = await api.post<string>(
     `/user/login`,
     account,
     axiosConfig,
@@ -24,14 +24,14 @@ export const loginAsMember = async (account: Account) => {
 };
 
 export const loginAsGuest = async () => {
-  return client
+  return api
     .get<string>('/user/guest', axiosConfig)
     .then(({ data, status }) => setToken(data, status))
     .catch(() => false);
 };
 
 export const checkToken = async () => {
-  const isTokenValid = await client
+  const isTokenValid = await api
     .get<boolean>('/user/token')
     .then(({ data }) => data);
 
diff --git a/src/features/game/api.ts b/src/features/game/api.ts
index 43695b56..f70d11e8 100644
--- a/src/features/game/api.ts
+++ b/src/features/game/api.ts
@@ -1,7 +1,7 @@
-import { client } from '@/shared/api';
+import { api } from '@/shared/api';
 
 export const getGameReady = async () => {
-  return client
+  return api
     .get<GameData>('/ingame/ready')
     .then(({ data }) => data)
     .catch(() => null);
diff --git a/src/features/room-setting/api.ts b/src/features/room-setting/api.ts
index fb3805f5..f426c375 100644
--- a/src/features/room-setting/api.ts
+++ b/src/features/room-setting/api.ts
@@ -1,14 +1,12 @@
-import { client } from '@/shared/api';
+import { api } from '@/shared/api';
 
 export const createRoom = async (setting: RoomSetting) => {
-  return client.post<string>('play/friendly', setting).then(({ data }) => data);
+  return api.post<string>('play/friendly', setting).then(({ data }) => data);
 };
 
 export const updateRoom = async (setting: RoomSetting) => {
-  return client
-    .post<string>('/play/friendly/renew', setting)
-    .then(({ data }) => {
-      console.log('room update:', data);
-      return '';
-    });
+  return api.post<string>('/play/friendly/renew', setting).then(({ data }) => {
+    console.log('room update:', data);
+    return '';
+  });
 };
diff --git a/src/features/sign-up/api.ts b/src/features/sign-up/api.ts
index e74f1df7..fb4fa942 100644
--- a/src/features/sign-up/api.ts
+++ b/src/features/sign-up/api.ts
@@ -1,6 +1,6 @@
 import type { AxiosError } from 'axios';
 
-import { client } from '@/shared/api';
+import { api } from '@/shared/api';
 
 const axiosConfig = {
   headers: {
@@ -10,14 +10,14 @@ const axiosConfig = {
 
 export const checkIdDuplicate = async (id: SignUpForm['id']) => {
   // 중복이 안되면 false. true면 오류
-  return client
+  return api
     .get<boolean>(`/user/dup/${id}`, axiosConfig)
     .then(({ data }) => data)
     .catch(() => true);
 };
 
 export const upgradeToMember = async (formData: SignUpForm) => {
-  return client
+  return api
     .post<string>('/user/guest', formData)
     .then(({ data }) => {
       console.debug(data);
@@ -30,7 +30,7 @@ export const upgradeToMember = async (formData: SignUpForm) => {
 };
 
 export const registerMember = async (formData: SignUpForm) => {
-  return client
+  return api
     .post<string>('/user/signup', formData, axiosConfig)
     .then(({ data, status }) => {
       localStorage.setItem('token', data);
diff --git a/src/models/collection/api.ts b/src/models/collection/api.ts
index d184fc52..b1cddfb3 100644
--- a/src/models/collection/api.ts
+++ b/src/models/collection/api.ts
@@ -1,9 +1,9 @@
 import { COLLECTION_KEY } from './constants';
 
-import { client, queryClient } from '@/shared/api';
+import { api, queryClient } from '@/shared/api';
 
 export const getCollection = async () => {
-  return client.get<Collections>('/collection').then((response) => {
+  return api.get<Collections>('/collection').then((response) => {
     const { data } = response;
     console.debug(data);
     return data;
diff --git a/src/models/room/api.ts b/src/models/room/api.ts
index 5a23c546..3416ee94 100644
--- a/src/models/room/api.ts
+++ b/src/models/room/api.ts
@@ -1,7 +1,7 @@
-import { client } from '@/shared/api';
+import { api } from '@/shared/api';
 
 export const leaveRoom = async () => {
-  return client
+  return api
     .get('/play/friendly/out')
     .then(({ data }) => {
       console.debug('leave room:', data);
diff --git a/src/models/user/api.ts b/src/models/user/api.ts
index 22502af0..3f140b7b 100644
--- a/src/models/user/api.ts
+++ b/src/models/user/api.ts
@@ -1,7 +1,7 @@
-import { client } from '@/shared/api';
+import { api } from '@/shared/api';
 
 export const getUser = async () => {
-  return client.get<User>(`/user`).then((response) => {
+  return api.get<User>(`/user`).then((response) => {
     const { data } = response;
     console.debug('user:', data);
     return data;
diff --git a/src/pages/collection/api.ts b/src/pages/collection/api.ts
index 8b7a007e..af6dc715 100644
--- a/src/pages/collection/api.ts
+++ b/src/pages/collection/api.ts
@@ -1,17 +1,15 @@
-import { client } from '@/shared/api';
+import { api } from '@/shared/api';
 
 export const updateSkin = async (skinId: number) => {
-  return client
-    .patch<string>('/collection/skin', { skinId })
-    .then((response) => {
-      const { data } = response;
-      console.debug(data);
-      return data;
-    });
+  return api.patch<string>('/collection/skin', { skinId }).then((response) => {
+    const { data } = response;
+    console.debug(data);
+    return data;
+  });
 };
 
 export const updateLabel = async (labelId: number) => {
-  return client
+  return api
     .patch<string>('/collection/label', {
       labelId,
     })
diff --git a/src/pages/play/lobby/api.ts b/src/pages/play/lobby/api.ts
index c032eff1..a072f5f7 100644
--- a/src/pages/play/lobby/api.ts
+++ b/src/pages/play/lobby/api.ts
@@ -1,11 +1,11 @@
-import { client } from '@/shared/api';
+import { api } from '@/shared/api';
 
 export const getLobbyInfo = async (roodId: string | undefined) => {
   if (!roodId) {
     return { masterIndex: -1 } as EnteredRoom;
   }
 
-  return client
+  return api
     .get<EnteredRoom>(`/play/friendly/lobby/${roodId}`)
     .then(({ data }) => data)
     .catch((err) => {
@@ -15,5 +15,5 @@ export const getLobbyInfo = async (roodId: string | undefined) => {
 };
 
 export const getReady = async () => {
-  return client.get<string>('/play/friendly/ready');
+  return api.get<string>('/play/friendly/ready');
 };
diff --git a/src/pages/play/mode/api.ts b/src/pages/play/mode/api.ts
index b7ca3b17..830fb273 100644
--- a/src/pages/play/mode/api.ts
+++ b/src/pages/play/mode/api.ts
@@ -1,7 +1,7 @@
-import { client } from '@/shared/api';
+import { api } from '@/shared/api';
 
 export const getMatching = async () => {
-  return client
+  return api
     .get<string>('/play/ranking')
     .then((response) => {
       return response.status === 200;
@@ -13,7 +13,7 @@ export const getMatching = async () => {
 };
 
 export const deleteMatching = async () => {
-  return client
+  return api
     .delete<string>('/play/ranking')
     .then((response) => {
       return response.status === 200;
diff --git a/src/pages/ranking/api.ts b/src/pages/ranking/api.ts
index 079e0d33..e2290d38 100644
--- a/src/pages/ranking/api.ts
+++ b/src/pages/ranking/api.ts
@@ -1,7 +1,7 @@
-import { client } from '@/shared/api';
+import { api } from '@/shared/api';
 
 export const getRank = async () => {
-  return client
+  return api
     .get<{
       refreshTime: string;
       players: Profile[];
diff --git a/src/pages/result/api.ts b/src/pages/result/api.ts
index 74c9d1d5..42192bb6 100644
--- a/src/pages/result/api.ts
+++ b/src/pages/result/api.ts
@@ -1,5 +1,5 @@
-import { client } from '@/shared/api';
+import { api } from '@/shared/api';
 
 export const getGameResult = async () => {
-  return client.get<GameResult>('/ingame').then(({ data }) => data);
+  return api.get<GameResult>('/ingame').then(({ data }) => data);
 };
diff --git a/src/pages/settings/api.ts b/src/pages/settings/api.ts
index f3c8d423..bf5841db 100644
--- a/src/pages/settings/api.ts
+++ b/src/pages/settings/api.ts
@@ -1,8 +1,8 @@
-import { client } from '@/shared/api';
+import { api } from '@/shared/api';
 
 export const patchNicknameChange = async (nickname: string) => {
   try {
-    await client.patch<string>('/user/nickname', { nickname });
+    await api.patch<string>('/user/nickname', { nickname });
     return true;
   } catch (e) {
     return false;
@@ -14,7 +14,7 @@ export const patchPasswordChange = async (
   newPassword: string,
 ) => {
   try {
-    await client.patch<string>('/user/password', {
+    await api.patch<string>('/user/password', {
       prePassword,
       newPassword,
     });
@@ -26,7 +26,7 @@ export const patchPasswordChange = async (
 
 export const postConfirmPassword = async (password: string) => {
   try {
-    const response = await client.post<boolean>('/user/confirm', { password });
+    const response = await api.post<boolean>('/user/confirm', { password });
     // console.log(response.data);
     return response.data;
   } catch (e) {
@@ -35,7 +35,7 @@ export const postConfirmPassword = async (password: string) => {
 };
 
 export const deleteUserInfo = async () => {
-  await client
+  await api
     .delete<string>('/user')
     .then(() => {
       window.location.href = '/';
diff --git a/src/shared/api/axios.ts b/src/shared/api/axios.ts
index 4d89576b..2ab4aa8e 100644
--- a/src/shared/api/axios.ts
+++ b/src/shared/api/axios.ts
@@ -1,4 +1,4 @@
-import axios, { type AxiosResponse } from 'axios';
+import axios from 'axios';
 
 const baseURL = import.meta.env.VITE_API_BASE_URL;
 
@@ -22,52 +22,4 @@ client.interceptors.request.use((config) => {
   return config;
 });
 
-const api = {
-  post: async <T, P>(
-    requiredToken: boolean,
-    url: string,
-    data: P,
-  ): Promise<AxiosResponse<T>> => {
-    return client.post<T>(url, data, {
-      headers: {
-        'X-Bypass-Authorization': !requiredToken,
-      },
-    });
-  },
-
-  get: async <T>(
-    requiredToken: boolean,
-    url: string,
-  ): Promise<AxiosResponse<T>> => {
-    return client.get<T>(url, {
-      headers: {
-        'X-Bypass-Authorization': !requiredToken,
-      },
-    });
-  },
-
-  patch: async <T, P>(
-    requiredToken: boolean,
-    url: string,
-    data: P,
-  ): Promise<AxiosResponse<T>> => {
-    return client.patch<T>(url, data, {
-      headers: {
-        'X-Bypass-Authorization': !requiredToken,
-      },
-    });
-  },
-
-  delete: async <T>(
-    requiredToken: boolean,
-    url: string,
-  ): Promise<AxiosResponse<T>> => {
-    return client.delete<T>(url, {
-      headers: {
-        'X-Bypass-Authorization': !requiredToken,
-      },
-    });
-  },
-};
-
-export { api, client };
+export { client as api };
diff --git a/src/shared/api/index.ts b/src/shared/api/index.ts
index 0165cbb1..437d8974 100644
--- a/src/shared/api/index.ts
+++ b/src/shared/api/index.ts
@@ -1,2 +1,2 @@
-export { api, client } from './axios';
+export { api } from './axios';
 export { queryClient } from './react-query';

From 634c5202c3ecfbb89def63b8a60eba499df3a91f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=84=EB=AF=BC=EC=A0=95?= <minj_1203@naver.com>
Date: Mon, 27 Oct 2025 19:51:17 +0900
Subject: [PATCH 2/3] :truck: move ui files (#72)

---
 src/pages/play/mode/index.css.ts              | 23 ------------------
 src/pages/play/mode/index.tsx                 |  3 ++-
 src/pages/play/mode/{ => ui}/Matching.tsx     |  4 ++--
 src/pages/play/mode/{ => ui}/MatchingText.tsx |  2 +-
 src/pages/play/mode/ui/index.css.ts           | 24 +++++++++++++++++++
 5 files changed, 29 insertions(+), 27 deletions(-)
 rename src/pages/play/mode/{ => ui}/Matching.tsx (91%)
 rename src/pages/play/mode/{ => ui}/MatchingText.tsx (93%)
 create mode 100644 src/pages/play/mode/ui/index.css.ts

diff --git a/src/pages/play/mode/index.css.ts b/src/pages/play/mode/index.css.ts
index 4bf2bfe9..f2e0e6d8 100644
--- a/src/pages/play/mode/index.css.ts
+++ b/src/pages/play/mode/index.css.ts
@@ -4,8 +4,6 @@ import { COLORED_ICON_BUTTON_SIZE_PIXEL } from '@/components/button/constants';
 
 import { MYRANKINGITEMBOX_HEIGHT } from '@/pages/ranking/constants';
 
-import { flexOptions, sprinkles } from '@/shared/styles';
-
 export const wrapper = style([
   {
     display: 'grid',
@@ -26,24 +24,3 @@ export const myRank = style([
     gridColumn: '1 / 3',
   },
 ]);
-
-export const matchingModalWrapper = style([
-  flexOptions({ option: 'columnCenter' }),
-]);
-
-export const matchingMessage = style([
-  flexOptions({ option: 'row' }),
-  sprinkles({
-    textSize: '2x',
-    justifyContent: 'flexStart',
-    width: 'full',
-    marginBottom: '1x',
-    paddingLeft: '4x',
-  }),
-]);
-
-export const matchingImageWrapper = style([
-  sprinkles({
-    marginY: '2x',
-  }),
-]);
diff --git a/src/pages/play/mode/index.tsx b/src/pages/play/mode/index.tsx
index ed33f38d..031b6fcc 100644
--- a/src/pages/play/mode/index.tsx
+++ b/src/pages/play/mode/index.tsx
@@ -3,12 +3,13 @@ import { useNavigate } from 'react-router-dom';
 
 import { getMatching } from './api';
 import * as styles from './index.css';
-import Matching from './Matching';
 
 import ColoredIconButton from '@/components/button/ColoredIconButton';
 import Modal, { useModal } from '@/components/modal';
 import RankingItemBox from '@/components/ranking';
 
+import Matching from '@/pages/play/mode/ui/Matching';
+
 import { useUserInfo } from '@/models/user';
 import { ROUTE } from '@/shared/constants';
 
diff --git a/src/pages/play/mode/Matching.tsx b/src/pages/play/mode/ui/Matching.tsx
similarity index 91%
rename from src/pages/play/mode/Matching.tsx
rename to src/pages/play/mode/ui/Matching.tsx
index c530c99f..3efc1dcf 100644
--- a/src/pages/play/mode/Matching.tsx
+++ b/src/pages/play/mode/ui/Matching.tsx
@@ -1,12 +1,12 @@
 import { useNavigate } from 'react-router-dom';
 
-import { deleteMatching } from './api';
 import * as styles from './index.css';
 
 import ColoredButton from '@/components/button/ColoredButton';
 import RoundCornerImageBox from '@/components/image-box';
 
-import { MatchingText } from '@/pages/play/mode/MatchingText';
+import { deleteMatching } from '@/pages/play/mode/api';
+import { MatchingText } from '@/pages/play/mode/ui/MatchingText';
 
 import { useWebSocket } from '@/features/websocket';
 import { ROUTE } from '@/shared/constants';
diff --git a/src/pages/play/mode/MatchingText.tsx b/src/pages/play/mode/ui/MatchingText.tsx
similarity index 93%
rename from src/pages/play/mode/MatchingText.tsx
rename to src/pages/play/mode/ui/MatchingText.tsx
index f3bda918..2651cffb 100644
--- a/src/pages/play/mode/MatchingText.tsx
+++ b/src/pages/play/mode/ui/MatchingText.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 
-import * as styles from '@/pages/play/mode/index.css';
+import * as styles from './index.css';
 
 interface Props {
   isModalOpen: boolean;
diff --git a/src/pages/play/mode/ui/index.css.ts b/src/pages/play/mode/ui/index.css.ts
new file mode 100644
index 00000000..60cec4b4
--- /dev/null
+++ b/src/pages/play/mode/ui/index.css.ts
@@ -0,0 +1,24 @@
+import { style } from '@vanilla-extract/css';
+
+import { flexOptions, sprinkles } from '@/shared/styles';
+
+export const matchingModalWrapper = style([
+  flexOptions({ option: 'columnCenter' }),
+]);
+
+export const matchingMessage = style([
+  flexOptions({ option: 'row' }),
+  sprinkles({
+    textSize: '2x',
+    justifyContent: 'flexStart',
+    width: 'full',
+    marginBottom: '1x',
+    paddingLeft: '4x',
+  }),
+]);
+
+export const matchingImageWrapper = style([
+  sprinkles({
+    marginY: '2x',
+  }),
+]);

From 50c5de54b37b71ad8c9eccbd4b70e7eafaa37354 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=84=EB=AF=BC=EC=A0=95?= <minj_1203@naver.com>
Date: Mon, 27 Oct 2025 19:58:53 +0900
Subject: [PATCH 3/3] :adhesive_bandage: change import style

---
 src/pages/play/mode/index.tsx       | 3 +--
 src/pages/play/mode/ui/Matching.tsx | 5 ++---
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/pages/play/mode/index.tsx b/src/pages/play/mode/index.tsx
index 031b6fcc..40516192 100644
--- a/src/pages/play/mode/index.tsx
+++ b/src/pages/play/mode/index.tsx
@@ -3,13 +3,12 @@ import { useNavigate } from 'react-router-dom';
 
 import { getMatching } from './api';
 import * as styles from './index.css';
+import Matching from './ui/Matching';
 
 import ColoredIconButton from '@/components/button/ColoredIconButton';
 import Modal, { useModal } from '@/components/modal';
 import RankingItemBox from '@/components/ranking';
 
-import Matching from '@/pages/play/mode/ui/Matching';
-
 import { useUserInfo } from '@/models/user';
 import { ROUTE } from '@/shared/constants';
 
diff --git a/src/pages/play/mode/ui/Matching.tsx b/src/pages/play/mode/ui/Matching.tsx
index 3efc1dcf..a7bcce0e 100644
--- a/src/pages/play/mode/ui/Matching.tsx
+++ b/src/pages/play/mode/ui/Matching.tsx
@@ -1,13 +1,12 @@
 import { useNavigate } from 'react-router-dom';
 
+import { deleteMatching } from '../api';
 import * as styles from './index.css';
+import { MatchingText } from './MatchingText';
 
 import ColoredButton from '@/components/button/ColoredButton';
 import RoundCornerImageBox from '@/components/image-box';
 
-import { deleteMatching } from '@/pages/play/mode/api';
-import { MatchingText } from '@/pages/play/mode/ui/MatchingText';
-
 import { useWebSocket } from '@/features/websocket';
 import { ROUTE } from '@/shared/constants';