Feature/CDP-195-AuthHeader

src/app/(auth)/layout.tsx

@@ -1,12 +1,12 @@
 import { makePageMetadata } from "@/seo/metadata";
-import type { AuthLayoutProps } from "@/types/auth";
+import type { AuthCommonProps } from "@/types/auth";
 
 export const metadata = makePageMetadata({
   title: "MyPlanMate — 인증",
   description: "MyPlanMate 계정으로 로그인하고, 새 계정을 만들고, 비밀번호를 재설정하세요.",
 });
 
-export default function AuthLayout({ children }: AuthLayoutProps) {
+export default function AuthLayout({ children }: AuthCommonProps) {
   return (
     <div className="flex items-center justify-center min-h-screen bg-background">
       <div className="flex flex-col gap-20 w-full max-w-[500px]">{children}</div>

src/app/(auth)/login/page.tsx

@@ -1,3 +1,6 @@
+import { AuthHeader } from "@/components/auth/AuthHeader";
+import { LoginPageTitle } from "@/components/auth/login/LoginPageTitle";
+import { LoginSubtitle } from "@/components/auth/login/LoginSubtitle";
 import { makePageMetadata } from "@/seo/metadata";
 
 export const metadata = {
@@ -12,12 +15,10 @@ export const metadata = {
 export default function LoginPage() {
   return (
     <>
-      <header className="text-center">
-        {/* TODO: 나중에 AppLogo + LoginPageTitle + LoginSubtitle로 교체 */}
-        <p className="t-14-m text-[var(--color-gray-500)]">PlanMate</p>
-        <h1 className="mt-2 t-24-b text-[var(--color-gray-900)]">로그인</h1>
-        <p className="mt-1 t-14-m text-[var(--color-gray-600)]">오늘도 만나서 반가워요!</p>
-      </header>
+      <AuthHeader>
+        <LoginPageTitle />
+        <LoginSubtitle />
+      </AuthHeader>
 
       <main>
         {/* TODO: 나중에 LoginMain + AuthCard + LoginForm 구조로 확장 */}

src/components/auth/AuthHeader.tsx

@@ -0,0 +1,11 @@
+import { AppLogo } from "@/shared/AppLogo";
+import type { AuthCommonProps } from "@/types/auth";
+
+export function AuthHeader({ children }: AuthCommonProps) {
+  return (
+    <header className="flex flex-col items-center text-center gap-2">
+      <AppLogo />
+      <div className="space-y-3">{children}</div>
+    </header>
+  );
+}

src/components/auth/login/LoginPageTitle.tsx

@@ -0,0 +1,7 @@
+export function LoginPageTitle() {
+  return (
+    <h1 id="auth-login-title" className="t-30-b text-[var(--color-gray-900)]">
+      로그인
+    </h1>
+  );
+}

src/components/auth/login/LoginSubtitle.tsx

@@ -0,0 +1,3 @@
+export function LoginSubtitle() {
+  return <p className="t-14-m text-[var(--color-gray-600)]">오늘도 만나서 반가워요!</p>;
+}

src/components/landing/LandingNavBar.tsx

@@ -1,5 +1,5 @@
 import { cn } from "@/lib/utils";
-import Image from "next/image";
+import { AppLogo } from "@/shared/AppLogo";
 import Link from "next/link";
 
 export function LandingNavBar() {
@@ -12,16 +12,7 @@ export function LandingNavBar() {
       aria-label="Global navigation"
     >
       {/* 좌측: 로고 (이미지) */}
-      <Link href="/" aria-label="MyPlanMate 홈으로 이동">
-        <Image
-          src="/images/logo.png"
-          alt="MyPlanMate 로고"
-          width={150}
-          height={150}
-          className={cn("object-contain select-none")}
-          draggable={false}
-        />
-      </Link>
+      <AppLogo />
 
       {/* 우측: 언어 토글 + 로그인 */}
       <div className={cn("flex items-center gap-6", "md:gap-12")}>

src/shared/AppLogo.tsx

@@ -0,0 +1,17 @@
+import Image from "next/image";
+import Link from "next/link";
+
+export function AppLogo() {
+  return (
+    <Link href="/" aria-label="MyPlanMate 홈으로 이동">
+      <Image
+        src="/images/logo.png"
+        alt="MyPlanMate 로고"
+        width={150}
+        height={150}
+        priority
+        className="object-contain select-none hover:opacity-90 transition-opacity"
+      />
+    </Link>
+  );
+}

src/types/auth.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
 
-export interface AuthLayoutProps {
+export interface AuthCommonProps {
   children: ReactNode;
 }