🐛 Fix : 수정 app.js - dispatch

- dispatch 할 때 인자로 token값이 주어지지 않아, 새로고침 시 토큰이
  삭제되는 문제 해결

Author: Titorima

Diff for: style/src/App.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { login } from './features/authSlices'
 import MainPage from './components/MainPage/MainPage'
 import FittingPage from './components/FittingPage/FittingPage.js'
@@ -13,12 +13,13 @@ import MyPage from './components/MyPage/MyPage.js'
 function App() {
   const dispatch = useDispatch()
 
-  useEffect(() => {
-    const token = localStorage.getItem('token')
-    const user = JSON.parse(localStorage.getItem('user'))
+  const isAuthenticated = useSelector((state) => state.auth.isAuthenticated)
+  const lsUser = JSON.parse(localStorage.getItem('user'))
+  const lsToken = localStorage.getItem('token')
 
-    if (user && token) {
-      dispatch(login(user))
+  useEffect(() => {
+    if (!isAuthenticated && lsUser && lsToken) {
+      dispatch(login({ user: lsUser, token: lsToken }))
     }
   }, [dispatch])
 
@@ -27,7 +28,7 @@ function App() {
       <Route path="/" element={<MainPage />} />
       <Route path="/fitting" element={<FittingPage />} />
       <Route path="/recommend" element={<RecommendPage />} />
-      <Route path="/myPage" element={<MyPage />} />
+      <Route path="/mypage" element={<MyPage />} />
       <Route exact path="/policyterms" element={<PolicyTerms />} />
       <Route exact path="/privacymain" element={<PrivacyMain />} />
     </Routes>

Diff for: style/src/components/MainPage/Content.js

@@ -8,8 +8,11 @@ import sizeListIcon1 from '../../images/sizeListIcon1.png'
 import sizeListIcon2 from '../../images/sizeListIcon2.png'
 import GrayButton from './GrayButton'
 import { Link } from 'react-router-dom'
+import { useSelector } from 'react-redux'
 
 function Content() {
+  const isAuthenticated = useSelector((state) => state.auth.isAuthenticated)
+  console.log(`auth1 : ${isAuthenticated}`)
   return (
     <div className="mainPageContent">
       <section className="homeMainSection">

Diff for: style/src/components/MainPage/MainPage.js

@@ -1,8 +1,12 @@
 import Navigation from '../Navigationbar/Nav.js'
 import Footer from '../Footer.js'
 import Content from './Content.js'
+import { useSelector } from 'react-redux'
 
 function MainPage() {
+  const user = useSelector((state) => state.auth.user)
+  console.log('aa')
+  console.log(user)
   return (
     <div className="mainPage">
       <Navigation></Navigation>

Diff for: style/src/components/MyPage/MyPage.js

@@ -1,9 +1,8 @@
-import { useEffect, useRef, useState } from 'react'
+import { useState } from 'react'
 import styles from './MyPage.module.css'
 import LeftSubMyPage from './LeftSubMyPage'
 import RightSubMyPage from './RightSubMyPage'
 import Navigation from '../Navigationbar/Nav.js'
-import { useSelector } from 'react-redux'
 
 function MyPage() {
   const [page, setPage] = useState('privacy')

Diff for: style/src/components/MyPage/MyPrivacy.js

@@ -14,7 +14,6 @@ function MyPrivacy({ userId }) {
   // 신체 정보 fetch
   useEffect(() => {
     const fetchSize = async () => {
-      console.log('fet2')
       try {
         const response = await authenticatedAxios.get(
           `${API_URL}/userInfo/api/info?userId=${userId}`

Diff for: style/src/components/MyPage/MySize.js

@@ -38,7 +38,6 @@ function MySize({ userId }) {
       }
     }
     const fetchSize2 = async () => {
-      console.log('fet2')
       try {
         const response = await authenticatedAxios.get(
           `${API_URL}/userInfo/api/info?userId=${userId}`

Diff for: style/src/components/MyPage/RightSubMyPage.js

@@ -7,21 +7,20 @@ function RightSubMyPage({ page }) {
   // 새로고침 or 제출 버튼 누르면 웹 페이지 리프레쉬 되면서 redux 초기화 됨
   // redux 초기화 되면서 user에 저장된 데이터 없어져서 오류 발생.
   const user = useSelector((state) => state.auth.user)
-  console.log(`${user} ${user._id}`)
 
   switch (page) {
     case 'privacy':
       return <MyPrivacy userId={user._id} />
     case 'size':
       return <MySize userId={user._id} />
-    case 'closet':
-      return (
-        <>옷장 - 어떻게 해야할 지 생각 중. 무슨 데이터가 들어가야 할까요?</>
-      )
-    case 'style':
-      return (
-        <>스타일 - 어떻게 해야할 지 생각 중. 무슨 데이터가 들어가야 할까요?</>
-      )
+    // case 'closet':
+    //   return (
+    //     <>옷장 - 어떻게 해야할 지 생각 중. 무슨 데이터가 들어가야 할까요?</>
+    //   )
+    // case 'style':
+    //   return (
+    //     <>스타일 - 어떻게 해야할 지 생각 중. 무슨 데이터가 들어가야 할까요?</>
+    //   )
     default:
       return <>error!</>
   }

Diff for: style/src/features/authSlices.js

@@ -2,7 +2,8 @@ import { createSlice } from '@reduxjs/toolkit'
 
 const initialState = {
   isAuthenticated: false,
-  user: null,
+  // user: null,
+  user: localStorage.getItem('user'),
   token: localStorage.getItem('token'),
 }
 
@@ -11,6 +12,9 @@ export const authSlice = createSlice({
   initialState,
   reducers: {
     login: (state, action) => {
+      console.log('login called!')
+      console.log(action)
+      console.log(`in login ${action.payload.user} ${action.payload.token}`)
       state.isAuthenticated = true
       state.user = action.payload.user
       state.token = action.payload.token