Merge pull request #184 from techeer-sv/FE/#183

FE/#183 Props Type, 패키지 구조, axios 리팩토링

frontend/package.json

@@ -54,6 +54,7 @@
     "@types/node": "^18.15.11",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
+    "@types/uuid": "^9.0.2",
     "@typescript-eslint/eslint-plugin": "^5.59.7",
     "@typescript-eslint/parser": "^5.59.7",
     "@vitejs/plugin-react": "^3.1.0",

frontend/src/App.tsx

@@ -4,20 +4,20 @@ import { Suspense, lazy } from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { RecoilRoot } from 'recoil';
 
-import LoadingSpinner from './components/LoadingSpinner';
-import ResultModal from './components/ResultModal';
+import GptResultModal from './components/general/GptResultModal';
+import LoadingSpinner from './components/general/LoadingSpinner';
 
 // lazy 동적으로 필요할 때 import를 하여 실제로 로드되는 것
-const MainPage = lazy(() => import('./pages/MainPage'));
-const MyPage = lazy(() => import('./pages/MyPage'));
-const WritingPage = lazy(() => import('./pages/WritingPage'));
-const ReadingPage = lazy(() => import('./pages/ReadingPage'));
-const ModifyingPage = lazy(() => import('./pages/ModifyingPage'));
-const ErrorPage = lazy(() => import('./pages/ErrorPage'));
-const SigninPage = lazy(() => import('./pages/SigninPage'));
-const SignupPage = lazy(() => import('./pages/SignupPage'));
-const SearchProjectPage = lazy(() => import('./pages/SearchProjectPage'));
-const SearchUserPage = lazy(() => import('./pages/SearchUserPage'));
+const MainPage = lazy(() => import('./pages/main/MainPage'));
+const MyPage = lazy(() => import('./pages/user/MyPage'));
+const WritingPage = lazy(() => import('./pages/submit/WritingPage'));
+const ReadingPage = lazy(() => import('./pages/read/ReadingPage'));
+const ModifyingPage = lazy(() => import('./pages/submit/ModifyingPage'));
+const ErrorPage = lazy(() => import('./pages/error/ErrorPage'));
+const SigninPage = lazy(() => import('./pages/user/SigninPage'));
+const SignupPage = lazy(() => import('./pages/user/SignupPage'));
+const SearchProjectPage = lazy(() => import('./pages/main/SearchProjectPage'));
+const SearchUserPage = lazy(() => import('./pages/main/SearchUserPage'));
 
 const queryClient = new QueryClient();
 
@@ -47,7 +47,7 @@ function App() {
             </Routes>
           </Suspense>
         </Router>
-        <ResultModal />
+        <GptResultModal />
       </RecoilRoot>
       <ReactQueryDevtools initialIsOpen={false} />
     </QueryClientProvider>

frontend/src/Recoil.tsx → frontend/src/Recoil.ts

@@ -48,12 +48,6 @@ const searchTextState = atom<string>({
   default: '',
 });
 
-const persistTokenState = atom<string>({
-  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,

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 };

frontend/src/components/LikeModal.tsx

@@ -1,14 +1,11 @@
 import React from 'react';
 
-// import closeIcon from '../assets/image/closeIcon.svg';
-// import likeIcon from '../assets/image/likeIcon.svg';
-
-type Props = {
-  onClickToggleModal: () => void;
+type LikeModalProps = {
+  onClickLikeToggleModal: () => void;
   isLike: boolean;
 };
 
-function likeModal({ onClickToggleModal, isLike }: Props) {
+function likeModal({ onClickLikeToggleModal, isLike }: LikeModalProps) {
   return (
     <div>
       <div
@@ -17,35 +14,17 @@ function likeModal({ onClickToggleModal, isLike }: Props) {
     bg-white sm:w-630 sm:py-5"
       >
         {isLike}
-        {/* <div className="flex justify-center font-lato text-[23px] font-semibold">
-          <div className="text-graphyblue">반응한 사람</div>
-          <img className="" src={closeIcon} alt="closeIcon" />
-        </div> */}
-
-        {/* 구분선 */}
-        {/* <div className="my-3 w-auto border-b-2 border-b-neutral-200" />
-
-        <div className="my-6 flex items-center justify-items-start px-10 font-lato">
-          <img className="mr-4 w-14" src={likeIcon} alt="likeIcon" />
-
-          <div className="mr-2 whitespace-nowrap  text-[21px]  font-semibold text-graphyblue">
-            강민아
-          </div>
-          <div className=" text-left text-[17px] font-normal text-zinc-500">
-            본인을 소개하는 한 마디
-          </div>
-        </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"
         onClick={(e: React.MouseEvent) => {
           e.preventDefault();
 
-          if (onClickToggleModal) {
-            onClickToggleModal();
+          if (onClickLikeToggleModal) {
+            onClickLikeToggleModal();
           }
         }}
         type="button"

frontend/src/components/ResultModal.tsx → frontend/src/components/general/GptResultModal.tsx

@@ -1,9 +1,13 @@
 import { useCallback, useState } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
-import { gptLoadingState, statusOpenState, modalContentState } from '../Recoil';
+import {
+  gptLoadingState,
+  statusOpenState,
+  modalContentState,
+} from '../../Recoil';
 
-function ResultModal() {
+function GptResultModal() {
   const [resultOpen, setResultOpen] = useState<boolean>(false);
   const [statusOpen, setStatusOpen] = useRecoilState(statusOpenState);
   const gptLoading = useRecoilValue(gptLoadingState);
@@ -78,4 +82,4 @@ function ResultModal() {
   );
 }
 
-export default ResultModal;
+export default GptResultModal;