[feat] 알림설정 전역변수로 처리

CAU-CSE-24-02-Capstone-Design · Dec 4, 2024 · 5ba220e · 5ba220e
1 parent 29acdb9
commit 5ba220e
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 44 deletions.
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/src/App.js b/src/App.js
@@ -14,48 +14,51 @@ import "./App.css";
 import Feedback from "./pages/Feedback";
 import Speech from "./pages/Speech";
 import Loading from "./components/Loading";
+import {AnalysisProvider} from "./context/AnalysisContext";
 
 const App = () => {
     return (
         <div
             className="App bg-[#f9f9f9] min-h-screen flex flex-col justify-center items-center">
-            <BrowserRouter>
-                <Routes>
-                    <Route path="/" element={<Login/>}/>
-                    <Route
-                        path="/login/oauth2/code/kakao"
-                        element={<KakaoRedirectPage/>}
-                    />
-                    <Route
-                        path="/login/oauth2/code/naver"
-                        element={<NaverRedirectPage/>}
-                    />
-                    <Route
-                        path="/login/oauth2/code/google"
-                        element={<GoogleRedirectPage/>}
-                    />
-                    <Route path="/main" element={<Main/>}/>
-                    <Route path="/speech" element={<Speech/>}/>
-
-                    {/* Header의 마이페이지 경로 */}
-                    <Route path="/mypage" element={<MyPage/>}/>
-
-                    {/* NavBar의 탭 연결 페이지 경로 */}
-                    <Route path="/calendar" element={<Calendar/>}/>
-                    <Route path="/statistics" element={<Statistics/>}/>
-
-                    {/* GuestRecord */}
-                    <Route path="/guestrecord" element={<GuestRecord/>}/>
-
-                    {/* RecordScript */}
-                    <Route path="/recordscript" element={<RecordScript/>}/>
-
-                    {/* 해당 날짜의 피드백 페이지 */}
-                    <Route path="/feedback" element={<Feedback/>}/>
-
-                    <Route path="/loading" element={<Loading/>}/>
-                </Routes>
-            </BrowserRouter>
+            <AnalysisProvider>
+                <BrowserRouter>
+                    <Routes>
+                        <Route path="/" element={<Login/>}/>
+                        <Route
+                            path="/login/oauth2/code/kakao"
+                            element={<KakaoRedirectPage/>}
+                        />
+                        <Route
+                            path="/login/oauth2/code/naver"
+                            element={<NaverRedirectPage/>}
+                        />
+                        <Route
+                            path="/login/oauth2/code/google"
+                            element={<GoogleRedirectPage/>}
+                        />
+                        <Route path="/main" element={<Main/>}/>
+                        <Route path="/speech" element={<Speech/>}/>
+
+                        {/* Header의 마이페이지 경로 */}
+                        <Route path="/mypage" element={<MyPage/>}/>
+
+                        {/* NavBar의 탭 연결 페이지 경로 */}
+                        <Route path="/calendar" element={<Calendar/>}/>
+                        <Route path="/statistics" element={<Statistics/>}/>
+
+                        {/* GuestRecord */}
+                        <Route path="/guestrecord" element={<GuestRecord/>}/>
+
+                        {/* RecordScript */}
+                        <Route path="/recordscript" element={<RecordScript/>}/>
+
+                        {/* 해당 날짜의 피드백 페이지 */}
+                        <Route path="/feedback" element={<Feedback/>}/>
+
+                        <Route path="/loading" element={<Loading/>}/>
+                    </Routes>
+                </BrowserRouter>
+            </AnalysisProvider>
         </div>
     );
 };

diff --git a/src/components/Header.js b/src/components/Header.js
@@ -2,11 +2,12 @@ import React, {useEffect, useState} from "react";
 import {useNavigate} from "react-router-dom";
 import instance from "../axios/TokenInterceptor";
 import {SPRING_API_URL} from "../constants/api";
+import {useAnalysis} from "../context/AnalysisContext";
 
 const Header = () => {
     const navigate = useNavigate();
     const [analysisText, setAnalysisText] = useState("");
-    const [isNewAnalysisText, setIsNewAnalysisText] = useState(false);
+    const {isNewAnalysisText, setIsNewAnalysisText} = useAnalysis();
     const [isModalOpen, setIsModalOpen] = useState(false);
 
     useEffect(() => {
@@ -35,7 +36,7 @@ const Header = () => {
         }
 
         handleGetReport();
-    })
+    }, [analysisText, setIsNewAnalysisText])
 
 
     // Header의 복숭아멘토 텍스트 클릭 시 메인 페이지로 이동

diff --git a/src/context/AnalysisContext.js b/src/context/AnalysisContext.js
@@ -0,0 +1,21 @@
+import React, { createContext, useState, useContext } from "react";
+
+const AnalysisContext = createContext();
+
+export const AnalysisProvider = ({ children }) => {
+    const [isNewAnalysisText, setIsNewAnalysisText] = useState(false);
+
+    return (
+        <AnalysisContext.Provider value={{ isNewAnalysisText, setIsNewAnalysisText }}>
+            {children}
+        </AnalysisContext.Provider>
+    );
+};
+
+export const useAnalysis = () => {
+    const context = useContext(AnalysisContext);
+    if (!context) {
+        throw new Error("useAnalysis must be used within an AnalysisProvider");
+    }
+    return context;
+};
diff --git a/src/pages/Statistics/index.js b/src/pages/Statistics/index.js
@@ -13,11 +13,16 @@ const StatisticsPage = () => {
     const [activeKey, setActiveKey] = useState("추임새");
     const [scrollPosition, setScrollPosition] = useState(0);
     const scrollRef = React.useRef(null);
-    const [statisticsData, setStatisticsData] = useState(
-        encodedStatisticsData
-            ? JSON.parse(decodeURIComponent(encodedStatisticsData))
-            : []
-    );
+    const [statisticsData, setStatisticsData] = useState(() => {
+        try {
+            return encodedStatisticsData
+                ? JSON.parse(decodeURIComponent(encodedStatisticsData))
+                : [];
+        } catch (error) {
+            console.error("Invalid statistics data:", error);
+            return [];
+        }
+    });
     const [level, setLevel] = useState(4);
 
     // 페이지 렌더링 후 가장 최근 데이터가 보이도록 스크롤 조정