feat: 드라이버 가이드 팝오버 스타일 및 기능 추가, Mission 컴포넌트의 팝오버 내용 수정

Author: minsgy

src/hooks/useDriverGuide.ts

@@ -37,7 +37,9 @@ export function useDriverGuide({
     Partial<Config> = useMemo(
     () => ({
       showProgress: true,
-      showButtons: ["previous", "next", "close"],
+      showButtons: ["next"],
+      nextBtnText: "다음",
+      progressText: "{{current}}/{{total}}",
     }),
     []
   );

src/index.css

@@ -15,3 +15,71 @@
     @apply flex-[0_0_80vw] max-w-[480px] aspect-[3/4] rounded-[40px] bg-neutral-100 p-2 shadow-[2px_2px_8px_rgba(0,0,0,0.4)] transition-transform duration-300 ease-in-out;
   }
 }
+
+/* Class assigned to popover wrapper */
+.driver-popover {
+  border-radius: 32px !important;
+  padding: 20px !important;
+}
+
+/* Arrow pointing towards the highlighted element */
+.driver-popover-arrow {
+  display: none;
+}
+
+/* Title and description */
+.driver-popover-title {
+  color: #437bfe;
+  font-family:
+    "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.4;
+  letter-spacing: -2.2%;
+}
+.driver-popover-description {
+  color: var(--color-neutral-700);
+  font-family:
+    "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.4;
+  letter-spacing: -2.2%;
+  white-space: pre-line !important;
+}
+
+/* Close button displayed on the top right corner */
+.driver-popover-close-btn {
+  display: none !important;
+}
+
+/* Footer of the popover displaying progress and navigation buttons */
+.driver-popover-footer {
+}
+.driver-popover-progress-text {
+}
+
+.driver-popover-footer button {
+  width: 53px !important;
+  height: 33px !important;
+  border-radius: 24px !important;
+  background: #4d5761 !important;
+  color: #fcfcfd !important;
+  font-family:
+    "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif !important;
+  font-size: 12px !important;
+  font-weight: 500 !important;
+  line-height: 1.4 !important;
+  letter-spacing: -2.2% !important;
+  border: none !important;
+  text-shadow: none !important;
+  padding: 0 !important;
+
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+
+.driver-popover-footer button:disabled {
+  display: none !important;
+}

src/routes/mission/-components/MissionLockCard.tsx

@@ -4,7 +4,10 @@ import { cn } from "@/utils/cn";
 
 export default function MissionLockCard() {
   return (
-    <div className={cn("card-container", "max-w-[380px]")}>
+    <div
+      className={cn("card-container", "max-w-[380px]")}
+      id="mission-lock-card"
+    >
       <div className="relative w-full h-full rounded-[32px]">
         <div className="h-full flex flex-col items-center justify-center gap-2 relative z-1 bg-neutral-400 rounded-[32px]">
           <img

src/routes/mission/index.tsx

@@ -137,9 +137,10 @@ function Mission() {
     {
       element: "#timer-play-button",
       popover: {
-        align: "center",
+        align: "end",
         side: "top",
         title: "세션 시작",
+        disableButtons: ["previous"],
         description: "재생 버튼을 누르면 오늘의 세션을 시작해요.",
         onNextClick: () => {
           setShowMockStopButton(true);
@@ -148,12 +149,13 @@ function Mission() {
       },
     },
     {
-      element: "#mission-carousel",
+      element: "#mission-lock-card",
       popover: {
         align: "center",
-        side: "bottom",
+        side: "over",
         title: "루트 미션",
-        description: "내 레벨에 맞는 미션에 도전하고 해설 영상을 확인해보세요.",
+        disableButtons: ["previous"],
+        description: "내 난이도에 맞는 미션을 추천해드려요.",
       },
     },
     {
@@ -162,8 +164,9 @@ function Mission() {
         align: "center",
         side: "top",
         title: "세션 종료",
-        description:
-          "멈춤 버튼을 길게 누르면 오늘의 세션이 종료돼요. 종료 후 기록을 확인할 수 있어요.",
+        description: `정지 버튼을 길게 누르면 세션이 끝나요.\n끝난 뒤엔 기록을 확인할 수 있어요.`,
+        disableButtons: ["previous"],
+        doneBtnText: "시작하기",
         onNextClick: () => {
           stop();
         },

src/third-party/queryClient.ts

@@ -11,17 +11,17 @@ export const customQueryClient = new QueryClient({
   },
   queryCache: new QueryCache({
     onError: (error) => {
-      if (error instanceof AxiosError) {
-        if (error.response?.status === 401) {
-          router.navigate({ to: "/" });
-        }
-        if (error.response?.status === 302) {
-          router.navigate({ to: "/" });
-        }
-        if (!error.response?.data) {
-          router.navigate({ to: "/" });
-        }
-      }
+      // if (error instanceof AxiosError) {
+      //   if (error.response?.status === 401) {
+      //     router.navigate({ to: "/" });
+      //   }
+      //   if (error.response?.status === 302) {
+      //     router.navigate({ to: "/" });
+      //   }
+      //   if (!error.response?.data) {
+      //     router.navigate({ to: "/" });
+      //   }
+      // }
     },
   }),
 });