헤더 컴포넌트 작업 (#34)

* feat: 헤더 컴포넌트 수정 작업

* style: 기본 스타일 변경 작업
bg-background 색상 변경
bg-blue 색상 설정 및 기존 코드 변경

* feat: 로그인 페이지 구성

* fix: nav-link 타입 변경
next/link 타입받는 형태로 수정

* chore: back-button 삭제

* style: blue 색상 변수 변경

app/(main)/page.tsx

@@ -1,12 +1,10 @@
 import { createClient } from '@/utils/supabase/server';
 import { cookies } from 'next/headers';
-import KakaoButton from '../auth/callback/kakao-button';
-import TypeTimeLogo from '@/assets/images/type-time-logo.png';
-import Image from 'next/image';
+import KakaoButton from '../auth/kakao-button';
 import { QuizCard } from '@/components/quiz/quiz-card';
 import FullButton from '@/components/common/buttons/full-button';
 import Button from '@/components/common/buttons/button';
-import Header from '@/components/header';
+import BaseHeader from '@/components/common/headers/base-header';
 
 export default async function Page() {
   const cookieStore = cookies();
@@ -35,19 +33,11 @@ export default async function Page() {
 
   return (
     <>
-      <Header
-        leftArea={
-          <Image
-            src={TypeTimeLogo}
-            alt="타입타임 로고"
-            width={158}
-            height={63}
-            priority
-          />
-        }
-        rightArea={HeaderRightArea}
-      />
-
+      <BaseHeader />
+      <div>
+        {/* TODO: 임시 구현-유저 페이지에 로그아웃 구현되면 제거 예정 */}
+        {HeaderRightArea}
+      </div>
       <main>
         <div className="flex flex-col gap-6">
           <QuizCard

app/auth/page.tsx

@@ -0,0 +1,5 @@
+import KakaoButton from './kakao-button';
+
+export default function Page() {
+  return <KakaoButton />;
+}

app/globals.css

@@ -4,7 +4,7 @@
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
+    --background: 220 11% 95%;
     --foreground: 222.2 84% 4.9%;
 
     --card: 0 0% 100%;
@@ -67,9 +67,7 @@
   * {
     @apply border-border;
   }
-  body {
-    @apply bg-background text-foreground;
-  }
+
   input,
   textarea {
     @apply focus:outline-none;

app/layout.tsx

@@ -27,7 +27,7 @@ export default function RootLayout({
           <PcScreen />
 
           <div id="app-background" />
-          <div id="app-screen" className="bg-white">
+          <div id="app-screen" className="bg-background">
             {/* NOTE: OverlayProvider에 div가 감싸져야 한다. */}
             <OverlayProvider>{children}</OverlayProvider>
           </div>

app/not-found.tsx

@@ -1,19 +1,18 @@
-import BackButton from '@/components/common/buttons/back-button';
-import Header from '@/components/header';
 import Image from 'next/image';
 import Link from 'next/link';
 import TypeTime from '@/assets/images/type-time.png';
+import BackHeader from '@/components/common/headers/back-header';
 
 export default function NotFound() {
   return (
     <>
-      <Header leftArea={<BackButton />} />
+      <BackHeader />
       <div className="mt-40 flex max-w-md flex-col items-center gap-4">
         <Image src={TypeTime} alt="로고" priority width={160} height={160} />
         <p className="text-lg">페이지를 찾을 수 없습니다.</p>
         <Link
           href="/"
-          className="rounded bg-blue-600 px-4 py-2 text-2xl font-bold text-white"
+          className="rounded bg-blue-primary px-4 py-2 text-2xl font-bold text-white"
         >
           홈으로 이동하기
         </Link>

app/quizzes/[id]/answer/page.tsx

@@ -1,24 +1,7 @@
-import BackButton from '@/components/common/buttons/back-button';
-import Header from '@/components/header';
-import Link from 'next/link';
-import UserProfile from '@/assets/images/user-profile.png';
-import Image from 'next/image';
-
 export default function Page() {
   return (
     <>
-      <Header
-        leftArea={<BackButton />}
-        centerArea={
-          <h1 className="text-xl font-bold text-blue-700">TypeTime</h1>
-        }
-        rightArea={
-          <Link href="/">
-            <Image src={UserProfile} width={50} height={50} alt="유저 프로필" />
-          </Link>
-        }
-      />
-      <div>{'수정 예정'}</div>
+      <div className="bg-background">{'수정 예정'}</div>
     </>
   );
 }

app/quizzes/[id]/choice-form.tsx

@@ -61,7 +61,7 @@ export default function ChoiceForm({ quizId }: { quizId: number }) {
       ))}
       {errorMessage && <p className="my-2 text-red-500">{errorMessage}</p>}
       <Button
-        className="mt-4 flex h-10 w-full items-center justify-center disabled:bg-blue-500"
+        className="mt-4 flex h-10 w-full items-center justify-center disabled:bg-blue-primary"
         disabled={isPending || isSuccess}
       >
         {isSuccess ? (

app/quizzes/[id]/layout.tsx

@@ -1,3 +1,4 @@
+import BackHeader from '@/components/common/headers/back-header';
 import NavLink from '@/components/common/link/nav-link';
 import React from 'react';
 
@@ -12,16 +13,20 @@ export default function Layout({ children, params }: LayoutProps) {
   const quizId = Number(params.id) ?? 0;
 
   return (
-    <section className="p-4">
-      <article className="mb-4 flex w-full">
-        <NavLink className="grow" href={`/quizzes/${quizId}`}>
-          퀴즈
-        </NavLink>
-        <NavLink className="grow" href={`/quizzes/${quizId}/questions`}>
-          질문
-        </NavLink>
-      </article>
-      {children}
-    </section>
+    <>
+      <BackHeader />
+
+      <section className="p-4">
+        <article className="mb-4 flex w-full">
+          <NavLink className="grow" href={`/quizzes/${quizId}`}>
+            퀴즈
+          </NavLink>
+          <NavLink className="grow" href={`/quizzes/${quizId}/questions`}>
+            질문
+          </NavLink>
+        </article>
+        {children}
+      </section>
+    </>
   );
 }

app/quizzes/[id]/loading.tsx

@@ -3,7 +3,7 @@ import LoadingSpinner from '@/components/common/loading-spinner/loading-spinner'
 export default function Loading() {
   return (
     <section className="flex min-h-[90vh] items-center justify-center overflow-hidden">
-      <LoadingSpinner size="3xl" className="text-blue-600" />
+      <LoadingSpinner size="3xl" className="text-blue-primary" />
     </section>
   );
 }

components/common/buttons/button.tsx

@@ -8,7 +8,7 @@ type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
 const button = cva(['rounded text-white'], {
   variants: {
     intent: {
-      primary: ['bg-blue-600', 'hover:bg-blue-700'],
+      primary: ['bg-blue-primary', 'hover:bg-blue-primary'],
       secondary: ['bg-red-600', 'hover:bg-red-700'],
     },
     size: { small: ['px-2 py-1 text-sm'], medium: ['px-4 py-2 text-base'] },

components/common/headers/back-header.tsx

@@ -0,0 +1,29 @@
+import Header from './header';
+import Image from 'next/image';
+import NavLink from '../link/nav-link';
+import BackIcon from '@/assets/images/back-icon.png';
+import Profile from './profile';
+
+export default function BackHeader() {
+  return (
+    <>
+      <Header
+        leftArea={
+          <NavLink href="/" scroll={false}>
+            <Image
+              src={BackIcon}
+              width={30}
+              height={30}
+              className="ml-4"
+              alt="뒤로 가기"
+            />
+          </NavLink>
+        }
+        centerArea={
+          <h1 className="text-xl font-bold text-blue-primary">TypeTime</h1>
+        }
+        rightArea={<Profile />}
+      />
+    </>
+  );
+}

components/common/headers/base-header.tsx

@@ -0,0 +1,21 @@
+import Header from './header';
+import Image from 'next/image';
+import TypeTimeLogo from '@/assets/images/type-time-logo.png';
+import Profile from './profile';
+
+export default function BaseHeader() {
+  return (
+    <Header
+      leftArea={
+        <Image
+          src={TypeTimeLogo}
+          alt="타입타임 로고"
+          width={158}
+          height={63}
+          priority
+        />
+      }
+      rightArea={<Profile />}
+    />
+  );
+}

components/common/headers/profile.tsx

@@ -0,0 +1,26 @@
+import { createClient } from '@/utils/supabase/server';
+import { cookies } from 'next/headers';
+import Image from 'next/image';
+import Link from 'next/link';
+import UserProfile from '@/assets/images/user-profile.png';
+
+export default async function Profile() {
+  const cookieStore = cookies();
+  const supabase = createClient(cookieStore);
+
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  return (
+    <Link href={user ? '/' : '/auth'} scroll={false}>
+      <Image
+        src={UserProfile}
+        className="mr-4"
+        width={32}
+        height={32}
+        alt="유저 프로필"
+      />
+    </Link>
+  );
+}

components/common/link/nav-link.tsx

@@ -1,13 +1,14 @@
 'use client';
 
-import Link from 'next/link';
+import Link, { LinkProps } from 'next/link';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { forwardRef, type Ref } from 'react';
 import { usePathname } from 'next/navigation';
 import { cn } from '@/libs/utils';
 
 type NavLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> &
-  VariantProps<typeof navLink>;
+  VariantProps<typeof navLink> &
+  LinkProps;
 
 const navLink = cva(
   ['border-b-2 border-b-neutral-300 pb-2 text-center text-neutral-300'],