test

src/app/components/AppHeader.tsx

@@ -471,27 +471,39 @@ export function AppHeader() {
           </div>
         </div>
         <div id="dummy" className="block"></div>
-        <div className="hidden xl:flex xl:flex-1 justify-end">
+        <div className="hidden xl:flex xl:flex-1 justify-end items-center gap-3">
           <SearchBar/>
-          {authData?.user && (
-            <button
-              onClick={async () => {
-                try {
-                  await fetch("/api/auth/session", { method: "DELETE" });
-                } finally {
-                  window.location.reload();
-                }
-              }}
-              className="ml-3 inline-flex items-center px-3 h-10 rounded-md border border-neutral-300 text-neutral-700 hover:bg-neutral-100"
-              aria-label="로그아웃"
-            >
-              로그아웃
-            </button>
-          )}
-          {!authData?.user && (
+          {authData?.user ? (
+            <>
+              {/* 인사 + 로그아웃을 하나의 배지로 묶어 자연스럽게 표시 */}
+              <div className="inline-flex items-center h-10 rounded-md border border-neutral-300 bg-white overflow-hidden">
+                <Link
+                  href="/my-page"
+                  aria-label="마이페이지"
+                  className="h-full px-3 inline-flex items-center text-sm text-neutral-800 hover:bg-neutral-100 cursor-pointer truncate max-w-[220px]"
+                >
+                  {authData.user.nickname}님 안녕하세요
+                </Link>
+                <span aria-hidden className="w-px h-5 bg-neutral-200" />
+                <button
+                  onClick={async () => {
+                    try {
+                      await fetch("/api/auth/session", { method: "DELETE" });
+                    } finally {
+                      window.location.reload();
+                    }
+                  }}
+                  className="h-full px-3 text-sm text-neutral-700 hover:bg-neutral-100 focus:outline-none cursor-pointer"
+                  aria-label="로그아웃"
+                >
+                  로그아웃
+                </button>
+              </div>
+            </>
+          ) : (
             <Link
               href={`/login?next=${encodeURIComponent((pathname || "/") + (searchParams?.toString() ? `?${searchParams.toString()}` : ""))}`}
-              className="ml-3 inline-flex items-center px-3 h-10 rounded-md border border-neutral-300 text-neutral-700 hover:bg-neutral-100"
+              className="inline-flex items-center px-3 h-10 rounded-md border border-neutral-300 text-neutral-700 hover:bg-neutral-100"
               aria-label="로그인"
             >
               로그인