Merge pull request #15 from themerous/minseok

front work
Joseonpaldo · Jul 29, 2024 · 190ee0d · 190ee0d
2 parents 8bf1927 + f4b9eb9
commit 190ee0d
Show file tree

Hide file tree

Showing 30 changed files with 747 additions and 1,074 deletions.
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/src/app/dashboard/account/page.tsx → src/app/(home)/account/page.tsx b/src/app/dashboard/account/page.tsx → 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 → src/app/(home)/customers/page.tsx b/src/app/dashboard/customers/page.tsx → 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 → src/app/(home)/game-room/page.tsx b/src/app/dashboard/settings/page.tsx → 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 → src/app/(home)/layout.tsx b/src/app/dashboard/layout.tsx → 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 → src/app/(home)/page.tsx b/src/app/dashboard/page.tsx → 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 → src/app/(home)/ranking/page.tsx b/src/app/dashboard/integrations/page.tsx → 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
@@ -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
@@ -1,18 +1,25 @@
 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;
 
 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,16 +1,18 @@
 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';
 
 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>;