[FE/#15] Feat : token decode 이후 userReducer 적용

- 토큰은 우선 하드코딩으로 적용

FE/src/components/common/Header/Header.jsx

@@ -17,7 +17,7 @@ const Header = () => {
   const classes = useStyles();
 
   const {
-    user: { id, avatarUrl },
+    user: { name, avatarUrl },
   } = useContext(UserContext);
 
   return (
@@ -30,7 +30,7 @@ const Header = () => {
           <Typography variant="h6" className={classes.title}>
             {TITLE_TEXT}
           </Typography>
-          {id && <UserMenu userId={id} url={avatarUrl} />}
+          {name && <UserMenu userId={name} url={avatarUrl} />}
         </Toolbar>
       </AppBar>
     </div>

FE/src/pages/Login.jsx

@@ -1,8 +1,28 @@
-import React from "react";
+import React, { useContext, useEffect } from "react";
+
+import jwtDecode from "jwt-decode";
+import { useCookies } from "react-cookie";
+
+import { UserContext } from "@Contexts/userContext";
+import { setUserData } from "@Reducers/userReducer";
 
 import LoginForm from "@Components/Login/LoginForm";
 
+const TOKEN = "token";
+
 const Login = () => {
+  document.cookie =
+    "token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdmF0YXJVcmwiOiJodHRwczovL2F2YXRhcnMyLmdpdGh1YnVzZXJjb250ZW50LmNvbS91LzU4MjA5MDA5P3Y9NCIsIm5hbWUiOiJTdW5naWsgQ2hvaSIsImlkIjo1ODIwOTAwOSwiZXhwIjoxNTkzMDQ1MDI5fQ.u8oD16_vVEfNumcueeZy2Re-FUMIVb-DLNTcdeDShz8";
+  const [cookies, setCookies] = useCookies([TOKEN]);
+  const { token } = cookies;
+
+  const { userDispatch } = useContext(UserContext);
+
+  useEffect(() => {
+    const decodedToken = jwtDecode(token);
+    userDispatch(setUserData(decodedToken));
+  }, []);
+
   return <LoginForm />;
 };
 

FE/src/reducers/userReducer.js

@@ -1,28 +1,29 @@
 export const initialState = {
-  id: "sungik-choi",
-  avatarUrl:
-    "https://lh3.googleusercontent.com/lv3q0LxixvhfsBwhLKzpp53EPMQO92jq98uOKqT9sL0hv4gF8l9bl6SRN23FLxkeJH3ldxZt-PreP1zddg",
+  id: null,
+  exp: null,
+  name: "",
+  avatarUrl: "",
 };
 
-export const FETCH_SUCCESS = "FETCH_SUCCESS";
-export const FETCH_ERROR = "FETCH_ERROR";
+export const SET_USER_DATA = "SET_USER_DATA";
+export const DELETE_USER_DATA = "DELETE_USER_DATA";
 
-export const fetchSuccess = (payload) => {
-  return { type: FETCH_SUCCESS, payload };
+export const setUserData = (payload) => {
+  return { type: SET_USER_DATA, payload };
 };
 
-export const fetchError = () => {
-  return { type: FETCH_ERROR };
+export const deleteUserData = () => {
+  return { type: DELETE_USER_DATA };
 };
 
 export const userReducer = (state, action) => {
   const { type, payload } = action;
 
   switch (type) {
-    case FETCH_SUCCESS:
+    case SET_USER_DATA:
       return { ...state, ...payload };
-    case FETCH_ERROR:
-      return { ...state };
+    case DELETE_USER_DATA:
+      return { ...initialState };
     default:
       return state;
   }