styles 디렉토리 변경

src/styles/main.css.ts → src/app/global.css.ts

@@ -1,6 +1,6 @@
 import { globalStyle } from '@vanilla-extract/css';
 
-import { vars } from '@/styles/vars.css';
+import { vars } from '@/shared/styles';
 
 globalStyle('*', {
   margin: 0,

src/app/index.tsx

@@ -1,6 +1,7 @@
 import { QueryClientProvider } from '@tanstack/react-query';
 import { RouterProvider } from 'react-router-dom';
 
+import './global.css';
 import router from './router';
 
 import FullScreenPrompt from '@/components/prompt';

src/components/button/ColoredButton/index.css.ts

@@ -4,9 +4,7 @@ import { recipe } from '@vanilla-extract/recipes';
 import * as constants from '@/components/button/constants';
 import type { colorType } from '@/components/button/types';
 
-import { flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
-import { vars } from '@/styles/vars.css';
+import { flexOptions, sprinkles, vars } from '@/shared/styles';
 
 const colorVariants = constants.BUTTON_COLOR.reduce(
   (variants, color) => {

src/components/button/ColoredIconButton/index.css.ts

@@ -4,9 +4,7 @@ import { recipe } from '@vanilla-extract/recipes';
 import * as constants from '@/components/button/constants';
 import type { colorType } from '@/components/button/types';
 
-import { flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
-import { vars } from '@/styles/vars.css';
+import { flexOptions, sprinkles, vars } from '@/shared/styles';
 
 const colorVariants = constants.BUTTON_COLOR.reduce(
   (variants, color) => {

src/components/button/SettingNavigationButton/index.css.ts

@@ -1,8 +1,7 @@
 import { style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 
-import { sprinkles } from '@/styles/sprinkles.css';
-import { vars } from '@/styles/vars.css';
+import { sprinkles, vars } from '@/shared/styles';
 
 const position = {
   leftTop: {

src/components/button/SettingTextButton/index.css.ts

@@ -5,9 +5,7 @@ import * as constants from './constants';
 
 import type { settingTextButtonColorType } from '@/components/button/types';
 
-import { borderDarkOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
-import { vars } from '@/styles/vars.css';
+import { borderDarkOptions, sprinkles, vars } from '@/shared/styles';
 
 export const button = style([
   borderDarkOptions({ color: 'black', width: '2x' }),

src/components/chip/index.css.ts

@@ -3,8 +3,7 @@ import { recipe } from '@vanilla-extract/recipes';
 
 import { color } from './variants.css';
 
-import { flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
+import { flexOptions, sprinkles } from '@/shared/styles';
 
 const base = style([
   flexOptions({

src/components/chip/variants.css.ts

@@ -1,5 +1,4 @@
-import { sprinkles } from '@/styles/sprinkles.css';
-import { variant } from '@/styles/utils';
+import { sprinkles, variant } from '@/shared/styles';
 
 export const color = variant(
   ['red', 'yellow', 'green', 'blue', 'pink', 'navy'] as const,

src/components/frame/constants.ts

@@ -1,6 +1,5 @@
-import { vars } from '@/styles/vars.css';
-
 import { IPHONE_14_PRO_MAX, IPHONE_SE } from '@/shared/constants';
+import { vars } from '@/shared/styles';
 
 export const FRAME_STYLE = {
   width: {

src/components/frame/frame.css.ts

@@ -2,8 +2,7 @@ import { style } from '@vanilla-extract/css';
 
 import { FRAME_STYLE } from './constants';
 
-import { sprinkles } from '@/styles/sprinkles.css';
-import { vars } from '@/styles/vars.css';
+import { sprinkles, vars } from '@/shared/styles';
 
 export const base = style([
   sprinkles({

src/components/frame/with-buttons/button.css.ts

@@ -1,8 +1,11 @@
 import { style } from '@vanilla-extract/css';
 
-import { borderDarkOptions, flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
-import { vars } from '@/styles/vars.css';
+import {
+  borderDarkOptions,
+  flexOptions,
+  sprinkles,
+  vars,
+} from '@/shared/styles';
 
 const BUTTON_SIZE = '24px';
 

src/components/frame/with-buttons/index.css.ts

@@ -4,8 +4,7 @@ import { calc } from '@vanilla-extract/css-utils';
 import { FRAME_STYLE } from '../constants';
 import { base } from '../frame.css';
 
-import { borderDarkOptions, flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
+import { borderDarkOptions, flexOptions, sprinkles } from '@/shared/styles';
 
 export const frame = style([
   base,

src/components/frame/with-buttons/menu-button/game-info/index.css.ts

@@ -1,8 +1,6 @@
 import { style } from '@vanilla-extract/css';
 
-import { flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
-import { vars } from '@/styles/vars.css';
+import { flexOptions, sprinkles, vars } from '@/shared/styles';
 
 export const boxWrapper = style([flexOptions({ option: 'columnCenter' })]);
 

src/components/image-box/index.css.ts

@@ -3,8 +3,7 @@ import { recipe } from '@vanilla-extract/recipes';
 
 import { backgroundColor, borderColor, borderSize, size } from './variants.css';
 
-import { flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
+import { flexOptions, sprinkles } from '@/shared/styles';
 
 const base = style([
   sprinkles({

src/components/image-box/variants.css.ts

@@ -1,8 +1,6 @@
 import { style } from '@vanilla-extract/css';
 
-import { borderLightOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
-import { variant } from '@/styles/utils';
+import { borderLightOptions, sprinkles, variant } from '@/shared/styles';
 
 export const size = variant(
   {

src/components/input/index.css.ts

@@ -3,8 +3,7 @@ import { recipe } from '@vanilla-extract/recipes';
 
 import { size } from './variants.css';
 
-import { sprinkles } from '@/styles/sprinkles.css';
-import { vars } from '@/styles/vars.css';
+import { sprinkles, vars } from '@/shared/styles';
 
 const base = style([
   sprinkles({

src/components/input/variants.css.ts

@@ -2,8 +2,7 @@ import { style } from '@vanilla-extract/css';
 
 import { INPUT_STYLE } from './constants';
 
-import { borderDarkOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
+import { borderDarkOptions, sprinkles } from '@/shared/styles';
 
 export const size = {
   widthFull: style([

src/components/modal/constants.ts

@@ -2,7 +2,7 @@ import { calc } from '@vanilla-extract/css-utils';
 
 import { FRAME_STYLE } from '@/components/frame';
 
-import { vars } from '@/styles/vars.css';
+import { vars } from '@/shared/styles';
 
 export const MIN_MODAL_HEIGHT = calc
   .subtract(FRAME_STYLE.height.min, calc.multiply(FRAME_STYLE.padding, 4))

src/components/modal/index.css.ts

@@ -2,8 +2,7 @@ import { style } from '@vanilla-extract/css';
 
 import * as constants from './constants';
 
-import { borderDarkOptions, flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
+import { borderDarkOptions, flexOptions, sprinkles } from '@/shared/styles';
 
 export const modal = style([
   sprinkles({

src/components/player-info/index.css.ts

@@ -1,7 +1,6 @@
 import { style } from '@vanilla-extract/css';
 
-import { flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
+import { flexOptions, sprinkles } from '@/shared/styles';
 
 export const playerInfoWrapper = style([
   flexOptions({ option: 'rowCenter' }),

src/components/player-info/text-box/index.css.ts

@@ -1,7 +1,6 @@
 import { recipe } from '@vanilla-extract/recipes';
 
-import { sprinkles } from '@/styles/sprinkles.css';
-import { variant } from '@/styles/utils';
+import { sprinkles, variant } from '@/shared/styles';
 
 const colorVariants = variant(['white'] as const, (color) =>
   sprinkles({

src/components/prompt/index.css.ts

@@ -1,8 +1,7 @@
 import { style } from '@vanilla-extract/css';
 
-import { sprinkles } from '@/styles/sprinkles.css';
-
 import { IPHONE_SE } from '@/shared/constants';
+import { sprinkles } from '@/shared/styles';
 
 export const fullscreenPromptStyle = style([
   sprinkles({

src/components/ranking/index.css.ts

@@ -1,8 +1,7 @@
 import { style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 
-import { flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
+import { flexOptions, sprinkles } from '@/shared/styles';
 
 export const rankingItemBox = recipe({
   base: [

src/features/room-setting/index.css.ts

@@ -1,9 +1,7 @@
 import { style } from '@vanilla-extract/css';
 
-import { borderLightOptions, flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
-
 import { MAP_ID_LIST } from '@/models/map';
+import { borderLightOptions, flexOptions, sprinkles } from '@/shared/styles';
 
 export const modalTwoButtonWrapper = style([
   flexOptions({

src/main.tsx

@@ -1,6 +1,5 @@
 import ReactDOM from 'react-dom/client';
 
 import App from '@/app';
-import '@/styles/main.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(<App />);

src/models/tier/ui/variants.css.ts

@@ -2,8 +2,7 @@ import { style } from '@vanilla-extract/css';
 
 import { TIER } from '../constants';
 
-import { variant } from '@/styles/utils';
-
+import { variant } from '@/shared/styles';
 
 export const tier = variant([...TIER], (name) =>
   style({

src/pages/collection/ui/menu/index.css.ts

@@ -3,8 +3,7 @@ import { recipe } from '@vanilla-extract/recipes';
 
 import * as constants from '../../constants';
 
-import { flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
+import { flexOptions, sprinkles } from '@/shared/styles';
 
 export const collections = style([
   sprinkles({

src/pages/collection/ui/page.css.ts

@@ -1,7 +1,6 @@
 import { style } from '@vanilla-extract/css';
 
-import { flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
+import { flexOptions, sprinkles } from '@/shared/styles';
 
 export const gridBox = style({
   display: 'flex',

src/pages/error/index.css.ts

@@ -1,7 +1,6 @@
 import { style } from '@vanilla-extract/css';
 
-import { flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
+import { flexOptions, sprinkles } from '@/shared/styles';
 
 export const errorWrapper = style([
   flexOptions({ option: 'columnCenter' }),

src/pages/finder/page.css.ts

@@ -1,8 +1,7 @@
 import { style } from '@vanilla-extract/css';
 import { calc } from '@vanilla-extract/css-utils';
 
-import { flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
+import { flexOptions, sprinkles } from '@/shared/styles';
 
 export const contentWrapper = sprinkles({
   width: 'full',

src/pages/finder/ui/index.css.ts

@@ -1,8 +1,7 @@
 import { style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 
-import { flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
+import { flexOptions, sprinkles } from '@/shared/styles';
 
 export const modalTwoButtonWrapper = style([
   flexOptions({

src/pages/home/UserDashboard/index.css.ts

@@ -1,6 +1,6 @@
 import { createVar, style } from '@vanilla-extract/css';
 
-import { sprinkles } from '@/styles/sprinkles.css';
+import { sprinkles } from '@/shared/styles';
 
 export const dashboardWrapper = style([
   sprinkles({

src/pages/home/index.css.ts

@@ -2,8 +2,7 @@ import { style } from '@vanilla-extract/css';
 
 import * as constants from './constants';
 
-import { flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
+import { flexOptions, sprinkles } from '@/shared/styles';
 
 export const fullWrapper = style([
   flexOptions({ option: 'column' }),

src/pages/landing/index.css.ts

@@ -3,9 +3,7 @@ import { calc } from '@vanilla-extract/css-utils';
 
 import { INPUT_STYLE } from '@/components/input/constants';
 
-import { flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
-import { vars } from '@/styles/vars.css';
+import { flexOptions, sprinkles, vars } from '@/shared/styles';
 
 export const landingWrapper = style([
   flexOptions({ option: 'columnCenter' }),

src/pages/logIn/index.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
 
-import { sprinkles } from '@/styles/sprinkles.css';
+import { sprinkles } from '@/shared/styles';
 
 export { contentWrapper, buttonWrapper } from '@/pages/landing/index.css';
 

src/pages/play/lobby/Players/index.css.ts

@@ -3,9 +3,7 @@ import { recipe } from '@vanilla-extract/recipes';
 
 import * as constants from '@/pages/play/lobby/constants';
 
-import { flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
-import { variant } from '@/styles/utils';
+import { flexOptions, sprinkles, variant } from '@/shared/styles';
 
 export const playerWrapper = style([
   flexOptions({ option: 'row' }),

src/pages/play/lobby/constants/index.ts

@@ -1,6 +1,6 @@
 import { calc } from '@vanilla-extract/css-utils';
 
-import { vars } from '@/styles/vars.css';
+import { vars } from '@/shared/styles';
 
 export { PLAYER_COLORS } from '@/models/player';
 

src/pages/play/lobby/index.css.ts

@@ -3,8 +3,7 @@ import { calc } from '@vanilla-extract/css-utils';
 
 import * as constants from './constants';
 
-import { borderDarkOptions, flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
+import { borderDarkOptions, flexOptions, sprinkles } from '@/shared/styles';
 
 export const lobby = style([
   {

src/pages/play/mode/index.css.ts

@@ -4,8 +4,7 @@ import { COLORED_ICON_BUTTON_SIZE_PIXEL } from '@/components/button/constants';
 
 import { MYRANKINGITEMBOX_HEIGHT } from '@/pages/ranking/constants';
 
-import { flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
+import { flexOptions, sprinkles } from '@/shared/styles';
 
 export const wrapper = style([
   {

src/pages/ranking/constants.ts

@@ -1,6 +1,6 @@
 import { calc } from '@vanilla-extract/css-utils';
 
-import { vars } from '@/styles/vars.css';
+import { vars } from '@/shared/styles';
 
 export const TITLE_TEXT_WIDTH = '193px';
 export const TITLE_TEXT_HEIGHT = '56px';

src/pages/ranking/index.css.ts

@@ -2,8 +2,7 @@ import { style } from '@vanilla-extract/css';
 
 import * as constants from './constants';
 
-import { flexOptions } from '@/styles/common.css';
-import { sprinkles } from '@/styles/sprinkles.css';
+import { flexOptions, sprinkles } from '@/shared/styles';
 
 export const rankingFullWrapper = style([
   sprinkles({