refactor: QuizCoachmark > 상수 파일로 분리

[#304]
boostcampwm2023 · Feb 2, 2024 · 0846040 · 0846040
1 parent 239e0f5
commit 0846040
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 38 deletions.
diff --git a/packages/frontend/src/components/quiz/QuizCoachmark/QuizCoachmark.tsx b/packages/frontend/src/components/quiz/QuizCoachmark/QuizCoachmark.tsx
@@ -4,7 +4,8 @@ import {
   Coachmark,
   type CoachmarkProps,
 } from "../../../design-system/components/common";
-import { toClassSelector } from "../../../utils/cssSelector";
+
+import { STEPS } from "./coachmarkList";
 
 interface QuizCoachmarkProps {
   onTourEnd: () => void;
@@ -28,39 +29,3 @@ export function QuizCoachmark({ onTourEnd }: QuizCoachmarkProps) {
     />
   );
 }
-
-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",
-  },
-];
diff --git a/packages/frontend/src/components/quiz/QuizCoachmark/coachmarkData.ts b/packages/frontend/src/components/quiz/QuizCoachmark/coachmarkData.ts
@@ -0,0 +1,6 @@
+export const COACHMARK_TARGETS = {
+  GIT_GRAPH: "coach--git-graph",
+  KEY_COMMAND: "coach--key-command",
+  TERMINAL: "coach--terminal",
+  RESIZABLE: "coach--resizable",
+};
diff --git a/packages/frontend/src/components/quiz/QuizCoachmark/coachmarkList.ts b/packages/frontend/src/components/quiz/QuizCoachmark/coachmarkList.ts
@@ -0,0 +1,33 @@
+import { type CoachmarkProps } from "../../../design-system/components/common";
+import { toClassSelector } from "../../../utils/cssSelector";
+
+import { COACHMARK_TARGETS } from "./coachmarkData";
+
+export 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",
+  },
+];
diff --git a/packages/frontend/src/components/quiz/QuizCoachmark/index.ts b/packages/frontend/src/components/quiz/QuizCoachmark/index.ts
@@ -1 +1,2 @@
-export { COACHMARK_TARGETS, QuizCoachmark } from "./QuizCoachmark";
+export { QuizCoachmark } from "./QuizCoachmark";
+export { COACHMARK_TARGETS } from "./coachmarkData";