From c9c43c17f6d1db7e1c6b5980568fac8c2a604a8c Mon Sep 17 00:00:00 2001
From: YuHyun <puh0128@gmail.com>
Date: Fri, 29 Dec 2023 02:27:05 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20QuizCoachmark=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#304]
---
 .../quiz/QuizCoachmark/QuizCoachmark.tsx      | 63 +++++++++++++++++++
 .../components/quiz/QuizCoachmark/index.ts    |  1 +
 .../frontend/src/components/quiz/index.ts     |  1 +
 3 files changed, 65 insertions(+)
 create mode 100644 packages/frontend/src/components/quiz/QuizCoachmark/QuizCoachmark.tsx
 create mode 100644 packages/frontend/src/components/quiz/QuizCoachmark/index.ts

diff --git a/packages/frontend/src/components/quiz/QuizCoachmark/QuizCoachmark.tsx b/packages/frontend/src/components/quiz/QuizCoachmark/QuizCoachmark.tsx
new file mode 100644
index 00000000..34bb01bc
--- /dev/null
+++ b/packages/frontend/src/components/quiz/QuizCoachmark/QuizCoachmark.tsx
@@ -0,0 +1,63 @@
+import { EVENTS } from "react-joyride";
+
+import { Coachmark, type CoachmarkProps } from "../../coachmark";
+
+interface QuizCoachmarkProps {
+  onTourEnd: () => void;
+}
+
+export function QuizCoachmark({ onTourEnd }: QuizCoachmarkProps) {
+  const handleProgress: CoachmarkProps["callback"] = ({ type }) => {
+    if (type === EVENTS.TOUR_END) onTourEnd();
+  };
+
+  return (
+    <Coachmark
+      steps={STEPS}
+      continuous
+      showProgress
+      showSkipButton
+      callback={handleProgress}
+    />
+  );
+}
+
+export const COACHMARK_TARGETS = {
+  GIT_GRAPH: "coach--git-graph",
+  KEY_COMMAND: "coach--key-command",
+  TERMINAL: "coach--terminal",
+  RESIZABLE: "coach--resizable",
+};
+
+const STEPS: CoachmarkProps["steps"] = [
+  {
+    title: "Git 그래프",
+    target: toClassSelector(COACHMARK_TARGETS.GIT_GRAPH),
+    content:
+      "현재 Git 상태에 따라 Git 그래프가 어떻게 변하는지 확인할 수 있어요.",
+    placement: "right",
+    disableBeacon: true, // autostart tour
+  },
+  {
+    title: "Git 핵심 명령어",
+    target: toClassSelector(COACHMARK_TARGETS.KEY_COMMAND),
+    content: "문제 풀이에 필요한 핵심 명령어를 확인할 수 있어요.",
+    placement: "bottom",
+  },
+  {
+    title: "문제 풀이용 터미널",
+    target: toClassSelector(COACHMARK_TARGETS.TERMINAL),
+    content: "터미널에 Git 명령어를 입력해 문제를 풀어보세요.",
+    placement: "top-start",
+  },
+  {
+    title: "터미널 리사이징",
+    target: toClassSelector(COACHMARK_TARGETS.RESIZABLE),
+    content: "위아래로 드래그해서 터미널 크기를 조절할 수 있어요.",
+    placement: "top",
+  },
+];
+
+function toClassSelector(className: string) {
+  return `.${className}`;
+}
diff --git a/packages/frontend/src/components/quiz/QuizCoachmark/index.ts b/packages/frontend/src/components/quiz/QuizCoachmark/index.ts
new file mode 100644
index 00000000..fdaf1efc
--- /dev/null
+++ b/packages/frontend/src/components/quiz/QuizCoachmark/index.ts
@@ -0,0 +1 @@
+export { COACHMARK_TARGETS, QuizCoachmark } from "./QuizCoachmark";
diff --git a/packages/frontend/src/components/quiz/index.ts b/packages/frontend/src/components/quiz/index.ts
index 1b378256..a18a3788 100644
--- a/packages/frontend/src/components/quiz/index.ts
+++ b/packages/frontend/src/components/quiz/index.ts
@@ -3,3 +3,4 @@ export { default as QuizLocation } from "./QuizLocation";
 export { default as CommandAccordion } from "./CommandAccordion";
 export { SolvedModal, useSolvedModal } from "./SolvedModal";
 export { default as QuizAnswerModal } from "./QuizAnswerModal";
+export { COACHMARK_TARGETS, QuizCoachmark } from "./QuizCoachmark";