refactor: 레이아웃 수정

src/components/Common/Header/Header.tsx

@@ -1,19 +1,20 @@
 import { Link } from 'react-router-dom';
 
-import { container } from './header.css';
+import { container, link } from './header.css';
 import SvgIcon from '../Svg/SvgIcon';
 
 import Logo from '@/assets/logo.svg';
 import { PATH } from '@/constants/path';
+import { vars } from '@/styles/theme.css';
 
 const Header = () => {
   return (
     <header className={container}>
-      <Link to={PATH.HOME}>
+      <Link to={PATH.HOME} className={link}>
         <Logo />
       </Link>
-      <Link to={PATH.SEARCH}>
-        <SvgIcon variant="search2" width={20} height={20} fill="none" stroke="#232527" />
+      <Link to={PATH.SEARCH} className={link}>
+        <SvgIcon variant="search2" width={20} height={20} fill={vars.colors.black} />
       </Link>
     </header>
   );

src/components/Common/Header/header.css.ts

@@ -9,8 +9,15 @@ export const container = style({
   alignItems: 'center',
   width: '100%',
   height: 50,
-  maxWidth: 400,
+  maxWidth: 440,
+  padding: '0 20px',
   backgroundColor: '#fff',
   transform: 'translateX(-50%)',
   zIndex: 1001,
 });
+
+export const link = style({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});

src/components/Common/Indicator/Indicator.tsx

@@ -0,0 +1,7 @@
+import { container } from './indicator.css';
+
+const Indicator = () => {
+  return <div className={container} aria-hidden />;
+};
+
+export default Indicator;

src/components/Common/Indicator/indicator.css.ts

@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  height: 34,
+});

src/components/Common/NavigationBar/NavigationBar.tsx

@@ -1,9 +1,11 @@
 import { NavLink } from 'react-router-dom';
 
 import { menuName, container, link, list } from './navigationBar.css';
+import Indicator from '../Indicator/Indicator';
 import SvgIcon from '../Svg/SvgIcon';
 
 import { NAVIGATION_MENU } from '@/constants';
+import { vars } from '@/styles/theme.css';
 
 const NavigationBar = () => {
   return (
@@ -18,8 +20,8 @@ const NavigationBar = () => {
                     variant={variant}
                     width={28}
                     height={28}
-                    fill={isActive ? '#ffb017' : '#a0a0a0'}
-                    stroke={isActive ? '#ffb017' : '#a0a0a0'}
+                    fill={isActive ? vars.colors.primary : vars.colors.gray2}
+                    stroke={isActive ? vars.colors.primary : vars.colors.gray2}
                   />
                   <span className={isActive ? menuName['active'] : menuName['default']}>{name}</span>
                 </>
@@ -28,6 +30,7 @@ const NavigationBar = () => {
           </li>
         ))}
       </ul>
+      <Indicator />
     </nav>
   );
 };

src/components/Common/NavigationBar/navigationBar.css.ts

