신규디자인-반영 (#6)

* Refactor: 재정의된 컬러 반영

* New : 아이콘 에셋 추가

* New : Navbar 퍼블리싱

* New : Navbar 스토리북 추가

client/.storybook/main.ts

@@ -23,9 +23,9 @@ const config: StorybookConfig = {
   },
   staticDirs: [
     {
-      from: '../src/assets/font',
-      to: '/src/assets/font'
-    }
+      from: "../src/assets",
+      to: "/src/assets",
+    },
   ],
   webpackFinal: async (config, { configType }) => {
     config.resolve!.alias = {

client/src/app/layout.tsx

@@ -3,7 +3,8 @@ import ThemeRegistry from "@/components/theme/ThemeRegistry";
 import { nameOfApp, oneLineMessage } from "@/const/brand";
 import OverrideCSS from "@/const/overrideCSS";
 import { GlobalStyles } from "@mui/material";
-import Pretendard from "@/assets/font/Pretendard";
+import Pretendard from "~/assets/font/Pretendard";
+import NavigationBar from "~/components/NavigationBar";
 
 export const metadata: Metadata = {
   title: `${nameOfApp} | ${oneLineMessage}`,
@@ -25,6 +26,7 @@ export default function RootLayout({
         <ThemeRegistry options={{ key: "mui" }}>
           <GlobalStyles styles={OverrideCSS} />
           {children}
+          <NavigationBar />
         </ThemeRegistry>
       </body>
     </html>

client/src/components/NavigationBar.tsx

@@ -0,0 +1,79 @@
+import {
+  AppBar,
+  ButtonBase,
+  ButtonBaseProps,
+  Toolbar,
+  Typography,
+} from "@mui/material";
+
+import HomeIcon from "~/assets/icons/HomeIcon.svg";
+import SearchIcon from "~/assets/icons/SearchIcon.svg";
+import PostIcon from "~/assets/icons/PostIcon.svg";
+import BeverageIcon from "~/assets/icons/BeverageIcon.svg";
+import MyIcon from "~/assets/icons/MyIcon.svg";
+
+const NavbarData = [
+  {
+    iconComponent: <img src={HomeIcon.src} />,
+    label: "홈",
+    href: "/",
+  },
+  {
+    iconComponent: <img src={SearchIcon.src} />,
+    label: "검색",
+  },
+  {
+    iconComponent: <img src={PostIcon.src} />,
+    label: "올리기",
+  },
+  {
+    iconComponent: <img src={BeverageIcon.src} />,
+    label: "술과사전",
+  },
+  {
+    iconComponent: <img src={MyIcon.src} />,
+    label: "내 정보",
+  },
+];
+
+const NavigationBar = () => {
+  return (
+    <AppBar position="fixed" sx={{ top: "auto", bottom: 0 }}>
+      <Toolbar sx={{ mx: "auto", gap: 4 }}>
+        {NavbarData.map((buttonData) => {
+          return (
+            <NavbarIconButton
+              iconComponent={buttonData.iconComponent}
+              key={buttonData.label}
+              href={buttonData.href}
+            >
+              {buttonData.label}
+            </NavbarIconButton>
+          );
+        })}
+      </Toolbar>
+    </AppBar>
+  );
+};
+
+export default NavigationBar;
+
+interface NavbarIconButtonInterface extends Omit<ButtonBaseProps, "children"> {
+  children: string;
+  iconComponent: React.ReactNode;
+  href?: string;
+}
+export const NavbarIconButton = ({
+  children,
+  iconComponent,
+  ...others
+}: NavbarIconButtonInterface) => {
+  return (
+    <ButtonBase sx={{ flexDirection: "column", width: 56 }} {...others}>
+      {iconComponent}
+      <Typography variant="label" component="span">
+        {children}
+      </Typography>
+    </ButtonBase>
+  );
+};

client/src/const/theme.ts

@@ -52,22 +52,31 @@ const theme = createTheme({
   palette: {
     mode: "light",
     primary: {
-      main: "#82BCDB",
+      main: "#7B1FA2",
       contrastText: "#fff",
     },
     secondary: {
-      main: "#00dde6",
+      main: "#C2185B",
     },
     text: {
-      primary: "#3D4A59",
-      secondary: "#558C99",
-      disabled: "#6D7A89",
+      primary: "#1C1C1C",
+      secondary: "#8A8A8A",
+      disabled: "#B8B8B8",
     },
     divider: "#CDD4D4",
     background: {
-      default: "#E9F3F3",
+      default: "#F5F5F5",
       paper: "#fefefe",
     },
+    info: {
+      main: "#00C853",
+    },
+    error: {
+      main: "#D50000",
+    },
+    warning: {
+      main: "#FFD600",
+    },
   },
   components: {
     MuiButton: {

client/src/stories/Components/Navigation/Navbar.stories.tsx

@@ -0,0 +1,25 @@
+import NavigationBar from "@/components/NavigationBar";
+
+import { Meta, StoryObj } from "@storybook/react";
+const meta = {
+  title: "Components/Navigation/NavigationBar",
+  component: NavigationBar,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => {
+      return (
+        <div
+          style={{ minHeight: "150px" }}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Story />
+        </div>
+      );
+    },
+  ],
+} satisfies Meta<typeof NavigationBar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Navbar: Story = {};