[Fix]로그인 유지 오류 해결

메인페이지의 로그인상태 검사 로직에서 acessToken->accessToken으로 고침
Issues #15

client/package.json

@@ -25,6 +25,7 @@
     "react-redux": "^8.1.2",
     "react-router-dom": "^6.15.0",
     "react-toastify": "^9.1.3",
+    "redux-persist": "^6.0.0",
     "styled-components": "^6.0.7"
   },
   "devDependencies": {

client/src/components/Headers/LogoutHeader.tsx

@@ -2,13 +2,13 @@ import React from "react";
 import styled from "styled-components";
 import StockHolmLogo from "../../asset/images/StockHolmLogo.png";
 import { useNavigate } from "react-router-dom";  // 라우터의 네비게이션을 사용하기 위해 가져옴
-import { setLogoutState } from '../../reducer/member/loginSlice';
-import { useDispatch} from 'react-redux';
+// import { setLogoutState } from '../../reducer/member/loginSlice';
+// import { useDispatch} from 'react-redux';
 import StockSearchComponent from './stockSearchComponent';
 
 const LogoutHeader: React.FC<LogoutHeaderProps> = ({ onLoginClick }) => {
   //reduc-toolkit 활용
-  const dispatch = useDispatch();
+  // const dispatch = useDispatch();
 
   const navigate = useNavigate();  // 라우터 네비게이션 훅 사용
 
@@ -20,8 +20,8 @@ const LogoutHeader: React.FC<LogoutHeaderProps> = ({ onLoginClick }) => {
     navigate("/");  // 메인 페이지로 이동
   };
 
-  // isLoggedOut 변수를 항상 0으로 설정
-  dispatch(setLogoutState());
+  // // isLoggedOut 변수를 항상 0으로 설정
+  // dispatch(setLogoutState());
 
   // 컴포넌트 렌더링
   return (

client/src/page/MainPage.tsx

@@ -34,7 +34,18 @@ const MainPage = () => {
   const [isWelcomeModalOpen, setWelcomeModalOpen] = useState(false);
   const [isProfileModalOpen, setProfileModalOpen] = useState(false); //프로필 모달 보이기/숨기기
 
+  const dispatch = useDispatch();
 
+  // 🔴 페이지 로드 시 로컬 스토리지의 토큰을 기반으로 로그인 상태를 확인합니다.
+  useEffect(() => {
+    const acessToken = localStorage.getItem("accessToken");
+    if (acessToken !== null) {
+      dispatch(setLoginState());
+    }
+  }, [dispatch]);
+
+  const isLogin = useSelector((state: RootState) => state.login);
+  console.log(isLogin);
 
   const openOAuthModal = useCallback(() => {
     setOAuthModalOpen(true);
@@ -95,18 +106,6 @@ const MainPage = () => {
     setWelcomeModalOpen(false);
   }, []);
 
-  const dispatch = useDispatch();
-  const isLogin = useSelector((state: RootState) => state.login);
-  console.log(isLogin);
-
-  // 🔴 페이지 로드 시 로컬 스토리지의 토큰을 기반으로 로그인 상태를 확인합니다.
-  useEffect(() => {
-    const acessToken = localStorage.getItem("acessToken");
-    if (acessToken !== null) {
-      dispatch(setLoginState());
-    }
-  }, [dispatch]);
-
   const handleOAuthLoginSuccess = useCallback(() => {
     setLoginConfirmationModalOpen(true);  // 로그인 확인 모달 열기
 }, []);
@@ -139,7 +138,7 @@ const MainPage = () => {
 
   return (
     <Container>
-      {isLogin === 1 ? (
+      {isLogin == 1 ? (
         <LoginHeader onProfileClick={openProfileModal} />
       ) : (
         <LogoutHeader onLoginClick={openOAuthModal} />

client/src/reducer/member/loginSlice.ts

@@ -6,13 +6,11 @@ const loginSlice = createSlice({
   name: "login",
   initialState: initialState,
   reducers: {
-    setLoginState: (state) => {
-      state = 1;
-      return state;
+    setLoginState: () => {
+      return 1;
     },
-    setLogoutState: (state) => {
-      state = 0;
-      return state;
+    setLogoutState: () => {
+      return 0;
     },
   },
 });

client/src/store/config.ts

@@ -10,6 +10,7 @@ import memberInfoReducer from "../reducer/member/memberInfoSlice";
 import { stockOrderVolumeReducer } from "../reducer/StockOrderVolume-Reducer";
 import { setDecisionWindowReducer } from "../reducer/SetDecisionWindow-Reducer";
 
+
 const store = configureStore({
   reducer: {
     stockOrderType: stockOrderTypeReducer,