fix: 퀴즈 튜토리얼 > 헤더와 Git graph step의 spotlight 겹침

[#304]
boostcampwm2023 · Feb 3, 2024 · 7b6dbde · 7b6dbde
1 parent e6eff38
commit 7b6dbde
Showing 1 changed file with 16 additions and 2 deletions.
diff --git a/packages/frontend/src/components/quiz/QuizCoachmark/QuizCoachmark.tsx b/packages/frontend/src/components/quiz/QuizCoachmark/QuizCoachmark.tsx
@@ -7,8 +7,18 @@ interface QuizCoachmarkProps {
 }
 
 export function QuizCoachmark({ onTourEnd }: QuizCoachmarkProps) {
-  const handleProgress: CoachmarkProps["callback"] = ({ type }) => {
-    if (type === EVENTS.TOUR_END) onTourEnd();
+  const handleProgress: CoachmarkProps["callback"] = ({
+    index: stepIndex,
+    type,
+  }) => {
+    if (stepIndex === HEARDER_OVERLAP_STEP && type === EVENTS.TOOLTIP) {
+      window?.scroll(0, 0);
+      return;
+    }
+
+    if (type === EVENTS.TOUR_END) {
+      onTourEnd();
+    }
   };
 
   return (
@@ -18,6 +28,7 @@ export function QuizCoachmark({ onTourEnd }: QuizCoachmarkProps) {
       showProgress
       showSkipButton
       callback={handleProgress}
+      disableScrolling
     />
   );
 }
@@ -29,6 +40,9 @@ export const COACHMARK_TARGETS = {
   RESIZABLE: "coach--resizable",
 };
 
+const GIT_GRAPH_STEP = 0;
+const HEARDER_OVERLAP_STEP = GIT_GRAPH_STEP;
+
 const STEPS: CoachmarkProps["steps"] = [
   {
     title: "Git 그래프",