refactor : axios.create로 API baseURL 및 header 한번에 관리

techeer-sv · Sep 1, 2023 · 067ad86 · 067ad86
1 parent fbfe3aa
commit 067ad86
Show file tree

Hide file tree

Showing 22 changed files with 95 additions and 190 deletions.
diff --git a/frontend/src/App.css b/frontend/src/App.css
diff --git a/frontend/src/Recoil.tsx → frontend/src/Recoil.ts b/frontend/src/Recoil.tsx → frontend/src/Recoil.ts
@@ -48,12 +48,6 @@ const searchTextState = atom<string>({
   default: '',
 });
 
-const persistTokenState = atom<string | null>({
-  key: 'persistTokenState',
-  default: '',
-  effects_UNSTABLE: [persistAtom],
-});
-
 const autoLoginState = atom<boolean>({
   key: 'autoLoginState',
   default: false,
@@ -114,7 +108,6 @@ export {
   projectIdState,
   refreshState,
   searchTextState,
-  persistTokenState,
   autoLoginState,
   techStacksState,
   topicState,

diff --git a/frontend/src/Stack.tsx → frontend/src/Stack.ts b/frontend/src/Stack.tsx → frontend/src/Stack.ts
diff --git a/frontend/src/api/axios.ts b/frontend/src/api/axios.ts
@@ -0,0 +1,21 @@
+import axios, { AxiosInstance } from 'axios';
+
+const accessToken = sessionStorage.getItem('accessToken');
+const persistToken = localStorage.getItem('accessToken');
+
+const generalApi: AxiosInstance = axios.create({
+  baseURL: 'http://localhost:8080/api/v1',
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+const tokenApi: AxiosInstance = axios.create({
+  baseURL: 'http://localhost:8080/api/v1',
+  headers: {
+    'Content-Type': 'application/json',
+    Authorization: `Bearer ${accessToken || persistToken}`,
+  },
+});
+
+export { generalApi, tokenApi };
diff --git a/frontend/src/components/general/NavBar.tsx b/frontend/src/components/general/NavBar.tsx
@@ -5,12 +5,12 @@ import { useRecoilState } from 'recoil';
 import WriteIcon from '../../assets/image/pencil-square.svg';
 import ProfileIcon from '../../assets/image/profileIcon.svg';
 import SearchIcon from '../../assets/image/searchIcon.png';
-import { persistTokenState, refreshState, searchTextState } from '../../Recoil';
+import { refreshState, searchTextState } from '../../Recoil';
 
 function NavBar() {
   const accessToken = sessionStorage.getItem('accessToken');
+  const persistToken = localStorage.getItem('persistToken');
   const [refresh, setRefresh] = useRecoilState(refreshState);
-  const [persistToken, setPersistToken] = useRecoilState(persistTokenState);
   const [searchText, SetSearchText] = useRecoilState(searchTextState);
 
   const navigate = useNavigate();
@@ -28,7 +28,8 @@ function NavBar() {
       sessionStorage.removeItem('accessToken');
       setRefresh(!refresh);
     } else {
-      setPersistToken(null);
+      localStorage.removeItem('persistToken');
+      setRefresh(!refresh);
     }
   }
 

diff --git a/frontend/src/components/read/ReadingPage/GptModal.tsx b/frontend/src/components/read/ReadingPage/GptModal.tsx
@@ -1,8 +1,8 @@
-import axios from 'axios';
 import React, { useState, PropsWithChildren, useEffect } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { v4 as uuidv4 } from 'uuid';
 
+import { tokenApi } from '../../../api/axios';
 import arrowLeftIcon from '../../../assets/image/arrow-left.svg';
 import arrowRightIcon from '../../../assets/image/arrow-right.svg';
 import desktop from '../../../assets/image/desktop.png';
@@ -15,7 +15,6 @@ import {
   gptLoadingState,
   statusOpenState,
   modalContentState,
-  persistTokenState,
   plansState,
   selectedStackState,
   techStacksState,
@@ -394,9 +393,6 @@ type Screen4Props = {
 };
 
 const Screen4 = ({ onPrev, onClickToggleModal }: Screen4Props) => {
-  const accessToken = sessionStorage.getItem('accessToken');
-  const persistToken = useRecoilValue(persistTokenState);
-
   const [plans, setPlans] = useRecoilState(plansState);
   const [, setGptLoading] = useRecoilState(gptLoadingState);
   const [, setStatusOpen] = useRecoilState(statusOpenState);
@@ -433,7 +429,6 @@ const Screen4 = ({ onPrev, onClickToggleModal }: Screen4Props) => {
   };
 
   async function toSubmit() {
-    const url = 'http://localhost:8080/api/v1/projects/plans';
     const data = {
       plans,
       techStacks,
@@ -446,11 +441,7 @@ const Screen4 = ({ onPrev, onClickToggleModal }: Screen4Props) => {
       if (onClickToggleModal) {
         onClickToggleModal();
       }
-      const res = await axios.post(url, data, {
-        headers: {
-          Authorization: `Bearer ${accessToken || persistToken}`,
-        },
-      });
+      const res = await tokenApi.post('/projects/plans', data);
       setGptLoading(false);
       setModalContent(res.data.data);
     } catch (err) {

diff --git a/frontend/src/components/read/ReadingPage/Reply.tsx b/frontend/src/components/read/ReadingPage/Reply.tsx
@@ -1,13 +1,9 @@
-import axios from 'axios';
 import { useEffect, useRef, useState } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
 import ReadReply from './Reply/ReadReply';
-import {
-  persistTokenState,
-  projectIdState,
-  refreshState,
-} from '../../../Recoil';
+import { tokenApi } from '../../../api/axios';
+import { projectIdState, refreshState } from '../../../Recoil';
 
 type ReadReplyObject = {
   commentId: number;
@@ -27,7 +23,7 @@ function Reply({ contents, setReadReply }: ReplyProps) {
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
   const [value, setValue] = useState('');
   const accessToken = sessionStorage.getItem('accessToken');
-  const persistToken = useRecoilValue(persistTokenState);
+  const persistToken = localStorage.getItem('persistToken');
   const projectId = useRecoilValue(projectIdState);
   const [refresh, setRefresh] = useRecoilState(refreshState);
   const [visible, setVisible] = useState(true);
@@ -52,17 +48,12 @@ function Reply({ contents, setReadReply }: ReplyProps) {
   }
 
   async function postData() {
-    const url = 'http://localhost:8080/api/v1/comments';
     const data = {
       content: value,
       projectId,
     };
     try {
-      await axios.post(url, data, {
-        headers: {
-          Authorization: `Bearer ${accessToken || persistToken}`,
-        },
-      });
+      await tokenApi.post('/comments', data);
       setRefresh(!refresh);
       setValue('');
       setSelectedValue('regist_order');

diff --git a/frontend/src/components/read/ReadingPage/Reply/ReadReply.tsx b/frontend/src/components/read/ReadingPage/Reply/ReadReply.tsx
@@ -1,15 +1,15 @@
 import { act } from '@testing-library/react';
-import axios from 'axios';
 import { useState } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState } from 'recoil';
 
 import PutReply from './ReadReply/PutReply';
 import ReadReReply from './ReadReply/ReadReReply';
 import WriteReReply from './ReadReply/WriteReReply';
+import { tokenApi } from '../../../../api/axios';
 import delete_reply from '../../../../assets/image/delete.svg';
 import nested_reply from '../../../../assets/image/nested_reply.svg';
 import pencil_square from '../../../../assets/image/pencil-square.svg';
-import { persistTokenState, refreshState } from '../../../../Recoil';
+import { refreshState } from '../../../../Recoil';
 import useDidMountEffect from '../../../../useDidMountEffect';
 
 type ReadReReplyObject = {
@@ -36,8 +36,6 @@ function ReadReply({ contents, setSelectedValue }: ReadReplyProps) {
   const [commentVis, setCommentVis] = useState<boolean>(false);
   const [commentRef, setCommentRef] = useState<boolean>(false);
 
-  const accessToken = sessionStorage.getItem('accessToken');
-  const persistToken = useRecoilValue(persistTokenState);
   const [refresh, setRefresh] = useRecoilState(refreshState);
 
   let buttonContent: JSX.Element | null = null;
@@ -60,13 +58,8 @@ function ReadReply({ contents, setSelectedValue }: ReadReplyProps) {
   };
 
   async function getComment() {
-    const url = `http://localhost:8080/api/v1/comments/${contents.commentId}`;
     try {
-      const res = await axios.get(url, {
-        headers: {
-          Authorization: `Bearer ${accessToken || persistToken}`,
-        },
-      });
+      const res = await tokenApi.get(`/comments/${contents.commentId}`);
       act(() => {
         setComment(res.data.data);
       });
@@ -77,13 +70,8 @@ function ReadReply({ contents, setSelectedValue }: ReadReplyProps) {
   }
 
   async function deleteReply() {
-    const url = `http://localhost:8080/api/v1/comments/${contents.commentId}`;
     try {
-      await axios.delete(url, {
-        headers: {
-          Authorization: `Bearer ${accessToken || persistToken}`,
-        },
-      });
+      await tokenApi.delete(`/comments/${contents.commentId}`);
       setRefresh(!refresh);
     } catch (error) {
       if (!navigator.onLine) {

diff --git a/frontend/src/components/read/ReadingPage/Reply/ReadReply/PutReply.tsx b/frontend/src/components/read/ReadingPage/Reply/ReadReply/PutReply.tsx
@@ -1,8 +1,8 @@
-import axios from 'axios';
 import { useEffect, useRef, useState } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState } from 'recoil';
 
-import { persistTokenState, refreshState } from '../../../../../Recoil';
+import { tokenApi } from '../../../../../api/axios';
+import { refreshState } from '../../../../../Recoil';
 
 type PutReplyProps = {
   contents: {
@@ -24,8 +24,6 @@ function PutReply({
 }: PutReplyProps) {
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
   const [value, setValue] = useState<string>(contents.content);
-  const accessToken = sessionStorage.getItem('accessToken');
-  const persistToken = useRecoilValue(persistTokenState);
   const [refresh, setrefresh] = useRecoilState(refreshState);
 
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
@@ -43,17 +41,12 @@ function PutReply({
   };
 
   async function putData() {
-    const url = `http://localhost:8080/api/v1/comments/${contents.commentId}`;
     const data = {
       content: value,
     };
 
     try {
-      const res = await axios.put(url, data, {
-        headers: {
-          Authorization: `Bearer ${accessToken || persistToken}`,
-        },
-      });
+      const res = await tokenApi.put(`/comments/${contents.commentId}`, data);
       console.log(res.data);
       setrefresh(!refresh);
       if (!('childCount' in contents)) {

diff --git a/frontend/src/components/read/ReadingPage/Reply/ReadReply/ReadReReply.tsx b/frontend/src/components/read/ReadingPage/Reply/ReadReply/ReadReReply.tsx
@@ -1,12 +1,12 @@
-import axios from 'axios';
 import { useState } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState } from 'recoil';
 
 import PutReply from './PutReply';
+import { tokenApi } from '../../../../../api/axios';
 import delete_reply from '../../../../../assets/image/delete.svg';
 import pencil_square from '../../../../../assets/image/pencil-square.svg';
 import reply_icon from '../../../../../assets/image/reply_icon.svg';
-import { persistTokenState, refreshState } from '../../../../../Recoil';
+import { refreshState } from '../../../../../Recoil';
 
 type ReadReReplyProps = {
   contents: {
@@ -25,9 +25,6 @@ function ReadReReply({
   changeCommentRef,
 }: ReadReReplyProps) {
   const [putVis, setPutVis] = useState<boolean>(false);
-
-  const accessToken = sessionStorage.getItem('accessToken');
-  const persistToken = useRecoilValue(persistTokenState);
   const [refresh, setRefresh] = useRecoilState(refreshState);
 
   const date = new Date(contents.createdAt);
@@ -44,13 +41,8 @@ function ReadReReply({
   };
 
   async function deleteReReply() {
-    const url = `http://localhost:8080/api/v1/comments/${contents.commentId}`;
     try {
-      await axios.delete(url, {
-        headers: {
-          Authorization: `Bearer ${accessToken || persistToken}`,
-        },
-      });
+      await tokenApi.delete(`/comments/${contents.commentId}`);
       setRefresh(!refresh);
       changeCommentRef();
     } catch (error) {

diff --git a/frontend/src/components/read/ReadingPage/Reply/ReadReply/WriteReReply.tsx b/frontend/src/components/read/ReadingPage/Reply/ReadReply/WriteReReply.tsx
@@ -1,14 +1,10 @@
 import { act } from '@testing-library/react';
-import axios from 'axios';
 import { useEffect, useRef, useState } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
+import { tokenApi } from '../../../../../api/axios';
 import reply_icon from '../../../../../assets/image/reply_icon.svg';
-import {
-  persistTokenState,
-  projectIdState,
-  refreshState,
-} from '../../../../../Recoil';
+import { projectIdState, refreshState } from '../../../../../Recoil';
 
 interface WriteReReplyProps {
   contents: {
@@ -28,8 +24,6 @@ function WriteReReply({
 }: WriteReReplyProps) {
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
   const [value, setValue] = useState('');
-  const accessToken = sessionStorage.getItem('accessToken');
-  const persistToken = useRecoilValue(persistTokenState);
   const projectId = useRecoilValue(projectIdState);
   const [refresh, setrefresh] = useRecoilState(refreshState);
 
@@ -50,19 +44,14 @@ function WriteReReply({
   };
 
   async function postData() {
-    const url = 'http://localhost:8080/api/v1/comments';
     const data = {
       content: value,
       projectId,
       parentId,
     };
 
     try {
-      await axios.post(url, data, {
-        headers: {
-          Authorization: `Bearer ${accessToken || persistToken}`,
-        },
-      });
+      await tokenApi.post('/comments', data);
       act(() => {
         setrefresh(!refresh);
         setValue('');

diff --git a/frontend/src/components/user/MyPage/FollowModal.tsx b/frontend/src/components/user/MyPage/FollowModal.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useRecoilState } from 'recoil';
+import { useRecoilValue } from 'recoil';
 
 import followerIcon from '../../../assets/image/followerIcon.svg';
 import followingIcon from '../../../assets/image/followingIcon.svg';
@@ -12,7 +12,7 @@ type FollowModalProps = {
 };
 
 function followModal({ onClickToggleModal, isFollowing }: FollowModalProps) {
-  const [nickname] = useRecoilState(nicknameState);
+  const nickname = useRecoilValue(nicknameState);
   function mode(modenumber: number) {
     if (modenumber === 0) {
       return <div>의 팔로워</div>;
@@ -64,7 +64,7 @@ function followModal({ onClickToggleModal, isFollowing }: FollowModalProps) {
         </div>
       </div>
 
-      {/* 모달 영역 외의 배경을 클릭하면 모달이 닫히게 하는 컨테이너, 이벤트핸들러를 사용하여 클릭 이벤트 발생 시 onClickToggleModal 함수 호출하여 모달 닫음 */}
+      {/* 모달 배경 버튼 */}
       <button
         aria-label="Toggle modal"
         className="fixed top-0 left-0 right-0 bottom-0 z-40 h-full w-screen  bg-black opacity-70"