Add. fix bottom nav error

src/components/layout/BottomNav.tsx

@@ -1,9 +1,10 @@
+import { bottomNavigation } from '@/store/common';
 import { BottomNavigation, BottomNavigationAction } from '@mui/material';
-import React from 'react';
 import { Link } from 'react-router-dom';
+import { useRecoilState } from 'recoil';
 
 const BottomNav = () => {
-  const [value, setValue] = React.useState(0);
+  const [navPage, setNavPage] = useRecoilState(bottomNavigation);
 
   return (
     <BottomNavigation
@@ -15,9 +16,9 @@ const BottomNav = () => {
         width: '100vw',
       }}
       showLabels
-      value={value}
+      value={navPage}
       onChange={(event, newValue) => {
-        setValue(newValue);
+        setNavPage(newValue);
       }}
     >
       <BottomNavigationAction

src/pages/record/RecordPage.tsx

@@ -36,6 +36,7 @@ import {
   FormType,
   currentSelectedDate,
   currentPeriod,
+  bottomNavigation,
 } from '@/store/common';
 import Wrapper from '../auth/common/Wrapper';
 import { modalButtonState, modalValue } from '@/store/modal';
@@ -65,22 +66,22 @@ const renderEventContent = (eventInfo: any) => {
 
 const RecordPage = () => {
   const navigation = useNavigate();
+  const { closeModal } = useModalCommon();
+
+  const setNavPage = useSetRecoilState(bottomNavigation);
 
   const setSelectedEvent = useSetRecoilState(currentSelectedEvent);
 
   const selectedDate = useRecoilValue(currentSelectedDate);
   const periodType = useRecoilValue<PeriodTypeForRecord>(currentPeriod);
-  const { closeModal } = useModalCommon();
 
   const setCalendarType =
     useSetRecoilState<customCalendarType>(currentCalendarType);
 
   const setCurrentFormType = useSetRecoilState<FormType>(currentFormType);
-
   const setRecordType = useSetRecoilState(currentRecordPageType);
 
   const selectedValue = useRecoilValue(modalValue);
-
   const startHour = useRecoilValue(statisticsStartHour);
   const endHour = `${
     Number(startHour.substring(0, 2)) + 24
@@ -212,6 +213,8 @@ const RecordPage = () => {
   }, [selectedValue]);
 
   useEffect(() => {
+    setNavPage(0);
+
     const initialInfo = { start: new Date() };
     getAllRecords(initialInfo);
 

src/pages/settings/SettingsPage.tsx

@@ -15,7 +15,7 @@ import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 
 import ListIcon from '@/components/settings/ListIcon';
 import UserAvatar from '@/components/settings/UserAvatar';
-import { stepIndex } from '@/store/common';
+import { bottomNavigation, stepIndex } from '@/store/common';
 import { useNavigate } from 'react-router-dom';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 import SettingWrapper from '../auth/common/Wrapper';
@@ -28,7 +28,8 @@ import { useModalCommon } from '@/hooks/modalCommon';
 
 const SettingPage = () => {
   const navigation = useNavigate();
-
+  const setNavPage = useSetRecoilState(bottomNavigation);
+
   const setStepIndex = useSetRecoilState(stepIndex);
   const { showServerError, closeModal } = useModalCommon();
 
@@ -107,6 +108,7 @@ const SettingPage = () => {
   };
 
   useEffect(() => {
+    setNavPage(2);
     setStepIndex(0);
   });
 

src/pages/statistics/StatisticsPage.tsx

@@ -2,6 +2,9 @@ import Period from './Period';
 
 import CommonHeader from '@/components/layout/CommonHeader';
 import ChartContainer from '@/pages/statistics/ChartContainer';
+import { bottomNavigation } from '@/store/common';
+import { useEffect } from 'react';
+import { useSetRecoilState } from 'recoil';
 // import { useRecoilState } from 'recoil';
 // import { modalState } from '@/store/modal';
 
@@ -10,6 +13,11 @@ const StatisticsPage = () => {
   // const handleClickBtn = () => {
   //   setModalInfo({ ...modalInfo, open: true, msg: 'This is a test.' });
   // };
+  const setNavPage = useSetRecoilState(bottomNavigation);
+
+  useEffect(() => {
+    setNavPage(1);
+  }, []);
 
   return (
     <>

src/store/common.ts

@@ -235,14 +235,20 @@ export const popupMessagePosition = selector({
     if (type === 'RESETPW') {
       return get(resetPWCompletePopupMessage);
     } else if (type === 'SETTEMPLATE') {
-      return 'ETC MESSAGE TEXT';
-      // return get(currentSelectedDateForStat);
+      return get(currentSelectedDateForStat);
     } else {
-      return 'ETC MESSAGE TEXT 2222';
+      return 'ETC MESSAGE';
     }
   },
 });
 
+
+/* ============ BOTTOM NAVIGATION ============ */
+export const bottomNavigation = atom({
+  key: 'BottomNavigation',
+  default: 0,
+});
+
 // export const popupMessageShowStatus = selector({
 //   key: 'PopupMessageShowStatus',
 //   get: ({ get }) => {