From 067ad863d06e43c30bbb3c4e4eefd75c19b968a9 Mon Sep 17 00:00:00 2001 From: Mayreeel Date: Fri, 1 Sep 2023 23:48:23 +0900 Subject: [PATCH] =?UTF-8?q?refactor=20:=20axios.create=EB=A1=9C=20API=20ba?= =?UTF-8?q?seURL=20=EB=B0=8F=20header=20=ED=95=9C=EB=B2=88=EC=97=90=20?= =?UTF-8?q?=EA=B4=80=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/App.css | 0 frontend/src/{Recoil.tsx => Recoil.ts} | 7 ----- frontend/src/{Stack.tsx => Stack.ts} | 0 frontend/src/api/axios.ts | 21 ++++++++++++++ frontend/src/components/general/NavBar.tsx | 7 +++-- .../components/read/ReadingPage/GptModal.tsx | 13 ++------- .../src/components/read/ReadingPage/Reply.tsx | 17 +++-------- .../read/ReadingPage/Reply/ReadReply.tsx | 22 ++++----------- .../ReadingPage/Reply/ReadReply/PutReply.tsx | 15 +++------- .../Reply/ReadReply/ReadReReply.tsx | 16 +++-------- .../Reply/ReadReply/WriteReReply.tsx | 17 ++--------- .../components/user/MyPage/FollowModal.tsx | 6 ++-- frontend/src/pages/main/MainPage.tsx | 11 +++----- frontend/src/pages/main/SearchProjectPage.tsx | 11 +++----- frontend/src/pages/main/SearchUserPage.tsx | 11 ++------ frontend/src/pages/read/ReadingPage.tsx | 28 +++++-------------- frontend/src/pages/submit/ModifyingPage.tsx | 12 ++------ frontend/src/pages/submit/WritingPage.tsx | 14 +++------- frontend/src/pages/user/MyPage.tsx | 17 +++-------- frontend/src/pages/user/SigninPage.tsx | 19 ++++++------- frontend/src/pages/user/SignupPage.tsx | 21 ++++++-------- frontend/src/{s3config.tsx => s3config.ts} | 0 22 files changed, 95 insertions(+), 190 deletions(-) delete mode 100644 frontend/src/App.css rename frontend/src/{Recoil.tsx => Recoil.ts} (93%) rename frontend/src/{Stack.tsx => Stack.ts} (100%) create mode 100644 frontend/src/api/axios.ts rename frontend/src/{s3config.tsx => s3config.ts} (100%) diff --git a/frontend/src/App.css b/frontend/src/App.css deleted file mode 100644 index e69de29b..00000000 diff --git a/frontend/src/Recoil.tsx b/frontend/src/Recoil.ts similarity index 93% rename from frontend/src/Recoil.tsx rename to frontend/src/Recoil.ts index 90b9f972..e789d2bf 100644 --- a/frontend/src/Recoil.tsx +++ b/frontend/src/Recoil.ts @@ -48,12 +48,6 @@ const searchTextState = atom({ default: '', }); -const persistTokenState = atom({ - key: 'persistTokenState', - default: '', - effects_UNSTABLE: [persistAtom], -}); - const autoLoginState = atom({ key: 'autoLoginState', default: false, @@ -114,7 +108,6 @@ export { projectIdState, refreshState, searchTextState, - persistTokenState, autoLoginState, techStacksState, topicState, diff --git a/frontend/src/Stack.tsx b/frontend/src/Stack.ts similarity index 100% rename from frontend/src/Stack.tsx rename to frontend/src/Stack.ts diff --git a/frontend/src/api/axios.ts b/frontend/src/api/axios.ts new file mode 100644 index 00000000..c8fdc34b --- /dev/null +++ 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 index bbf77eb5..77814b90 100644 --- 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 index 7edb73fb..731464db 100644 --- 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 index e14d8cdd..89b2c8d9 100644 --- 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(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 index 529ab1f3..c3d6d55b 100644 --- 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(false); const [commentRef, setCommentRef] = useState(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 index 4c1b792e..bc60b1e9 100644 --- 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(null); const [value, setValue] = useState(contents.content); - const accessToken = sessionStorage.getItem('accessToken'); - const persistToken = useRecoilValue(persistTokenState); const [refresh, setrefresh] = useRecoilState(refreshState); const handleChange = (e: React.ChangeEvent) => { @@ -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 index 194a321c..222cc658 100644 --- 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(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 index 8388600d..d8dfd9a6 100644 --- 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(null); const [value, setValue] = useState(''); - const accessToken = sessionStorage.getItem('accessToken'); - const persistToken = useRecoilValue(persistTokenState); const projectId = useRecoilValue(projectIdState); const [refresh, setrefresh] = useRecoilState(refreshState); @@ -50,7 +44,6 @@ function WriteReReply({ }; async function postData() { - const url = 'http://localhost:8080/api/v1/comments'; const data = { content: value, projectId, @@ -58,11 +51,7 @@ function WriteReReply({ }; 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 index 5fa113a2..1a420fa0 100644 --- 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
의 팔로워
; @@ -64,7 +64,7 @@ function followModal({ onClickToggleModal, isFollowing }: FollowModalProps) { - {/* 모달 영역 외의 배경을 클릭하면 모달이 닫히게 하는 컨테이너, 이벤트핸들러를 사용하여 클릭 이벤트 발생 시 onClickToggleModal 함수 호출하여 모달 닫음 */} + {/* 모달 배경 버튼 */}