From 8d0f19e87445aa5d8a2ea098d0fa7b28a9a82e26 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=9C=A4=EC=84=9C?= <yyoo04@naver.com>
Date: Tue, 16 Jun 2026 13:30:06 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20=EB=A1=9C=EA=B7=B8=EC=95=84=EC=9B=83=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84=20[JDDESIGN-7]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/buttons/TextButton.tsx  | 10 ++++-
 jobdri/src/components/common/lnb/Lnb.tsx      | 39 ++++++++++++++++++-
 jobdri/src/lib/auth.ts                        | 13 +++++++
 3 files changed, 59 insertions(+), 3 deletions(-)

diff --git a/jobdri/src/components/common/buttons/TextButton.tsx b/jobdri/src/components/common/buttons/TextButton.tsx
index 1f51bee..a80de6e 100644
--- a/jobdri/src/components/common/buttons/TextButton.tsx
+++ b/jobdri/src/components/common/buttons/TextButton.tsx
@@ -4,13 +4,15 @@ import Icon from "@/components/common/icons/Icon";
 
 export type TextButtonSize = "small" | "large";
 export type TextButtonStyle = "primary" | "secondary";
-export type TextButtonIconPosition = "right" | "left";
+export type TextButtonIconPosition = "right" | "left" | "null";
+export type HoverType = "textOnly" | "none";
 
 interface TextButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   label?: ReactNode;
   size?: TextButtonSize;
   styleType?: TextButtonStyle;
   iconPosition?: TextButtonIconPosition;
+  hover?: HoverType;
 }
 
 const sizeStyles: Record<TextButtonSize, string> = {
@@ -38,6 +40,7 @@ export default function TextButton({
   size = "small",
   styleType = "primary",
   iconPosition = "right",
+  hover = "none",
   className,
   type = "button",
   ...buttonProps
@@ -65,7 +68,10 @@ export default function TextButton({
     <button
       type={type}
       className={clsx(
-        "inline-flex items-center gap-0 rounded-toast-s [font-feature-settings:'liga'_off,'clig'_off] hover:bg-fill-hover",
+        "inline-flex items-center gap-0 rounded-toast-s [font-feature-settings:'liga'_off,'clig'_off]",
+        hover === "none"
+          ? " hover:bg-fill-hover"
+          : "hover:text-fill-tertiary-default-pressed hover:bg-transparent",
         buttonProps.disabled ? "cursor-not-allowed" : "cursor-pointer",
         isLeftLarge
           ? "py-1.5 pr-3 pl-2 text-b16-med"
diff --git a/jobdri/src/components/common/lnb/Lnb.tsx b/jobdri/src/components/common/lnb/Lnb.tsx
index 3e02944..fdf1760 100644
--- a/jobdri/src/components/common/lnb/Lnb.tsx
+++ b/jobdri/src/components/common/lnb/Lnb.tsx
@@ -6,9 +6,15 @@ import { createPortal } from "react-dom";
 import clsx from "clsx";
 import Icon, { type IconType } from "@/components/common/icons/Icon";
 import { ModalNotice } from "@/components/common/modal";
-import { AUTH_STORAGE_KEYS, getStoredAuthEmail } from "@/lib/auth";
+import {
+  AUTH_STORAGE_KEYS,
+  getStoredAuthEmail,
+  requestLogout,
+  clearAuthTokens,
+} from "@/lib/auth";
 import Logo from "@/assets/ic_LOGO_minimum_favi.svg";
 import { fetchCreditBalance } from "@/lib/api/credit";
+import { TextButton } from "../buttons";
 
 type LnbItemKey = "experience" | "apply";
 
@@ -100,6 +106,26 @@ export default function Lnb({ initialActiveItem, email, className }: LnbProps) {
       .catch(() => {});
   }, []);
 
+  const handleLogout = async () => {
+    const accessToken = window.localStorage.getItem(
+      AUTH_STORAGE_KEYS.accessToken,
+    );
+    const refreshToken = window.localStorage.getItem(
+      AUTH_STORAGE_KEYS.refreshToken,
+    );
+
+    if (accessToken && refreshToken) {
+      try {
+        await requestLogout(accessToken, refreshToken);
+      } catch (error) {
+        console.error("서버 로그아웃 처리 실패:", error);
+      }
+    }
+
+    clearAuthTokens();
+    router.replace("/login");
+  };
+
   return (
     <>
       <aside
@@ -206,6 +232,17 @@ export default function Lnb({ initialActiveItem, email, className }: LnbProps) {
               {displayEmail}
             </span>
           </div>
+          <div
+            className={`flex w-full items-center gap-2 py-1.5 ${isFold ? "justify-center px-0" : "px-2"}`}
+          >
+            <TextButton
+              label="로그아웃"
+              styleType="secondary"
+              iconPosition="null"
+              hover="textOnly"
+              onClick={handleLogout}
+            />
+          </div>
         </div>
       </aside>
 
diff --git a/jobdri/src/lib/auth.ts b/jobdri/src/lib/auth.ts
index cafc11c..7944ade 100644
--- a/jobdri/src/lib/auth.ts
+++ b/jobdri/src/lib/auth.ts
@@ -32,6 +32,11 @@ export interface LoginRequest {
   password: string;
 }
 
+interface LogoutRequest {
+  accessToken: string;
+  refreshToken: string;
+}
+
 export interface SignupRequest {
   name?: string | null;
   email: string;
@@ -265,3 +270,11 @@ export function getAuthHeaders(): Record<string, string> {
 
   return token ? { Authorization: `Bearer ${token}` } : {};
 }
+
+export async function requestLogout(accessToken: string, refreshToken: string) {
+  await postAuth<null>(
+    "/api/auth/logout",
+    { accessToken, refreshToken },
+    "로그아웃",
+  );
+}