Merge pull request #694 from YehaYoo/Next.js-유예하-sprint11

[유예하] sprint11

.env

@@ -0,0 +1 @@
+NEXT_PUBLIC_BASE_URL="https://panda-market-api.vercel.app"

components/Header.module.css

@@ -30,6 +30,9 @@
 }
 
 .loginButton {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   width: 128px;
   height: 48px;
   font-weight: 600;
@@ -38,6 +41,8 @@
   color: #ffffff;
   border-style: none;
   background-color: #3692ff;
+  text-decoration: none;
+  text-align: center;
 }
 
 .profileButton {

components/Header.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import Image from "next/image";
@@ -8,47 +8,75 @@ function Navbar() {
   const router = useRouter();
   const isAddItemPage = router.pathname === "/additem";
   const isFreeBoardPage = router.pathname === "/items";
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const token = localStorage.getItem("accessToken");
+    if (token) {
+      setIsAuthenticated(true);
+    }
+    setIsLoading(false);
+  }, []);
+
+  useEffect(() => {
+    const token = localStorage.getItem("accessToken");
+    if (token) {
+      setIsAuthenticated(true);
+    } else {
+      setIsAuthenticated(false);
+    }
+  }, [router.pathname]);
+
   return (
     <>
-      <nav className={styles.navbar}>
-        <div className={styles.navMenu}>
-          <Link href="/" className={styles.logo}>
-            <Image
-              src="/images/logo.svg"
-              className={styles.logoImg}
-              width={153}
-              height={51}
-              alt="panda-market"
-            />
-          </Link>
-          <Link
-            href="/items"
-            className={`${styles.navbarButton} ${
-              isFreeBoardPage ? "styles.activeLink" : ""
-            }`}
-          >
-            자유게시판
-          </Link>
-          <Link
-            href="/additem"
-            className={`${styles.navbarButton} ${
-              isAddItemPage ? styles.activeLink : ""
-            }`}
-          >
-            중고마켓
-          </Link>
-        </div>
-        <div>
-          <button className={styles.profileButton}>
-            <Image
-              src="/images/profile.svg"
-              alt="프로필 사진"
-              width={40}
-              height={40}
-            />
-          </button>
-        </div>
-      </nav>
+      {!isLoading && (
+        <nav className={styles.navbar}>
+          <div className={styles.navMenu}>
+            <Link href="/" className={styles.logo}>
+              <Image
+                src="/images/logo.svg"
+                className={styles.logoImg}
+                width={153}
+                height={51}
+                alt="panda-market"
+              />
+            </Link>
+            <Link
+              href="/items"
+              className={`${styles.navbarButton} ${
+                isFreeBoardPage ? "styles.activeLink" : ""
+              }`}
+            >
+              자유게시판
+            </Link>
+            <Link
+              href="/additem"
+              className={`${styles.navbarButton} ${
+                isAddItemPage ? styles.activeLink : ""
+              }`}
+            >
+              중고마켓
+            </Link>
+          </div>
+          <div>
+            {isAuthenticated ? (
+              <button className={styles.profileButton}>
+                <Image
+                  src="/images/profile.svg"
+                  alt="프로필 사진"
+                  width={40}
+                  height={40}
+                />
+              </button>
+            ) : (
+              <Link href="/login" className={styles.loginButton}>
+                로그인
+              </Link>
+            )}
+          </div>
+        </nav>
+      )}
     </>
   );
 }

components/Dropdown.tsx → components/UI/Dropdown.tsx

@@ -1,11 +1,12 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import Image from "next/image";
 import styles from "./Dropdown.module.css";
+import { Order } from "@/types";
 
 interface DropdownContainerProps {
   onSortByNewest: () => void;
   onSortByBest: () => void;
-  order: "recent" | "like";
+  order: Order;
 }
 
 const Dropdown = ({