From bf7983690aae931794354185dac7e55c852213f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=84=EB=AF=BC=EC=A0=95?= Date: Mon, 27 Oct 2025 19:51:17 +0900 Subject: [PATCH 1/2] :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 b65d20f857f8f89dbc7a5f1f2fa06dba02b413c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=84=EB=AF=BC=EC=A0=95?= Date: Mon, 27 Oct 2025 19:58:53 +0900 Subject: [PATCH 2/2] :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';