상태관리 라이브러리 변경

package.json

@@ -12,13 +12,14 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.90.5",
     "axios": "^1.6.8",
+    "jotai": "^2.15.0",
     "lucide-react": "^0.522.0",
     "phaser": "^3.80.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.22.1",
-    "zustand": "^4.5.2"
+    "react-router-dom": "^6.22.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.1",

src/app/index.tsx

@@ -1,18 +1,22 @@
+import { QueryClientProvider } from '@tanstack/react-query';
 import { RouterProvider } from 'react-router-dom';
 
 import router from './router';
 
 import FullScreenPrompt from '@/components/prompt';
 
-import { useSoundSetting } from '@/features/sound';
+import { useBackgroundSound } from '@/features/sound';
+import { queryClient } from '@/shared/api';
 
 const App = () => {
-  const { playBgm } = useSoundSetting();
+  const { playBackgroundSound } = useBackgroundSound();
 
   return (
-    <div onClick={playBgm} role='presentation'>
+    <div onClick={playBackgroundSound} role='presentation'>
       <FullScreenPrompt />
-      <RouterProvider router={router} />
+      <QueryClientProvider client={queryClient}>
+        <RouterProvider router={router} />
+      </QueryClientProvider>
     </div>
   );
 };

src/app/router.tsx

@@ -1,28 +1,26 @@
 import { createBrowserRouter, Navigate, Outlet } from 'react-router-dom';
 
+import BasicContentFrame from '@/components/frame/with-buttons';
 
 import Collection from '@/pages/collection';
 import Error from '@/pages/error';
+import Finder, { getRoomList } from '@/pages/finder';
 import Home from '@/pages/home';
 import Landing from '@/pages/landing';
 import LandingLayout from '@/pages/landing/layout';
-import LogIn from '@/pages/landing/logIn';
-import Finder from '@/pages/play/finder';
+import LogIn from '@/pages/logIn';
 import Game from '@/pages/play/game';
-import Lobby from '@/pages/play/lobby';
+import LobbyPage, { getLobbyInfo } from '@/pages/play/lobby';
 import Mode from '@/pages/play/mode';
 import Ranking from '@/pages/ranking';
-import Result from '@/pages/result';
+import Result, { getGameResult } from '@/pages/result';
 import Settings from '@/pages/settings';
 import Tutorial from '@/pages/tutorial';
 
-import { checkToken, getUser } from '@/services/auth';
-import { getRoomList } from '@/services/finder';
-import { getLobbyInfo } from '@/services/lobby';
+import { checkToken } from '@/services/auth';
 import { getRank } from '@/services/rank';
-import { getGameResult } from '@/services/result';
 
