[FE/#15] Feat : 서버 통신시 header에 token 추가

FE/src/components/Labels/Navigation/Navigation.jsx

@@ -1,18 +1,23 @@
 import React, { useState, useReducer } from "react";
+import { useCookies } from "react-cookie";
+import useFetch from "@Hooks/useFetch";
+import pipe from "@Utils/pipe";
 
 import Box from "@material-ui/core/Box";
 
 import { labelReducer, initialState, createLabelFetchOptions } from "@Reducers/labelReducer";
-import useFetch from "@Hooks/useFetch";
-import pipe from "@Utils/pipe";
 
 import CustomButton from "@Components/common/CustomButton";
 import LinkButtons from "@Components/common/LinkButtons/LinkButtons";
+
+import { TOKEN } from "@Constants/constants";
+
 import NewLabel from "./NewLabel/NewLabel";
 
 const NEW_LABEL_BTN_TEXT = "New Label";
 
 const Navigation = () => {
+  const [{ token }] = useCookies([TOKEN]);
   const [showNewLabel, setShowNewLabel] = useState(false);
   const [labelState, labelStateDispatch] = useReducer(labelReducer, initialState);
 
@@ -24,6 +29,7 @@ const Navigation = () => {
   )({
     data: labelState,
     dispatch: labelStateDispatch,
+    token,
   });
 
   return (

FE/src/pages/Issues.jsx

@@ -1,5 +1,5 @@
 import React, { useContext } from "react";
-
+import { useCookies } from "react-cookie";
 import useFetch from "@Hooks/useFetch";
 import pipe from "@Utils/pipe";
 
@@ -12,9 +12,12 @@ import ClearButton from "@Components/Issues/ClearButton";
 import { IssueListContext } from "@Contexts/issueListContext";
 import { initDataFetchOptions } from "@Reducers/issueListReducer";
 
+import { TOKEN } from "@Constants/constants";
+
 const Issues = () => {
+  const [{ token }] = useCookies([TOKEN]);
   const { issueListDispatch } = useContext(IssueListContext);
-  const { loading } = pipe(initDataFetchOptions, useFetch)(issueListDispatch);
+  const { loading } = pipe(initDataFetchOptions, useFetch)({ dispatch: issueListDispatch, token });
 
   return (
     <>

FE/src/pages/Labels.jsx

@@ -1,5 +1,5 @@
 import React, { useContext } from "react";
-
+import { useCookies } from "react-cookie";
 import useFetch from "@Hooks/useFetch";
 import pipe from "@Utils/pipe";
 
@@ -11,9 +11,15 @@ import LabelTable from "@Components/Labels/LabelTable";
 import { LabelListContext } from "@Contexts/labelListContext";
 import { initDataFetchOptions } from "@Reducers/labelListReducer";
 
+import { TOKEN } from "@Constants/constants";
+
 const Labels = () => {
+  const [{ token }] = useCookies([TOKEN]);
   const { labelListDispatch } = useContext(LabelListContext);
-  const { loading, getData } = pipe(initDataFetchOptions, useFetch)(labelListDispatch);
+  const { loading, getData } = pipe(
+    initDataFetchOptions,
+    useFetch,
+  )({ dispatch: labelListDispatch, token });
 
   return (
     <>

FE/src/pages/Login.jsx

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect } from "react";
-import jwtDecode from "jwt-decode";
 import { useCookies } from "react-cookie";
+import jwtDecode from "jwt-decode";
 import pipe from "@Utils/pipe";
 
 import { UserContext } from "@Contexts/userContext";
@@ -13,8 +13,7 @@ import { TOKEN } from "@Constants/constants";
 const Login = () => {
   document.cookie =
     "token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdmF0YXJVcmwiOiJodHRwczovL2F2YXRhcnMyLmdpdGh1YnVzZXJjb250ZW50LmNvbS91LzU4MjA5MDA5P3Y9NCIsIm5hbWUiOiJTdW5naWsgQ2hvaSIsImlkIjo1ODIwOTAwOSwiZXhwIjoxNTkzMDQ1MDI5fQ.u8oD16_vVEfNumcueeZy2Re-FUMIVb-DLNTcdeDShz8";
-  const [cookies] = useCookies([TOKEN]);
-  const { token } = cookies;
+  const [{ token }] = useCookies([TOKEN]);
 
   const { userDispatch } = useContext(UserContext);
 

FE/src/reducers/labelListReducer.js

@@ -43,7 +43,7 @@ export const labelListReducer = (state, action) => {
   }
 };
 
-export const initDataFetchOptions = (dispatch) => ({
+export const initDataFetchOptions = ({ dispatch, token }) => ({
   url: labelsUrl,
   dispatch,
   actionType: {
@@ -52,5 +52,8 @@ export const initDataFetchOptions = (dispatch) => ({
   },
   option: {
     method: "GET",
+    header: {
+      Authorization: token,
+    },
   },
 });

FE/src/reducers/labelReducer.js

@@ -46,7 +46,7 @@ export const labelReducer = (state, action) => {
   }
 };
 
-export const createLabelFetchOptions = ({ data, dispatch }) => ({
+export const createLabelFetchOptions = ({ data, dispatch, token }) => ({
   url: labelsUrl,
   dispatch,
   actionType: {
@@ -56,6 +56,9 @@ export const createLabelFetchOptions = ({ data, dispatch }) => ({
   option: {
     method: "POST",
     body: JSON.stringify(data),
+    header: {
+      Authorization: token,
+    },
   },
   skip: true,
 });