Feat:로그아웃 기능 구현

components/HeaderMenu.tsx

@@ -5,16 +5,29 @@ import Link from "next/link";
 import SubmitButton from "./SubMitButton";
 import { useRouter } from "next/router";
 import useAuthStore from "@/store/useAuthStore";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
+import Dropdown from "./Dropdown";
 
 const HeaderMenu = () => {
-  const { user, isLoggedIn, checkLogin } = useAuthStore();
+  const { user, checkLogin, isLoggedIn, logout } = useAuthStore();
+  const [isOpen, setIsOpen] = useState(false);
   const router = useRouter();
 
   useEffect(() => {
     checkLogin();
   }, [checkLogin]);
 
+  const dropdownItems = [
+    {
+      label: "마이링크",
+      href: "/link",
+    },
+    {
+      label: "로그아웃",
+      onClick: logout,
+    },
+  ];
+
   return (
     <>
       {!isLoggedIn ? (
@@ -30,7 +43,7 @@ const HeaderMenu = () => {
           로그인
         </SubmitButton>
       ) : (
-        <div className="flex items-center gap-[24px]">
+        <div className="relative flex items-center gap-[24px]">
           <Link
             href={"/favorite"}
             className="flex items-center gap-[6px] bg-gray200 border border-purple100 rounded-[4px] py-[10px] px-[12px] text-[12px] leading-[14.32px] md:text-[14px] md:leading-[16.71px] lg:text-[14px] lg:leading-[16.71px] font-normal"
@@ -44,10 +57,16 @@ const HeaderMenu = () => {
             />
             즐겨찾기
           </Link>
-          <div className="flex items-center gap-[6px] text-[14px] leading-[16.71px] font-normal">
+          <div
+            className="flex items-center gap-[6px] text-[14px] leading-[16.71px] font-normal"
+            onClick={() => setIsOpen(!isOpen)}
+          >
             <Image src={Profile} width={28} height={28} alt="프로필" />
             <span className="hidden md:block lg:block">{user?.name}</span>
           </div>
+          <div className="absolute top-8 right-0">
+            {isOpen && <Dropdown items={dropdownItems} />}
+          </div>
         </div>
       )}
     </>

pages/api/auth/sign-out.ts

@@ -0,0 +1,26 @@
+import { serialize } from "cookie";
+import { NextApiRequest, NextApiResponse } from "next";
+
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+  if (req.method === "POST") {
+    try {
+      res.setHeader(
+        "Set-Cookie",
+        serialize("accessToken", "", {
+          httpOnly: true,
+          sameSite: "lax",
+          expires: new Date(0),
+          path: "/",
+        })
+      );
+
+      return res.status(200).json({ message: "로그아웃 성공" });
+    } catch (error) {
+      return res.status(500).json({ message: "서버 오류" });
+    }
+  } else {
+    res.status(405).json({ message: "허용되지 않은 접근 방법" });
+  }
+};
+
+export default handler;

store/useAuthStore.tsx

@@ -19,7 +19,7 @@ interface AuthStore {
     provider: "google" | "kakao",
     body: easySignInProps
   ) => Promise<boolean>;
-  logout: () => void;
+  logout: () => Promise<void>;
 }
 
 const useAuthStore = create<AuthStore>()(
@@ -30,9 +30,9 @@ const useAuthStore = create<AuthStore>()(
 
       checkLogin: async () => {
         try {
-          const response = await proxy.get("/api/auth/check");
+          const response = await proxy.get("/api/auth/sign-check");
           if (response.data.isLoggedIn) {
-            const userInfo = await getUserInfo(); // 로그인 되어 있으면 사용자 정보 가져오기
+            const userInfo = await getUserInfo();
             if (userInfo) {
               set({ isLoggedIn: true, user: userInfo });
             }
@@ -78,7 +78,14 @@ const useAuthStore = create<AuthStore>()(
         return false;
       },
 
-      logout: () => set({ user: null, isLoggedIn: false }),
+      logout: async () => {
+        try {
+          await proxy.post("/api/auth/sign-out");
+          set({ user: null, isLoggedIn: false });
+        } catch (error) {
+          console.error("로그아웃 중 에러가 발생했습니다.", error);
+        }
+      },
     }),
     {
       name: "auth-storage",