From 647b2f1846fb722e0a2681bc836ae6cfce3eed79 Mon Sep 17 00:00:00 2001
From: YuHyun <puh0128@gmail.com>
Date: Fri, 29 Dec 2023 17:03:52 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=80=B4=EC=A6=88=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20>=20QuizCoachmark=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#304]
---
 .../frontend/src/pages/quizzes/[id].page.tsx  | 29 ++++++++++++++++---
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/pages/quizzes/[id].page.tsx b/packages/frontend/src/pages/quizzes/[id].page.tsx
index 53b348b..e8b48c8 100644
--- a/packages/frontend/src/pages/quizzes/[id].page.tsx
+++ b/packages/frontend/src/pages/quizzes/[id].page.tsx
@@ -7,11 +7,20 @@ import { quizAPI } from "../../apis/quiz";
 import { Editor } from "../../components/editor";
 import EditorInfo from "../../components/editor/EditorInfo";
 import { Graph } from "../../components/graph";
-import { SolvedModal, useSolvedModal } from "../../components/quiz";
+import {
+  COACHMARK_TARGETS,
+  QuizCoachmark,
+  SolvedModal,
+  useSolvedModal,
+} from "../../components/quiz";
 import { QuizGuide } from "../../components/quiz/QuizGuide";
 import { Terminal } from "../../components/terminal";
 import { CommandInputForwardRefType } from "../../components/terminal/CommandInput";
 import { BROWSWER_PATH } from "../../constants/path";
+import {
+  useQuizCoachActionContext,
+  useQuizCoachContext,
+} from "../../contexts/QuizCoachContext";
 import {
   UserQuizStatusActionType,
   useUserQuizStatusDispatch,
@@ -26,6 +35,7 @@ import {
 } from "../../reducers/terminalReducer";
 import { Categories, Quiz, QuizGitGraphCommit } from "../../types/quiz";
 import { TerminalContentType } from "../../types/terminalType";
+import classnames from "../../utils/classnames";
 import { isString } from "../../utils/typeGuard";
 
 import * as styles from "./quiz.css";
@@ -44,6 +54,9 @@ export default function QuizPage({ quiz }: { quiz: Quiz }) {
   const [{ terminalMode, editorFile, contentArray }, terminalDispatch] =
     useReducer(terminalReducer, initialTerminalState);
 
+  const run = useQuizCoachContext();
+  const { handleEnd } = useQuizCoachActionContext();
+
   const terminalInputRef = useRef<CommandInputForwardRefType>(null);
 
   const fetchGitGraphDataRef = useRef(async (curId: number) => {
@@ -170,11 +183,17 @@ export default function QuizPage({ quiz }: { quiz: Quiz }) {
       <main className={styles.mainContainer}>
         <div className={styles.mainInnerContainer}>
           <div className={styles.topContainer} ref={topRef}>
-            <Graph className={styles.graph} data={gitGraphData} />
-            <QuizGuide quiz={quiz} />
+            <Graph
+              className={classnames(styles.graph, COACHMARK_TARGETS.GIT_GRAPH)}
+              data={gitGraphData}
+            />
+            <QuizGuide
+              quiz={quiz}
+              keywordsClassName={COACHMARK_TARGETS.KEY_COMMAND}
+            />
           </div>
           <div
-            className={styles.bar}
+            className={classnames(styles.bar, COACHMARK_TARGETS.RESIZABLE)}
             role="button"
             tabIndex={0}
             ref={barRef}
@@ -191,6 +210,7 @@ export default function QuizPage({ quiz }: { quiz: Quiz }) {
               contentArray={contentArray}
               onTerminal={handleTerminal}
               ref={terminalInputRef}
+              className={COACHMARK_TARGETS.TERMINAL}
             />
           )}
         </div>
@@ -212,6 +232,7 @@ export default function QuizPage({ quiz }: { quiz: Quiz }) {
           onNextQuiz={handleNextQuizPage}
         />
       )}
+      {run && <QuizCoachmark onTourEnd={handleEnd} />}
     </>
   );
 }