Feat: 경로 상수화 및 nav 컴포넌트 네이밍 수정 (#68)

Author: seueooo

app/(main)/layout.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 
-import NavHome from "@/shared/ui/nav-home/nav-home";
+import NavbarMain from "@/shared/ui/navbar/navbar-main/navbar-main";
 
 export default function MainLayout({
   children,
@@ -9,7 +9,7 @@ export default function MainLayout({
 }) {
   return (
     <div>
-      <NavHome />
+      <NavbarMain />
       {children}
     </div>
   );

app/(main)/my/page.tsx app/(main)/my-capsule/page.tsxapp/(main)/my/page.tsx renamed to app/(main)/my-capsule/page.tsx

@@ -1,9 +1,9 @@
-const My = () => {
+const MyCapsule = () => {
   return (
     <div>
       <h1>my</h1>
     </div>
   );
 };
 
-export default My;
+export default MyCapsule;

app/page.tsx

@@ -1,9 +1,9 @@
-import NavHome from "@/shared/ui/nav-home/nav-home";
+import NavbarMain from "@/shared/ui/navbar/navbar-main/navbar-main";
 
 const Home = () => {
   return (
     <div>
-      <NavHome />
+      <NavbarMain />
       <main>
         <h1>Home</h1>
       </main>

shared/constants/.gitkeep

@@ -0,0 +1,7 @@
+export const PATH = {
+  // Main
+  HOME: "/",
+  EXPLORE: "/explore",
+  MY_CAPSULE: "/my-capsule",
+  SETTING: "/setting",
+} as const;

shared/constants/path.ts

@@ -1,14 +1,14 @@
 "use client";
 
 import SearchIcon from "@/shared/assets/svgs/search.svg";
+import { PATH } from "@/shared/constants/path";
 import { cn } from "@/shared/utils/cn";
 import Link from "next/link";
-
 import { useState } from "react";
-import HamburgerMenuButton from "../hamburger-menu-button/hamburger-menu-button";
-import * as styles from "./nav-home.css";
+import HamburgerMenuButton from "../../hamburger-menu-button/hamburger-menu-button";
+import * as styles from "./navbar-main.css";
 
-const NavHome = () => {
+const NavbarMain = () => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
 
   const handleMenuClick = () => {
@@ -23,22 +23,21 @@ const NavHome = () => {
           isMenuOpen ? styles.navHomeStyleOpen : "",
         )}
       >
-        {/* 데스크탑 메뉴 목록 */}
         <div>logo</div>
         <div className={styles.navWrapper}>
           <ul className={styles.navList}>
             <li>
-              <Link href="/explore" className={styles.buttonStyle}>
+              <Link href={PATH.EXPLORE} className={styles.buttonStyle}>
                 탐색
               </Link>
             </li>
             <li>
-              <Link href="/my" className={styles.buttonStyle}>
+              <Link href={PATH.MY_CAPSULE} className={styles.buttonStyle}>
                 내 캡슐
               </Link>
             </li>
             <li>
-              <Link href="/setting" className={styles.buttonStyle}>
+              <Link href={PATH.SETTING} className={styles.buttonStyle}>
                 설정
               </Link>
             </li>
@@ -62,7 +61,7 @@ const NavHome = () => {
       >
         <li>
           <Link
-            href="/explore"
+            href={PATH.EXPLORE}
             className={styles.menuItem}
             onClick={handleMenuClick}
           >
@@ -71,7 +70,7 @@ const NavHome = () => {
         </li>
         <li>
           <Link
-            href="/my"
+            href={PATH.MY_CAPSULE}
             className={styles.menuItem}
             onClick={handleMenuClick}
           >
@@ -80,7 +79,7 @@ const NavHome = () => {
         </li>
         <li>
           <Link
-            href="/setting"
+            href={PATH.SETTING}
             className={styles.menuItem}
             onClick={handleMenuClick}
           >
@@ -92,4 +91,4 @@ const NavHome = () => {
   );
 };
 
-export default NavHome;
+export default NavbarMain;