정답 조회 페이지 작업하기 (#18)

* feat: 헤더 컴포넌트 분리 작업

* feat: 임시 404페이지 구성

* style: outline 제거

app/(main)/page.tsx

@@ -6,6 +6,7 @@ import Image from 'next/image';
 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';
 
 export default async function Page() {
   const cookieStore = cookies();
@@ -24,26 +25,28 @@ export default async function Page() {
     await supabase.auth.signOut();
   };
 
+  const HeaderRightArea = user ? (
+    <form action={signOut}>
+      <Button className="h-full">로그아웃</Button>
+    </form>
+  ) : (
+    <KakaoButton />
+  );
+
   return (
     <>
-      <header className="sticky top-0 z-50 h-16 border-b-2 border-slate-50 bg-white">
-        <div className="flex justify-between">
+      <Header
+        leftArea={
           <Image
             src={TypeTimeLogo}
             alt="타입타임 로고"
             width={158}
             height={63}
             priority
           />
-          {user ? (
-            <form action={signOut}>
-              <Button className="h-full">로그아웃</Button>
-            </form>
-          ) : (
-            <KakaoButton />
-          )}
-        </div>
-      </header>
+        }
+        rightArea={HeaderRightArea}
+      />
 
       <main>
         <div className="flex flex-col gap-6">

app/globals.css

@@ -2,6 +2,13 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  input,
+  textarea {
+    @apply focus:outline-none;
+  }
+}
+
 #background {
   @apply fixed h-full w-full bg-slate-50 lg:bg-gradient-to-r lg:from-sky-400 lg:to-indigo-400;
 }

app/not-found.tsx

@@ -0,0 +1,23 @@
+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';
+
+export default function NotFound() {
+  return (
+    <>
+      <Header leftArea={<BackButton />} />
+      <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"
+        >
+          홈으로 이동하기
+        </Link>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,24 @@
+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>
+    </>
+  );
+}

components/common/buttons/back-button.tsx

@@ -0,0 +1,10 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import Button from './button';
+
+export default function BackButton() {
+  const router = useRouter();
+
+  return <Button onClick={() => router.back()}>뒤로가기</Button>;
+}

components/common/buttons/button.tsx

@@ -5,7 +5,7 @@ import { twMerge } from 'tailwind-merge';
 type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
   VariantProps<typeof button>;
 
-const button = cva(['rounded border text-white'], {
+const button = cva(['rounded text-white'], {
   variants: {
     intent: {
       primary: ['bg-blue-600', 'hover:bg-blue-700'],

components/header.tsx

@@ -0,0 +1,27 @@
+type HeaderProps = {
+  leftArea?: JSX.Element;
+  centerArea?: JSX.Element;
+  rightArea?: JSX.Element;
+};
+
+export default function Header({
+  leftArea,
+  centerArea,
+  rightArea,
+}: HeaderProps) {
+  return (
+    <header className="sticky top-0 z-50 h-16 border-b-2 border-slate-50 bg-white">
+      <div className="relative h-full">
+        <div className="absolute left-0 top-1/2 -translate-y-1/2">
+          {leftArea}
+        </div>
+        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+          {centerArea}
+        </div>
+        <div className="absolute right-0 top-1/2 -translate-y-1/2">
+          {rightArea}
+        </div>
+      </div>
+    </header>
+  );
+}