feat: 퀴즈 튜토리얼 완료 여부 값 로컬 스토리지로 관리

[#304]
boostcampwm2023 · Feb 3, 2024 · a32f5cf · a32f5cf
1 parent 05b4bab
commit a32f5cf
Showing 1 changed file with 12 additions and 1 deletion.
diff --git a/packages/frontend/src/contexts/QuizCoachContext/QuizCoachProvider.tsx b/packages/frontend/src/contexts/QuizCoachContext/QuizCoachProvider.tsx
@@ -1,7 +1,11 @@
-import { ReactNode, useCallback, useMemo, useState } from "react";
+import { ReactNode, useCallback, useEffect, useMemo, useState } from "react";
+
+import { createLocalStorage } from "../../utils/webStorage";
 
 import { QuizCoachActionContext, QuizCoachContext } from "./quizCoachContext";
 
+const quizTutorialEndStorage = createLocalStorage("quiz-tutorial-end", false);
+
 interface QuizCoachProviderProps {
   children: ReactNode;
 }
@@ -11,17 +15,24 @@ export function QuizCoachProvider({ children }: QuizCoachProviderProps) {
 
   const handleEnd = useCallback(() => {
     setRun(false);
+    quizTutorialEndStorage.setItem(true);
   }, []);
 
   const handleStart = useCallback(() => {
     setRun(true);
+    quizTutorialEndStorage.removeItem();
   }, []);
 
   const quizCoachActionContextValue = useMemo(
     () => ({ handleEnd, handleStart }),
     [handleEnd, handleStart],
   );
 
+  useEffect(() => {
+    const tutorialEnd = quizTutorialEndStorage.getItem();
+    setRun(!tutorialEnd);
+  }, []);
+
   return (
     <QuizCoachContext.Provider value={run}>
       <QuizCoachActionContext.Provider value={quizCoachActionContextValue}>