Merge pull request #854 from KEEPER31337/feature/너비_하드코딩_된_부분_수정_#850

Feature/너비 하드코딩 된 부분 수정 #850
KEEPER31337 · Dec 10, 2023 · 0dcc062 · 0dcc062
2 parents c77e8a6 + f20c243
commit 0dcc062
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 11 deletions.
diff --git a/src/components/Layout/Header/Header.tsx b/src/components/Layout/Header/Header.tsx
@@ -4,7 +4,7 @@ import { AppBar, IconButton, Toolbar, Typography } from '@mui/material';
 import { VscAccount, VscGithubInverted, VscThreeBars } from 'react-icons/vsc';
 import { useRecoilValue } from 'recoil';
 import { ReactComponent as Logo } from '@assets/logo/logo_neon.svg';
-import { HEADER_HEIGHT, KEEPER_COLOR } from '@constants/keeperTheme';
+import { KEEPER_HEIGHT, KEEPER_COLOR } from '@constants/keeperTheme';
 import memberState from '@recoil/member.recoil';
 import FilledButton from '@components/Button/FilledButton';
 import AccountMenu from './Menu/AccountMenu';
@@ -33,7 +33,7 @@ const Header = ({ setMobileSidebarOpen }: HeaderProps) => {
     <AppBar
       position="fixed"
       className="h-14 !bg-mainBlack !bg-none sm:h-header sm:border-b sm:border-pointBlue"
-      sx={{ zIndex: (theme) => theme.zIndex.drawer + 1, height: HEADER_HEIGHT }}
+      sx={{ zIndex: (theme) => theme.zIndex.drawer + 1, height: KEEPER_HEIGHT.header }}
     >
       <Toolbar className="flex items-center justify-between">
         <div className="flex items-center">

diff --git a/src/components/Layout/Sidebar/Sidebar.tsx b/src/components/Layout/Sidebar/Sidebar.tsx
@@ -3,7 +3,7 @@ import { Button, Drawer, Toolbar, useMediaQuery, useTheme } from '@mui/material'
 import { VscBug } from 'react-icons/vsc';
 import { Role } from '@api/dto';
 import CATEGORIES from '@constants/category';
-import { KEEPER_COLOR, SIDEBAR_WIDTH } from '@constants/keeperTheme';
+import { KEEPER_COLOR, KEEPER_WIDTH } from '@constants/keeperTheme';
 import useCheckAuth from '@hooks/useCheckAuth';
 import CategoryNav from '@components/Navigation/CategoryNav';
 
@@ -26,7 +26,7 @@ const Sidebar = ({ mobileSidebarOpen, setMobileSidebarOpen }: SidebarProps) => {
       open={mobileSidebarOpen}
       onClose={() => setMobileSidebarOpen(false)}
       sx={{
-        [`& .MuiDrawer-paper`]: { width: SIDEBAR_WIDTH, bgcolor: KEEPER_COLOR.mainBlack },
+        [`& .MuiDrawer-paper`]: { width: KEEPER_WIDTH.sidebar, bgcolor: KEEPER_COLOR.mainBlack },
       }}
     >
       <Toolbar />

diff --git a/src/constants/keeperTheme.ts b/src/constants/keeperTheme.ts
@@ -8,5 +8,11 @@ export const KEEPER_COLOR = {
   subOrange: '#FFA500',
 } as const;
 
-export const SIDEBAR_WIDTH = 240;
-export const HEADER_HEIGHT = { xs: 56, sm: 66 } as const;
+export const KEEPER_WIDTH = {
+  sidebar: 240,
+  container: 1080,
+} as const;
+
+export const KEEPER_HEIGHT = {
+  header: { xs: 56, sm: 66 },
+} as const;
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,5 +1,5 @@
 /** @type {import('tailwindcss').Config} */
-import { KEEPER_COLOR } from './src/constants/keeperTheme';
+import { KEEPER_HEIGHT, KEEPER_COLOR, KEEPER_WIDTH } from './src/constants/keeperTheme';
 
 export const content = ['./src/**/*.{js,jsx,ts,tsx}'];
 export const theme = {
@@ -24,14 +24,14 @@ export const theme = {
       small: '10px',
     },
     spacing: {
-      header: '66px',
-      sidebar: '240px',
+      header: KEEPER_HEIGHT.header.sm,
+      sidebar: KEEPER_WIDTH.sidebar,
     },
     maxWidth: {
-      container: '1080px',
+      container: KEEPER_WIDTH.container,
     },
     minWidth: {
-      sidebar: '240px',
+      sidebar: KEEPER_WIDTH.sidebar,
     },
     backgroundImage: {
       galaxy: "url('/public/img/background_galaxy.png')",