From 14c8602d6727aa455aab43c44cc345add2c68f4a Mon Sep 17 00:00:00 2001
From: YuHyun <puh0128@gmail.com>
Date: Fri, 29 Dec 2023 17:12:59 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=97=A4=EB=8D=94=20>=20=ED=80=B4?=
 =?UTF-8?q?=EC=A6=88=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=8A=9C=ED=86=A0?=
 =?UTF-8?q?=EB=A6=AC=EC=96=BC=20=EC=8B=9C=EC=9E=91=20=EB=B2=84=ED=8A=BC=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#304]
---
 .../components/common/Header/Header.css.ts    | 12 +++++++++++
 .../components/common/Header/Header.tsx       | 20 ++++++++++++++++++-
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/design-system/components/common/Header/Header.css.ts b/packages/frontend/src/design-system/components/common/Header/Header.css.ts
index 5ff748f6..bc25372a 100644
--- a/packages/frontend/src/design-system/components/common/Header/Header.css.ts
+++ b/packages/frontend/src/design-system/components/common/Header/Header.css.ts
@@ -1,6 +1,7 @@
 import { style } from "@vanilla-extract/css";
 
 import color from "../../../tokens/color";
+import typography from "../../../tokens/typography";
 import { border, flexAlignCenter, widthMax } from "../../../tokens/utils.css";
 
 export const borderBottom = border.bottom;
@@ -15,3 +16,14 @@ export const container = style([
     backgroundColor: color.$semantic.bgDefault,
   },
 ]);
+
+export const actionGroup = style([flexAlignCenter, { gap: 4 }]);
+
+export const tutorialButton = style([
+  typography.$semantic.body2Regular,
+  {
+    border: 0,
+    backgroundColor: "transparent",
+    color: color.$scale.grey700,
+  },
+]);
diff --git a/packages/frontend/src/design-system/components/common/Header/Header.tsx b/packages/frontend/src/design-system/components/common/Header/Header.tsx
index 64c37bbc..7ef83b2d 100644
--- a/packages/frontend/src/design-system/components/common/Header/Header.tsx
+++ b/packages/frontend/src/design-system/components/common/Header/Header.tsx
@@ -1,6 +1,9 @@
 import Image from "next/image";
 import Link from "next/link";
+import { useRouter } from "next/router";
 
+import { BROWSWER_PATH } from "../../../../constants/path";
+import { useQuizCoachActionContext } from "../../../../contexts/QuizCoachContext";
 import { ColorTheme } from "../../../../hooks/useTheme";
 import classnames from "../../../../utils/classnames";
 import { header as headerLayout } from "../../../tokens/layout.css";
@@ -13,6 +16,10 @@ export default function Header() {
   const headerStyle = classnames(styles.borderBottom, headerLayout);
   const { colorTheme } = useThemeContext();
 
+  const router = useRouter();
+  const { handleStart } = useQuizCoachActionContext();
+  const quizPage = router.pathname.startsWith(`${BROWSWER_PATH.QUIZZES}/`);
+
   const imgMap = {
     light: "/light-logo.svg",
     dark: "/dark-logo.svg",
@@ -26,7 +33,18 @@ export default function Header() {
             <Image src={imgMap} alt="Git Challenge" width={238} height={30} />
           </Link>
         </h1>
-        <ThemeSelect />
+        <div className={styles.actionGroup}>
+          {quizPage && (
+            <button
+              type="button"
+              onClick={handleStart}
+              className={styles.tutorialButton}
+            >
+              튜토리얼
+            </button>
+          )}
+          <ThemeSelect />
+        </div>
       </div>
     </header>
   );