diff --git a/public/favicon.png b/public/favicon.png
new file mode 100644
index 0000000..5510a4c
Binary files /dev/null and b/public/favicon.png differ
diff --git a/src/app/dashboard/account/page.tsx b/src/app/(home)/account/page.tsx
similarity index 89%
rename from src/app/dashboard/account/page.tsx
rename to src/app/(home)/account/page.tsx
index 76d8536..79ed4ff 100644
--- a/src/app/dashboard/account/page.tsx
+++ b/src/app/(home)/account/page.tsx
@@ -8,7 +8,7 @@ import { config } from '@/config';
 import { AccountDetailsForm } from '@/components/dashboard/account/account-details-form';
 import { AccountInfo } from '@/components/dashboard/account/account-info';
 
-export const metadata = { title: `Account | Dashboard | ${config.site.name}` } satisfies Metadata;
+export const metadata = { title: `내 정보 수정 | ${config.site.name}` } satisfies Metadata;
 
 export default function Page(): React.JSX.Element {
   return (
diff --git a/src/app/dashboard/customers/page.tsx b/src/app/(home)/customers/page.tsx
similarity index 98%
rename from src/app/dashboard/customers/page.tsx
rename to src/app/(home)/customers/page.tsx
index ac2c32a..4497b50 100644
--- a/src/app/dashboard/customers/page.tsx
+++ b/src/app/(home)/customers/page.tsx
@@ -13,7 +13,7 @@ import { CustomersFilters } from '@/components/dashboard/customer/customers-filt
 import { CustomersTable } from '@/components/dashboard/customer/customers-table';
 import type { Customer } from '@/components/dashboard/customer/customers-table';
 
-export const metadata = { title: `Customers | Dashboard | ${config.site.name}` } satisfies Metadata;
+export const metadata = { title: `Customers | ${config.site.name}` } satisfies Metadata;
 
 const customers = [
   {
diff --git a/src/app/dashboard/settings/page.tsx b/src/app/(home)/game-room/page.tsx
similarity index 87%
rename from src/app/dashboard/settings/page.tsx
rename to src/app/(home)/game-room/page.tsx
index 04cff78..7fd3cee 100644
--- a/src/app/dashboard/settings/page.tsx
+++ b/src/app/(home)/game-room/page.tsx
@@ -8,7 +8,7 @@ import { Notifications } from '@/components/dashboard/settings/notifications';
 import { UpdatePasswordForm } from '@/components/dashboard/settings/update-password-form';
 import GameRoom from "@/components/userManagement/GameRoom";
 
-export const metadata = { title: `Settings | Dashboard | ${config.site.name}` } satisfies Metadata;
+export const metadata = { title: `놀이방 | ${config.site.name}` } satisfies Metadata;
 
 export default function Page(): React.JSX.Element {
   return (
diff --git a/src/app/dashboard/layout.tsx b/src/app/(home)/layout.tsx
similarity index 90%
rename from src/app/dashboard/layout.tsx
rename to src/app/(home)/layout.tsx
index 3e8a799..7da5a28 100644
--- a/src/app/dashboard/layout.tsx
+++ b/src/app/(home)/layout.tsx
@@ -19,9 +19,9 @@ export default function Layout({ children }: LayoutProps): React.JSX.Element {
           body: {
             '--MainNav-height': '56px',
             '--MainNav-zIndex': 1000,
-            '--SideNav-width': '280px',
+            '--SideNav-width': '220px',
             '--SideNav-zIndex': 1100,
-            '--MobileNav-width': '320px',
+            '--MobileNav-width': '220px',
             '--MobileNav-zIndex': 1100,
           },
         }}
@@ -39,7 +39,7 @@ export default function Layout({ children }: LayoutProps): React.JSX.Element {
         <Box sx={{ display: 'flex', flex: '1 1 auto', flexDirection: 'column', pl: { lg: 'var(--SideNav-width)' } }}>
           <MainNav />
           <main>
-            <Container maxWidth="xl" sx={{ py: '64px' }}>
+            <Container maxWidth="xl" sx={{ py: '16px' }}>
               {children}
             </Container>
           </main>
diff --git a/src/app/dashboard/page.tsx b/src/app/(home)/page.tsx
similarity index 97%
rename from src/app/dashboard/page.tsx
rename to src/app/(home)/page.tsx
index 45c6a2d..bb055b5 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/(home)/page.tsx
@@ -13,7 +13,7 @@ import { TotalCustomers } from '@/components/dashboard/overview/total-customers'
 import { TotalProfit } from '@/components/dashboard/overview/total-profit';
 import { Traffic } from '@/components/dashboard/overview/traffic';
 
-export const metadata = { title: `Overview | Dashboard | ${config.site.name}` } satisfies Metadata;
+export const metadata = { title: `Home | ${config.site.name}` } satisfies Metadata;
 
 export default function Page(): React.JSX.Element {
   return (
diff --git a/src/app/dashboard/integrations/page.tsx b/src/app/(home)/ranking/page.tsx
similarity index 96%
rename from src/app/dashboard/integrations/page.tsx
rename to src/app/(home)/ranking/page.tsx
index 206b5e8..b50330e 100644
--- a/src/app/dashboard/integrations/page.tsx
+++ b/src/app/(home)/ranking/page.tsx
@@ -16,7 +16,7 @@ import { IntegrationCard } from '@/components/dashboard/integrations/integration
 import type { Integration } from '@/components/dashboard/integrations/integrations-card';
 import { CompaniesFilters } from '@/components/dashboard/integrations/integrations-filters';
 
-export const metadata = { title: `Integrations | Dashboard | ${config.site.name}` } satisfies Metadata;
+export const metadata = { title: `순위 | ${config.site.name}` } satisfies Metadata;
 
 const integrations = [
   {
diff --git a/src/app/game/[roomId]/page.tsx b/src/app/game/[roomId]/page.tsx
new file mode 100644
index 0000000..2881eda
--- /dev/null
+++ b/src/app/game/[roomId]/page.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { Metadata } from 'next';
+import Stack from '@mui/material/Stack';
+
+import { config } from '@/config';
+import { AccountDetailsForm } from '@/components/dashboard/account/account-details-form';
+import { AccountInfo } from '@/components/dashboard/account/account-info';
+import YutPan from "@/components/game/YutPan";
+import ChatComponent from "@/components/game/chatComponent";
+
+export const metadata = { title: `Account | Dashboard | ${config.site.name}` } satisfies Metadata;
+
+export default function Page(): React.JSX.Element {
+  return (
+    <Stack spacing={3}>
+      <YutPan/>
+      <ChatComponent/>
+    </Stack>
+  );
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index f3f5d4c..07c3555 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,11 +1,12 @@
 import * as React from 'react';
-import type { Viewport } from 'next';
+import type {Metadata, Viewport} from 'next';
 
 import '@/styles/global.css';
 
 import { UserProvider } from '@/contexts/user-context';
 import { LocalizationProvider } from '@/components/core/localization-provider';
 import { ThemeProvider } from '@/components/core/theme-provider/theme-provider';
+import {config} from "@/config";
 
 export const viewport = { width: 'device-width', initialScale: 1 } satisfies Viewport;
 
@@ -13,6 +14,12 @@ interface LayoutProps {
   children: React.ReactNode;
 }
 
+export const metadata = {
+  icons: {
+    icon : "/favicon.png",
+  }
+} satisfies Metadata;
+
 export default function Layout({ children }: LayoutProps): React.JSX.Element {
   return (
     <html lang="en">
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 722cef7..eb72fa8 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,5 +1,5 @@
 import { redirect } from 'next/navigation';
 
 export default function Page(): never {
-  redirect('/dashboard');
+  redirect('/game-room');
 }
diff --git a/src/components/LightTextField.tsx b/src/components/LightTextField.tsx
index ad44a5c..de6f565 100644
--- a/src/components/LightTextField.tsx
+++ b/src/components/LightTextField.tsx
@@ -21,7 +21,7 @@ const StyledTextField = styled(TextField)<TextFieldProps>(({theme}) => ({
 
 const LightTextField = (props: TextFieldProps) => {
     return <FormControl variant="outlined" fullWidth>
-        <StyledTextField {...props} label={props.label}/>
+        <StyledTextField {...props}/>
     </FormControl>;
 };
 
diff --git a/src/components/auth/guest-guard.tsx b/src/components/auth/guest-guard.tsx
index 10ac5a7..89d0e56 100644
--- a/src/components/auth/guest-guard.tsx
+++ b/src/components/auth/guest-guard.tsx
@@ -29,7 +29,7 @@ export function GuestGuard({ children }: GuestGuardProps): React.JSX.Element | n
 
     if (user) {
       logger.debug('[GuestGuard]: User is logged in, redirecting to dashboard');
-      router.replace(paths.dashboard.overview);
+      router.replace(paths.dashboard.gameroom);
       return;
     }
 
diff --git a/src/components/core/logo.tsx b/src/components/core/logo.tsx
index 5eaab97..1fe1b6a 100644
--- a/src/components/core/logo.tsx
+++ b/src/components/core/logo.tsx
@@ -21,13 +21,14 @@ export interface LogoProps {
 export function Logo({ color = 'dark', emblem, height = HEIGHT, width = WIDTH }: LogoProps): React.JSX.Element {
   let url: string;
 
-  if (emblem) {
-    url = color === 'light' ? '/assets/logo-emblem.svg' : '/assets/logo-emblem--dark.svg';
-  } else {
-    url = color === 'light' ? '/assets/logo.svg' : '/assets/logo--dark.svg';
-  }
-
-  return <Box alt="logo" component="img" height={height} src={url} width={width} />;
+  url = "/static/logo/logo.png";
+  // if (emblem) {
+  //   url = color === 'light' ? '/assets/logo-emblem.svg' : '/assets/logo-emblem--dark.svg';
+  // } else {
+  //   url = color === 'light' ? '/assets/logo.svg' : '/assets/logo--dark.svg';
+  // }
+
+  return <Box alt="logo" component="img" height={height} src={url}/>;
 }
 
 export interface DynamicLogoProps {
diff --git a/src/components/dashboard/customer/customers-table.tsx b/src/components/dashboard/customer/customers-table.tsx
index 1f2b21c..3a0fe83 100644
--- a/src/components/dashboard/customer/customers-table.tsx
+++ b/src/components/dashboard/customer/customers-table.tsx
@@ -46,13 +46,13 @@ export function CustomersTable({
   rowsPerPage = 0,
 }: CustomersTableProps): React.JSX.Element {
   const rowIds = React.useMemo(() => {
-    return rows.map((customer) => customer.id);
+    return rows?.map((customer) => customer.id);
   }, [rows]);
 
   const { selectAll, deselectAll, selectOne, deselectOne, selected } = useSelection(rowIds);
 
-  const selectedSome = (selected?.size ?? 0) > 0 && (selected?.size ?? 0) < rows.length;
-  const selectedAll = rows.length > 0 && selected?.size === rows.length;
+  const selectedSome = (selected?.size ?? 0) > 0 && (selected?.size ?? 0) < rows?.length;
+  const selectedAll = rows?.length > 0 && selected?.size === rows?.length;
 
   return (
     <Card>
@@ -81,7 +81,7 @@ export function CustomersTable({
             </TableRow>
           </TableHead>
           <TableBody>
-            {rows.map((row) => {
+            {rows?.map((row) => {
               const isSelected = selected?.has(row.id);
 
               return (
diff --git a/src/components/dashboard/layout/config.ts b/src/components/dashboard/layout/config.ts
index 13250a5..835bd78 100644
--- a/src/components/dashboard/layout/config.ts
+++ b/src/components/dashboard/layout/config.ts
@@ -2,10 +2,8 @@ import type { NavItemConfig } from '@/types/nav';
 import { paths } from '@/paths';
 
 export const navItems = [
-  { key: 'overview', title: 'Overview', href: paths.dashboard.overview, icon: 'chart-pie' },
   { key: 'customers', title: 'Customers', href: paths.dashboard.customers, icon: 'users' },
-  { key: 'integrations', title: 'Integrations', href: paths.dashboard.integrations, icon: 'plugs-connected' },
-  { key: 'settings', title: 'Settings', href: paths.dashboard.settings, icon: 'gear-six' },
+  { key: 'ranking', title: 'Ranking', href: paths.dashboard.ranking, icon: 'ranking' },
+  { key: 'game-room', title: 'GameRoom', href: paths.dashboard.gameroom, icon: 'game-controller' },
   { key: 'account', title: 'Account', href: paths.dashboard.account, icon: 'user' },
-  { key: 'error', title: 'Error', href: paths.errors.notFound, icon: 'x-square' },
 ] satisfies NavItemConfig[];
diff --git a/src/components/dashboard/layout/main-nav.tsx b/src/components/dashboard/layout/main-nav.tsx
index 0c9d892..27fded0 100644
--- a/src/components/dashboard/layout/main-nav.tsx
+++ b/src/components/dashboard/layout/main-nav.tsx
@@ -21,7 +21,6 @@ export function MainNav(): React.JSX.Element {
   const [openNav, setOpenNav] = React.useState<boolean>(false);
 
   const userPopover = usePopover<HTMLDivElement>();
-
   return (
     <React.Fragment>
       <Box
@@ -48,26 +47,10 @@ export function MainNav(): React.JSX.Element {
             >
               <ListIcon />
             </IconButton>
-            <h1>샤싣</h1>
-            {/*<Tooltip title="Search">*/}
-            {/*  <IconButton>*/}
-            {/*    <MagnifyingGlassIcon />*/}
-            {/*  </IconButton>*/}
-            {/*</Tooltip>*/}
+
           </Stack>
           <Stack sx={{ alignItems: 'center' }} direction="row" spacing={2}>
-            <Tooltip title="Contacts">
-              <IconButton>
-                <UsersIcon />
-              </IconButton>
-            </Tooltip>
-            <Tooltip title="Notifications">
-              <Badge badgeContent={4} color="success" variant="dot">
-                <IconButton>
-                  <BellIcon />
-                </IconButton>
-              </Badge>
-            </Tooltip>
+
             <Avatar
               onClick={userPopover.handleOpen}
               ref={userPopover.anchorRef}
diff --git a/src/components/dashboard/layout/mobile-nav.tsx b/src/components/dashboard/layout/mobile-nav.tsx
index 403ab3b..90aef13 100644
--- a/src/components/dashboard/layout/mobile-nav.tsx
+++ b/src/components/dashboard/layout/mobile-nav.tsx
@@ -33,9 +33,9 @@ export function MobileNav({ open, onClose }: MobileNavProps): React.JSX.Element
     <Drawer
       PaperProps={{
         sx: {
-          '--MobileNav-background': 'var(--mui-palette-neutral-950)',
+          '--MobileNav-background': 'var(--mui-palette-primary-50)',
           '--MobileNav-color': 'var(--mui-palette-common-white)',
-          '--NavItem-color': 'var(--mui-palette-neutral-300)',
+          '--NavItem-color': 'var(--mui-palette-neutral-500)',
           '--NavItem-hover-background': 'rgba(255, 255, 255, 0.04)',
           '--NavItem-active-background': 'var(--mui-palette-primary-main)',
           '--NavItem-active-color': 'var(--mui-palette-primary-contrastText)',
@@ -58,44 +58,26 @@ export function MobileNav({ open, onClose }: MobileNavProps): React.JSX.Element
       open={open}
     >
       <Stack spacing={2} sx={{ p: 3 }}>
-        <Box component={RouterLink} href={paths.home} sx={{ display: 'inline-flex' }}>
-          <Logo color="light" height={32} width={122} />
+        <Box component={RouterLink} href={paths.home} sx={{ display: 'inline-flex', textDecoration: "none" }}>
+          <Logo color="light" height={50} width={122} />
+          <div style={{
+            width: "100%",
+            height: "100%",
+            textAlign: "center",
+            color: "black",
+            display: "flex",
+            justifyContent: "center",
+            flexDirection: "column",
+            fontSize: "24px",
+            fontWeight: "bolder",
+          }}>조선팔도</div>
         </Box>
       </Stack>
-      <Divider sx={{ borderColor: 'var(--mui-palette-neutral-700)' }} />
+      {/*<Divider sx={{ borderColor: 'var(--mui-palette-neutral-700)' }} />*/}
       <Box component="nav" sx={{ flex: '1 1 auto', p: '12px' }}>
         {renderNavItems({ pathname, items: navItems })}
       </Box>
       <Divider sx={{ borderColor: 'var(--mui-palette-neutral-700)' }} />
-      <Stack spacing={2} sx={{ p: '12px' }}>
-        <div>
-          <Typography color="var(--mui-palette-neutral-100)" variant="subtitle2">
-            Need more features?
-          </Typography>
-          <Typography color="var(--mui-palette-neutral-400)" variant="body2">
-            Check out our Pro solution template.
-          </Typography>
-        </div>
-        <Box sx={{ display: 'flex', justifyContent: 'center' }}>
-          <Box
-            component="img"
-            alt="Pro version"
-            src="/assets/devias-kit-pro.png"
-            sx={{ height: 'auto', width: '160px' }}
-          />
-        </Box>
-        <Button
-          component="a"
-          endIcon={<ArrowSquareUpRightIcon fontSize="var(--icon-fontSize-md)" />}
-          fullWidth
-          href="https://material-kit-pro-react.devias.io/"
-          sx={{ mt: 2 }}
-          target="_blank"
-          variant="contained"
-        >
-          Pro version
-        </Button>
-      </Stack>
     </Drawer>
   );
 }
diff --git a/src/components/dashboard/layout/nav-icons.tsx b/src/components/dashboard/layout/nav-icons.tsx
index 4695cee..9b3780e 100644
--- a/src/components/dashboard/layout/nav-icons.tsx
+++ b/src/components/dashboard/layout/nav-icons.tsx
@@ -1,7 +1,8 @@
 import type { Icon } from '@phosphor-icons/react/dist/lib/types';
 import { ChartPie as ChartPieIcon } from '@phosphor-icons/react/dist/ssr/ChartPie';
 import { GearSix as GearSixIcon } from '@phosphor-icons/react/dist/ssr/GearSix';
-import { PlugsConnected as PlugsConnectedIcon } from '@phosphor-icons/react/dist/ssr/PlugsConnected';
+import { Ranking } from '@phosphor-icons/react/dist/ssr/Ranking';
+import { GameController } from '@phosphor-icons/react/dist/ssr/GameController';
 import { User as UserIcon } from '@phosphor-icons/react/dist/ssr/User';
 import { Users as UsersIcon } from '@phosphor-icons/react/dist/ssr/Users';
 import { XSquare } from '@phosphor-icons/react/dist/ssr/XSquare';
@@ -9,8 +10,9 @@ import { XSquare } from '@phosphor-icons/react/dist/ssr/XSquare';
 export const navIcons = {
   'chart-pie': ChartPieIcon,
   'gear-six': GearSixIcon,
-  'plugs-connected': PlugsConnectedIcon,
+  'ranking': Ranking,
   'x-square': XSquare,
+  'game-controller': GameController,
   user: UserIcon,
   users: UsersIcon,
 } as Record<string, Icon>;
diff --git a/src/components/dashboard/layout/side-nav.tsx b/src/components/dashboard/layout/side-nav.tsx
index e5efa93..e8b1645 100644
--- a/src/components/dashboard/layout/side-nav.tsx
+++ b/src/components/dashboard/layout/side-nav.tsx
@@ -25,9 +25,9 @@ export function SideNav(): React.JSX.Element {
   return (
     <Box
       sx={{
-        '--SideNav-background': 'var(--mui-palette-neutral-950)',
+        '--SideNav-background': 'var(--mui-palette-primary-50)',
         '--SideNav-color': 'var(--mui-palette-common-white)',
-        '--NavItem-color': 'var(--mui-palette-neutral-300)',
+        '--NavItem-color': 'var(--mui-palette-neutral-500)',
         '--NavItem-hover-background': 'rgba(255, 255, 255, 0.04)',
         '--NavItem-active-background': 'var(--mui-palette-primary-main)',
         '--NavItem-active-color': 'var(--mui-palette-primary-contrastText)',
@@ -51,44 +51,27 @@ export function SideNav(): React.JSX.Element {
       }}
     >
       <Stack spacing={2} sx={{ p: 3 }}>
-        <Box component={RouterLink} href={paths.home} sx={{ display: 'inline-flex' }}>
-          <Logo color="light" height={32} width={122} />
+        <Box component={RouterLink} href={paths.home} sx={{ display: 'inline-flex', textDecoration: "none" }}>
+          <Logo color="light" height={50} width={122} />
+          <div style={{
+            width: "100%",
+            height: "100%",
+            textAlign: "center",
+            color: "black",
+            display: "flex",
+            justifyContent: "center",
+            flexDirection: "column",
+            fontSize: "24px",
+            fontWeight: "bolder",
+          }}>조선팔도</div>
         </Box>
       </Stack>
-      <Divider sx={{ borderColor: 'var(--mui-palette-neutral-700)' }} />
+      {/*<Divider sx={{ borderColor: 'var(--mui-palette-neutral-700)' }} />*/}
       <Box component="nav" sx={{ flex: '1 1 auto', p: '12px' }}>
         {renderNavItems({ pathname, items: navItems })}
       </Box>
       <Divider sx={{ borderColor: 'var(--mui-palette-neutral-700)' }} />
-      <Stack spacing={2} sx={{ p: '12px' }}>
-        <div>
-          <Typography color="var(--mui-palette-neutral-100)" variant="subtitle2">
-            Need more features?
-          </Typography>
-          <Typography color="var(--mui-palette-neutral-400)" variant="body2">
-            Check out our Pro solution template.
-          </Typography>
-        </div>
-        <Box sx={{ display: 'flex', justifyContent: 'center' }}>
-          <Box
-            component="img"
-            alt="Pro version"
-            src="/assets/devias-kit-pro.png"
-            sx={{ height: 'auto', width: '160px' }}
-          />
-        </Box>
-        <Button
-          component="a"
-          endIcon={<ArrowSquareUpRightIcon fontSize="var(--icon-fontSize-md)" />}
-          fullWidth
-          href="https://material-kit-pro-react.devias.io/"
-          sx={{ mt: 2 }}
-          target="_blank"
-          variant="contained"
-        >
-          Pro version
-        </Button>
-      </Stack>
+
     </Box>
   );
 }
diff --git a/src/components/dashboard/layout/user-popover.tsx b/src/components/dashboard/layout/user-popover.tsx
index 353b494..ebd0609 100644
--- a/src/components/dashboard/layout/user-popover.tsx
+++ b/src/components/dashboard/layout/user-popover.tsx
@@ -64,12 +64,12 @@ export function UserPopover({ anchorEl, onClose, open }: UserPopoverProps): Reac
       </Box>
       <Divider />
       <MenuList disablePadding sx={{ p: '8px', '& .MuiMenuItem-root': { borderRadius: 1 } }}>
-        <MenuItem component={RouterLink} href={paths.dashboard.settings} onClick={onClose}>
-          <ListItemIcon>
-            <GearSixIcon fontSize="var(--icon-fontSize-md)" />
-          </ListItemIcon>
-          Settings
-        </MenuItem>
+        {/*<MenuItem component={RouterLink} href={paths.dashboard.settings} onClick={onClose}>*/}
+        {/*  <ListItemIcon>*/}
+        {/*    <GearSixIcon fontSize="var(--icon-fontSize-md)" />*/}
+        {/*  </ListItemIcon>*/}
+        {/*  Settings*/}
+        {/*</MenuItem>*/}
         <MenuItem component={RouterLink} href={paths.dashboard.account} onClick={onClose}>
           <ListItemIcon>
             <UserIcon fontSize="var(--icon-fontSize-md)" />
diff --git a/src/components/game/YutPan.jsx b/src/components/game/YutPan.jsx
index 5d19985..bee0560 100644
--- a/src/components/game/YutPan.jsx
+++ b/src/components/game/YutPan.jsx
@@ -5,540 +5,554 @@
 import {forwardRef, useEffect, useRef, useState} from "react";
 import useWindowSizeCustom from "../../hooks/useWindowSizeCustom.js";
 import {yutStates} from "./YutStates.js"
-import {useRouter} from "next/navigation";
+import {useParams} from "next/navigation";
 
 function YutPan() {
-    console.log("YutPan render");
+  console.log("YutPan render");
 
-    const [yutThrowImageSrc, setYutThrowImageSrc] = useState("/image/yut1.gif");
-    const [yutThrowImageDisplay, setYutThrowImageDisplay] = useState("none");
-    const [yutThrowAble, setYutThrowAble] = useState(false);
-    const windowSizeCustom = useWindowSizeCustom();
+  const [yutThrowImageSrc, setYutThrowImageSrc] = useState("/image/yut1.gif");
+  const [yutThrowImageDisplay, setYutThrowImageDisplay] = useState("none");
+  const [yutThrowAble, setYutThrowAble] = useState(false);
+  const windowSizeCustom = useWindowSizeCustom();
 
 
-    const [player1Top, setPlayer1Top] = useState(356.11);
-    const [player1Left, setPlayer1Left] = useState(356.31);
-    const [player1Index, setPlayer1Index] = useState(0);
-    const [player1Direction, setPlayer1Direction] = useState("scaleX(1)");
+  const [player1Top, setPlayer1Top] = useState(356.11);
+  const [player1Left, setPlayer1Left] = useState(356.31);
+  const [player1Index, setPlayer1Index] = useState(0);
+  const [player1Direction, setPlayer1Direction] = useState("scaleX(1)");
 
 
-    const [resultArr, setResultArr] = useState([]);
-    const [resultDelIndex, setResultDelIndex] = useState(null);
+  const [resultArr, setResultArr] = useState([]);
+  const [resultDelIndex, setResultDelIndex] = useState(null);
 
 
-    const yutRefs = useRef([]);
+  const yutRefs = useRef([]);
 
-    // YutState에 ref를 할당
-    useEffect(() => {
-        yutRefs.current = yutRefs.current.slice(0, yutStates.length);
-    }, []);
+  // YutState에 ref를 할당
+  useEffect(() => {
+    yutRefs.current = yutRefs.current.slice(0, yutStates.length);
+  }, []);
 
-    const {roomId} = useRouter();
-    // const roomd = useRouter();
+  const {roomId} = useParams();
 
-    const [socket, setSocket] = useState(null);
-    useEffect(() => {
+  const [socket, setSocket] = useState(null);
 
-        const ws = new WebSocket("ws://localhost:8080/commend/" + roomId);
+  useEffect(() => {
+    const ws = new WebSocket(`ws://localhost:8080/commend/asdfsf`);
 
-        ws.onopen = (data) => {
-            console.log('commend connected');
-        };
-
-        ws.onmessage = (data) => {
-            // console.log(data);
-            const onMessage = JSON.parse(data.data);
-            if (onMessage.type === "message") {
-                console.log(onMessage.msg)
-            } else if (onMessage.type === "command") {
-                console.log(onMessage.command)
-            }
-        }
-
-        ws.onclose = () => {
-            console.log('commend disconnected');
-        };
+    ws.onopen = () => {
+      console.log('commend connected');
+      setSocket(ws); // 연결이 성공한 후 상태 업데이트
+    };
 
-        setSocket(ws);
+    ws.onmessage = (event) => {
+      const onMessage = JSON.parse(event.data);
+      if (onMessage.type === "message") {
+        console.log(onMessage.msg);
+      } else if (onMessage.type === "command") {
+        console.log(onMessage.command);
+      }
+    };
 
-        return () => {
-            ws.close();
-        };
-    }, [roomId]);
+    ws.onclose = () => {
+      console.log('commend disconnected');
+    };
 
+    ws.onerror = (error) => {
+      console.error('WebSocket error:', error);
+      console.error('Error details:', error.message);
+    };
 
-    const sendCommand = (command) => {
-        if (socket && socket.readyState === WebSocket.OPEN) { // WebSocket이 열려 있는지 확인
-            let option = {
-                type: "command",
-                roomNumber: roomId,
-                command: command
-            };
-            socket.send(JSON.stringify(option))
-        }
+    return () => {
+      ws.close();
     };
+  }, [roomId]);
 
 
-    const stateMouseOver = (e) => {
-        const element = e.target;
-        element.querySelector(".yutName").style.scale = "1.5";
+  const sendCommand = (command) => {
+    if (socket && socket.readyState === WebSocket.OPEN) { // WebSocket이 열려 있는지 확인
+      let option = {
+        type: "command",
+        roomNumber: roomId,
+        command: command
+      };
+      socket.send(JSON.stringify(option))
     }
+  };
 
-    const stateMouseOut = (e) => {
-        const element = e.target;
-        element.querySelector(".yutName").style.scale = "0.7";
-    }
 
-    const YutThrowBtnOver = (e) => {
-        const element = e.target;
-        if (element.style.backgroundImage === `url("/image/Btthrow.normal.0.png")`) {
-            element.style.backgroundImage = `url("/image/Btthrow.mouseOver.0.png")`;
-        }
-    }
+  const stateMouseOver = (e) => {
+    const element = e.target;
+    element.querySelector(".yutName").style.scale = "1.5";
+  }
 
-    const YutThrowBtnOut = (e) => {
-        const element = e.target;
-        if (element.style.backgroundImage === `url("/image/Btthrow.mouseOver.0.png")`) {
-            element.style.backgroundImage = `url("/image/Btthrow.normal.0.png")`;
-        }
-    }
+  const stateMouseOut = (e) => {
+    const element = e.target;
+    element.querySelector(".yutName").style.scale = "0.7";
+  }
 
-    const YutThrowBtnDown = (e) => {
-        const element = e.target;
-        if (element.style.backgroundImage === `url("/image/Btthrow.mouseOver.0.png")`) {
-            element.style.backgroundImage = `url("/image/Btthrow.pressed.0.png")`;
-        }
-    }
-    const YutThrowBtnUp = (e) => {
-        const element = e.target;
-        if (element.style.backgroundImage === `url("/image/Btthrow.pressed.0.png")`) {
-            element.style.backgroundImage = `url("/image/Btthrow.disabled.0.png")`;
-        }
+  const YutThrowBtnOver = (e) => {
+    const element = e.target;
+    if (element.style.backgroundImage === `url("/image/Btthrow.normal.0.png")`) {
+      element.style.backgroundImage = `url("/image/Btthrow.mouseOver.0.png")`;
     }
+  }
 
-    const YutThrowBtnClick = () => {
-        if (yutThrowAble) {
-            setYutThrowImageDisplay("flex")
-            const randomNum = Math.floor(Math.random() * 5 + 1);
-            setYutThrowImageSrc(`/image/yut${randomNum}.gif`)
-
-            sendCommand("ThrowYut")
-
-            setTimeout(() => {
-                setYutThrowImageDisplay("none")
-                setYutThrowImageSrc("1")
-                setResultArr((arr) => [...arr, randomNum])
-                if (randomNum === 4 || randomNum === 5) {
-                    oneMore();
-                }
-            }, 2000)
-            setYutThrowAble(false)
-
-        }
-
+  const YutThrowBtnOut = (e) => {
+    const element = e.target;
+    if (element.style.backgroundImage === `url("/image/Btthrow.mouseOver.0.png")`) {
+      element.style.backgroundImage = `url("/image/Btthrow.normal.0.png")`;
     }
+  }
 
-    const oneMore = () => {
-        setYutThrowAble(true)
-        document.getElementsByClassName("YutThrowBtn")[0].style.backgroundImage = `url("/image/Btthrow.normal.0.png")`;
-
-    }
-
-    const arrowMouseOver = (e) => {
-        e.currentTarget.querySelector("img").style.filter = "drop-shadow(0px 0px 7px #ff0)";
-    }
-    const arrowMouseOut = (e) => {
-        e.currentTarget.querySelector("img").style.filter = "drop-shadow(0px 0px 0px #ff0)";
+  const YutThrowBtnDown = (e) => {
+    const element = e.target;
+    if (element.style.backgroundImage === `url("/image/Btthrow.mouseOver.0.png")`) {
+      element.style.backgroundImage = `url("/image/Btthrow.pressed.0.png")`;
     }
-
-    const arrowDisplayNone = () => {
-        yutRefs.current.forEach(arrow => {
-            if (arrow) {
-                arrow.style.display = "none";
-            }
-        });
+  }
+  const YutThrowBtnUp = (e) => {
+    const element = e.target;
+    if (element.style.backgroundImage === `url("/image/Btthrow.pressed.0.png")`) {
+      element.style.backgroundImage = `url("/image/Btthrow.disabled.0.png")`;
     }
-
-    const arrowClick = (index) => {
-        const YutData = yutStates.find(states => states.YutIndex === parseInt(index));
-        if (YutData) {
-            setPlayer1Top(parseInt(YutData.top, 10) || 0); // 기본값 0
-            setPlayer1Left(parseInt(YutData.left, 10) || 0); // 기본값 0
-            setPlayer1Index(parseInt(index, 10));
-            if ((index >= 0 && index <= 9) || index === "22" || index === "23") {
-                setPlayer1Direction("scaleX(1)")
-            } else {
-                setPlayer1Direction("scaleX(-1)")
-            }
-            arrowDisplayNone();
-            resultArrDelete(resultDelIndex);
-        } else {
-            console.warn(`YutData not found for index: ${index}`);
+  }
+
+  const YutThrowBtnClick = () => {
+    if (yutThrowAble) {
+      setYutThrowImageDisplay("flex")
+      const randomNum = Math.floor(Math.random() * 5 + 1);
+      setYutThrowImageSrc(`/image/yut${randomNum}.gif`)
+
+      sendCommand("ThrowYut")
+
+      setTimeout(() => {
+        setYutThrowImageDisplay("none")
+        setYutThrowImageSrc("1")
+        setResultArr((arr) => [...arr, randomNum])
+        if (randomNum === 4 || randomNum === 5) {
+          oneMore();
         }
-    };
+      }, 2000)
+      setYutThrowAble(false)
 
-    if (resultArr.length > 0) {
     }
 
-    const resultArrDelete = (index) => {
-        setResultArr((current) => {
-            const newArray = [...current];
-            newArray.splice(index, 1);
-            return newArray;
-        });
-    }
+  }
 
-    const resultUseClick = (item, index) => {
-        arrowDisplayNone();
-        setResultDelIndex(index);
-
-        // 상태 업데이트 후 화살표 표시를 위한 setTimeout 사용
-        setTimeout(() => {
-            let moveIndex = player1Index + item;
-            if (player1Index === 100) {
-                let go1 = (33 + item);
-                if (go1 > 36) go1 = go1 - 36 + 17;
-
-                const arrow1 = yutRefs.current.find(s => s.classList[0] === "arrowIndex" + go1);
-                arrow1.style.display = "block";
-
-                let go2 = (43 + item);
-                if (go2 > 46) go2 = go2 - 47;
-                const arrow2 = yutRefs.current.find(s => s.classList[0] === "arrowIndex" + go2);
-                arrow2.style.display = "block";
-                return;
-            }
-
-            // 크게 한바퀴 돌았을때
-            if (moveIndex >= 24 && player1Index <= 23) {
-                moveIndex -= 24;
-            }
-
-            if (player1Index >= 30 && player1Index <= 36 && moveIndex > 36) {
-                moveIndex = moveIndex - 37 + 18;
-            }
-
-            if (player1Index >= 40 && player1Index <= 46 && moveIndex > 46) {
-                moveIndex = moveIndex - 47;
-            }
-
-            // 중앙
-            if (moveIndex === 33 || moveIndex === 43) {
-                moveIndex = 100;
-            }
-            console.log(moveIndex);
-            const arrow1 = yutRefs.current.find(s => s.classList[0] === "arrowIndex" + moveIndex);
-            arrow1.style.display = "block";
-
-            if (player1Index === 6) {
-                let go = (item + 29);
-                if (go === 33) go = 100;
-                const arrow2 = yutRefs.current.find(s => s.classList[0] === "arrowIndex" + go);
-                arrow2.style.display = "block";
-            }
-            if (player1Index === 12) {
-                let go = (item + 39);
-                if (go === 43) go = 100;
-                const arrow2 = yutRefs.current.find(s => s.classList[0] === "arrowIndex" + go);
-                arrow2.style.display = "block";
-            }
-        }, 0); // 상태가 업데이트된 후 바로 실행
-    }
+  const oneMore = () => {
+    setYutThrowAble(true)
+    document.getElementsByClassName("YutThrowBtn")[0].style.backgroundImage = `url("/image/Btthrow.normal.0.png")`;
 
+  }
 
-    const YutName = {
-        position: "absolute",
-        top: "-32px",
-        opacity: 1,
-        left: "-25px",
-        fontSize: "10px",
-        textAlign: "center",
-        width: "50px",
-        transition: "all 0.3s ease-in-out",
-        zIndex: 5,
-        pointerEvents: "none",
-        textShadow: "black 0px 0px 3px",
-        fontWeight: "bold",
-        color: "white",
-        scale: "0.7"
-    }
+  const arrowMouseOver = (e) => {
+    e.currentTarget.querySelector("img").style.filter = "drop-shadow(0px 0px 7px #ff0)";
+  }
+  const arrowMouseOut = (e) => {
+    e.currentTarget.querySelector("img").style.filter = "drop-shadow(0px 0px 0px #ff0)";
+  }
 
-    const YutStateStyle = {
-        position: "absolute",
-        borderRadius: "13px",
-        boxShadow: "1px 1px 6px black",
-
-    }
-
-    // const StateBuildStyle = {
-    //     position: "absolute",
-    //     top: 0,
-    //     left: 0,
-    //     backgroundRepeat: 'no-repeat',
-    //     backgroundSize: 'cover',
-    //     width: 40,
-    //     height: 23,
-    //     transform: "translate(-40%, -40%)",
-    //     pointerEvents: "none",
-    //     scale: "1.5",
-    // }
-
-    const YutFanBackGroundStyle = {
-        position: "absolute",
-        top: -20,
-        left: -20,
-        width: "500px",
-        height: "500px",
-        background: "lightgray",
-        borderRadius: "5%",
-        opacity: 0.8,
+  const arrowDisplayNone = () => {
+    yutRefs.current.forEach(arrow => {
+      if (arrow) {
+        arrow.style.display = "none";
+      }
+    });
+  }
+
+  const arrowClick = (index) => {
+    const YutData = yutStates.find(states => states.YutIndex === parseInt(index));
+    if (YutData) {
+      setPlayer1Top(parseInt(YutData.top, 10) || 0); // 기본값 0
+      setPlayer1Left(parseInt(YutData.left, 10) || 0); // 기본값 0
+      setPlayer1Index(parseInt(index, 10));
+      if ((index >= 0 && index <= 9) || index === "22" || index === "23") {
+        setPlayer1Direction("scaleX(1)")
+      } else {
+        setPlayer1Direction("scaleX(-1)")
+      }
+      arrowDisplayNone();
+      resultArrDelete(resultDelIndex);
+    } else {
+      console.warn(`YutData not found for index: ${index}`);
     }
+  };
 
-    const YutThrowImageStyle = {
-        position: "absolute",
-        top: -20 + 250,
-        left: -20 + 250,
-        transform: "translate(-50%, -50%)",
-        width: 300,
-        height: 300,
-        display: yutThrowImageDisplay,
-        justifyContent: "center",
-        backgroundColor: "rgb(255,255,255,0.5)",
-        borderRadius: "50%",
-        zIndex: 50,
-        paddingBottom: "30px",
-    }
+  if (resultArr.length > 0) {
+  }
 
-    const YutPanStyle = {
+  const resultArrDelete = (index) => {
+    setResultArr((current) => {
+      const newArray = [...current];
+      newArray.splice(index, 1);
+      return newArray;
+    });
+  }
+
+  const resultUseClick = (item, index) => {
+    arrowDisplayNone();
+    setResultDelIndex(index);
+
+    // 상태 업데이트 후 화살표 표시를 위한 setTimeout 사용
+    setTimeout(() => {
+      let moveIndex = player1Index + item;
+      if (player1Index === 100) {
+        let go1 = (33 + item);
+        if (go1 > 36) go1 = go1 - 36 + 17;
+
+        const arrow1 = yutRefs.current.find(s => s.classList[0] === "arrowIndex" + go1);
+        arrow1.style.display = "block";
+
+        let go2 = (43 + item);
+        if (go2 > 46) go2 = go2 - 47;
+        const arrow2 = yutRefs.current.find(s => s.classList[0] === "arrowIndex" + go2);
+        arrow2.style.display = "block";
+        return;
+      }
+
+      // 크게 한바퀴 돌았을때
+      if (moveIndex >= 24 && player1Index <= 23) {
+        moveIndex -= 24;
+      }
+
+      if (player1Index >= 30 && player1Index <= 36 && moveIndex > 36) {
+        moveIndex = moveIndex - 37 + 18;
+      }
+
+      if (player1Index >= 40 && player1Index <= 46 && moveIndex > 46) {
+        moveIndex = moveIndex - 47;
+      }
+
+      // 중앙
+      if (moveIndex === 33 || moveIndex === 43) {
+        moveIndex = 100;
+      }
+      console.log(moveIndex);
+      const arrow1 = yutRefs.current.find(s => s.classList[0] === "arrowIndex" + moveIndex);
+      arrow1.style.display = "block";
+
+      if (player1Index === 6) {
+        let go = (item + 29);
+        if (go === 33) go = 100;
+        const arrow2 = yutRefs.current.find(s => s.classList[0] === "arrowIndex" + go);
+        arrow2.style.display = "block";
+      }
+      if (player1Index === 12) {
+        let go = (item + 39);
+        if (go === 43) go = 100;
+        const arrow2 = yutRefs.current.find(s => s.classList[0] === "arrowIndex" + go);
+        arrow2.style.display = "block";
+      }
+    }, 0); // 상태가 업데이트된 후 바로 실행
+  }
+
+
+  const YutName = {
+    position: "absolute",
+    top: "-32px",
+    opacity: 1,
+    left: "-25px",
+    fontSize: "10px",
+    textAlign: "center",
+    width: "50px",
+    transition: "all 0.3s ease-in-out",
+    zIndex: 5,
+    pointerEvents: "none",
+    textShadow: "black 0px 0px 3px",
+    fontWeight: "bold",
+    color: "white",
+    scale: "0.7"
+  }
+
+  const YutStateStyle = {
+    position: "absolute",
+    borderRadius: "13px",
+    boxShadow: "1px 1px 6px black",
+
+  }
+
+  // const StateBuildStyle = {
+  //     position: "absolute",
+  //     top: 0,
+  //     left: 0,
+  //     backgroundRepeat: 'no-repeat',
+  //     backgroundSize: 'cover',
+  //     width: 40,
+  //     height: 23,
+  //     transform: "translate(-40%, -40%)",
+  //     pointerEvents: "none",
+  //     scale: "1.5",
+  // }
+
+  const YutFanBackGroundStyle = {
+    position: "absolute",
+    top: -20,
+    left: -20,
+    width: "500px",
+    height: "500px",
+    background: "lightgray",
+    borderRadius: "5%",
+    opacity: 0.8,
+  }
+
+  const YutThrowImageStyle = {
+    position: "absolute",
+    top: -20 + 250,
+    left: -20 + 250,
+    transform: "translate(-50%, -50%)",
+    width: 300,
+    height: 300,
+    display: yutThrowImageDisplay,
+    justifyContent: "center",
+    backgroundColor: "rgb(255,255,255,0.5)",
+    borderRadius: "50%",
+    zIndex: 50,
+    paddingBottom: "30px",
+  }
+
+  const YutPanStyle = {
+    position: "absolute",
+    width: 500,
+    height: 500,
+    top: `${windowSizeCustom.height / 2 + 30}px`,
+    left: `${windowSizeCustom.width / 2 + 30}px`,
+    transform: "translate(-50%, -50%)",
+    scale: "1.5",
+    transformOrigin: "0px 0px",
+  }
+
+  const YutThrowBtnStyle = {
+    left: 149,
+    top: 325.05,
+    width: 161,
+    height: 45,
+    scale: '0.7',
+    position: 'absolute',
+    backgroundImage: `url("/image/Btthrow.disabled.0.png")`,
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: 'cover',
+  }
+
+  const YetResultBtnStyle = {
+    left: 124,
+    top: 65,
+    width: 210,
+    height: 30,
+    scale: "0.8",
+    position: 'absolute',
+    display: "flex",
+    justifyContent: "space-evenly",
+  }
+
+  const player1Style = {
+    position: "absolute",
+    width: 40,
+    zIndex: 4,
+    pointerEvents: "none",
+    top: player1Top - 5,
+    left: player1Left + 2,
+    display: "block",
+  }
+
+  const playerNameStyle = {
+    fontSize: "14px",
+    fontWeight: "bolder",
+    display: "inline-block",
+    width: "auto",
+    textAlign: "center",
+    position: "absolute",
+    bottom: "-10px",
+    left: "0px",
+  }
+
+  const arrowStyle = {
+    position: "absolute",
+    width: 20,
+    height: 30,
+    display: "none",
+  }
+
+  const backStyle = {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    backgroundImage: `url("/image/background.jpg")`,
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: 'cover',
+    overflow: "hidden",
+  };
+
+
+  const YutState = ({name, left, top, border, onMouseOver, onMouseOut}) => {
+    return (
+      <div
+        className="YutState"
+        onMouseOver={onMouseOver}
+        onMouseOut={onMouseOut}
+        style={{
+          ...YutStateStyle,
+          left: `${left}px`,
+          top: `${top}px`,
+          border: border,
+        }}
+      >
+        <div style={YutName} className="yutName">{name}</div>
+      </div>
+    );
+  };
+
+
+  const Arrow = forwardRef(({index, left, top, onMouseOver, onMouseOut, onClick}, ref) => {
+    return (
+      <div
+        ref={ref} // ref를 여기서 연결합니다.
+        className={`arrowIndex${index} arrowIndex`}
+        onMouseOver={onMouseOver}
+        onMouseOut={onMouseOut}
+        onClick={onClick}
+        style={{
+          ...arrowStyle,
+
+          left: `${left + 10}px`,
+          top: `${top - 35}px`,
+        }}
+      >
+        <img src="/image/underArrow.png" alt="" style={{width: "100%"}}/>
+      </div>
+    );
+  });
+
+
+  return <div style={backStyle}>
+
+    <div style={YutPanStyle}>
+      <div style={{
         position: "absolute",
         width: 500,
         height: 500,
-        top: windowSizeCustom.height / 2 + 30,
-        left: windowSizeCustom.width / 2 + 30,
-        transform: "translate(-50%, -50%)",
-        scale: "1.5",
-        transformOrigin: "0px 0px",
-    }
-
-    const YutThrowBtnStyle = {
-        left: 149,
-        top: 325.05,
-        width: 161,
-        height: 45,
-        scale: '0.7',
-        position: 'absolute',
-        backgroundImage: `url("/image/Btthrow.disabled.0.png")`,
-        backgroundRepeat: 'no-repeat',
-        backgroundSize: 'cover',
-    }
-
-    const YetResultBtnStyle = {
-        left: 124,
-        top: 65,
-        width: 210,
-        height: 30,
-        scale: "0.8",
-        position: 'absolute',
-        display: "flex",
-        justifyContent: "space-evenly",
-    }
-
-    const player1Style = {
-        position: "absolute",
-        width: 40,
-        zIndex: 4,
-        pointerEvents: "none",
-        top: player1Top - 10,
-        left: player1Left + 2,
-        display: "block",
-    }
-
-    const arrowStyle = {
-        position: "absolute",
-        width: 20,
-        height: 30,
-        display: "none",
-    }
-
-    const backStyle = {
-        position: "absolute",
-        top: 0,
-        left: 0,
-        width: "100%",
-        height: "100%",
-        backgroundImage: `url("/image/background.jpg")`,
-        backgroundRepeat: 'no-repeat',
-        backgroundSize: 'cover',
-        overflow: "hidden",
-    };
+      }}>
+        <div style={YutFanBackGroundStyle}></div>
+        <div style={YutThrowImageStyle}>
+          <img src={yutThrowImageSrc} alt="윷 이미지" id="yutThrowImage"/>
+        </div>
 
+        <div className="YutThrowBtn"
+             onMouseOver={YutThrowBtnOver}
+             onMouseDown={YutThrowBtnDown}
+             onMouseUp={YutThrowBtnUp}
+             onMouseOut={YutThrowBtnOut}
+             onClick={YutThrowBtnClick}
+             style={YutThrowBtnStyle}>
+        </div>
 
-    const YutState = ({name, left, top, border, onMouseOver, onMouseOut}) => {
-        return (
+        <div className="YutResultBtn"
+             style={YetResultBtnStyle}>
+          {resultArr.map((item, index) => (
             <div
-                className="YutState"
-                onMouseOver={onMouseOver}
-                onMouseOut={onMouseOut}
-                style={{
-                    ...YutStateStyle,
-                    left: left,
-                    top: top,
-                    border: border,
-                }}
+              key={`resultArr-${index}`} // 다른 접두사를 사용합니다.
+              style={{width: 30, height: 30}}
+              onClick={() => resultUseClick(item, index)}
             >
-                <div style={YutName} className="yutName">{name}</div>
+              <img src={`/image/yutResult.${item}.0.png`} alt="결과" width="30"/>
             </div>
-        );
-    };
+          ))}
+        </div>
 
+        <div style={{fontSize: "20px", position: "absolute"}} onClick={oneMore}>한번더</div>
 
-    const Arrow = forwardRef(({index, left, top, onMouseOver, onMouseOut, onClick}, ref) => {
-        return (
-            <div
-                ref={ref} // ref를 여기서 연결합니다.
-                className={`arrowIndex${index} arrowIndex`}
-                onMouseOver={onMouseOver}
-                onMouseOut={onMouseOut}
-                onClick={onClick}
-                style={{
-                    ...arrowStyle,
-                    left: left + 10,
-                    top: top - 35,
-                }}
-            >
-                <img src="/image/underArrow.png" alt=""/>
-            </div>
-        );
-    });
 
+        <div className="player player1"
+             style={player1Style}
+        >
+          <img src="/image/pinkbin.png" alt="핑크빈"
+               style={{transform: player1Direction, width: "100%"}}/>
+          <span style={playerNameStyle}>민석이</span>
+        </div>
 
-    return <div style={backStyle}>
-
-        <div style={YutPanStyle}>
-            <div style={{
-                position: "absolute",
-                width: 500,
-                height: 500,
-            }}>
-                <div style={YutFanBackGroundStyle}></div>
-                <div style={YutThrowImageStyle}>
-                    <img src={yutThrowImageSrc} alt="윷 이미지" id="yutThrowImage"/>
-                </div>
-
-                <div className="YutThrowBtn"
-                     onMouseOver={YutThrowBtnOver}
-                     onMouseDown={YutThrowBtnDown}
-                     onMouseUp={YutThrowBtnUp}
-                     onMouseOut={YutThrowBtnOut}
-                     onClick={YutThrowBtnClick}
-                     style={YutThrowBtnStyle}>
-                </div>
-
-                <div className="YutResultBtn"
-                     style={YetResultBtnStyle}>
-                    {resultArr.map((item, index) => (
-                        <div
-                            key={`resultArr-${index}`} // 다른 접두사를 사용합니다.
-                            style={{width: 30, height: 30}}
-                            onClick={() => resultUseClick(item, index)}
-                        >
-                            <img src={`/image/yutResult.${item}.0.png`} alt="결과" width="30"/>
-                        </div>
-                    ))}
-                </div>
-
-                <div style={{fontSize: "20px", position: "absolute"}} onClick={oneMore}>한번더</div>
-
-
-                <div className="player player1"
-                     style={player1Style}
-                >
-                    <img src="/image/pinkbin.png" alt="핑크빈" width="92" height="88"
-                         style={{transform: player1Direction,}}/>
-                    <span>민석이</span>
-                </div>
-
-                {
-                    yutStates.map((state) => (
-                        <YutState
-                            key={`yutState-${state.YutIndex}`}
-                            name={state.name}
-                            left={state.left}
-                            top={state.top}
-                            border={state.border}
-                            onMouseOver={stateMouseOver}
-                            onMouseOut={stateMouseOut}
-                        />
-                    ))
-                }
-
-
-                {
-                    yutStates.map((state, index) => (
-                        <Arrow
-                            key={`arrow-${state.YutIndex}`}
-                            ref={(el) => (yutRefs.current[index] = el)} // ref 할당
-                            index={state.YutIndex}
-                            left={state.left}
-                            top={state.top}
-                            onMouseOver={arrowMouseOver}
-                            onMouseOut={arrowMouseOut}
-                            onClick={() => arrowClick(state.YutIndex)}
-                        />
-                    ))
-                }
+        {
+          yutStates.map((state) => (
+            <YutState
+              key={`yutState-${state.YutIndex}`}
+              name={state.name}
+              left={state.left}
+              top={state.top}
+              border={state.border}
+              onMouseOver={stateMouseOver}
+              onMouseOut={stateMouseOut}
+            />
+          ))
+        }
 
 
-            </div>
+        {
+          yutStates.map((state, index) => (
+            <Arrow
+              key={`arrow-${state.YutIndex}`}
+              ref={(el) => (yutRefs.current[index] = el)} // ref 할당
+              index={state.YutIndex}
+              left={state.left}
+              top={state.top}
+              onMouseOver={arrowMouseOver}
+              onMouseOut={arrowMouseOut}
+              onClick={() => arrowClick(state.YutIndex)}
+            />
+          ))
+        }
 
-        </div>
 
+      </div>
 
-        <div style={{
-            position: "absolute",
-            top: 0,
-            left: 0,
-            width: 300,
-            height: 150,
-            background: "red",
-        }}>
-            왼 위
-        </div>
+    </div>
 
-        <div style={{
-            position: "absolute",
-            top: 0,
-            right: 0,
-            width: 300,
-            height: 150,
-            background: "red",
-        }}>
-            오 위
-        </div>
 
+    <div style={{
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: 300,
+      height: 150,
+      background: "red",
+    }}>
+      왼 위
+    </div>
 
-        <div style={{
-            position: "absolute",
-            bottom: 0,
-            right: 0,
-            width: 300,
-            height: 150,
-            background: "red",
-        }}>
-            오 아
-        </div>
+    <div style={{
+      position: "absolute",
+      top: 0,
+      right: 0,
+      width: 300,
+      height: 150,
+      background: "red",
+    }}>
+      오 위
+    </div>
 
-        <div style={{
-            position: "absolute",
-            bottom: 0,
-            left: 0,
-            width: 300,
-            height: 150,
-            background: "red",
-        }}>
-            왼 아
-        </div>
+
+    <div style={{
+      position: "absolute",
+      bottom: 0,
+      right: 0,
+      width: 300,
+      height: 150,
+      background: "red",
+    }}>
+      오 아
+    </div>
+
+    <div style={{
+      position: "absolute",
+      bottom: 0,
+      left: 0,
+      width: 300,
+      height: 150,
+      background: "red",
+    }}>
+      왼 아
     </div>
+  </div>
 }
 
 export default YutPan;
diff --git a/src/components/game/chatComponent.js b/src/components/game/chatComponent.js
index 6ff6250..c0fb274 100644
--- a/src/components/game/chatComponent.js
+++ b/src/components/game/chatComponent.js
@@ -1,150 +1,154 @@
+"use client"
+
 import {Button, Input} from "@mui/material";
 import useWindowSizeCustom from "../../hooks/useWindowSizeCustom.js";
-import {useParams} from "react-router";
 import {useEffect, useRef, useState} from "react";
+import {useParams} from "next/navigation";
 
 export default function ChatComponent() {
 
-    const {roomId} = useParams();
-    const inputRef = useRef(null);
-
-    const [socket, setSocket] = useState(null);
-
-
-    const [myJWT, setMyJWT] = useState("");
-    useEffect(() => {
-        const getJWT = window.localStorage.getItem("accessToken").toString();
-        setMyJWT(getJWT);
-    }, []);
+  const {roomId} = useParams();
+  const inputRef = useRef(null);
 
+  const [socket, setSocket] = useState(null);
 
-    useEffect(() => {
 
-            const ws = new WebSocket("ws://localhost:8080/chat/" + roomId);
+  // const [myJWT, setMyJWT] = useState("");
+  // useEffect(() => {
+  //     const getJWT = window.localStorage.getItem("accessToken").toString();
+  //     setMyJWT(getJWT);
+  // }, []);
 
-            ws.onopen = (data) => {
-                console.log('chat connected');
-            };
 
-            ws.onmessage = (data) => {
-                const onMessage = JSON.parse(data.data);
-                if (onMessage.type === "message") {
-                    console.log(onMessage.msg)
-                }
-            }
+  useEffect(() => {
 
-            ws.onclose = () => {
-                console.log('chat disconnected');
-            };
+    const ws = new WebSocket("ws://localhost:8080/chat/" + roomId);
 
-            setSocket(ws);
-
-            return () => {
-                ws.close();
-            };
-        }, [roomId]);
-
-
-    const inputSend2 = () => {
-        const inputElement = inputRef.current?.querySelector("input");
-        const value = inputElement.value;
-        if (value.length > 0) {
-            let option = {
-                type: "message",
-                roomNumber: roomId,
-                msg: value,
-                jwt: myJWT,
-            };
-            socket.send(JSON.stringify(option))
-            inputElement.value = ""; // 입력 필드의 값을 직접 변경
-        }
+    ws.onopen = (data) => {
+      console.log('chat connected');
     };
 
-
-    const windowSize = useWindowSizeCustom();
-
-    const chatStyle = {
-        position: "absolute",
-        right: 20,
-        bottom: windowSize.height / 2,
-        transform: "translateY(50%)",
-        width: 300,
-        height: 300,
-        overflow: "hidden",
-        borderRadius: "5%",
+    ws.onmessage = (data) => {
+      const onMessage = JSON.parse(data.data);
+      if (onMessage.type === "message") {
+        console.log(onMessage.msg)
+      }
     }
 
-    const InputForm = {
-        position: "absolute",
-        bottom: 0,
-        left: 0,
-        width: "100%",
-        height: "20%",
-    }
+    ws.onclose = () => {
+      console.log('chat disconnected');
+      alert("웹소켓 연결 실패")
+      window.location.reload();
+    };
 
-    const InnerChat = {
-        position: "absolute",
-        width: "100%",
-        height: "80%",
-    }
+    setSocket(ws);
 
-    return (
-        <div style={chatStyle}>
-            <div className="flex flex-col h-full bg-white">
-                <div className="flex-1 overflow-y-auto p-4" style={InnerChat}>
-                    <div className="space-y-4">
-                        {/*<div className="flex items-start gap-3">*/}
-                        {/*    <Box*/}
-                        {/*        className="w-10 h-10 rounded-full bg-green-500 text-white flex items-center justify-center">*/}
-                        {/*    </Box>*/}
-                        {/*    <div className="bg-green-500 text-white px-4 py-2 rounded-lg max-w-[75%]">*/}
-                        {/*        <p className="font-medium">John Doe</p>*/}
-                        {/*        <p>Hey, I have a used laptop for sale. Interested?</p>*/}
-                        {/*    </div>*/}
-                        {/*</div>*/}
-                        {/*<div className="flex items-start gap-3 justify-end">*/}
-                        {/*    <div className="bg-gray-200 text-gray-900 px-4 py-2 rounded-lg max-w-[75%]">*/}
-                        {/*        <p className="font-medium">Jane Smith</p>*/}
-                        {/*        <p>Sure, what are the specs and how much are you asking for it?</p>*/}
-                        {/*    </div>*/}
-                        {/*    <Box*/}
-                        {/*        className="w-10 h-10 rounded-full bg-green-500 text-white flex items-center justify-center">*/}
-                        {/*    </Box>*/}
-                        {/*</div>*/}
-                        {/*<div className="flex items-start gap-3">*/}
-                        {/*    <Box*/}
-                        {/*        className="w-10 h-10 rounded-full bg-green-500 text-white flex items-center justify-center">*/}
-                        {/*    </Box>*/}
-                        {/*    <div className="bg-green-500 text-white px-4 py-2 rounded-lg max-w-[75%]">*/}
-                        {/*        <p className="font-medium">John Doe</p>*/}
-                        {/*        <p>It's a 2-year-old Dell laptop with an i5 processor, 8GB RAM, and a 256GB SSD. I'm*/}
-                        {/*            asking for $400.</p>*/}
-                        {/*    </div>*/}
-                        {/*</div>*/}
-                        {/*<div className="flex items-start gap-3 justify-end">*/}
-                        {/*    <div className="bg-gray-200 text-gray-900 px-4 py-2 rounded-lg max-w-[75%]">*/}
-                        {/*        <p className="font-medium">Jane Smith</p>*/}
-                        {/*        <p>Sounds good, I'll take it. When and where can we meet?</p>*/}
-                        {/*    </div>*/}
-                        {/*    <Box*/}
-                        {/*        className="w-10 h-10 rounded-full bg-green-500 text-white flex items-center justify-center">*/}
-                        {/*    </Box>*/}
-                        {/*</div>*/}
-                    </div>
-                </div>
-                <div className="bg-white border-t border-gray-200 p-4 flex items-center" style={InputForm}>
-                    <Input
-                        placeholder="Type your message..."
-                        className="flex-1 bg-gray-000 border-none focus:ring-0 focus:outline-none"
-                        ref={inputRef}
-                    />
-                    <Button variant="solid" className="bg-green-500 hover:bg-green-600 text-white ml-2"
-                            onClick={inputSend2}>
-                        Send
-                    </Button>
-                </div>
-            </div>
+    return () => {
+      ws.close();
+    };
+  }, [roomId]);
+
+
+  const inputSend2 = () => {
+    const inputElement = inputRef.current?.querySelector("input");
+    const value = inputElement.value;
+    if (value.length > 0) {
+      let option = {
+        type: "message",
+        roomNumber: roomId,
+        msg: value,
+        // jwt: myJWT,
+      };
+      socket.send(JSON.stringify(option))
+      inputElement.value = ""; // 입력 필드의 값을 직접 변경
+    }
+  };
+
+
+  const windowSize = useWindowSizeCustom();
+
+  const chatStyle = {
+    position: "absolute",
+    right: 20,
+    bottom: `${windowSize.height / 2}px`,
+    transform: "translateY(50%)",
+    width: 300,
+    height: 300,
+    overflow: "hidden",
+    borderRadius: "5%",
+  }
+
+  const InputForm = {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    width: "100%",
+    height: "20%",
+  }
+
+  const InnerChat = {
+    position: "absolute",
+    width: "100%",
+    height: "80%",
+  }
+
+  return (
+    <div style={chatStyle}>
+      <div className="flex flex-col h-full bg-white">
+        <div className="flex-1 overflow-y-auto p-4" style={InnerChat}>
+          <div className="space-y-4">
+            {/*<div className="flex items-start gap-3">*/}
+            {/*    <Box*/}
+            {/*        className="w-10 h-10 rounded-full bg-green-500 text-white flex items-center justify-center">*/}
+            {/*    </Box>*/}
+            {/*    <div className="bg-green-500 text-white px-4 py-2 rounded-lg max-w-[75%]">*/}
+            {/*        <p className="font-medium">John Doe</p>*/}
+            {/*        <p>Hey, I have a used laptop for sale. Interested?</p>*/}
+            {/*    </div>*/}
+            {/*</div>*/}
+            {/*<div className="flex items-start gap-3 justify-end">*/}
+            {/*    <div className="bg-gray-200 text-gray-900 px-4 py-2 rounded-lg max-w-[75%]">*/}
+            {/*        <p className="font-medium">Jane Smith</p>*/}
+            {/*        <p>Sure, what are the specs and how much are you asking for it?</p>*/}
+            {/*    </div>*/}
+            {/*    <Box*/}
+            {/*        className="w-10 h-10 rounded-full bg-green-500 text-white flex items-center justify-center">*/}
+            {/*    </Box>*/}
+            {/*</div>*/}
+            {/*<div className="flex items-start gap-3">*/}
+            {/*    <Box*/}
+            {/*        className="w-10 h-10 rounded-full bg-green-500 text-white flex items-center justify-center">*/}
+            {/*    </Box>*/}
+            {/*    <div className="bg-green-500 text-white px-4 py-2 rounded-lg max-w-[75%]">*/}
+            {/*        <p className="font-medium">John Doe</p>*/}
+            {/*        <p>It's a 2-year-old Dell laptop with an i5 processor, 8GB RAM, and a 256GB SSD. I'm*/}
+            {/*            asking for $400.</p>*/}
+            {/*    </div>*/}
+            {/*</div>*/}
+            {/*<div className="flex items-start gap-3 justify-end">*/}
+            {/*    <div className="bg-gray-200 text-gray-900 px-4 py-2 rounded-lg max-w-[75%]">*/}
+            {/*        <p className="font-medium">Jane Smith</p>*/}
+            {/*        <p>Sounds good, I'll take it. When and where can we meet?</p>*/}
+            {/*    </div>*/}
+            {/*    <Box*/}
+            {/*        className="w-10 h-10 rounded-full bg-green-500 text-white flex items-center justify-center">*/}
+            {/*    </Box>*/}
+            {/*</div>*/}
+          </div>
+        </div>
+        <div className="bg-white border-t border-gray-200 p-4 flex items-center" style={InputForm}>
+          <Input
+            placeholder="Type your message..."
+            className="flex-1 bg-gray-000 border-none focus:ring-0 focus:outline-none"
+            ref={inputRef}
+          />
+          <Button variant="solid" className="bg-green-500 hover:bg-green-600 text-white ml-2"
+                  onClick={inputSend2}>
+            Send
+          </Button>
         </div>
-    )
+      </div>
+    </div>
+  )
 
 }
diff --git a/src/components/userManagement/GameRoom.tsx b/src/components/userManagement/GameRoom.tsx
index 3e3f992..31acaed 100644
--- a/src/components/userManagement/GameRoom.tsx
+++ b/src/components/userManagement/GameRoom.tsx
@@ -70,8 +70,6 @@ const GameRoom: FC = () => {
 // 방 정보 불러오는 api
 const userList = [
   {
-    cover: "/static/cover/cover-1.png",
-    avatar: "/static/avatar/001-man.svg",
     name: "민석이짱",
     roomName: "초보만 들어오셈",
     seedMoney: 500,
@@ -80,8 +78,6 @@ const userList = [
     roomCode: "adsadvkjwi"
   },
   {
-    cover: "/static/cover/cover-4.png",
-    avatar: "/static/avatar/002-girl.svg",
     name: "짱짱맨",
     roomName: "고수만 와라",
     seedMoney: 1000,
@@ -90,8 +86,6 @@ const userList = [
     roomCode: "safasvasdnewo"
   },
   {
-    cover: "/static/cover/cover-4.png",
-    avatar: "/static/avatar/002-girl.svg",
     name: "짱짱맨",
     roomName: "고수만 와라",
     seedMoney: 1000,
@@ -100,8 +94,6 @@ const userList = [
     roomCode: "safasvasdnewo"
   },
   {
-    cover: "/static/cover/cover-4.png",
-    avatar: "/static/avatar/002-girl.svg",
     name: "짱짱맨",
     roomName: "고수만 와라",
     seedMoney: 1000,
@@ -110,8 +102,6 @@ const userList = [
     roomCode: "safasvasdnewo"
   },
   {
-    cover: "/static/cover/cover-4.png",
-    avatar: "/static/avatar/002-girl.svg",
     name: "짱짱맨",
     roomName: "고수만 와라",
     seedMoney: 1000,
@@ -120,8 +110,6 @@ const userList = [
     roomCode: "safasvasdnewo"
   },
   {
-    cover: "/static/cover/cover-4.png",
-    avatar: "/static/avatar/002-girl.svg",
     name: "짱짱맨",
     roomName: "고수만 와라",
     seedMoney: 1000,
@@ -130,8 +118,6 @@ const userList = [
     roomCode: "safasvasdnewo"
   },
   {
-    cover: "/static/cover/cover-4.png",
-    avatar: "/static/avatar/002-girl.svg",
     name: "짱짱맨",
     roomName: "고수만 와라",
     seedMoney: 1000,
@@ -140,8 +126,6 @@ const userList = [
     roomCode: "safasvasdnewo"
   },
   {
-    cover: "/static/cover/cover-4.png",
-    avatar: "/static/avatar/002-girl.svg",
     name: "짱짱맨",
     roomName: "고수만 와라",
     seedMoney: 1000,
diff --git a/src/components/userManagement/UserCard.tsx b/src/components/userManagement/UserCard.tsx
index fba847a..02ec5d7 100644
--- a/src/components/userManagement/UserCard.tsx
+++ b/src/components/userManagement/UserCard.tsx
@@ -5,8 +5,6 @@ import React, {FC} from "react";
 // component props interface
 interface UserCardProps {
     user: {
-        cover: string;
-        avatar: string;
         name: string;
         roomName: string;
         seedMoney: number;
@@ -36,7 +34,7 @@ const ImageWrapper = styled(Box)(({theme}) => ({
 const UserCard: FC<UserCardProps> = ({user}) => {
     return (
         <Card onClick={() => {
-            window.open(`/home/in-game/${user.roomCode}`, '_blank')
+            window.open(`/game/${user.roomCode}`, '_blank')
         }}>
             <ImageWrapper>
                 <img src={user.cover} width="100%" height="100%" alt={user.name}/>
diff --git a/src/config.ts b/src/config.ts
index 00785c8..0096925 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -7,6 +7,6 @@ export interface Config {
 }
 
 export const config: Config = {
-  site: { name: '윷 놀이', description: '', themeColor: '#090a0b', url: getSiteURL() },
+  site: { name: '조선팔도', description: '', themeColor: '#090a0b', url: getSiteURL() },
   logLevel: (process.env.NEXT_PUBLIC_LOG_LEVEL as keyof typeof LogLevel) ?? LogLevel.ALL,
 };
diff --git a/src/paths.ts b/src/paths.ts
index 9f3d8ea..5e1d566 100644
--- a/src/paths.ts
+++ b/src/paths.ts
@@ -2,11 +2,10 @@ export const paths = {
   home: '/',
   auth: { signIn: '/auth/sign-in', signUp: '/auth/sign-up', resetPassword: '/auth/reset-password' },
   dashboard: {
-    overview: '/dashboard',
-    account: '/dashboard/account',
-    customers: '/dashboard/customers',
-    integrations: '/dashboard/integrations',
-    settings: '/dashboard/settings',
+    account: '/account',
+    customers: '/customers',
+    ranking: '/ranking',
+    gameroom: '/game-room',
   },
   errors: { notFound: '/errors/not-found' },
 } as const;
diff --git a/src/styles/theme/color-schemes.ts b/src/styles/theme/color-schemes.ts
index 2361082..5519263 100644
--- a/src/styles/theme/color-schemes.ts
+++ b/src/styles/theme/color-schemes.ts
@@ -1,6 +1,6 @@
 import type { ColorSystemOptions } from '@mui/material/styles';
 
-import { california, kepple, neonBlue, nevada, redOrange, shakespeare, stormGrey } from './colors';
+import { california, kepple, neonBlue, nevada, redOrange, shakespeare, stormGrey, brawn } from './colors';
 import type { ColorScheme } from './types';
 
 export const colorSchemes = {
@@ -35,10 +35,10 @@ export const colorSchemes = {
       },
       neutral: { ...nevada },
       primary: {
-        ...neonBlue,
-        light: neonBlue[300],
-        main: neonBlue[400],
-        dark: neonBlue[500],
+        ...brawn,
+        light: brawn[300],
+        main: brawn[400],
+        dark: brawn[500],
         contrastText: 'var(--mui-palette-common-black)',
       },
       secondary: {
@@ -102,10 +102,10 @@ export const colorSchemes = {
       },
       neutral: { ...stormGrey },
       primary: {
-        ...neonBlue,
-        light: neonBlue[400],
-        main: neonBlue[500],
-        dark: neonBlue[600],
+        ...brawn,
+        light: brawn[400],
+        main: brawn[500],
+        dark: brawn[600],
         contrastText: 'var(--mui-palette-common-white)',
       },
       secondary: {
diff --git a/src/styles/theme/colors.ts b/src/styles/theme/colors.ts
index 9533ec8..c637040 100644
--- a/src/styles/theme/colors.ts
+++ b/src/styles/theme/colors.ts
@@ -84,6 +84,22 @@ export const shakespeare = {
   950: '#082f44',
 } satisfies PaletteRange;
 
+
+export const brawn = {
+  50: "#FAF4E1", // 아주 연한 갈색
+  100: "#F0E0D1", // 아주 연한 갈색
+  200: "#D9C1A3", // 연한 갈색
+  300: "#C2A08D", // 중간 갈색
+  400: "#A88A6E", // 다소 진한 갈색
+  500: "#8B6B4F", // 진한 갈색
+  600: "#7A5A3A", // 더 진한 갈색
+  700: "#6A4A2B", // 진한 갈색
+  800: "#5A3A1C", // 매우 진한 갈색
+  900: "#4A2A0D", // 거의 검은 갈색
+  950: "#3A1A00", // 검은색에 가까운 갈색
+} satisfies PaletteRange;
+
+
 export const stormGrey = {
   50: '#f9fafb',
   100: '#f1f1f4',
@@ -97,3 +113,6 @@ export const stormGrey = {
   900: '#212636',
   950: '#121621',
 } satisfies PaletteRange;
+
+
+
diff --git a/src/theme/index.ts b/src/theme/index.ts
deleted file mode 100644
index 6f3f3c9..0000000
--- a/src/theme/index.ts
+++ /dev/null
@@ -1,259 +0,0 @@
-import { createTheme, Theme, ThemeOptions } from "@mui/material";
-import {
-  error,
-  info,
-  primary,
-  secondary,
-  success,
-  warning,
-} from "./themeColors";
-
-const fontSize = 14;
-
-const baseOptions: ThemeOptions = {
-  direction: "ltr",
-  breakpoints: {
-    values: {
-      xs: 0,
-      sm: 600,
-      md: 960,
-      lg: 1280,
-      xl: 1920,
-    },
-  },
-  palette: {
-    primary,
-    secondary,
-    error,
-    warning,
-    success,
-    info,
-    divider: secondary[300],
-    background: { default: "#efe9e3" },
-    text: {
-      primary: secondary[500],
-      secondary: secondary[300],
-      disabled: secondary[400],
-    },
-    mode: "light",
-  },
-  components: {
-    MuiAvatar: {
-      styleOverrides: {
-        fallback: {
-          height: "75%",
-          width: "75%",
-        },
-      },
-    },
-    MuiButton: {
-      styleOverrides: {
-        root: {
-          textTransform: "none",
-          borderRadius: "4px",
-          color: "inherit",
-          boxShadow: "none",
-          padding: "0.6rem 1.5rem",
-        },
-        outlinedPrimary: {
-          borderColor: primary.main,
-          color: primary.main,
-        },
-        containedPrimary: {
-          color: "white",
-          "&:hover": {
-            backgroundColor: primary.dark,
-            boxShadow: "none",
-          },
-        },
-      },
-    },
-    MuiCssBaseline: {
-      styleOverrides: {
-        "*": {
-          boxSizing: "border-box",
-        },
-        html: {
-          MozOsxFontSmoothing: "grayscale",
-          WebkitFontSmoothing: "antialiased",
-          height: "100%",
-          width: "100%",
-        },
-        body: {
-          height: "100%",
-        },
-        a: {
-          textDecoration: "none",
-          color: "inherit",
-        },
-        "#root": {
-          height: "100%",
-        },
-        "#nprogress .bar": {
-          zIndex: "9999 !important",
-          backgroundColor: "#61A9FF !important",
-          width: "100%",
-          position: "fixed",
-        },
-        "input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button":
-          {
-            WebkitAppearance: "none",
-            margin: 0,
-          },
-      },
-    },
-    MuiPaper: {
-      styleOverrides: {
-        root: {
-          backgroundImage: "none",
-        },
-      },
-    },
-    MuiRating: {
-      styleOverrides: {
-        root: {
-          color: "#FFD600",
-        },
-      },
-    },
-    MuiTableBody: {
-      styleOverrides: {
-        root: {
-          "& .MuiTableRow-root:last-of-type": {
-            "& .MuiTableCell-root": { borderBottom: 0 },
-          },
-        },
-      },
-    },
-    MuiTab: {
-      styleOverrides: {
-        root: {
-          color: "#94A4C4",
-          textTransform: "none",
-          fontSize: 12,
-          fontWeight: 600,
-          padding: 0,
-          minWidth: "auto",
-          marginLeft: "1rem",
-          marginRight: "1rem",
-        },
-      },
-    },
-    MuiTabs: {
-      styleOverrides: {
-        root: {
-          "& .MuiButtonBase-root:first-of-type": {
-            marginLeft: 0,
-          },
-          "& .MuiButtonBase-root:last-of-type": {
-            marginRight: 0,
-          },
-        },
-      },
-    },
-    MuiIconButton: {
-      styleOverrides: {
-        root: {
-          "&:hover": { backgroundColor: "transparent" },
-        },
-      },
-    },
-    MuiPopover: {
-      styleOverrides: {
-        root: {
-          "& .MuiPopover-paper": {
-            boxShadow: "none",
-            borderRadius: "8px",
-            border: "2px solid #E5EAF2",
-          },
-        },
-      },
-    },
-    MuiButtonBase: {
-      styleOverrides: {
-        root: {
-          fontFamily: "'Montserrat', sans-serif",
-        },
-      },
-    },
-    MuiTextField: {
-      styleOverrides: {
-        root: {
-          "& input::placeholder": {
-            color: secondary[400],
-            opacity: 1,
-          },
-          "& label": {
-            color: secondary[400],
-            opacity: 1,
-            fontWeight: 500,
-          },
-        },
-      },
-    },
-    MuiCard: {
-      styleOverrides: {
-        root: {
-          boxShadow: "none",
-          border: "1px solid #E5EAF2",
-          borderRadius: 8,
-        },
-      },
-    },
-  },
-  typography: {
-    button: {
-      fontWeight: 600,
-    },
-    fontFamily: "'Montserrat', sans-serif",
-    h1: {
-      fontWeight: 800,
-      fontSize: "4.25rem",
-    },
-    h2: {
-      fontWeight: 600,
-      fontSize: "4rem",
-    },
-    h3: {
-      fontWeight: 600,
-      fontSize: "2.25rem",
-    },
-    h4: {
-      fontWeight: 600,
-      fontSize: "2rem",
-    },
-    h5: {
-      fontWeight: 600,
-      fontSize: "1.5rem",
-    },
-    h6: {
-      fontWeight: 600,
-      fontSize,
-    },
-    overline: {
-      fontWeight: 600,
-    },
-    body1: { fontSize },
-    body2: { fontSize },
-  },
-};
-
-export type themeSettingsProps = {
-  theme: string;
-  direction: string;
-  responsiveFontSizes: boolean;
-};
-
-export const ukoTheme = () => {
-  let theme: Theme = createTheme(baseOptions);
-
-  // theme shadows
-  theme.shadows[1] = "0px 4px 23px rgba(0, 0, 0, 0.12)";
-  theme.shadows[2] = "0px 0px 21px 1px rgba(0, 0, 0, 0.07)";
-  theme.shadows[3] = "0px 10px 30px rgba(0, 0, 0, 0.1)";
-  theme.shadows[4] = "0px 7px 30px 3px rgba(0, 0, 0, 0.05)";
-
-  // console.log(theme);
-
-  return theme;
-};
diff --git a/src/theme/themeColors.ts b/src/theme/themeColors.ts
deleted file mode 100644
index 342a00d..0000000
--- a/src/theme/themeColors.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-declare module "@mui/material/styles" {
-  interface PaletteColor {
-    100: string;
-    200: string;
-    300: string;
-    400: string;
-    500: string;
-    red: string;
-    purple: string;
-    yellow: string;
-  }
-}
-
-export const primary = {
-  100: "#F0E0D1", // 아주 연한 갈색
-  200: "#D9C1A3", // 연한 갈색
-  300: "#C2A08D", // 중간 갈색
-  400: "#A88A6E", // 다소 진한 갈색
-  500: "#8B6B4F", // 진한 갈색
-  main: "#8B6B4F", // 진한 갈색
-  light: "#F0E0D1", // 아주 연한 갈색
-  dark: "#6B4A34", // 더 진한 갈색
-  red: "#FF6B93",
-  purple: "#A798FF",
-  yellow: "#FF9777",
-};
-
-export const secondary = {
-  100: "#F9F9F9",
-  200: "#ECEFF5",
-  300: "#E5EAF2", // outline or border
-  400: "#94A4C4", // text muted
-  500: "#1d2438", // main text
-  main: "#1d2438", // main text
-  light: "#F9F9F9",
-  red: "#FF6B93",
-  purple: "#A798FF",
-  yellow: "#FF9777",
-};
-
-export const error = {
-  main: "#FD396D",
-};
-
-export const success = {
-  main: "#2CC5BD",
-};
-
-export const warning = {
-  main: "#FFE91F",
-  dark: "#FFD600",
-};
-
-export const info = {
-  main: "#A798FF",
-};
-
-export const text = {
-  primary: secondary[500],
-  secondary: secondary[400],
-  disabled: secondary[300],
-};