Mode 페이지 UI 리팩토링

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