refactor : Interface => type

techeer-sv · Aug 13, 2023 · 6fae162 · 6fae162
1 parent 2b6fde2
commit 6fae162
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 55 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -4,8 +4,8 @@ import { Suspense, lazy } from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { RecoilRoot } from 'recoil';
 
+import GptResultModal from './components/GptResultModal';
 import LoadingSpinner from './components/LoadingSpinner';
-import ResultModal from './components/ResultModal';
 
 // lazy 동적으로 필요할 때 import를 하여 실제로 로드되는 것
 const MainPage = lazy(() => import('./pages/MainPage'));
@@ -47,7 +47,7 @@ function App() {
             </Routes>
           </Suspense>
         </Router>
-        <ResultModal />
+        <GptResultModal />
       </RecoilRoot>
       <ReactQueryDevtools initialIsOpen={false} />
     </QueryClientProvider>

diff --git a/frontend/src/components/RenderModal.tsx → frontend/src/components/GptModal.tsx b/frontend/src/components/RenderModal.tsx → frontend/src/components/GptModal.tsx
@@ -35,14 +35,10 @@ type Screen1Props = {
   onNext: () => void;
 };
 
-const Screen1: React.FC<Screen1Props> = ({ onNext }) => {
+const Screen1 = ({ onNext }: Screen1Props) => {
   const [techStacks, setTechStacks] = useRecoilState(techStacksState);
   const selectedStack = useRecoilValue(selectedStackState);
 
-  useEffect(() => {
-    setTechStacks(selectedStack);
-  }, []);
-
   // 기존 선택 기술 스택 삭제 함수
   const handleDeleteStack = (stack: string) => {
     setTechStacks(techStacks.filter((s: any) => s !== stack));
@@ -55,6 +51,10 @@ const Screen1: React.FC<Screen1Props> = ({ onNext }) => {
     }
   };
 
+  useEffect(() => {
+    setTechStacks(selectedStack);
+  }, []);
+
   return (
     <div
       className=" fixed bottom-1/2 right-1/2 z-50 box-border 
@@ -63,10 +63,9 @@ const Screen1: React.FC<Screen1Props> = ({ onNext }) => {
       bg-white sm:w-630"
     >
       {/* 이전/다음 */}
-
       <button
         onClick={onNext}
-        className="mx-auto mt-5 mr-5 flex  items-center font-lef text-gray-400 hover:text-gray-600 "
+        className="mx-auto mt-5 mr-5 flex items-center font-lef text-gray-400 hover:text-gray-600 "
         type="button"
       >
         <div>다음</div>
@@ -96,7 +95,6 @@ const Screen1: React.FC<Screen1Props> = ({ onNext }) => {
           </span>
         </li>
       </ol>
-
       {/* screen1 */}
       {/* 질문 */}
       <div className="flex items-center justify-center font-lef-b text-[20px]">
@@ -138,7 +136,6 @@ const Screen1: React.FC<Screen1Props> = ({ onNext }) => {
           ),
         )}
       </div>
-
       {/* 하단 버튼 */}
       <button
         className="ml-7 mt-7 flex items-center justify-center
@@ -153,12 +150,12 @@ const Screen1: React.FC<Screen1Props> = ({ onNext }) => {
   );
 };
 
-interface Screen2Props {
+type Screen2Props = {
   onPrev: () => void;
   onNext: () => void;
-}
+};
 
-const Screen2: React.FC<Screen2Props> = ({ onPrev, onNext }) => {
+const Screen2 = ({ onPrev, onNext }: Screen2Props) => {
   const [topic, setTopic] = useRecoilState(topicState);
   const tldr = useRecoilValue(tldrState);
 
@@ -174,7 +171,7 @@ const Screen2: React.FC<Screen2Props> = ({ onPrev, onNext }) => {
       bg-white sm:w-630"
     >
       {/* 이전/다음 */}
-      <div className="">
+      <div>
         <div className="flex">
           <button
             onClick={onPrev}
@@ -187,7 +184,7 @@ const Screen2: React.FC<Screen2Props> = ({ onPrev, onNext }) => {
 
           <button
             onClick={onNext}
-            className="mx-auto mt-5 mr-5 flex  items-center font-lef text-gray-400 hover:text-gray-600"
+            className="mx-auto mt-5 mr-5 flex items-center font-lef text-gray-400 hover:text-gray-600"
             type="button"
           >
             <div>다음</div>
@@ -218,7 +215,6 @@ const Screen2: React.FC<Screen2Props> = ({ onPrev, onNext }) => {
             </span>
           </li>
         </ol>
-
         {/* screen2 */}
         {/* 질문 */}
         <div className="flex items-center justify-center font-lef-b text-[20px]">
@@ -247,17 +243,16 @@ const Screen2: React.FC<Screen2Props> = ({ onPrev, onNext }) => {
           다음
         </button>
       </div>
-      {/* {children} */}
     </div>
   );
 };
 
-interface Screen3Props {
+type Screen3Props = {
   onPrev: () => void;
   onNext: () => void;
-}
+};
 
-const Screen3: React.FC<Screen3Props> = ({ onPrev, onNext }) => {
+const Screen3 = ({ onPrev, onNext }: Screen3Props) => {
   const [featureObject, setFeatureObject] = useState<
     { id: string; value: string }[]
   >([]);
@@ -389,17 +384,16 @@ const Screen3: React.FC<Screen3Props> = ({ onPrev, onNext }) => {
           다음
         </button>
       </div>
-      {/* {children} */}
     </div>
   );
 };
 
-interface Screen4Props {
+type Screen4Props = {
   onPrev: () => void;
   onClickToggleModal: () => void;
-}
+};
 
-const Screen4: React.FC<Screen4Props> = ({ onPrev, onClickToggleModal }) => {
+const Screen4 = ({ onPrev, onClickToggleModal }: Screen4Props) => {
   const accessToken = sessionStorage.getItem('accessToken');
   const persistToken = useRecoilValue(persistTokenState);
 
@@ -438,10 +432,6 @@ const Screen4: React.FC<Screen4Props> = ({ onPrev, onClickToggleModal }) => {
     setFirstPlans(e.target.value);
   };
 
-  useEffect(() => {
-    setPlans([firstPlan, ...planObject.map((x) => x.value)]);
-  }, [firstPlan, planObject]);
-
   async function toSubmit() {
     const url = 'http://localhost:8080/api/v1/projects/plans';
     const data = {
@@ -469,6 +459,10 @@ const Screen4: React.FC<Screen4Props> = ({ onPrev, onClickToggleModal }) => {
     }
   }
 
+  useEffect(() => {
+    setPlans([firstPlan, ...planObject.map((x) => x.value)]);
+  }, [firstPlan, planObject]);
+
   return (
     <div
       className=" fixed bottom-1/2 right-1/2 z-50 box-border 
@@ -546,10 +540,6 @@ const Screen4: React.FC<Screen4Props> = ({ onPrev, onClickToggleModal }) => {
             <img src={plus} alt="plus" />
           </button>
         ) : null}
-        {/* <img
-            className=" ml-[21rem] mt-5 flex h-5 w-5 items-center justify-center"
-            src={plus}
-          /> */}
       </div>
       {/* 하단버튼 */}
       <button
@@ -561,19 +551,15 @@ const Screen4: React.FC<Screen4Props> = ({ onPrev, onClickToggleModal }) => {
       >
         AI 고도화 추천
       </button>
-
-      {/* {children} */}
     </div>
   );
 };
 
-interface ModalDefaultType {
+type ModalDefaultType = {
   onClickToggleModal: () => void;
-}
+};
 
-function renderModal({
-  onClickToggleModal,
-}: PropsWithChildren<ModalDefaultType>) {
+function GptModal({ onClickToggleModal }: PropsWithChildren<ModalDefaultType>) {
   const [currentScreen, setCurrentScreen] = useState<number>(1);
 
   const handleNext = () => {
@@ -624,4 +610,4 @@ function renderModal({
   );
 }
 
-export default renderModal;
+export default GptModal;
diff --git a/frontend/src/components/ResultModal.tsx → frontend/src/components/GptResultModal.tsx b/frontend/src/components/ResultModal.tsx → frontend/src/components/GptResultModal.tsx
@@ -3,7 +3,7 @@ import { useRecoilState, useRecoilValue } 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 +78,4 @@ function ResultModal() {
   );
 }
 
-export default ResultModal;
+export default GptResultModal;
diff --git a/frontend/src/components/NavBar.tsx b/frontend/src/components/NavBar.tsx
@@ -32,12 +32,6 @@ function NavBar() {
     }
   }
 
-  useEffect(() => {
-    if (accessToken) {
-      setRefresh(!refresh);
-    }
-  }, []);
-
   const handleSearch = () => {
     if (searchText === '' || searchText === '@') {
       navigate('/');
@@ -49,6 +43,12 @@ function NavBar() {
     }
   };
 
+  useEffect(() => {
+    if (accessToken) {
+      setRefresh(!refresh);
+    }
+  }, []);
+
   return (
     <div className="fixed z-20 mb-5 flex w-screen flex-row content-center overflow-hidden border-b border-zinc-400 bg-white pt-3 pb-3 align-middle font-ng-eb">
       {/* 로고 */}

diff --git a/frontend/src/pages/ReadingPage.tsx b/frontend/src/pages/ReadingPage.tsx
@@ -6,9 +6,9 @@ import { useRecoilState, useRecoilValue } from 'recoil';
 
 import gptIcon from '../assets/image/gptIcon.svg';
 import ProfileIcon from '../assets/image/profileIcon.svg';
+import GptModal from '../components/GptModal';
 import NavBar from '../components/NavBar';
 import QuillWrtten from '../components/QuillWritten';
-import RenderModal from '../components/RenderModal';
 import Reply from '../components/Reply';
 import {
   contentsState,
@@ -167,7 +167,7 @@ function ReadingPage() {
         ) : null}
 
         {isOpenModal ? (
-          <RenderModal onClickToggleModal={onClickToggleModal} />
+          <GptModal onClickToggleModal={onClickToggleModal} />
         ) : null}
         {/** 텍스트 영역* */}
         <div className="h-auto border-b-2 border-graphyblue pb-2">

diff --git a/frontend/src/pages/SearchProjectPage.tsx b/frontend/src/pages/SearchProjectPage.tsx
@@ -7,14 +7,14 @@ import Banner from '../components/Banner';
 import NavBar from '../components/NavBar';
 import ProjectCard from '../components/ProjectCard';
 
-interface DataObject {
+type DataObject = {
   id: number;
   createdAt: string;
   projectName: string;
   description: string;
   techTags: string[];
   thumbNail: string;
-}
+};
 
 function SearchProjectPage() {
   const [data, setData] = useState<DataObject[]>([]); // 데이터를 담을 state 선언

diff --git a/frontend/src/pages/SearchUserPage.tsx b/frontend/src/pages/SearchUserPage.tsx
@@ -10,10 +10,10 @@ import Banner from '../components/Banner';
 import NavBar from '../components/NavBar';
 import { persistTokenState } from '../Recoil';
 
-interface DataObject {
+type DataObject = {
   nickname: string;
   email: string;
-}
+};
 
 function SearchUserPage() {
   const [data, setData] = useState<DataObject[]>([]); // 데이터를 담을 state 선언