@@ -1,22 +1,22 @@
+import { vars } from '@/styles/theme.css';
 import { style, styleVariants } from '@vanilla-extract/css';
 
 export const container = style({
   position: 'fixed',
   bottom: 0,
   left: '50%',
   width: '100%',
-  maxWidth: 400,
-  height: 70,
-  backgroundColor: '#fff',
+  maxWidth: 440,
+  backgroundColor: vars.colors.white,
   transform: 'translateX(-50%)',
 });
 
 export const list = style({
   display: 'flex',
   justifyContent: 'space-around',
-  alignItems: 'center',
-  height: '100%',
-  border: '1px solid #f9f9f9',
+  alignItems: 'flex-end',
+  height: 60,
+  borderTop: `1px solid ${vars.colors.border.light}`,
 });
 
 export const link = style({
@@ -30,10 +30,9 @@ export const link = style({
 const menuNameBase = style({
   fontSize: 11,
   textAlign: 'center',
-  lineHeight: 1.4,
 });
 
 export const menuName = styleVariants({
-  active: [menuNameBase, { color: '#ffb017' }],
-  default: [menuNameBase, { color: '#a0a0a0' }],
+  active: [menuNameBase, { color: vars.colors.primary }],
+  default: [menuNameBase, { color: vars.colors.gray3 }],
 });

src/components/Common/PageHeader/pageHeader.css.ts

@@ -5,7 +5,7 @@ export const container = style({
   top: 0,
   left: '50%',
   width: '100%',
-  maxWidth: 400,
+  maxWidth: 440,
   height: 50,
   display: 'flex',
   justifyContent: 'space-between',

src/components/Common/TopBar/topBar.css.ts

@@ -6,7 +6,7 @@ export const container = style({
   top: 0,
   left: '50%',
   width: '100%',
-  maxWidth: 400,
+  maxWidth: 440,
   height: 50,
   display: 'flex',
   justifyContent: 'space-between',

src/components/Common/index.ts

@@ -25,5 +25,6 @@ export { default as PageHeader } from './PageHeader/PageHeader';
 export { default as Badge } from './Badge/Badge';
 export { default as WriteButton } from './WriteButton/WriteButton';
 export { default as Text } from './Text/Text';
+export { default as Indicator } from './Indicator/Indicator';
 export { default as TopBar } from './TopBar/TopBar';
 export { default as ShowAllButton } from './ShowAllButton/ShowAllButton';

src/components/Layout/DefaultLayout.tsx → src/components/Layout/Layout.tsx

@@ -1,19 +1,19 @@
 import type { PropsWithChildren } from 'react';
 
-import { defaultLayout } from './layout.css';
+import { main } from './layout.css';
 import Header from '../Common/Header/Header';
 import NavigationBar from '../Common/NavigationBar/NavigationBar';
 
-const DefaultLayout = ({ children }: PropsWithChildren) => {
+const Layout = ({ children }: PropsWithChildren) => {
   return (
     <>
       <Header />
-      <main id="main" className={defaultLayout}>
+      <main id="main" className={main}>
         {children}
       </main>
       <NavigationBar />
     </>
   );
 };
 
-export default DefaultLayout;
+export default Layout;

src/components/Layout/index.ts

@@ -1,3 +1,2 @@
-export { default as DefaultLayout } from './DefaultLayout';
-export { default as MinimalLayout } from './MinimalLayout';
+export { default as Layout } from './Layout';
 export { default as AuthLayout } from './AuthLayout';

src/components/Layout/layout.css.ts

@@ -1,9 +1,5 @@
 import { style } from '@vanilla-extract/css';
 
-export const defaultLayout = style({
+export const main = style({
   padding: '50px 0 70px',
 });
-
-export const minimalLayout = style({
-  paddingTop: 50,
-});

src/components/Review/ReviewItem/ReviewItem.stories.tsx

@@ -13,7 +13,7 @@ const meta: Meta<typeof ReviewItem> = {
   },
   decorators: [
     (Story) => (
-      <div style={{ maxWidth: 400 }}>
+      <div style={{ maxWidth: 440 }}>
         <Story />
       </div>
     ),

src/components/Review/ReviewTagSheet/reviewTagSheet.css.ts

@@ -27,7 +27,7 @@ export const registerButtonWrapper = style({
   alignItems: 'flex-end',
   width: '100%',
   height: 70,
-  maxWidth: 400,
+  maxWidth: 440,
   padding: '0 20px',
   borderTop: `1px solid ${vars.colors.border.default}`,
   backgroundColor: vars.colors.background.default,

src/components/Search/SearchInput/searchInput.css.ts

@@ -1,38 +1,36 @@
+import { vars } from '@/styles/theme.css';
 import { style } from '@vanilla-extract/css';
 
 export const inputContainer = style({
   position: 'relative',
-  width: 343,
 });
 
 export const searchInput = style({
-  position: 'absolute',
   width: '90%',
   height: 40,
   padding: '10px 0 10px 18px',
-  color: '#232527',
-  background: '#efefef',
+  background: vars.colors.background.category,
   borderRadius: '20px 0 0 20px',
   fontSize: '1.4rem',
   outline: 'none',
 
   selectors: {
     '&:placeholder': {
-      color: '#808080',
+      color: vars.colors.gray3,
     },
   },
 });
 
 export const tagInputWrapper = style({
-  position: 'relative',
-  top: 6,
+  position: 'absolute',
+  top: 5,
   left: 6,
   display: 'flex',
   alignItems: 'baseline',
   gap: 6,
   width: 'fit-content',
   padding: '5px 12px',
-  background: '#FFFFFF',
+  background: vars.colors.white,
   borderRadius: 20,
 });
 
@@ -45,6 +43,6 @@ export const iconWrapperButton = style({
   width: '10%',
   height: 40,
   paddingLeft: 4,
-  background: '#efefef',
+  background: vars.colors.background.category,
   borderRadius: '0 20px 20px 0',
 });

src/pages/NotFoundPage.tsx

@@ -2,20 +2,20 @@ import { Heading, Link, Spacing } from '@fun-eat/design-system';
 import { Link as RouterLink } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { DefaultLayout } from '@/components/Layout';
+import { Layout } from '@/components/Layout';
 import { PATH } from '@/constants/path';
 
 const NotFoundPage = () => {
   return (
-    <DefaultLayout>
+    <Layout>
       <NotFoundSection>
         <Heading size="xl">존재하지 않는 페이지입니다</Heading>
         <Spacing size={20} />
         <HomePageLink as={RouterLink} to={PATH.HOME}>
           홈으로 가기
         </HomePageLink>
       </NotFoundSection>
-    </DefaultLayout>
+    </Layout>
   );
 };
 

src/pages/ProductDetailPage/productDetailPage.css.ts

@@ -2,7 +2,7 @@ import { vars } from '@/styles/theme.css';
 import { style } from '@vanilla-extract/css';
 
 export const main = style({
-  paddingBottom: 70,
+  padding: '50px 0 70px',
 });
 
 export const section = style({
@@ -25,7 +25,7 @@ export const linkWrapper = style({
   alignItems: 'flex-end',
   width: '100%',
   height: 70,
-  maxWidth: 400,
+  maxWidth: 440,
   padding: '0 20px',
   border: `1px solid ${vars.colors.border.default}`,
   backgroundColor: vars.colors.background.default,