From 6fae1623268a6995f2350c9eb970abe9512bc52a Mon Sep 17 00:00:00 2001 From: Mayreeel Date: Sun, 13 Aug 2023 09:35:19 +0900 Subject: [PATCH] refactor : Interface => type --- frontend/src/App.tsx | 4 +- .../{RenderModal.tsx => GptModal.tsx} | 64 ++++++++----------- .../{ResultModal.tsx => GptResultModal.tsx} | 4 +- frontend/src/components/NavBar.tsx | 12 ++-- frontend/src/pages/ReadingPage.tsx | 4 +- frontend/src/pages/SearchProjectPage.tsx | 4 +- frontend/src/pages/SearchUserPage.tsx | 4 +- 7 files changed, 41 insertions(+), 55 deletions(-) rename frontend/src/components/{RenderModal.tsx => GptModal.tsx} (96%) rename frontend/src/components/{ResultModal.tsx => GptResultModal.tsx} (97%) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 9a9d5c49..e4777004 100644 --- 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() { - + diff --git a/frontend/src/components/RenderModal.tsx b/frontend/src/components/GptModal.tsx similarity index 96% rename from frontend/src/components/RenderModal.tsx rename to frontend/src/components/GptModal.tsx index 82cc39f7..ba852776 100644 --- a/frontend/src/components/RenderModal.tsx +++ b/frontend/src/components/GptModal.tsx @@ -35,14 +35,10 @@ type Screen1Props = { onNext: () => void; }; -const Screen1: React.FC = ({ 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 = ({ onNext }) => { } }; + useEffect(() => { + setTechStacks(selectedStack); + }, []); + return (
{/* 이전/다음 */} -
- {/* {children} */} ); }; -interface Screen3Props { +type Screen3Props = { onPrev: () => void; onNext: () => void; -} +}; -const Screen3: React.FC = ({ onPrev, onNext }) => { +const Screen3 = ({ onPrev, onNext }: Screen3Props) => { const [featureObject, setFeatureObject] = useState< { id: string; value: string }[] >([]); @@ -389,17 +384,16 @@ const Screen3: React.FC = ({ onPrev, onNext }) => { 다음 - {/* {children} */} ); }; -interface Screen4Props { +type Screen4Props = { onPrev: () => void; onClickToggleModal: () => void; -} +}; -const Screen4: React.FC = ({ onPrev, onClickToggleModal }) => { +const Screen4 = ({ onPrev, onClickToggleModal }: Screen4Props) => { const accessToken = sessionStorage.getItem('accessToken'); const persistToken = useRecoilValue(persistTokenState); @@ -438,10 +432,6 @@ const Screen4: React.FC = ({ 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 = ({ onPrev, onClickToggleModal }) => { } } + useEffect(() => { + setPlans([firstPlan, ...planObject.map((x) => x.value)]); + }, [firstPlan, planObject]); + return (
) : null} - {/* */}
{/* 하단버튼 */} - - {/* {children} */} ); }; -interface ModalDefaultType { +type ModalDefaultType = { onClickToggleModal: () => void; -} +}; -function renderModal({ - onClickToggleModal, -}: PropsWithChildren) { +function GptModal({ onClickToggleModal }: PropsWithChildren) { const [currentScreen, setCurrentScreen] = useState(1); const handleNext = () => { @@ -624,4 +610,4 @@ function renderModal({ ); } -export default renderModal; +export default GptModal; diff --git a/frontend/src/components/ResultModal.tsx b/frontend/src/components/GptResultModal.tsx similarity index 97% rename from frontend/src/components/ResultModal.tsx rename to frontend/src/components/GptResultModal.tsx index 6dfc56eb..c4c61e96 100644 --- a/frontend/src/components/ResultModal.tsx +++ b/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(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 index 8ae91fe5..20d38648 100644 --- 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 (
{/* 로고 */} diff --git a/frontend/src/pages/ReadingPage.tsx b/frontend/src/pages/ReadingPage.tsx index e0407928..04889b91 100644 --- 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 ? ( - + ) : null} {/** 텍스트 영역* */}
diff --git a/frontend/src/pages/SearchProjectPage.tsx b/frontend/src/pages/SearchProjectPage.tsx index 8f4dcbf1..0bab9862 100644 --- 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([]); // 데이터를 담을 state 선언 diff --git a/frontend/src/pages/SearchUserPage.tsx b/frontend/src/pages/SearchUserPage.tsx index 0618829c..b5e9b4c1 100644 --- 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([]); // 데이터를 담을 state 선언