Refactor : 네비게이션 바 컴포넌트 변경

potenday-project · Nov 5, 2023 · 621ed9f · 621ed9f
1 parent 99c4a10
commit 621ed9f
Showing 1 changed file with 19 additions and 37 deletions.
diff --git a/client/src/components/NavigationBar.tsx b/client/src/components/NavigationBar.tsx
@@ -1,17 +1,13 @@
-import {
-  AppBar,
-  ButtonBase,
-  ButtonBaseProps,
-  Toolbar,
-  Typography,
-} from "@mui/material";
+// FIXME "use client";
+import { BottomNavigation, BottomNavigationAction, Paper } 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";
 import HOME, { MY_PROFILE, WIKI } from "@/const/clientPath";
+import Link from "next/link";
 
 const NavbarData = [
   {
@@ -40,44 +36,30 @@ const NavbarData = [
 ];
 
 const NavigationBar = () => {
+  // FIXME const path = usePathname();
   return (
-    <AppBar position="fixed" sx={{ top: "auto", bottom: 0 }}>
-      <Toolbar sx={{ mx: "auto", gap: 4 }}>
+    <Paper
+      sx={{ position: "fixed", bottom: 0, left: 0, right: 0 }}
+      elevation={3}
+    >
+      <BottomNavigation
+      // FIXME value={path}
+      >
         {NavbarData.map((buttonData) => {
           return (
-            <NavbarIconButton
-              iconComponent={buttonData.iconComponent}
+            <BottomNavigationAction
+              icon={buttonData.iconComponent as any}
               key={buttonData.label}
+              component={buttonData.href ? Link : "button"}
               href={buttonData.href}
-            >
-              {buttonData.label}
-            </NavbarIconButton>
+              // FIXME value={buttonData.href}
+              // FIXME label={buttonData.label}
+            />
           );
         })}
-      </Toolbar>
-    </AppBar>
+      </BottomNavigation>
+    </Paper>
   );
 };
 
 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>
-  );
-};