Mode 페이지 UI 파일 분리

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);
 

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);

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 '';
+  });
 };

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);

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;

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);

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;

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,
     })

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');
 };

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;

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',
-  }),
-]);

src/pages/play/mode/index.tsx

@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { getMatching } from './api';
 import * as styles from './index.css';
-import Matching from './Matching';
+import Matching from './ui/Matching';
 
 import ColoredIconButton from '@/components/button/ColoredIconButton';
 import Modal, { useModal } from '@/components/modal';

src/pages/play/mode/Matching.tsx → src/pages/play/mode/ui/Matching.tsx

@@ -1,13 +1,12 @@
 import { useNavigate } from 'react-router-dom';
 
-import { deleteMatching } from './api';
+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 { MatchingText } from '@/pages/play/mode/MatchingText';
-
 import { useWebSocket } from '@/features/websocket';
 import { ROUTE } from '@/shared/constants';
 

src/pages/play/mode/MatchingText.tsx → 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;

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',
+  }),
+]);

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[];

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);
 };

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 = '/';