-import { ROUTE } from '@/constants/routes';
+import { ROUTE } from '@/shared/constants';
 
 const router = createBrowserRouter([
   {
@@ -40,73 +38,79 @@ const router = createBrowserRouter([
     ],
   },
   {
-    element: <Outlet />,
-    errorElement: <Navigate to={ROUTE.main} replace />,
-    loader: checkToken,
+    element: (
+      <BasicContentFrame>
+        <Outlet />
+      </BasicContentFrame>
+    ),
     children: [
       {
-        path: `${ROUTE.tutorial}`,
-        element: <Tutorial />,
-      },
-      {
-        path: `${ROUTE.home}`,
-        element: <Home />,
-        loader: getUser,
-      },
-      {
-        path: `${ROUTE.play}`,
-        errorElement: <Navigate to={`${ROUTE.error}/401`} replace />,
+        element: <Outlet />,
+        errorElement: <Navigate to={ROUTE.main} replace />,
+        loader: checkToken,
         children: [
           {
-            index: true,
-            element: <Mode />,
-            loader: getUser,
+            path: ROUTE.tutorial,
+            element: <Tutorial />,
+          },
+          {
+            path: ROUTE.home,
+            element: <Home />,
+          },
+          {
+            path: ROUTE.play,
+            errorElement: <Navigate to={`${ROUTE.error}/401`} replace />,
+            children: [
+              {
+                index: true,
+                element: <Mode />,
+              },
+              {
+                path: `${ROUTE.lobby}/:roomId`,
+                element: <LobbyPage />,
+                loader: ({ params }) => getLobbyInfo(params.roomId),
+              },
+              {
+                path: ROUTE.finder,
+                element: <Finder />,
+                loader: () => getRoomList(1),
+              },
+            ],
           },
           {
-            path: `${ROUTE.lobby}/:roomId`,
-            element: <Lobby />,
-            loader: ({ params }) => getLobbyInfo(params.roomId),
+            path: ROUTE.ranking,
+            element: <Ranking />,
+            loader: getRank,
           },
           {
-            path: `${ROUTE.finder}`,
-            element: <Finder />,
-            loader: () => getRoomList(1),
+            path: ROUTE.result,
+            element: <Result />,
+            errorElement: <Navigate to={ROUTE.home} />,
+            loader: getGameResult,
           },
           {
-            path: `${ROUTE.game}`,
-            element: <Game />,
+            path: ROUTE.setting,
+            element: <Settings />,
+          },
+          {
+            path: ROUTE.collection,
+            element: <Collection />,
           },
         ],
       },
       {
-        path: `${ROUTE.ranking}`,
-        element: <Ranking />,
-        loader: getRank,
-      },
-      {
-        path: `${ROUTE.result}`,
-        element: <Result />,
-        errorElement: <Navigate to={ROUTE.home} />,
-        loader: getGameResult,
+        path: `${ROUTE.error}/:code`,
+        element: <Error />,
       },
       {
-        path: `${ROUTE.setting}`,
-        element: <Settings />,
-      },
-      {
-        path: `${ROUTE.collection}`,
-        element: <Collection />,
-        loader: getUser,
+        path: '/*',
+        element: <Navigate to={`${ROUTE.error}/404`} replace />,
       },
     ],
   },
   {
-    path: `${ROUTE.error}/:code`,
-    element: <Error />,
-  },
-  {
-    path: '/*',
-    element: <Navigate to={`${ROUTE.error}/404`} replace />,
+    path: ROUTE.game,
+    element: <Game />,
   },
 ]);
 

src/components/button/ColoredButton/index.tsx

@@ -5,13 +5,14 @@ import type {
   coloredButtonSizeType,
 } from '@/components/button/types';
 
-import useEffectSoundStore from "@/states/effect";
+import { useEffectSound } from '@/features/sound';
 
 interface Props extends ColorButtonProps {
   size: coloredButtonSizeType;
 }
+
 const ColoredButton = ({ text, color, size, onClick }: Props) => {
-  const { playEffectSound } = useEffectSoundStore();
+  const { playEffectSound } = useEffectSound();
 
   const handleClick = () => {
     playEffectSound();

src/components/button/ColoredIconButton/index.tsx

@@ -5,7 +5,7 @@ import type {
   coloredIconButtonSizeType,
 } from '@/components/button/types';
 
-import useEffectSoundStore from "@/states/effect";
+import { useEffectSound } from '@/features/sound';
 
 export interface ColoredIconButtonProps extends ColorButtonProps {
   icon: string;
@@ -19,7 +19,7 @@ const ColoredIconButton = ({
   size,
   onClick,
 }: ColoredIconButtonProps) => {
-  const { playEffectSound } = useEffectSoundStore();
+  const { playEffectSound } = useEffectSound();
 
   const handleClick = () => {
     playEffectSound();

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

@@ -4,7 +4,7 @@ import { recipe } from '@vanilla-extract/recipes';
 import { sprinkles } from '@/styles/sprinkles.css';
 import { vars } from '@/styles/vars.css';
 
-export const positionVariants = {
+const position = {
   leftTop: {
     top: 0,
     left: 0,
@@ -21,6 +21,11 @@ export const positionVariants = {
   },
 };
 
+const usage = {
+  frame: {},
+  modal: {},
+};
+
 export const button = recipe({
   base: style([
     sprinkles({
@@ -42,6 +47,23 @@ export const button = recipe({
     },
   ]),
   variants: {
-    position: positionVariants,
+    position,
+    usage,
   },
+  compoundVariants: [
+    {
+      variants: {
+        position: 'leftTop',
+        usage: 'frame',
+      },
+      style: style({
+        '@media': {
+          'screen and (min-height: 463px)': {
+            top: '-16px',
+            left: '-16px',
+          },
+        },
+      }),
+    },
+  ],
 });

src/components/button/SettingNavigationButton/index.tsx

@@ -1,24 +1,21 @@
-import * as styles from './index.css';
+import { type RecipeVariants } from '@vanilla-extract/recipes';
 
-import type { positionType } from '@/components/button/types';
+import * as styles from './index.css';
 
-import useEffectSoundStore from "@/states/effect";
+import { useEffectSound } from '@/features/sound';
 
-interface Props {
+type Props = {
   label: string;
   onClick: () => void;
-  position: positionType;
-}
-
-const buttonLabel = (label: string, position: positionType) => {
-  if (position === 'leftTop') {
-    return `< ${label}`;
-  }
-  return `${label} X`;
-};
+} & RecipeVariants<typeof styles.button>;
 
-const SettingNavigationButton = ({ label, onClick, position }: Props) => {
-  const { playEffectSound } = useEffectSoundStore();
+const SettingNavigationButton = ({
+  label,
+  onClick,
+  position,
+  usage = 'modal',
+}: Props) => {
+  const { playEffectSound } = useEffectSound();
 
   const handleClick = () => {
     playEffectSound();
@@ -28,10 +25,10 @@ const SettingNavigationButton = ({ label, onClick, position }: Props) => {
   return (
     <button
       type='button'
-      className={styles.button({ position })}
+      className={styles.button({ position, usage })}
       onClick={handleClick}
     >
-      {buttonLabel(label, position)}
+      {label}
     </button>
   );
 };

src/components/button/SettingTextButton/index.tsx

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 
 import * as styles from './index.css';
 
-import useEffectSoundStore from '@/states/effect';
+import { useEffectSound } from '@/features/sound';
 
 interface Props {
   children: ReactNode;
@@ -16,7 +16,7 @@ const SettingTextButton = ({
   onClick,
   disabled,
 }: Props & styles.ButtonVariantsProps) => {
-  const { playEffectSound } = useEffectSoundStore();
+  const { playEffectSound } = useEffectSound();
 
   const handleClick = () => {
     playEffectSound();

src/components/button/types.d.ts

@@ -1,6 +1,5 @@
 import * as constants from './constants';
 
-import { positionVariants } from '@/components/button/SettingNavigationButton/index.css';
 import { buttonVariants } from '@/components/button/SettingTextButton/index.css';
 
 type colorType = (typeof constants.BUTTON_COLOR)[number];
@@ -10,8 +9,6 @@ type coloredButtonSizeType = keyof typeof constants.COLORED_BUTTON_SIZE_PIXEL;
 type coloredIconButtonSizeType =
   keyof typeof constants.COLORED_ICON_BUTTON_SIZE_PIXEL;
 
-type positionType = keyof typeof positionVariants;
-
 interface ColorButtonProps {
   text: string;
   color: colorType;

src/components/frame/constants.ts

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