feat: 헤더 > 퀴즈 페이지 튜토리얼 시작 버튼 추가

[#304]
boostcampwm2023 · Feb 3, 2024 · 14c8602 · 14c8602
1 parent 647b2f1
commit 14c8602
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 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
@@ -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
@@ -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>
   );