From d89e7b43e0fdd2bb44926186154a66a6297a51fb Mon Sep 17 00:00:00 2001 From: JeonDoGyun Date: Fri, 10 Nov 2023 01:18:34 +0900 Subject: [PATCH 1/7] =?UTF-8?q?fix:=20=EB=B3=B4=ED=98=B8=EC=86=8C=20?= =?UTF-8?q?=EC=A0=95=EB=B3=B4=20=EC=88=98=EC=A0=95=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20recoilValue=20=EB=B0=9B=EC=95=84=EC=98=A4=EC=A7=80?= =?UTF-8?q?=20=EB=AA=BB=ED=95=98=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../editProfile/EditAddressInputGroup.tsx | 1 - src/pages/editProfile/EditProfilePage.tsx | 22 ++++++++++--------- .../signUp/components/VAddressInputGroup.tsx | 18 +++++++-------- src/pages/signUp/signupType.d.ts | 1 - 4 files changed, 21 insertions(+), 21 deletions(-) diff --git a/src/pages/editProfile/EditAddressInputGroup.tsx b/src/pages/editProfile/EditAddressInputGroup.tsx index 50e914cd..a98b60d0 100644 --- a/src/pages/editProfile/EditAddressInputGroup.tsx +++ b/src/pages/editProfile/EditAddressInputGroup.tsx @@ -18,7 +18,6 @@ const EditAddressInputGroup = () => { const AddressInputGroupProps = { handleChange, - shelterInfo, }; return ; }; diff --git a/src/pages/editProfile/EditProfilePage.tsx b/src/pages/editProfile/EditProfilePage.tsx index 9c2fea2b..4341c339 100644 --- a/src/pages/editProfile/EditProfilePage.tsx +++ b/src/pages/editProfile/EditProfilePage.tsx @@ -1,10 +1,11 @@ -import { useMutation, useQuery } from '@tanstack/react-query'; +import { useMutation } from '@tanstack/react-query'; import { useParams } from 'react-router-dom'; import { useRecoilState } from 'recoil'; import { shelterSignupState } from 'recoil/shelterState'; import { getCookie } from 'commons/cookie/cookie'; import usePostFetch from 'commons/apis/usePostFetch'; import useGetFetch from 'commons/apis/useGetFetch'; +import { useEffect } from 'react'; import VEditProfilePage from './VEditProfilePage'; const EditProfilePage = () => { @@ -34,15 +35,7 @@ const EditProfilePage = () => { }, ); - const handleSubmit = (e: React.FormEvent) => { - e.preventDefault(); - postData(); - getData(); - }; - - const { error } = useQuery({ - queryKey: ['editProfile', shelterId], - queryFn: getData, + const mutation = useMutation(getData, { onSuccess: (info) => { setShelterInfo({ ...shelterInfo, @@ -55,6 +48,15 @@ const EditProfilePage = () => { }, }); + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + postData(); + }; + + useEffect(() => { + mutation.mutate(); + }, []); + const EditProfileProps = { getLoading, postloading, diff --git a/src/pages/signUp/components/VAddressInputGroup.tsx b/src/pages/signUp/components/VAddressInputGroup.tsx index 614e466b..0db33be8 100644 --- a/src/pages/signUp/components/VAddressInputGroup.tsx +++ b/src/pages/signUp/components/VAddressInputGroup.tsx @@ -1,11 +1,11 @@ import Container from 'commons/Container'; import Postcode from 'commons/PostCode'; +import { useRecoilState } from 'recoil'; +import { shelterSignupState } from 'recoil/shelterState'; import { AddressInputProps } from '../signupType'; -const VAddressInputGroup = ({ - handleChange, - shelterInfo, -}: AddressInputProps) => { +const VAddressInputGroup = ({ handleChange }: AddressInputProps) => { + const [shelterInfo, setShelterInfo] = useRecoilState(shelterSignupState); return (
@@ -20,7 +20,7 @@ const VAddressInputGroup = ({ name="우편번호" type="text" placeholder="우편번호" - defaultValue={shelterInfo.zonecode} + value={shelterInfo.zonecode} />
@@ -33,7 +33,7 @@ const VAddressInputGroup = ({ name="시/도" type="text" placeholder="시/도" - defaultValue={shelterInfo.address.province} + value={shelterInfo.address.province} onChange={handleChange} /> @@ -64,7 +64,7 @@ const VAddressInputGroup = ({ type="text" placeholder="상세 주소(입력)" onChange={handleChange} - defaultValue={shelterInfo.address.detail} + value={shelterInfo.address.detail} /> ); diff --git a/src/pages/signUp/signupType.d.ts b/src/pages/signUp/signupType.d.ts index 10b7ec43..8b85980c 100644 --- a/src/pages/signUp/signupType.d.ts +++ b/src/pages/signUp/signupType.d.ts @@ -18,7 +18,6 @@ export interface EmailValidationProps { export interface AddressInputProps { handleChange: (e: React.ChangeEvent) => void; - shelterInfo: ShelterSignupType; } export interface ValidationProps { From 978c94cbb18e11433fe0ff249bf666311bfbea4c Mon Sep 17 00:00:00 2001 From: JeonDoGyun Date: Fri, 10 Nov 2023 01:45:19 +0900 Subject: [PATCH 2/7] =?UTF-8?q?fix:=20';'=EC=9D=B4=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=EC=97=90=20=EB=82=98=EC=98=A4=EB=8A=94=20=EB=AC=B8?= =?UTF-8?q?=EC=A0=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/App.tsx b/src/App.tsx index 2db8f8a8..3433ab01 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -29,6 +29,7 @@ const router = createBrowserRouter([ children: [ { element: , + children: [ { path: '/', @@ -92,7 +93,7 @@ function App() { return ( - ; + ); From c680dbe01f8e030c703623da86b2f347c6bf47e8 Mon Sep 17 00:00:00 2001 From: JeonDoGyun Date: Fri, 10 Nov 2023 01:45:53 +0900 Subject: [PATCH 3/7] =?UTF-8?q?fix:=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EC=B2=AB=20=EB=B0=A9=EB=AC=B8=20=EC=8B=9C=20=EB=A1=9C=EA=B7=B8?= =?UTF-8?q?=EC=9D=B8=20=EB=A7=8C=EB=A3=8C=20=EB=AA=A8=EB=8B=AC=EC=9D=B4=20?= =?UTF-8?q?=EB=82=98=EC=98=A4=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/commons/UserDropdownBox.tsx | 1 - src/commons/UserToggleBox.tsx | 3 +- src/commons/cookie/cookie.ts | 3 +- src/commons/modals/LoginGuideModal.tsx | 70 ++++++++++--------- src/layouts/ValidateCheckLayout.tsx | 14 ++-- src/pages/login/components/LoginInputForm.tsx | 6 +- 6 files changed, 50 insertions(+), 47 deletions(-) diff --git a/src/commons/UserDropdownBox.tsx b/src/commons/UserDropdownBox.tsx index 78a94eec..3c44c5a8 100644 --- a/src/commons/UserDropdownBox.tsx +++ b/src/commons/UserDropdownBox.tsx @@ -25,7 +25,6 @@ const UserDropdownBox = () => { break; case '로그아웃': removeToken(); - setCookie('accountInfo', 'Not Login'); window.location.reload(); break; default: diff --git a/src/commons/UserToggleBox.tsx b/src/commons/UserToggleBox.tsx index e4358a8f..29e43cdd 100644 --- a/src/commons/UserToggleBox.tsx +++ b/src/commons/UserToggleBox.tsx @@ -16,14 +16,13 @@ const UserToggleBox = () => { const handleOptionClick = (option: string) => { switch (option) { case 'My 정보 변경': - navigate(`/shelter/${id}/edit`); // 아직 회원정보 수정 페이지 구현 안됨 + navigate(`/shelter/${id}/edit`); break; case 'My 보호소 이동': navigate(`/shelter/${id}/1`); break; case '로그아웃': removeToken(); - setCookie('userAccountInfo', 'Not Login'); window.location.reload(); break; default: diff --git a/src/commons/cookie/cookie.ts b/src/commons/cookie/cookie.ts index 5e09d48f..975ffc4e 100644 --- a/src/commons/cookie/cookie.ts +++ b/src/commons/cookie/cookie.ts @@ -26,5 +26,6 @@ export const removeCookie = (name: string) => { export const removeToken = () => { removeCookie('loginToken'); - removeCookie('userAccountInfo'); + removeCookie('accountInfo'); + removeCookie('loginState'); }; diff --git a/src/commons/modals/LoginGuideModal.tsx b/src/commons/modals/LoginGuideModal.tsx index 178e8a7c..39b20a1a 100644 --- a/src/commons/modals/LoginGuideModal.tsx +++ b/src/commons/modals/LoginGuideModal.tsx @@ -1,48 +1,52 @@ -import { setCookie } from 'commons/cookie/cookie'; +import { removeCookie, setCookie } from 'commons/cookie/cookie'; import { useNavigate } from 'react-router-dom'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import { useRecoilState } from 'recoil'; import { tokenCheckState } from 'recoil/shelterState'; const LoginGuideModal = () => { const navigate = useNavigate(); - const [isLogined, setIsLogined] = useRecoilState(tokenCheckState); // default : true + const [isLogined, setIsLogined] = useRecoilState(tokenCheckState); + // default : true (로그인이 되지 않았을 때 사용하기 위해) if (isLogined) { return null; } return ( - -
-
-
로그인이 만료되었습니다.
-
다시 로그인 하시겠습니까?
+ <> + +
+
+
로그인 정보가 만료되었습니다.
+
다시 로그인 하시겠습니까?
+
+
+ + +
-
- - -
-
-
+ + ); }; diff --git a/src/layouts/ValidateCheckLayout.tsx b/src/layouts/ValidateCheckLayout.tsx index 56d1b3c2..15bcd99f 100644 --- a/src/layouts/ValidateCheckLayout.tsx +++ b/src/layouts/ValidateCheckLayout.tsx @@ -1,24 +1,22 @@ import { getCookie } from 'commons/cookie/cookie'; import LoginGuideModal from 'commons/modals/LoginGuideModal'; import { useEffect } from 'react'; -import { Outlet } from 'react-router-dom'; +import { Outlet, useLocation } from 'react-router-dom'; import { useSetRecoilState } from 'recoil'; import { tokenCheckState } from 'recoil/shelterState'; const ValidateCheckLayout = () => { const setIsLogined = useSetRecoilState(tokenCheckState); const loginToken = getCookie('loginToken'); - const userAccount = getCookie('userAccountInfo'); + const loginState = getCookie('loginState'); + const location = useLocation(); - // userAccount에 대한 정책 수정이 필요 - // Layout 먹이는 방식 수정 + // 로그인 정보가 담긴 쿠키가 만료된 상태에서 사용자가 api 호출 관련 기능을 쓰기 전에 미리 알려주기 useEffect(() => { - if (!loginToken && userAccount === 'Login') { - // loginToken이 없으면 모달 열기 + if (!loginToken && loginState === 'Login') { setIsLogined(false); } - console.log('token 로직 동작'); - }, [loginToken, userAccount]); + }, [location]); return ( <> diff --git a/src/pages/login/components/LoginInputForm.tsx b/src/pages/login/components/LoginInputForm.tsx index 65038b9d..d3c73ce2 100644 --- a/src/pages/login/components/LoginInputForm.tsx +++ b/src/pages/login/components/LoginInputForm.tsx @@ -74,13 +74,15 @@ const LoginInputForm = () => { ); setCookie('accountInfo', `${role} ${id}`, { - expires: tokenExpirationDate, maxAge: timeDifferenceseconds, }); setCookie('loginToken', data.token, { - expires: tokenExpirationDate, maxAge: timeDifferenceseconds, }); + setCookie('loginState', 'Login', { + maxAge: 60000 * 60 * 24, + }); + navigate('/'); }, onError: () => { From cdcb9c00d2291423bbcd5ba6e59acf87f915ea9f Mon Sep 17 00:00:00 2001 From: JeonDoGyun Date: Fri, 10 Nov 2023 15:11:14 +0900 Subject: [PATCH 4/7] =?UTF-8?q?refactor:=20=EB=94=94=EB=A0=89=ED=86=A0?= =?UTF-8?q?=EB=A6=AC=20=EA=B5=AC=EC=A1=B0=20=EB=B3=80=ED=99=94=EC=97=90=20?= =?UTF-8?q?=EB=94=B0=EB=A5=B8=20=ED=8C=8C=EC=9D=BC=20=EA=B5=AC=EC=A1=B0=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit page별로 pageType.d.ts 생성 components 디렉토리 생성 후 page.tsx를 제외한 파일 이동 profileList의 경우, newList와 urgentList 디렉토리 유지하고 타입만 공통 파일로 이동 --- src/commons/UserDropdownBox.tsx | 2 +- src/commons/UserToggleBox.tsx | 2 +- src/commons/VPagenation.tsx | 2 +- src/commons/apis/useGetFetch.ts | 35 +++++--- src/commons/apis/usePostFetch.ts | 8 +- src/commons/modals/AutoplayGuideModal.tsx | 7 ++ src/layouts/ValidateCheckLayout.tsx | 5 +- src/pages/detailPet/DetailPetPage.tsx | 2 +- src/pages/detailPet/VDetailPetData.tsx | 79 ------------------- .../{ => components}/DetailPetData.tsx | 4 +- .../{ => components}/DetailPetInfo.tsx | 2 +- .../detailPet/{ => components}/RadarChart.tsx | 9 +-- .../detailPet/components/VDetailPetData.tsx | 41 ++++++++++ .../{ => components}/VDetailPetInfo.tsx | 4 +- src/pages/detailPet/detailPetType.d.ts | 46 +++++++++++ src/pages/editProfile/VEditProfilePage.tsx | 11 +-- .../EditAddressInputGroup.tsx | 0 .../EditProfilePageSkeleton.tsx | 0 src/pages/editProfile/editProfileType.d.ts | 5 ++ src/pages/map/MapPage.tsx | 2 +- src/pages/map/{ => components}/Map.tsx | 2 +- src/pages/map/{ => components}/MapList.tsx | 18 +---- .../map/{ => components}/MapSkeleton.tsx | 0 .../map/{ => components}/displayMarker.ts | 2 +- src/pages/map/mapType.d.ts | 16 ++++ src/pages/map/useMap.ts | 4 +- src/pages/profileList/ProfileListPage.tsx | 2 +- .../{ => components}/PageButton.tsx | 6 +- .../{ => components}/ProfileCard.tsx | 9 +-- .../{ => components}/ProfileListHome.tsx | 3 +- .../ProfileListHomeSkeleton.tsx | 0 .../{ => components}/VProfileListHome.tsx | 31 +------- src/pages/profileList/newList/NewList.tsx | 7 +- src/pages/profileList/newList/VNewList.tsx | 18 +---- src/pages/profileList/profileListType.d.ts | 68 ++++++++++++++++ .../profileList/urgentList/UrgentList.tsx | 7 +- .../profileList/urgentList/VUrgentList.tsx | 18 +---- src/pages/register/ImageVideoInput.tsx | 16 ---- src/pages/register/RegisterPage.tsx | 8 +- .../register/{ => components}/Calendar.tsx | 9 +-- src/pages/register/components/Dash.tsx | 14 ++++ .../{ => components}/DayModalInput.tsx | 0 .../register/{ => components}/DetailRadio.tsx | 9 +-- .../register/{ => components}/FileInput.tsx | 10 +-- .../register/components/ImageVideoInput.tsx | 8 ++ .../{ => components}/MRegisterForm.tsx | 0 .../register/{ => components}/RadioGroup.tsx | 0 .../{ => components}/RegisterHeader.tsx | 0 .../register/{ => components}/StatusScore.tsx | 21 +---- .../{ => components}/StatusSelectGroup.tsx | 0 .../{ => components}/VDayModalInput.tsx | 8 +- .../{ => components}/VImageVideoInput.tsx | 12 +-- .../{ => components}/VMRegisterForm.tsx | 7 +- .../register/{ => components}/VRadioGroup.tsx | 10 +-- src/pages/register/registerType.d.ts | 63 +++++++++++++++ src/pages/shelterInfo/ShelterInfoPage.tsx | 2 +- .../{ => components}/ShelterInfo.tsx | 6 +- .../{ => components}/ShelterInfoSkeleton.tsx | 0 .../{ => components}/VShelterCard.tsx | 9 +-- .../{ => components}/VShelterInfo.tsx | 12 +-- src/pages/shelterInfo/shelterInfoType.d.ts | 6 ++ src/pages/signUp/VSignupPage.tsx | 7 +- .../signUp/components/SignupInputForm.tsx | 4 +- .../signUp/components/VAddressInputGroup.tsx | 5 +- .../signUp/components/VSignupInputForm.tsx | 7 +- src/pages/signUp/components/ValidateText.tsx | 7 ++ src/pages/signUp/signupType.d.ts | 4 + src/pages/update/UpdatePage.tsx | 2 +- .../PatchStatusSelectGroup.tsx | 29 ++----- .../update/{ => components}/UpdateHeader.tsx | 2 +- .../{ => components}/UpdateRegisterForm.tsx | 10 +-- .../{ => components}/UpdateTemplate.tsx | 15 +--- .../{ => components}/VUpdateRegisterForm.tsx | 17 +--- src/pages/update/updateType.d.ts | 23 ++++++ 74 files changed, 437 insertions(+), 402 deletions(-) create mode 100644 src/commons/modals/AutoplayGuideModal.tsx delete mode 100644 src/pages/detailPet/VDetailPetData.tsx rename src/pages/detailPet/{ => components}/DetailPetData.tsx (92%) rename src/pages/detailPet/{ => components}/DetailPetInfo.tsx (71%) rename src/pages/detailPet/{ => components}/RadarChart.tsx (96%) create mode 100644 src/pages/detailPet/components/VDetailPetData.tsx rename src/pages/detailPet/{ => components}/VDetailPetInfo.tsx (92%) create mode 100644 src/pages/detailPet/detailPetType.d.ts rename src/pages/editProfile/{ => components}/EditAddressInputGroup.tsx (100%) rename src/pages/editProfile/{ => components}/EditProfilePageSkeleton.tsx (100%) create mode 100644 src/pages/editProfile/editProfileType.d.ts rename src/pages/map/{ => components}/Map.tsx (98%) rename src/pages/map/{ => components}/MapList.tsx (87%) rename src/pages/map/{ => components}/MapSkeleton.tsx (100%) rename src/pages/map/{ => components}/displayMarker.ts (96%) create mode 100644 src/pages/map/mapType.d.ts rename src/pages/profileList/{ => components}/PageButton.tsx (87%) rename src/pages/profileList/{ => components}/ProfileCard.tsx (86%) rename src/pages/profileList/{ => components}/ProfileListHome.tsx (91%) rename src/pages/profileList/{ => components}/ProfileListHomeSkeleton.tsx (100%) rename src/pages/profileList/{ => components}/VProfileListHome.tsx (66%) create mode 100644 src/pages/profileList/profileListType.d.ts delete mode 100644 src/pages/register/ImageVideoInput.tsx rename src/pages/register/{ => components}/Calendar.tsx (98%) create mode 100644 src/pages/register/components/Dash.tsx rename src/pages/register/{ => components}/DayModalInput.tsx (100%) rename src/pages/register/{ => components}/DetailRadio.tsx (68%) rename src/pages/register/{ => components}/FileInput.tsx (88%) create mode 100644 src/pages/register/components/ImageVideoInput.tsx rename src/pages/register/{ => components}/MRegisterForm.tsx (100%) rename src/pages/register/{ => components}/RadioGroup.tsx (100%) rename src/pages/register/{ => components}/RegisterHeader.tsx (100%) rename src/pages/register/{ => components}/StatusScore.tsx (83%) rename src/pages/register/{ => components}/StatusSelectGroup.tsx (100%) rename src/pages/register/{ => components}/VDayModalInput.tsx (89%) rename src/pages/register/{ => components}/VImageVideoInput.tsx (73%) rename src/pages/register/{ => components}/VMRegisterForm.tsx (95%) rename src/pages/register/{ => components}/VRadioGroup.tsx (93%) create mode 100644 src/pages/register/registerType.d.ts rename src/pages/shelterInfo/{ => components}/ShelterInfo.tsx (90%) rename src/pages/shelterInfo/{ => components}/ShelterInfoSkeleton.tsx (100%) rename src/pages/shelterInfo/{ => components}/VShelterCard.tsx (83%) rename src/pages/shelterInfo/{ => components}/VShelterInfo.tsx (86%) create mode 100644 src/pages/shelterInfo/shelterInfoType.d.ts create mode 100644 src/pages/signUp/components/ValidateText.tsx rename src/pages/update/{ => components}/PatchStatusSelectGroup.tsx (83%) rename src/pages/update/{ => components}/UpdateHeader.tsx (98%) rename src/pages/update/{ => components}/UpdateRegisterForm.tsx (84%) rename src/pages/update/{ => components}/UpdateTemplate.tsx (84%) rename src/pages/update/{ => components}/VUpdateRegisterForm.tsx (89%) create mode 100644 src/pages/update/updateType.d.ts diff --git a/src/commons/UserDropdownBox.tsx b/src/commons/UserDropdownBox.tsx index 3c44c5a8..b6018515 100644 --- a/src/commons/UserDropdownBox.tsx +++ b/src/commons/UserDropdownBox.tsx @@ -1,6 +1,6 @@ import { useNavigate } from 'react-router-dom'; import { useState } from 'react'; -import { getCookie, removeToken, setCookie } from './cookie/cookie'; +import { getCookie, removeToken } from './cookie/cookie'; // 로그인 되었을 때 상태를 보여주는 SelectBox 제작 const UserDropdownBox = () => { diff --git a/src/commons/UserToggleBox.tsx b/src/commons/UserToggleBox.tsx index 29e43cdd..cfa417f9 100644 --- a/src/commons/UserToggleBox.tsx +++ b/src/commons/UserToggleBox.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import { useNavigate } from 'react-router-dom'; -import { getCookie, removeToken, setCookie } from './cookie/cookie'; +import { getCookie, removeToken } from './cookie/cookie'; const UserToggleBox = () => { const token = getCookie('loginToken'); diff --git a/src/commons/VPagenation.tsx b/src/commons/VPagenation.tsx index dffd46a7..30d45745 100644 --- a/src/commons/VPagenation.tsx +++ b/src/commons/VPagenation.tsx @@ -1,4 +1,4 @@ -import PageButton from 'pages/profileList/PageButton'; +import PageButton from 'pages/profileList/components/PageButton'; export function getPaginationItems( currentPage: number, diff --git a/src/commons/apis/useGetFetch.ts b/src/commons/apis/useGetFetch.ts index 164497ad..2ef0c042 100644 --- a/src/commons/apis/useGetFetch.ts +++ b/src/commons/apis/useGetFetch.ts @@ -2,27 +2,38 @@ import { useState } from 'react'; const useGetFetch = (url: string) => { const [data, setData] = useState>(); + const [error, setError] = useState>(); const [getStatusCode, setErrorStatusCode] = useState(); const [getLoading, setLoading] = useState(false); const getData = async () => { - setLoading(true); - const response = await fetch(url); + try { + setLoading(true); + const response = await fetch(url, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + }, + }); - if (!response.ok) { - setErrorStatusCode(response.status); - return; - } + if (!response.ok) { + setErrorStatusCode(response.status); + return; + } - const jsonData = await response.json(); - setData(jsonData); - setLoading(false); + const jsonData = await response.json(); + setData(jsonData); - // eslint-disable-next-line consistent-return - return jsonData; + // eslint-disable-next-line consistent-return + return jsonData; + } catch (err) { + setError(err as Promise); + } finally { + setLoading(false); + } }; - return { data, getStatusCode, getLoading, getData }; + return { data, error, getStatusCode, getLoading, getData }; }; export default useGetFetch; diff --git a/src/commons/apis/usePostFetch.ts b/src/commons/apis/usePostFetch.ts index 08053924..4ae61309 100644 --- a/src/commons/apis/usePostFetch.ts +++ b/src/commons/apis/usePostFetch.ts @@ -1,7 +1,8 @@ import { useState } from 'react'; const usePostFetch = (url: string, options: object) => { - const [data, setData] = useState(); + const [data, setData] = useState>(); + const [error, setError] = useState>(); const [postStatusCode, setStatusCode] = useState(); const [postloading, setLoading] = useState(false); @@ -14,17 +15,16 @@ const usePostFetch = (url: string, options: object) => { setStatusCode(response.status); return; } - const jsonData = await response.json(); setData(jsonData); } catch (err) { - console.error('Error: ', err); + setError(err as Promise); } finally { setLoading(false); } }; - return { data, postStatusCode, postloading, postData }; + return { data, error, postStatusCode, postloading, postData }; }; export default usePostFetch; diff --git a/src/commons/modals/AutoplayGuideModal.tsx b/src/commons/modals/AutoplayGuideModal.tsx new file mode 100644 index 00000000..91aba743 --- /dev/null +++ b/src/commons/modals/AutoplayGuideModal.tsx @@ -0,0 +1,7 @@ +import React from 'react'; + +const AutoplayGuideModal = () => { + return
; +}; + +export default 'AutoplayGuideModal'; diff --git a/src/layouts/ValidateCheckLayout.tsx b/src/layouts/ValidateCheckLayout.tsx index 15bcd99f..85565956 100644 --- a/src/layouts/ValidateCheckLayout.tsx +++ b/src/layouts/ValidateCheckLayout.tsx @@ -1,10 +1,11 @@ import { getCookie } from 'commons/cookie/cookie'; -import LoginGuideModal from 'commons/modals/LoginGuideModal'; -import { useEffect } from 'react'; +import { lazy, useEffect } from 'react'; import { Outlet, useLocation } from 'react-router-dom'; import { useSetRecoilState } from 'recoil'; import { tokenCheckState } from 'recoil/shelterState'; +const LoginGuideModal = lazy(() => import('commons/modals/LoginGuideModal')); + const ValidateCheckLayout = () => { const setIsLogined = useSetRecoilState(tokenCheckState); const loginToken = getCookie('loginToken'); diff --git a/src/pages/detailPet/DetailPetPage.tsx b/src/pages/detailPet/DetailPetPage.tsx index 31289cf8..bf8308d0 100644 --- a/src/pages/detailPet/DetailPetPage.tsx +++ b/src/pages/detailPet/DetailPetPage.tsx @@ -1,4 +1,4 @@ -import DetailPetData from 'pages/detailPet/DetailPetData'; +import DetailPetData from 'pages/detailPet/components/DetailPetData'; import ErrorBoundary from 'commons/ErrorBoundary'; const DetailPetPage = () => { diff --git a/src/pages/detailPet/VDetailPetData.tsx b/src/pages/detailPet/VDetailPetData.tsx deleted file mode 100644 index cc290e4e..00000000 --- a/src/pages/detailPet/VDetailPetData.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import RadarChart, { PolygonProfile } from 'pages/detailPet/RadarChart'; -import DetailPetInfo from 'pages/detailPet/DetailPetInfo'; -import ModalPortal from 'commons/modals/ModalPortal'; -import ImageModal from 'commons/modals/ImageModal'; - -export interface RadarChartProps { - setCanvas: React.Dispatch>; - width: number; - height: number; - canvas: HTMLCanvasElement | null; - labels: string[]; - data: PolygonProfile; - willAnimate: boolean; -} -export interface DetailPetInfoProps { - shelterInfo: { - id: number; - name: string; - contact: string; - }; - name: string; - age: string; - sex: string; - weight: number; - description: JSX.Element[]; - protectionExpirationDate: string | null; - vaccinationStatus: string; - neutralizationStatus: string; - adoptionStatus: string; - profileImageUrl: string; - size: string; - polygonProfile: PolygonProfile; -} - -interface Props { - detailPetInfoProps: DetailPetInfoProps; - radarChartProps: RadarChartProps; - modal: boolean; - handleModalImageClick: () => void; - handleModalCloseClick: () => void; - handleModalOutsideClick: (event: React.MouseEvent) => void; - imageUrl: string; -} - -const VDetailPetData = ({ - detailPetInfoProps, - radarChartProps, - modal, - handleModalImageClick, - handleModalCloseClick, - handleModalOutsideClick, - imageUrl, -}: Props) => { - return ( -
- z - - {modal && ( - - )} - -
- - -
-
- ); -}; - -export default VDetailPetData; diff --git a/src/pages/detailPet/DetailPetData.tsx b/src/pages/detailPet/components/DetailPetData.tsx similarity index 92% rename from src/pages/detailPet/DetailPetData.tsx rename to src/pages/detailPet/components/DetailPetData.tsx index f8e9d255..8ce2d5dd 100644 --- a/src/pages/detailPet/DetailPetData.tsx +++ b/src/pages/detailPet/components/DetailPetData.tsx @@ -1,8 +1,8 @@ import { useState } from 'react'; import { useParams } from 'react-router-dom'; -import StringWithLineBreak from 'commons/StringWithLineBreak'; import { useQuery } from '@tanstack/react-query'; -import VDetailPetData, { RadarChartProps } from './VDetailPetData'; +import VDetailPetData from './VDetailPetData'; +import { RadarChartProps } from '../detailPetType'; const DetailPetData = () => { const params = useParams(); diff --git a/src/pages/detailPet/DetailPetInfo.tsx b/src/pages/detailPet/components/DetailPetInfo.tsx similarity index 71% rename from src/pages/detailPet/DetailPetInfo.tsx rename to src/pages/detailPet/components/DetailPetInfo.tsx index 67ea7595..961f7668 100644 --- a/src/pages/detailPet/DetailPetInfo.tsx +++ b/src/pages/detailPet/components/DetailPetInfo.tsx @@ -1,5 +1,5 @@ -import { DetailPetInfoProps } from 'pages/detailPet/VDetailPetData'; import VDetailPetInfo from './VDetailPetInfo'; +import { DetailPetInfoProps } from '../detailPetType'; const DetailPetInfo = (data: DetailPetInfoProps) => { return ; diff --git a/src/pages/detailPet/RadarChart.tsx b/src/pages/detailPet/components/RadarChart.tsx similarity index 96% rename from src/pages/detailPet/RadarChart.tsx rename to src/pages/detailPet/components/RadarChart.tsx index d9cc4ef0..32e20f18 100644 --- a/src/pages/detailPet/RadarChart.tsx +++ b/src/pages/detailPet/components/RadarChart.tsx @@ -1,12 +1,5 @@ import { useRef, useEffect } from 'react'; - -export interface PolygonProfile { - intelligence: number; - affinity: number; - athletic: number; - adaptability: number; - activeness: number; -} +import { PolygonProfile } from '../detailPetType'; const drawRadarChart = ( canvas: HTMLCanvasElement | null, diff --git a/src/pages/detailPet/components/VDetailPetData.tsx b/src/pages/detailPet/components/VDetailPetData.tsx new file mode 100644 index 00000000..a3b581cc --- /dev/null +++ b/src/pages/detailPet/components/VDetailPetData.tsx @@ -0,0 +1,41 @@ +import RadarChart from 'pages/detailPet/components/RadarChart'; +import DetailPetInfo from 'pages/detailPet/components/DetailPetInfo'; +import ModalPortal from 'commons/modals/ModalPortal'; +import ImageModal from 'commons/modals/ImageModal'; +import { VDetailPetDataProps } from '../detailPetType'; + +const VDetailPetData = ({ + detailPetInfoProps, + radarChartProps, + modal, + handleModalImageClick, + handleModalCloseClick, + handleModalOutsideClick, + imageUrl, +}: VDetailPetDataProps) => { + return ( +
+ z + + {modal && ( + + )} + +
+ + +
+
+ ); +}; + +export default VDetailPetData; diff --git a/src/pages/detailPet/VDetailPetInfo.tsx b/src/pages/detailPet/components/VDetailPetInfo.tsx similarity index 92% rename from src/pages/detailPet/VDetailPetInfo.tsx rename to src/pages/detailPet/components/VDetailPetInfo.tsx index e5dff46c..5f66d8a6 100644 --- a/src/pages/detailPet/VDetailPetInfo.tsx +++ b/src/pages/detailPet/components/VDetailPetInfo.tsx @@ -1,5 +1,5 @@ import { Link } from 'react-router-dom'; -import { DetailPetInfoProps } from 'pages/detailPet/VDetailPetData'; +import { DetailPetInfoProps } from '../detailPetType'; const VDetailPetInfo = (data: DetailPetInfoProps) => { return ( @@ -69,7 +69,7 @@ const VDetailPetInfo = (data: DetailPetInfoProps) => { - + 문의하기 diff --git a/src/pages/detailPet/detailPetType.d.ts b/src/pages/detailPet/detailPetType.d.ts new file mode 100644 index 00000000..7b13b2e9 --- /dev/null +++ b/src/pages/detailPet/detailPetType.d.ts @@ -0,0 +1,46 @@ +export interface PolygonProfile { + intelligence: number; + affinity: number; + athletic: number; + adaptability: number; + activeness: number; +} + +export interface RadarChartProps { + setCanvas: React.Dispatch>; + width: number; + height: number; + canvas: HTMLCanvasElement | null; + labels: string[]; + data: PolygonProfile; + willAnimate: boolean; +} +export interface DetailPetInfoProps { + shelterInfo: { + id: number; + name: string; + contact: string; + }; + name: string; + age: string; + sex: string; + weight: number; + description: JSX.Element[]; + protectionExpirationDate: string | null; + vaccinationStatus: string; + neutralizationStatus: string; + adoptionStatus: string; + profileImageUrl: string; + size: string; + polygonProfile: PolygonProfile; +} + +export interface VDetailPetDataProps { + detailPetInfoProps: DetailPetInfoProps; + radarChartProps: RadarChartProps; + modal: boolean; + handleModalImageClick: () => void; + handleModalCloseClick: () => void; + handleModalOutsideClick: (event: React.MouseEvent) => void; + imageUrl: string; +} diff --git a/src/pages/editProfile/VEditProfilePage.tsx b/src/pages/editProfile/VEditProfilePage.tsx index bb77f491..2d72ea68 100644 --- a/src/pages/editProfile/VEditProfilePage.tsx +++ b/src/pages/editProfile/VEditProfilePage.tsx @@ -3,14 +3,9 @@ import InputGroup from 'commons/InputGroup'; import { ClipLoader } from 'react-spinners'; import { shelterSignupState } from 'recoil/shelterState'; import { useRecoilValue } from 'recoil'; -import EditProfilePageSkeleton from './EditProfilePageSkeleton'; -import EditAddressInputGroup from './EditAddressInputGroup'; - -interface VEditProfileProps { - getLoading: boolean; - postloading: boolean; - handleSubmit: (e: React.FormEvent) => void; -} +import EditProfilePageSkeleton from './components/EditProfilePageSkeleton'; +import EditAddressInputGroup from './components/EditAddressInputGroup'; +import { VEditProfileProps } from './editProfileType'; const VEditProfilePage = ({ getLoading, diff --git a/src/pages/editProfile/EditAddressInputGroup.tsx b/src/pages/editProfile/components/EditAddressInputGroup.tsx similarity index 100% rename from src/pages/editProfile/EditAddressInputGroup.tsx rename to src/pages/editProfile/components/EditAddressInputGroup.tsx diff --git a/src/pages/editProfile/EditProfilePageSkeleton.tsx b/src/pages/editProfile/components/EditProfilePageSkeleton.tsx similarity index 100% rename from src/pages/editProfile/EditProfilePageSkeleton.tsx rename to src/pages/editProfile/components/EditProfilePageSkeleton.tsx diff --git a/src/pages/editProfile/editProfileType.d.ts b/src/pages/editProfile/editProfileType.d.ts new file mode 100644 index 00000000..0967c435 --- /dev/null +++ b/src/pages/editProfile/editProfileType.d.ts @@ -0,0 +1,5 @@ +export interface VEditProfileProps { + getLoading: boolean; + postloading: boolean; + handleSubmit: (e: React.FormEvent) => void; +} diff --git a/src/pages/map/MapPage.tsx b/src/pages/map/MapPage.tsx index 34e95fd8..5cc009b5 100644 --- a/src/pages/map/MapPage.tsx +++ b/src/pages/map/MapPage.tsx @@ -1,4 +1,4 @@ -import Map from 'pages/map/Map'; +import Map from 'pages/map/components/Map'; import ErrorBoundary from 'commons/ErrorBoundary'; const MapPage = () => { diff --git a/src/pages/map/Map.tsx b/src/pages/map/components/Map.tsx similarity index 98% rename from src/pages/map/Map.tsx rename to src/pages/map/components/Map.tsx index 3d79edcb..82b7c2c8 100644 --- a/src/pages/map/Map.tsx +++ b/src/pages/map/components/Map.tsx @@ -10,7 +10,7 @@ import { useState, useEffect, useRef } from 'react'; import MapList from './MapList'; import MapSkeleton from './MapSkeleton'; -import useMap from './useMap'; +import useMap from '../useMap'; declare global { interface Window { diff --git a/src/pages/map/MapList.tsx b/src/pages/map/components/MapList.tsx similarity index 87% rename from src/pages/map/MapList.tsx rename to src/pages/map/components/MapList.tsx index a7f20681..994774fe 100644 --- a/src/pages/map/MapList.tsx +++ b/src/pages/map/components/MapList.tsx @@ -1,23 +1,7 @@ /* eslint-disable @typescript-eslint/naming-convention */ import { useNavigate } from 'react-router-dom'; import { useState } from 'react'; - -export interface SearchedPlace { - address_name: string; - category_group_code: string; - category_group_name: string; - category_name: string; - distance: string; - id: string; - phone: string; - place_name: string; - place_url: string; - road_address_name: string; - x: string; - y: string; - isRegistered: boolean; - shelterId: number; -} +import { SearchedPlace } from '../mapType'; const MapList = ({ searchedPlace, diff --git a/src/pages/map/MapSkeleton.tsx b/src/pages/map/components/MapSkeleton.tsx similarity index 100% rename from src/pages/map/MapSkeleton.tsx rename to src/pages/map/components/MapSkeleton.tsx diff --git a/src/pages/map/displayMarker.ts b/src/pages/map/components/displayMarker.ts similarity index 96% rename from src/pages/map/displayMarker.ts rename to src/pages/map/components/displayMarker.ts index 11002c5f..4b9ad92f 100644 --- a/src/pages/map/displayMarker.ts +++ b/src/pages/map/components/displayMarker.ts @@ -1,4 +1,4 @@ -import { SearchedPlace } from './MapList'; +import { SearchedPlace } from '../mapType'; // eslint-disable-next-line @typescript-eslint/no-explicit-any const displayMarker = async (map: any, addressInfo: SearchedPlace) => { diff --git a/src/pages/map/mapType.d.ts b/src/pages/map/mapType.d.ts new file mode 100644 index 00000000..de75c9b5 --- /dev/null +++ b/src/pages/map/mapType.d.ts @@ -0,0 +1,16 @@ +export interface SearchedPlace { + address_name: string; + category_group_code: string; + category_group_name: string; + category_name: string; + distance: string; + id: string; + phone: string; + place_name: string; + place_url: string; + road_address_name: string; + x: string; + y: string; + isRegistered: boolean; + shelterId: number; +} diff --git a/src/pages/map/useMap.ts b/src/pages/map/useMap.ts index 232827ec..daa607b1 100644 --- a/src/pages/map/useMap.ts +++ b/src/pages/map/useMap.ts @@ -1,8 +1,8 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import { useEffect, useState, RefObject, useRef } from 'react'; import { useMutation } from '@tanstack/react-query'; -import displayMarker from './displayMarker'; -import { SearchedPlace } from './MapList'; +import displayMarker from './components/displayMarker'; +import { SearchedPlace } from './mapType'; function useMap( containerRef: RefObject, diff --git a/src/pages/profileList/ProfileListPage.tsx b/src/pages/profileList/ProfileListPage.tsx index 59452b6f..394b435b 100644 --- a/src/pages/profileList/ProfileListPage.tsx +++ b/src/pages/profileList/ProfileListPage.tsx @@ -1,4 +1,4 @@ -import ProfileListHome from 'pages/profileList/ProfileListHome'; +import ProfileListHome from 'pages/profileList/components/ProfileListHome'; const ProfileListPage = () => { return ( diff --git a/src/pages/profileList/PageButton.tsx b/src/pages/profileList/components/PageButton.tsx similarity index 87% rename from src/pages/profileList/PageButton.tsx rename to src/pages/profileList/components/PageButton.tsx index 129bf9d8..76ae6d01 100644 --- a/src/pages/profileList/PageButton.tsx +++ b/src/pages/profileList/components/PageButton.tsx @@ -1,6 +1,4 @@ -import { HTMLProps } from 'react'; - -export type Props = HTMLProps & { active?: boolean }; +import { PageButtonProps } from '../profileListType'; export default function PageButton({ className, @@ -8,7 +6,7 @@ export default function PageButton({ disabled, children, ...otherProps -}: Props) { +}: PageButtonProps) { if (disabled) { return ( diff --git a/src/pages/profileList/ProfileCard.tsx b/src/pages/profileList/components/ProfileCard.tsx similarity index 86% rename from src/pages/profileList/ProfileCard.tsx rename to src/pages/profileList/components/ProfileCard.tsx index 1bd046c8..9368d2d9 100644 --- a/src/pages/profileList/ProfileCard.tsx +++ b/src/pages/profileList/components/ProfileCard.tsx @@ -1,11 +1,4 @@ -export interface VProfileInfoProps { - profileImageUrl: string; - petId: number; - petName: string; - petAge: number | null; - shelterName: string; - adoptionStatus: string; -} +import { VProfileInfoProps } from '../profileListType'; const ProfileCard = (vProfileInfoProps: VProfileInfoProps) => (
diff --git a/src/pages/profileList/ProfileListHome.tsx b/src/pages/profileList/components/ProfileListHome.tsx similarity index 91% rename from src/pages/profileList/ProfileListHome.tsx rename to src/pages/profileList/components/ProfileListHome.tsx index d529932d..225401e4 100644 --- a/src/pages/profileList/ProfileListHome.tsx +++ b/src/pages/profileList/components/ProfileListHome.tsx @@ -1,8 +1,9 @@ import { useEffect, useState } from 'react'; import { useQuery } from '@tanstack/react-query'; import useFetch from 'commons/apis/useFetch'; -import VProfileListHome, { ProfileListProps } from './VProfileListHome'; +import VProfileListHome from './VProfileListHome'; import ProfileListHomeSkeleton from './ProfileListHomeSkeleton'; +import { ProfileListProps } from '../profileListType'; const ProfileListHome = () => { const [profileListProps, setProfileListProps] = diff --git a/src/pages/profileList/ProfileListHomeSkeleton.tsx b/src/pages/profileList/components/ProfileListHomeSkeleton.tsx similarity index 100% rename from src/pages/profileList/ProfileListHomeSkeleton.tsx rename to src/pages/profileList/components/ProfileListHomeSkeleton.tsx diff --git a/src/pages/profileList/VProfileListHome.tsx b/src/pages/profileList/components/VProfileListHome.tsx similarity index 66% rename from src/pages/profileList/VProfileListHome.tsx rename to src/pages/profileList/components/VProfileListHome.tsx index a65b2a97..cdf6cd90 100644 --- a/src/pages/profileList/VProfileListHome.tsx +++ b/src/pages/profileList/components/VProfileListHome.tsx @@ -1,32 +1,5 @@ -import ProfileCard from 'pages/profileList/ProfileCard'; - -export interface SosListProps { - map( - arg0: (sosItem: any, index: any) => import('react/jsx-runtime').JSX.Element, - ): import('react').ReactNode; - profileImageUrl: string; - petId: number; - petName: string; - petAge: number; - shelterName: string; - protectionExpirationDate: string; -} - -export interface NewListProps { - map( - arg0: (newItem: any, index: any) => import('react/jsx-runtime').JSX.Element, - ): import('react').ReactNode; - profileImageUrl: string; - petId: number; - petName: string; - petAge: number; - shelterName: string; - adoptionStatus: string; -} -export interface ProfileListProps { - sosListProps: SosListProps; - newListProps: NewListProps; -} +import ProfileCard from 'pages/profileList/components/ProfileCard'; +import { ProfileListProps } from '../profileListType'; const VProfileListHome = (profileListProps: ProfileListProps) => { return ( diff --git a/src/pages/profileList/newList/NewList.tsx b/src/pages/profileList/newList/NewList.tsx index b56a66ae..b8762696 100644 --- a/src/pages/profileList/newList/NewList.tsx +++ b/src/pages/profileList/newList/NewList.tsx @@ -2,8 +2,9 @@ import { useNavigate } from 'react-router-dom'; import { useEffect, useState } from 'react'; import { useQuery } from '@tanstack/react-query'; import useFetch from 'commons/apis/useFetch'; -import VNewList, { Props } from './VNewList'; +import VNewList from './VNewList'; import NewListSkeleton from './NewListSkeleton'; +import { VNewListProps } from '../profileListType'; const NewList = () => { const [currentPage, setCurrentPage] = useState(1); // 현재 페이지 상태 @@ -14,7 +15,7 @@ const NewList = () => { navigate(`/profile/new/${page}`); }; - const [newList, setNewList] = useState(null); + const [newList, setNewList] = useState(null); const { data, isLoading, isError } = useQuery({ queryKey: ['new-list', currentPage], @@ -32,7 +33,7 @@ const NewList = () => { const newListData = data.newList; - const newListProps: Props = { + const newListProps: VNewListProps = { pageNationProps: pageData, profileListProps: newListData, }; diff --git a/src/pages/profileList/newList/VNewList.tsx b/src/pages/profileList/newList/VNewList.tsx index fd65b57f..358a36c3 100644 --- a/src/pages/profileList/newList/VNewList.tsx +++ b/src/pages/profileList/newList/VNewList.tsx @@ -1,20 +1,8 @@ -import ProfileCard from 'pages/profileList/ProfileCard'; +import ProfileCard from 'pages/profileList/components/ProfileCard'; import Pagination from '../../../commons/Pagenation'; -import { NewListProps } from '../VProfileListHome'; +import { VNewListProps } from '../profileListType'; -export interface PageNationProps { - setCurrentPage: (page: number) => void; - currentPage: number; - lastPage: number; - maxLength: number; -} - -export interface Props { - profileListProps: NewListProps; - pageNationProps: PageNationProps; -} - -const VNewList = (props: Props) => ( +const VNewList = (props: VNewListProps) => (

신규 애니모리 친구들 diff --git a/src/pages/profileList/profileListType.d.ts b/src/pages/profileList/profileListType.d.ts new file mode 100644 index 00000000..958d202a --- /dev/null +++ b/src/pages/profileList/profileListType.d.ts @@ -0,0 +1,68 @@ +import { HTMLProps } from 'react'; + +export interface PageButtonProps extends HTMLProps { + active?: boolean; +} + +export interface VProfileInfoProps { + profileImageUrl: string; + petId: number; + petName: string; + petAge: number | null; + shelterName: string; + adoptionStatus: string; +} + +export interface SosListProps { + map( + arg0: ( + sosItem: any, + index: number, + ) => import('react/jsx-runtime').JSX.Element, + ): import('react').ReactNode; + profileImageUrl: string; + petId: number; + petName: string; + petAge: number; + shelterName: string; + protectionExpirationDate: string; +} + +export interface NewListProps { + map( + arg0: ( + newItem: any, + index: number, + ) => import('react/jsx-runtime').JSX.Element, + ): import('react').ReactNode; + profileImageUrl: string; + petId: number; + petName: string; + petAge: number; + shelterName: string; + adoptionStatus: string; +} + +export interface ProfileListProps { + sosListProps: SosListProps; + newListProps: NewListProps; +} + +// NewList +export interface PageNationProps { + setCurrentPage: (page: number) => void; + currentPage: number; + lastPage: number; + maxLength: number; +} + +export interface VNewListProps { + profileListProps: NewListProps; + pageNationProps: PageNationProps; +} + +// UrgentList +export interface VUrgentListProps { + profileListProps: SosListProps; + pageNationProps: PageNationProps; +} diff --git a/src/pages/profileList/urgentList/UrgentList.tsx b/src/pages/profileList/urgentList/UrgentList.tsx index 2d22cd2c..f1b128b3 100644 --- a/src/pages/profileList/urgentList/UrgentList.tsx +++ b/src/pages/profileList/urgentList/UrgentList.tsx @@ -2,8 +2,9 @@ import { useNavigate } from 'react-router-dom'; import { useEffect, useState } from 'react'; import { useQuery } from '@tanstack/react-query'; import useFetch from 'commons/apis/useFetch'; -import VUrgentList, { Props } from './VUrgentList'; +import VUrgentList from './VUrgentList'; import UrgentListSkeleton from './UrgentListSkeleton'; +import { VUrgentListProps } from '../profileListType'; const UrgentList = () => { const [currentPage, setCurrentPage] = useState(1); // 현재 페이지 상태 @@ -14,7 +15,7 @@ const UrgentList = () => { navigate(`/profile/urgent/${page}`); }; - const [urgentList, setUrgentList] = useState(null); + const [urgentList, setUrgentList] = useState(null); const { data, isLoading, isError } = useQuery({ queryKey: ['urgent-list', currentPage], @@ -32,7 +33,7 @@ const UrgentList = () => { const urgentListData = data.sosList; - const urgentListProps: Props = { + const urgentListProps: VUrgentListProps = { pageNationProps: pageData, profileListProps: urgentListData, }; diff --git a/src/pages/profileList/urgentList/VUrgentList.tsx b/src/pages/profileList/urgentList/VUrgentList.tsx index 5271ba89..f67cfe1b 100644 --- a/src/pages/profileList/urgentList/VUrgentList.tsx +++ b/src/pages/profileList/urgentList/VUrgentList.tsx @@ -1,20 +1,8 @@ -import ProfileCard from 'pages/profileList/ProfileCard'; +import ProfileCard from 'pages/profileList/components/ProfileCard'; import Pagination from '../../../commons/Pagenation'; -import { SosListProps } from '../VProfileListHome'; +import { VUrgentListProps } from '../profileListType'; -export interface PageNationProps { - setCurrentPage: (page: number) => void; - currentPage: number; - lastPage: number; - maxLength: number; -} - -export interface Props { - profileListProps: SosListProps; - pageNationProps: PageNationProps; -} - -const VUrgentList = (props: Props) => { +const VUrgentList = (props: VUrgentListProps) => { return (

diff --git a/src/pages/register/ImageVideoInput.tsx b/src/pages/register/ImageVideoInput.tsx deleted file mode 100644 index 5ce850dd..00000000 --- a/src/pages/register/ImageVideoInput.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import VImageVideoInput from './VImageVideoInput'; - -export interface ImageVideoInputProps { - handleInputChange: (e: React.ChangeEvent) => void; - imageRef: React.RefObject; - videoRef: React.RefObject; - handleCustomButtonClick: (file: React.RefObject) => void; - isImageSelected: boolean; - isVideoSelected: boolean; -} - -const ImageVideoInput = (props: ImageVideoInputProps) => { - return ; -}; - -export default ImageVideoInput; diff --git a/src/pages/register/RegisterPage.tsx b/src/pages/register/RegisterPage.tsx index 24010043..c8b640f3 100644 --- a/src/pages/register/RegisterPage.tsx +++ b/src/pages/register/RegisterPage.tsx @@ -1,7 +1,7 @@ -import DayModalInput from 'pages/register/DayModalInput'; -import MRegisterForm from 'pages/register/MRegisterForm'; -import StatusSelectGroup from './StatusSelectGroup'; -import RegisterHeader from './RegisterHeader'; +import DayModalInput from 'pages/register/components/DayModalInput'; +import MRegisterForm from 'pages/register/components/MRegisterForm'; +import StatusSelectGroup from './components/StatusSelectGroup'; +import RegisterHeader from './components/RegisterHeader'; const RegisterPage = () => { return ( diff --git a/src/pages/register/Calendar.tsx b/src/pages/register/components/Calendar.tsx similarity index 98% rename from src/pages/register/Calendar.tsx rename to src/pages/register/components/Calendar.tsx index 1a27cc48..6596719a 100644 --- a/src/pages/register/Calendar.tsx +++ b/src/pages/register/components/Calendar.tsx @@ -1,15 +1,12 @@ -import React, { useEffect, useState } from 'react'; +import { useState } from 'react'; import { useSetRecoilState } from 'recoil'; import registerState from 'recoil/registerState'; import { CurrentMonthDays, NextMonthDays, PrevMonthDays, -} from '../../commons/MonthDays'; - -interface CalendarProps { - handleClick: () => void; -} +} from '../../../commons/MonthDays'; +import { CalendarProps } from '../registerType'; const Calendar = ({ handleClick }: CalendarProps) => { const dayOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; diff --git a/src/pages/register/components/Dash.tsx b/src/pages/register/components/Dash.tsx new file mode 100644 index 00000000..c29863d9 --- /dev/null +++ b/src/pages/register/components/Dash.tsx @@ -0,0 +1,14 @@ +const Dash = () => { + return ( +
+ {Array.from({ length: 3 }).map((_, index) => ( +
+ ))} +
+ ); +}; + +export default Dash; diff --git a/src/pages/register/DayModalInput.tsx b/src/pages/register/components/DayModalInput.tsx similarity index 100% rename from src/pages/register/DayModalInput.tsx rename to src/pages/register/components/DayModalInput.tsx diff --git a/src/pages/register/DetailRadio.tsx b/src/pages/register/components/DetailRadio.tsx similarity index 68% rename from src/pages/register/DetailRadio.tsx rename to src/pages/register/components/DetailRadio.tsx index af7fa5be..47787b9a 100644 --- a/src/pages/register/DetailRadio.tsx +++ b/src/pages/register/components/DetailRadio.tsx @@ -1,11 +1,4 @@ -interface RadioProps { - name?: string; - label: string; - value: string; - selected?: boolean; - onChange: (e: React.ChangeEvent) => void; - onClick: (e: React.MouseEvent) => void; -} +import { RadioProps } from '../registerType'; const DetailRadio = ({ name, diff --git a/src/pages/register/FileInput.tsx b/src/pages/register/components/FileInput.tsx similarity index 88% rename from src/pages/register/FileInput.tsx rename to src/pages/register/components/FileInput.tsx index 739b8d1b..5b89d697 100644 --- a/src/pages/register/FileInput.tsx +++ b/src/pages/register/components/FileInput.tsx @@ -1,12 +1,4 @@ -interface FileInputProps { - handleInputChange: (e: React.ChangeEvent) => void; - handleCustomButtonClick: (file: React.RefObject) => void; - fileRef: React.RefObject; - isFileSelected: boolean; - fileType: string; - labelText: string; - uploadDescription: string; -} +import { FileInputProps } from '../registerType'; const FileInput = (props: FileInputProps) => { const { diff --git a/src/pages/register/components/ImageVideoInput.tsx b/src/pages/register/components/ImageVideoInput.tsx new file mode 100644 index 00000000..6d698697 --- /dev/null +++ b/src/pages/register/components/ImageVideoInput.tsx @@ -0,0 +1,8 @@ +import VImageVideoInput from './VImageVideoInput'; +import { ImageVideoInputProps } from '../registerType'; + +const ImageVideoInput = (props: ImageVideoInputProps) => { + return ; +}; + +export default ImageVideoInput; diff --git a/src/pages/register/MRegisterForm.tsx b/src/pages/register/components/MRegisterForm.tsx similarity index 100% rename from src/pages/register/MRegisterForm.tsx rename to src/pages/register/components/MRegisterForm.tsx diff --git a/src/pages/register/RadioGroup.tsx b/src/pages/register/components/RadioGroup.tsx similarity index 100% rename from src/pages/register/RadioGroup.tsx rename to src/pages/register/components/RadioGroup.tsx diff --git a/src/pages/register/RegisterHeader.tsx b/src/pages/register/components/RegisterHeader.tsx similarity index 100% rename from src/pages/register/RegisterHeader.tsx rename to src/pages/register/components/RegisterHeader.tsx diff --git a/src/pages/register/StatusScore.tsx b/src/pages/register/components/StatusScore.tsx similarity index 83% rename from src/pages/register/StatusScore.tsx rename to src/pages/register/components/StatusScore.tsx index 51f112ec..16e8da1f 100644 --- a/src/pages/register/StatusScore.tsx +++ b/src/pages/register/components/StatusScore.tsx @@ -1,22 +1,5 @@ -interface StatusProps { - status: string; - score: number; - selectedOption: number; - handleChange: (status: string, option: number) => void; -} - -const Dash = () => { - return ( -
- {Array.from({ length: 3 }).map((_, index) => ( -
- ))} -
- ); -}; +import Dash from './Dash'; +import { StatusProps } from '../registerType'; const StatusScore = ({ status, selectedOption, handleChange }: StatusProps) => { const getButtonColor = (option: string) => { diff --git a/src/pages/register/StatusSelectGroup.tsx b/src/pages/register/components/StatusSelectGroup.tsx similarity index 100% rename from src/pages/register/StatusSelectGroup.tsx rename to src/pages/register/components/StatusSelectGroup.tsx diff --git a/src/pages/register/VDayModalInput.tsx b/src/pages/register/components/VDayModalInput.tsx similarity index 89% rename from src/pages/register/VDayModalInput.tsx rename to src/pages/register/components/VDayModalInput.tsx index 3591ddf4..4d1aa056 100644 --- a/src/pages/register/VDayModalInput.tsx +++ b/src/pages/register/components/VDayModalInput.tsx @@ -1,11 +1,7 @@ -import Calendar from 'pages/register/Calendar'; +import Calendar from 'pages/register/components/Calendar'; import { useRecoilValue } from 'recoil'; import registerState from 'recoil/registerState'; - -interface DayModalProps { - open: boolean; - handleClick: () => void; -} +import { DayModalProps } from '../registerType'; const VDayModalInput = ({ open, handleClick }: DayModalProps) => { const protectionDate = useRecoilValue(registerState); diff --git a/src/pages/register/VImageVideoInput.tsx b/src/pages/register/components/VImageVideoInput.tsx similarity index 73% rename from src/pages/register/VImageVideoInput.tsx rename to src/pages/register/components/VImageVideoInput.tsx index 0dab3843..254a2c4a 100644 --- a/src/pages/register/VImageVideoInput.tsx +++ b/src/pages/register/components/VImageVideoInput.tsx @@ -1,13 +1,5 @@ -import FileInput from 'pages/register/FileInput'; - -interface VImageVideoInputProps { - handleInputChange: (e: React.ChangeEvent) => void; - imageRef: React.RefObject; - videoRef: React.RefObject; - handleCustomButtonClick: (file: React.RefObject) => void; - isImageSelected: boolean; - isVideoSelected: boolean; -} +import FileInput from 'pages/register/components/FileInput'; +import { VImageVideoInputProps } from '../registerType'; const VImageVideoInput = (props: VImageVideoInputProps) => { const { diff --git a/src/pages/register/VMRegisterForm.tsx b/src/pages/register/components/VMRegisterForm.tsx similarity index 95% rename from src/pages/register/VMRegisterForm.tsx rename to src/pages/register/components/VMRegisterForm.tsx index 9f9cc27c..0d931669 100644 --- a/src/pages/register/VMRegisterForm.tsx +++ b/src/pages/register/components/VMRegisterForm.tsx @@ -1,10 +1,7 @@ import InputGroup from 'commons/InputGroup'; -import RadioGroup from 'pages/register/RadioGroup'; +import RadioGroup from 'pages/register/components/RadioGroup'; import SelectBox from 'commons/SelectBox'; - -type RegisterProps = { - handleChange: (event: React.ChangeEvent) => void; -}; +import { RegisterProps } from '../registerType'; const VMRegisterForm = ({ handleChange }: RegisterProps) => { return ( diff --git a/src/pages/register/VRadioGroup.tsx b/src/pages/register/components/VRadioGroup.tsx similarity index 93% rename from src/pages/register/VRadioGroup.tsx rename to src/pages/register/components/VRadioGroup.tsx index d23d6204..a1a8ecde 100644 --- a/src/pages/register/VRadioGroup.tsx +++ b/src/pages/register/components/VRadioGroup.tsx @@ -1,19 +1,13 @@ import registerState, { RegisterType } from 'recoil/registerState'; import { useRecoilState } from 'recoil'; import DetailRadio from './DetailRadio'; +import { RadioGroupProps } from '../registerType'; export function checkIfAllFilled(data: RegisterType) { const allFieldsFilled = Object.values(data).every((value) => !!value); return allFieldsFilled; } -type RadioGroupProps = { - handleChange: (event: React.ChangeEvent) => void; - handleSexChange: (arg0: string) => void; - handleAdoptionStatusChange: (arg0: string) => void; - handleNeutralizationStatusChange: (arg0: string) => void; -}; - const VRadioGroup = ({ handleChange, handleSexChange, @@ -34,7 +28,6 @@ const VRadioGroup = ({ selected={petInfo.sex === 'MALE'} onClick={() => { handleSexChange('MALE'); - console.log(petInfo.sex); setPetInfo((prev) => ({ ...prev, isComplete: checkIfAllFilled(prev), @@ -49,7 +42,6 @@ const VRadioGroup = ({ selected={petInfo.sex === 'FEMALE'} onClick={() => { handleSexChange('FEMALE'); - console.log(petInfo.sex); setPetInfo((prev) => ({ ...prev, isComplete: checkIfAllFilled(prev), diff --git a/src/pages/register/registerType.d.ts b/src/pages/register/registerType.d.ts new file mode 100644 index 00000000..1faced67 --- /dev/null +++ b/src/pages/register/registerType.d.ts @@ -0,0 +1,63 @@ +export interface CalendarProps { + handleClick: () => void; +} + +export interface RadioProps { + name?: string; + label: string; + value: string; + selected?: boolean; + onChange: (e: React.ChangeEvent) => void; + onClick: (e: React.MouseEvent) => void; +} + +export interface FileInputProps { + handleInputChange: (e: React.ChangeEvent) => void; + handleCustomButtonClick: (file: React.RefObject) => void; + fileRef: React.RefObject; + isFileSelected: boolean; + fileType: string; + labelText: string; + uploadDescription: string; +} + +export interface ImageVideoInputProps { + handleInputChange: (e: React.ChangeEvent) => void; + imageRef: React.RefObject; + videoRef: React.RefObject; + handleCustomButtonClick: (file: React.RefObject) => void; + isImageSelected: boolean; + isVideoSelected: boolean; +} + +export interface StatusProps { + status: string; + score: number; + selectedOption: number; + handleChange: (status: string, option: number) => void; +} + +export interface DayModalProps { + open: boolean; + handleClick: () => void; +} + +export interface VImageVideoInputProps { + handleInputChange: (e: React.ChangeEvent) => void; + imageRef: React.RefObject; + videoRef: React.RefObject; + handleCustomButtonClick: (file: React.RefObject) => void; + isImageSelected: boolean; + isVideoSelected: boolean; +} + +export interface RegisterProps { + handleChange: (event: React.ChangeEvent) => void; +} + +export interface RadioGroupProps { + handleChange: (event: React.ChangeEvent) => void; + handleSexChange: (arg0: string) => void; + handleAdoptionStatusChange: (arg0: string) => void; + handleNeutralizationStatusChange: (arg0: string) => void; +} diff --git a/src/pages/shelterInfo/ShelterInfoPage.tsx b/src/pages/shelterInfo/ShelterInfoPage.tsx index 43450e60..883b188d 100644 --- a/src/pages/shelterInfo/ShelterInfoPage.tsx +++ b/src/pages/shelterInfo/ShelterInfoPage.tsx @@ -1,4 +1,4 @@ -import ShelterInfo from './ShelterInfo'; +import ShelterInfo from './components/ShelterInfo'; const ShelterInfoPage = () => { return ( diff --git a/src/pages/shelterInfo/ShelterInfo.tsx b/src/pages/shelterInfo/components/ShelterInfo.tsx similarity index 90% rename from src/pages/shelterInfo/ShelterInfo.tsx rename to src/pages/shelterInfo/components/ShelterInfo.tsx index 17a3f935..ac4de87e 100644 --- a/src/pages/shelterInfo/ShelterInfo.tsx +++ b/src/pages/shelterInfo/components/ShelterInfo.tsx @@ -2,7 +2,7 @@ import { useNavigate, useParams } from 'react-router-dom'; import { useEffect, useState } from 'react'; import { useQuery } from '@tanstack/react-query'; import useFetch from 'commons/apis/useFetch'; -import VShelterInfo, { Props } from './VShelterInfo'; +import VShelterInfo, { ShelterInfoPageProps } from './VShelterInfo'; import ShelterInfoSkeleton from './ShelterInfoSkeleton'; const ShelterInfo = () => { @@ -11,7 +11,7 @@ const ShelterInfo = () => { const params = useParams(); const shelterId = params.id; - const [profiles, setProfiles] = useState(null); + const [profiles, setProfiles] = useState(null); const { data, isLoading, isError } = useQuery({ queryKey: ['page', currentPage], @@ -38,7 +38,7 @@ const ShelterInfo = () => { }; const profileListData = data.petList.pets; - const props: Props = { + const props: ShelterInfoPageProps = { shelterInfoProps: shelterInfoData, pageNationProps: pageData, profileProps: profileListData, diff --git a/src/pages/shelterInfo/ShelterInfoSkeleton.tsx b/src/pages/shelterInfo/components/ShelterInfoSkeleton.tsx similarity index 100% rename from src/pages/shelterInfo/ShelterInfoSkeleton.tsx rename to src/pages/shelterInfo/components/ShelterInfoSkeleton.tsx diff --git a/src/pages/shelterInfo/VShelterCard.tsx b/src/pages/shelterInfo/components/VShelterCard.tsx similarity index 83% rename from src/pages/shelterInfo/VShelterCard.tsx rename to src/pages/shelterInfo/components/VShelterCard.tsx index aafe9f37..dd0c200e 100644 --- a/src/pages/shelterInfo/VShelterCard.tsx +++ b/src/pages/shelterInfo/components/VShelterCard.tsx @@ -1,11 +1,6 @@ -interface VShelterInfoProps { - name?: string; - id?: number; - adress?: string; - call?: string; -} +import { VShelterInfoProps } from '../shelterInfoType'; -const VShelterCard = ({ name, id, adress, call }: VShelterInfoProps) => ( +const VShelterCard = ({ name, adress, call }: VShelterInfoProps) => (
diff --git a/src/pages/shelterInfo/VShelterInfo.tsx b/src/pages/shelterInfo/components/VShelterInfo.tsx similarity index 86% rename from src/pages/shelterInfo/VShelterInfo.tsx rename to src/pages/shelterInfo/components/VShelterInfo.tsx index 698ed1bc..866f71c3 100644 --- a/src/pages/shelterInfo/VShelterInfo.tsx +++ b/src/pages/shelterInfo/components/VShelterInfo.tsx @@ -1,9 +1,6 @@ import Pagination from 'commons/VPagenation'; -import ProfileCard from 'pages/profileList/ProfileCard'; -import { ProfileListProps } from 'pages/profileList/VProfileListHome'; +import ProfileCard from 'pages/profileList/components/ProfileCard'; import { getCookie } from 'commons/cookie/cookie'; -import { link } from 'fs/promises'; -import { useHref } from 'react-router-dom'; import VShelterCard from './VShelterCard'; export interface ShelterInfoProps { @@ -22,7 +19,7 @@ export interface PageNationProps { export interface ProfileProps { map( - arg0: (item: any, index: any) => import('react/jsx-runtime').JSX.Element, + arg0: (item: any, index: number) => import('react/jsx-runtime').JSX.Element, ): import('react').ReactNode; profileImageUrl: string; id: number; @@ -31,13 +28,13 @@ export interface ProfileProps { age: number; } -export interface Props { +export interface ShelterInfoPageProps { profileProps: ProfileProps; shelterInfoProps: ShelterInfoProps; pageNationProps: PageNationProps; } -const VShelterInfo = (props: Props) => { +const VShelterInfo = (props: ShelterInfoPageProps) => { const loginAccount = getCookie('accountInfo'); const role = loginAccount ? loginAccount.split(' ')[0] : ''; const id = loginAccount ? loginAccount.split(' ')[1] : ''; @@ -71,7 +68,6 @@ const VShelterInfo = (props: Props) => { : ' text-transparent ' }`} onClick={() => { - console.log('안녕', item.id); // eslint-disable-next-line no-restricted-globals location.href = `/pet-update/${item.id}`; }} diff --git a/src/pages/shelterInfo/shelterInfoType.d.ts b/src/pages/shelterInfo/shelterInfoType.d.ts new file mode 100644 index 00000000..8dfadfcb --- /dev/null +++ b/src/pages/shelterInfo/shelterInfoType.d.ts @@ -0,0 +1,6 @@ +export interface VShelterInfoProps { + name?: string; + id?: number; + adress?: string; + call?: string; +} diff --git a/src/pages/signUp/VSignupPage.tsx b/src/pages/signUp/VSignupPage.tsx index df8f5a1d..9ae36262 100644 --- a/src/pages/signUp/VSignupPage.tsx +++ b/src/pages/signUp/VSignupPage.tsx @@ -1,12 +1,9 @@ import Banner from 'commons/Banner'; import LogoButton from 'commons/LogoButton'; import SignupInputForm from 'pages/signUp/components/SignupInputForm'; +import { SignupPageProps } from './signupType'; -type Props = { - redirectLoginPage: () => void; -}; - -const VSignupPage = ({ redirectLoginPage }: Props) => { +const VSignupPage = ({ redirectLoginPage }: SignupPageProps) => { return (
{ // 이메일 중복 검사 api const duplicateCheck = async () => { setIsLoading((prev) => ({ ...prev, duplicateCheckIsLoading: true })); - const response = await fetch(`${process.env.REACT_APP_URI}/account/email`, { + await fetch(`${process.env.REACT_APP_URI}/account/email`, { method: 'POST', headers: { 'Content-Type': 'application/json', @@ -154,7 +154,7 @@ const SignupInputForm = () => { }) .then((data) => { if (!data.success) { - alert(data.error.message); // 이 부분은 주소 받는 거 때문에 그냥 텍스트만 넣기 애매함 + alert(data.error.message); } else { navigate('/login'); } diff --git a/src/pages/signUp/components/VAddressInputGroup.tsx b/src/pages/signUp/components/VAddressInputGroup.tsx index 0db33be8..1cb1f471 100644 --- a/src/pages/signUp/components/VAddressInputGroup.tsx +++ b/src/pages/signUp/components/VAddressInputGroup.tsx @@ -1,11 +1,12 @@ import Container from 'commons/Container'; import Postcode from 'commons/PostCode'; -import { useRecoilState } from 'recoil'; +import { useRecoilValue } from 'recoil'; import { shelterSignupState } from 'recoil/shelterState'; import { AddressInputProps } from '../signupType'; const VAddressInputGroup = ({ handleChange }: AddressInputProps) => { - const [shelterInfo, setShelterInfo] = useRecoilState(shelterSignupState); + const shelterInfo = useRecoilValue(shelterSignupState); + return (
diff --git a/src/pages/signUp/components/VSignupInputForm.tsx b/src/pages/signUp/components/VSignupInputForm.tsx index 4af71907..17356e86 100644 --- a/src/pages/signUp/components/VSignupInputForm.tsx +++ b/src/pages/signUp/components/VSignupInputForm.tsx @@ -1,11 +1,8 @@ import AddressInputGroup from 'pages/signUp/components/AddressInputGroup'; import InputGroup from 'commons/InputGroup'; import { ClipLoader } from 'react-spinners'; -import { VSignupInputProps, ValidationProps } from '../signupType'; - -const ValidateText = ({ text, className }: ValidationProps) => { - return text ?
{text}
: null; -}; +import { VSignupInputProps } from '../signupType'; +import ValidateText from './ValidateText'; const VSignupInputForm = ({ handleChange, diff --git a/src/pages/signUp/components/ValidateText.tsx b/src/pages/signUp/components/ValidateText.tsx new file mode 100644 index 00000000..e2601a5d --- /dev/null +++ b/src/pages/signUp/components/ValidateText.tsx @@ -0,0 +1,7 @@ +import { ValidationProps } from '../signupType'; + +const ValidateText = ({ text, className }: ValidationProps) => { + return text ?
{text}
: null; +}; + +export default ValidateText; diff --git a/src/pages/signUp/signupType.d.ts b/src/pages/signUp/signupType.d.ts index 8b85980c..239f8a88 100644 --- a/src/pages/signUp/signupType.d.ts +++ b/src/pages/signUp/signupType.d.ts @@ -35,3 +35,7 @@ export interface VSignupInputProps { errors: Partial; isLoading: LoadingProps; } + +export interface SignupPageProps { + redirectLoginPage: () => void; +} diff --git a/src/pages/update/UpdatePage.tsx b/src/pages/update/UpdatePage.tsx index 55f9a797..b47f93e5 100644 --- a/src/pages/update/UpdatePage.tsx +++ b/src/pages/update/UpdatePage.tsx @@ -1,6 +1,6 @@ import { Suspense } from 'react'; import ErrorBoundary from 'commons/ErrorBoundary'; -import UpdateTemplate from './UpdateTemplate'; +import UpdateTemplate from './components/UpdateTemplate'; const UpdatePage = () => { return ( diff --git a/src/pages/update/PatchStatusSelectGroup.tsx b/src/pages/update/components/PatchStatusSelectGroup.tsx similarity index 83% rename from src/pages/update/PatchStatusSelectGroup.tsx rename to src/pages/update/components/PatchStatusSelectGroup.tsx index 386d67c3..932ab68d 100644 --- a/src/pages/update/PatchStatusSelectGroup.tsx +++ b/src/pages/update/components/PatchStatusSelectGroup.tsx @@ -1,20 +1,7 @@ -import StatusScore from 'pages/register/StatusScore'; -import React, { useState } from 'react'; -import { SetterOrUpdater } from 'recoil'; +import StatusScore from 'pages/register/components/StatusScore'; +import { useState } from 'react'; import { RegisterType } from 'recoil/registerState'; - -interface PetStatusType { - intelligence: number; - affinity: number; - athletic: number; - adaptability: number; - activeness: number; -} - -interface PetStatusProps { - petStatus: PetStatusType; - setUpdateState: SetterOrUpdater; -} +import { PetStatusProps } from '../updateType'; const PatchStatusSelectGroup = ({ petStatus, @@ -33,7 +20,7 @@ const PatchStatusSelectGroup = ({ switch (status) { case 'intelligence': setIntelligenceOption(option); - setUpdateState((prev) => ({ + setUpdateState((prev: RegisterType) => ({ ...prev, petPolygonProfileDto: { ...prev.petPolygonProfileDto, @@ -43,7 +30,7 @@ const PatchStatusSelectGroup = ({ break; case 'affinity': setAffinityOption(option); - setUpdateState((prev) => ({ + setUpdateState((prev: RegisterType) => ({ ...prev, petPolygonProfileDto: { ...prev.petPolygonProfileDto, @@ -53,7 +40,7 @@ const PatchStatusSelectGroup = ({ break; case 'athletic': setAthleticOption(option); - setUpdateState((prev) => ({ + setUpdateState((prev: RegisterType) => ({ ...prev, petPolygonProfileDto: { ...prev.petPolygonProfileDto, @@ -63,7 +50,7 @@ const PatchStatusSelectGroup = ({ break; case 'adaptability': setAdaptabilityOption(option); - setUpdateState((prev) => ({ + setUpdateState((prev: RegisterType) => ({ ...prev, petPolygonProfileDto: { ...prev.petPolygonProfileDto, @@ -73,7 +60,7 @@ const PatchStatusSelectGroup = ({ break; case 'activeness': setActivenessOption(option); - setUpdateState((prev) => ({ + setUpdateState((prev: RegisterType) => ({ ...prev, petPolygonProfileDto: { ...prev.petPolygonProfileDto, diff --git a/src/pages/update/UpdateHeader.tsx b/src/pages/update/components/UpdateHeader.tsx similarity index 98% rename from src/pages/update/UpdateHeader.tsx rename to src/pages/update/components/UpdateHeader.tsx index 63ff3177..72f5fab8 100644 --- a/src/pages/update/UpdateHeader.tsx +++ b/src/pages/update/components/UpdateHeader.tsx @@ -8,7 +8,7 @@ import { useState, useRef } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; import { useRecoilValue } from 'recoil'; import registerState from 'recoil/registerState'; -import ImageVideoInput from '../register/ImageVideoInput'; +import ImageVideoInput from '../../register/components/ImageVideoInput'; const UpdateHeader = () => { const [selectedImageFile, setSelectedImageFile] = useState(); diff --git a/src/pages/update/UpdateRegisterForm.tsx b/src/pages/update/components/UpdateRegisterForm.tsx similarity index 84% rename from src/pages/update/UpdateRegisterForm.tsx rename to src/pages/update/components/UpdateRegisterForm.tsx index b9c55640..bfb0aef5 100644 --- a/src/pages/update/UpdateRegisterForm.tsx +++ b/src/pages/update/components/UpdateRegisterForm.tsx @@ -1,14 +1,10 @@ -import { useState } from 'react'; -import { useRecoilState } from 'recoil'; +import { useSetRecoilState } from 'recoil'; import registerState, { RegisterType } from 'recoil/registerState'; import VMRegisterForm from './VUpdateRegisterForm'; - -interface PetProps { - petInfo: RegisterType; -} +import { PetProps } from '../updateType'; const UpdateRegisterForm = ({ petInfo }: PetProps) => { - const [petInfoState, setPetInfoState] = useRecoilState(registerState); + const setPetInfoState = useSetRecoilState(registerState); const PET_INFO_REQUIRED_KEY: (keyof RegisterType)[] = [ 'age', 'name', diff --git a/src/pages/update/UpdateTemplate.tsx b/src/pages/update/components/UpdateTemplate.tsx similarity index 84% rename from src/pages/update/UpdateTemplate.tsx rename to src/pages/update/components/UpdateTemplate.tsx index 3baf83fc..6e96be79 100644 --- a/src/pages/update/UpdateTemplate.tsx +++ b/src/pages/update/components/UpdateTemplate.tsx @@ -1,10 +1,10 @@ import { useQuery } from '@tanstack/react-query'; import { getCookie } from 'commons/cookie/cookie'; -import { useEffect, useState } from 'react'; +import { useState } from 'react'; import { useParams } from 'react-router-dom'; import { useRecoilState } from 'recoil'; import registerState from 'recoil/registerState'; -import DayModalInput from 'pages/register/DayModalInput'; +import DayModalInput from 'pages/register/components/DayModalInput'; import UpdateHeader from './UpdateHeader'; import PatchStatusSelectGroup from './PatchStatusSelectGroup'; import UpdateRegisterForm from './UpdateRegisterForm'; @@ -14,12 +14,12 @@ const UpdateTemplate = () => { const petId = params.id; const cookie = getCookie('loginToken'); const [updateState, setUpdateState] = useRecoilState(registerState); + // 여기는 setError를 안 쓰고 밑에서 new Error를 받아서 쓰고 있는데, 차라리 error를 useQuery에서 받는 게 어떤가요? const [error, setError] = useState({ isError: false, errorMessage: '', }); - // petInfo return const getPetInfo = async () => { const res = await fetch( `${process.env.REACT_APP_URI}/pet/register-info/${petId}`, @@ -43,7 +43,7 @@ const UpdateTemplate = () => { return res; }; - const { data, isLoading, isError } = useQuery({ + const { isError } = useQuery({ queryKey: ['pet-update'], queryFn: () => getPetInfo(), onSuccess: (fetchedData) => { @@ -53,13 +53,6 @@ const UpdateTemplate = () => { suspense: true, }); - // 데이터 들어오는 것 확인 용도 - useEffect(() => { - if (!isLoading && data) { - console.log('status: ', updateState); - } - }, [updateState]); - if (isError) { return
{error.errorMessage}
; } diff --git a/src/pages/update/VUpdateRegisterForm.tsx b/src/pages/update/components/VUpdateRegisterForm.tsx similarity index 89% rename from src/pages/update/VUpdateRegisterForm.tsx rename to src/pages/update/components/VUpdateRegisterForm.tsx index 6102bba5..45b8fb6c 100644 --- a/src/pages/update/VUpdateRegisterForm.tsx +++ b/src/pages/update/components/VUpdateRegisterForm.tsx @@ -1,18 +1,9 @@ -import RadioGroup from 'pages/register/RadioGroup'; -import SelectBox, { IdProps } from 'commons/SelectBox'; -import { RegisterType } from 'recoil/registerState'; +import RadioGroup from 'pages/register/components/RadioGroup'; +import SelectBox from 'commons/SelectBox'; import InputGroup from 'commons/InputGroup'; +import { RegisterProps } from '../updateType'; -type RegisterProps = { - handleChange: (event: React.ChangeEvent) => void; - petInfo: RegisterType; -}; - -const VMRegisterForm = ( - { handleChange, petInfo }: RegisterProps, - { id }: IdProps, -) => { - console.log('dk', petInfo); +const VMRegisterForm = ({ handleChange, petInfo }: RegisterProps) => { return (
diff --git a/src/pages/update/updateType.d.ts b/src/pages/update/updateType.d.ts new file mode 100644 index 00000000..31236761 --- /dev/null +++ b/src/pages/update/updateType.d.ts @@ -0,0 +1,23 @@ +import { RegisterType } from 'recoil/registerState'; + +export interface PetStatusType { + intelligence: number; + affinity: number; + athletic: number; + adaptability: number; + activeness: number; +} + +export interface PetStatusProps { + petStatus: PetStatusType; + setUpdateState: SetterOrUpdater; +} + +export interface PetProps { + petInfo: RegisterType; +} + +export interface RegisterProps { + handleChange: (event: React.ChangeEvent) => void; + petInfo: RegisterType; +} From 89f62acf2b7d02fc51c44050b5247aff39b4b8d6 Mon Sep 17 00:00:00 2001 From: JeonDoGyun Date: Fri, 10 Nov 2023 15:19:52 +0900 Subject: [PATCH 5/7] =?UTF-8?q?refactor:=20commons=20=EB=94=94=EB=A0=89?= =?UTF-8?q?=ED=86=A0=EB=A6=AC=20=EA=B5=AC=EC=A1=B0=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 공용 컴포넌트의 경우, 타입을 따로 빼는 것이 불필요하다고 생각하여 type.d.ts 파일을 따로 만들지 않았습니다. --- src/App.tsx | 1 - src/commons/{ => components}/Banner.tsx | 0 src/commons/{ => components}/Container.tsx | 0 src/commons/{ => components}/DetailRadio.tsx | 0 src/commons/{ => components}/Input.tsx | 2 +- src/commons/{ => components}/InputGroup.tsx | 2 +- src/commons/{ => components}/LogoButton.tsx | 0 src/commons/{ => components}/MonthDays.tsx | 0 src/commons/{ => components}/Pagenation.tsx | 0 src/commons/{ => components}/PostCode.tsx | 0 src/commons/{ => components}/SelectBox.tsx | 0 src/commons/{ => components}/StringWithLineBreak.tsx | 0 src/commons/{ => components}/UserDropdownBox.tsx | 2 +- src/commons/{ => components}/UserToggleBox.tsx | 2 +- src/commons/{ => components}/VPagenation.tsx | 0 src/{commons => layouts}/ErrorBoundary.tsx | 0 src/layouts/VGNB.tsx | 4 ++-- src/layouts/VLargeGNB.tsx | 4 ++-- src/pages/detailPet/DetailPetPage.tsx | 2 +- src/pages/editProfile/VEditProfilePage.tsx | 4 ++-- src/pages/editProfile/components/EditProfilePageSkeleton.tsx | 2 +- src/pages/home/HomePage.tsx | 2 +- src/pages/login/VLoginPage.tsx | 4 ++-- src/pages/login/components/VLoginInputForm.tsx | 2 +- src/pages/map/MapPage.tsx | 2 +- src/pages/profileList/newList/VNewList.tsx | 2 +- src/pages/profileList/urgentList/VUrgentList.tsx | 2 +- src/pages/register/components/VMRegisterForm.tsx | 4 ++-- src/pages/shelterInfo/components/VShelterInfo.tsx | 2 +- src/pages/signUp/VSignupPage.tsx | 4 ++-- src/pages/signUp/components/VAddressInputGroup.tsx | 2 +- src/pages/signUp/components/VSignupInputForm.tsx | 2 +- src/pages/update/UpdatePage.tsx | 2 +- src/pages/update/components/VUpdateRegisterForm.tsx | 4 ++-- 34 files changed, 29 insertions(+), 30 deletions(-) rename src/commons/{ => components}/Banner.tsx (100%) rename src/commons/{ => components}/Container.tsx (100%) rename src/commons/{ => components}/DetailRadio.tsx (100%) rename src/commons/{ => components}/Input.tsx (87%) rename src/commons/{ => components}/InputGroup.tsx (94%) rename src/commons/{ => components}/LogoButton.tsx (100%) rename src/commons/{ => components}/MonthDays.tsx (100%) rename src/commons/{ => components}/Pagenation.tsx (100%) rename src/commons/{ => components}/PostCode.tsx (100%) rename src/commons/{ => components}/SelectBox.tsx (100%) rename src/commons/{ => components}/StringWithLineBreak.tsx (100%) rename src/commons/{ => components}/UserDropdownBox.tsx (98%) rename src/commons/{ => components}/UserToggleBox.tsx (97%) rename src/commons/{ => components}/VPagenation.tsx (100%) rename src/{commons => layouts}/ErrorBoundary.tsx (100%) diff --git a/src/App.tsx b/src/App.tsx index 249b883f..1d9d0811 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -17,7 +17,6 @@ import ValidateCheckLayout from 'layouts/ValidateCheckLayout'; import EditProfilePage from 'pages/editProfile/EditProfilePage'; import GNB from 'layouts/GNB'; import NotFound from 'pages/notFound/NotFound'; -import ErrorBoundary from 'commons/ErrorBoundary'; const queryClient = new QueryClient({ defaultOptions: { diff --git a/src/commons/Banner.tsx b/src/commons/components/Banner.tsx similarity index 100% rename from src/commons/Banner.tsx rename to src/commons/components/Banner.tsx diff --git a/src/commons/Container.tsx b/src/commons/components/Container.tsx similarity index 100% rename from src/commons/Container.tsx rename to src/commons/components/Container.tsx diff --git a/src/commons/DetailRadio.tsx b/src/commons/components/DetailRadio.tsx similarity index 100% rename from src/commons/DetailRadio.tsx rename to src/commons/components/DetailRadio.tsx diff --git a/src/commons/Input.tsx b/src/commons/components/Input.tsx similarity index 87% rename from src/commons/Input.tsx rename to src/commons/components/Input.tsx index 8bf9bebe..ab13cd34 100644 --- a/src/commons/Input.tsx +++ b/src/commons/components/Input.tsx @@ -1,4 +1,4 @@ -import { InputGroupProps } from 'commons/InputGroup'; +import { InputGroupProps } from 'commons/components/InputGroup'; const Input = ({ id, diff --git a/src/commons/InputGroup.tsx b/src/commons/components/InputGroup.tsx similarity index 94% rename from src/commons/InputGroup.tsx rename to src/commons/components/InputGroup.tsx index c36cde88..46435323 100644 --- a/src/commons/InputGroup.tsx +++ b/src/commons/components/InputGroup.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import Container from 'commons/Container'; +import Container from 'commons/components/Container'; import Input from 'commons/Input'; export interface InputGroupProps diff --git a/src/commons/LogoButton.tsx b/src/commons/components/LogoButton.tsx similarity index 100% rename from src/commons/LogoButton.tsx rename to src/commons/components/LogoButton.tsx diff --git a/src/commons/MonthDays.tsx b/src/commons/components/MonthDays.tsx similarity index 100% rename from src/commons/MonthDays.tsx rename to src/commons/components/MonthDays.tsx diff --git a/src/commons/Pagenation.tsx b/src/commons/components/Pagenation.tsx similarity index 100% rename from src/commons/Pagenation.tsx rename to src/commons/components/Pagenation.tsx diff --git a/src/commons/PostCode.tsx b/src/commons/components/PostCode.tsx similarity index 100% rename from src/commons/PostCode.tsx rename to src/commons/components/PostCode.tsx diff --git a/src/commons/SelectBox.tsx b/src/commons/components/SelectBox.tsx similarity index 100% rename from src/commons/SelectBox.tsx rename to src/commons/components/SelectBox.tsx diff --git a/src/commons/StringWithLineBreak.tsx b/src/commons/components/StringWithLineBreak.tsx similarity index 100% rename from src/commons/StringWithLineBreak.tsx rename to src/commons/components/StringWithLineBreak.tsx diff --git a/src/commons/UserDropdownBox.tsx b/src/commons/components/UserDropdownBox.tsx similarity index 98% rename from src/commons/UserDropdownBox.tsx rename to src/commons/components/UserDropdownBox.tsx index b6018515..6458e628 100644 --- a/src/commons/UserDropdownBox.tsx +++ b/src/commons/components/UserDropdownBox.tsx @@ -1,6 +1,6 @@ import { useNavigate } from 'react-router-dom'; import { useState } from 'react'; -import { getCookie, removeToken } from './cookie/cookie'; +import { getCookie, removeToken } from '../cookie/cookie'; // 로그인 되었을 때 상태를 보여주는 SelectBox 제작 const UserDropdownBox = () => { diff --git a/src/commons/UserToggleBox.tsx b/src/commons/components/UserToggleBox.tsx similarity index 97% rename from src/commons/UserToggleBox.tsx rename to src/commons/components/UserToggleBox.tsx index cfa417f9..59f6a62c 100644 --- a/src/commons/UserToggleBox.tsx +++ b/src/commons/components/UserToggleBox.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import { useNavigate } from 'react-router-dom'; -import { getCookie, removeToken } from './cookie/cookie'; +import { getCookie, removeToken } from '../cookie/cookie'; const UserToggleBox = () => { const token = getCookie('loginToken'); diff --git a/src/commons/VPagenation.tsx b/src/commons/components/VPagenation.tsx similarity index 100% rename from src/commons/VPagenation.tsx rename to src/commons/components/VPagenation.tsx diff --git a/src/commons/ErrorBoundary.tsx b/src/layouts/ErrorBoundary.tsx similarity index 100% rename from src/commons/ErrorBoundary.tsx rename to src/layouts/ErrorBoundary.tsx diff --git a/src/layouts/VGNB.tsx b/src/layouts/VGNB.tsx index 4dffa21d..cfcfda4a 100644 --- a/src/layouts/VGNB.tsx +++ b/src/layouts/VGNB.tsx @@ -1,5 +1,5 @@ -import LogoButton from 'commons/LogoButton'; -import UserToggleBox from 'commons/UserToggleBox'; +import LogoButton from 'commons/components/LogoButton'; +import UserToggleBox from 'commons/components/UserToggleBox'; import { Link } from 'react-router-dom'; export interface VGNBProps { diff --git a/src/layouts/VLargeGNB.tsx b/src/layouts/VLargeGNB.tsx index 54d42842..ca76b85f 100644 --- a/src/layouts/VLargeGNB.tsx +++ b/src/layouts/VLargeGNB.tsx @@ -1,6 +1,6 @@ import { Link } from 'react-router-dom'; -import LogoButton from 'commons/LogoButton'; -import UserSelectBox from 'commons/UserDropdownBox'; +import LogoButton from 'commons/components/LogoButton'; +import UserSelectBox from 'commons/components/UserDropdownBox'; export interface VLargeGNBProps { handleCategoryButtonClick: () => void; diff --git a/src/pages/detailPet/DetailPetPage.tsx b/src/pages/detailPet/DetailPetPage.tsx index bf8308d0..937d5a81 100644 --- a/src/pages/detailPet/DetailPetPage.tsx +++ b/src/pages/detailPet/DetailPetPage.tsx @@ -1,5 +1,5 @@ import DetailPetData from 'pages/detailPet/components/DetailPetData'; -import ErrorBoundary from 'commons/ErrorBoundary'; +import ErrorBoundary from 'layouts/ErrorBoundary'; const DetailPetPage = () => { return ( diff --git a/src/pages/editProfile/VEditProfilePage.tsx b/src/pages/editProfile/VEditProfilePage.tsx index 2d72ea68..afffcede 100644 --- a/src/pages/editProfile/VEditProfilePage.tsx +++ b/src/pages/editProfile/VEditProfilePage.tsx @@ -1,5 +1,5 @@ -import Banner from 'commons/Banner'; -import InputGroup from 'commons/InputGroup'; +import Banner from 'commons/components/Banner'; +import InputGroup from 'commons/components/InputGroup'; import { ClipLoader } from 'react-spinners'; import { shelterSignupState } from 'recoil/shelterState'; import { useRecoilValue } from 'recoil'; diff --git a/src/pages/editProfile/components/EditProfilePageSkeleton.tsx b/src/pages/editProfile/components/EditProfilePageSkeleton.tsx index fe2f6831..8ee08edd 100644 --- a/src/pages/editProfile/components/EditProfilePageSkeleton.tsx +++ b/src/pages/editProfile/components/EditProfilePageSkeleton.tsx @@ -1,4 +1,4 @@ -import Banner from 'commons/Banner'; +import Banner from 'commons/components/Banner'; const EditProfilePageSkeleton = () => { return ( diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx index eaaae6a9..21ac9cc1 100644 --- a/src/pages/home/HomePage.tsx +++ b/src/pages/home/HomePage.tsx @@ -1,5 +1,5 @@ import { Suspense } from 'react'; -import ErrorBoundary from 'commons/ErrorBoundary'; +import ErrorBoundary from 'layouts/ErrorBoundary'; import Home from './Home'; import Skeleton from './Skeleton'; diff --git a/src/pages/login/VLoginPage.tsx b/src/pages/login/VLoginPage.tsx index fc7aeac7..c3f9225f 100644 --- a/src/pages/login/VLoginPage.tsx +++ b/src/pages/login/VLoginPage.tsx @@ -1,5 +1,5 @@ -import Banner from 'commons/Banner'; -import LogoButton from 'commons/LogoButton'; +import Banner from 'commons/components/Banner'; +import LogoButton from 'commons/components/LogoButton'; import LoginInputForm from 'pages/login/components/LoginInputForm'; import { VLoginPageProps } from './loginType'; diff --git a/src/pages/login/components/VLoginInputForm.tsx b/src/pages/login/components/VLoginInputForm.tsx index 4df49885..f221a9b8 100644 --- a/src/pages/login/components/VLoginInputForm.tsx +++ b/src/pages/login/components/VLoginInputForm.tsx @@ -1,4 +1,4 @@ -import InputGroup from 'commons/InputGroup'; +import InputGroup from 'commons/components/InputGroup'; import { ClipLoader } from 'react-spinners'; import { LoginInputFormProps, ValidationTextProps } from '../loginType'; diff --git a/src/pages/map/MapPage.tsx b/src/pages/map/MapPage.tsx index 6d181acb..c3ebf2b4 100644 --- a/src/pages/map/MapPage.tsx +++ b/src/pages/map/MapPage.tsx @@ -1,5 +1,5 @@ import Map from 'pages/map/components/Map'; -import ErrorBoundary from 'commons/ErrorBoundary'; +import ErrorBoundary from 'layouts/ErrorBoundary'; const MapPage = () => { return ( diff --git a/src/pages/profileList/newList/VNewList.tsx b/src/pages/profileList/newList/VNewList.tsx index 358a36c3..ae34088e 100644 --- a/src/pages/profileList/newList/VNewList.tsx +++ b/src/pages/profileList/newList/VNewList.tsx @@ -1,5 +1,5 @@ import ProfileCard from 'pages/profileList/components/ProfileCard'; -import Pagination from '../../../commons/Pagenation'; +import Pagination from '../../../commons/components/Pagenation'; import { VNewListProps } from '../profileListType'; const VNewList = (props: VNewListProps) => ( diff --git a/src/pages/profileList/urgentList/VUrgentList.tsx b/src/pages/profileList/urgentList/VUrgentList.tsx index f67cfe1b..38c7e5d5 100644 --- a/src/pages/profileList/urgentList/VUrgentList.tsx +++ b/src/pages/profileList/urgentList/VUrgentList.tsx @@ -1,5 +1,5 @@ import ProfileCard from 'pages/profileList/components/ProfileCard'; -import Pagination from '../../../commons/Pagenation'; +import Pagination from '../../../commons/components/Pagenation'; import { VUrgentListProps } from '../profileListType'; const VUrgentList = (props: VUrgentListProps) => { diff --git a/src/pages/register/components/VMRegisterForm.tsx b/src/pages/register/components/VMRegisterForm.tsx index 0d931669..6bd3ce64 100644 --- a/src/pages/register/components/VMRegisterForm.tsx +++ b/src/pages/register/components/VMRegisterForm.tsx @@ -1,6 +1,6 @@ -import InputGroup from 'commons/InputGroup'; +import InputGroup from 'commons/components/InputGroup'; import RadioGroup from 'pages/register/components/RadioGroup'; -import SelectBox from 'commons/SelectBox'; +import SelectBox from 'commons/components/SelectBox'; import { RegisterProps } from '../registerType'; const VMRegisterForm = ({ handleChange }: RegisterProps) => { diff --git a/src/pages/shelterInfo/components/VShelterInfo.tsx b/src/pages/shelterInfo/components/VShelterInfo.tsx index 866f71c3..0393025c 100644 --- a/src/pages/shelterInfo/components/VShelterInfo.tsx +++ b/src/pages/shelterInfo/components/VShelterInfo.tsx @@ -1,4 +1,4 @@ -import Pagination from 'commons/VPagenation'; +import Pagination from 'commons/components/VPagenation'; import ProfileCard from 'pages/profileList/components/ProfileCard'; import { getCookie } from 'commons/cookie/cookie'; import VShelterCard from './VShelterCard'; diff --git a/src/pages/signUp/VSignupPage.tsx b/src/pages/signUp/VSignupPage.tsx index 9ae36262..fae4d393 100644 --- a/src/pages/signUp/VSignupPage.tsx +++ b/src/pages/signUp/VSignupPage.tsx @@ -1,5 +1,5 @@ -import Banner from 'commons/Banner'; -import LogoButton from 'commons/LogoButton'; +import Banner from 'commons/components/Banner'; +import LogoButton from 'commons/components/LogoButton'; import SignupInputForm from 'pages/signUp/components/SignupInputForm'; import { SignupPageProps } from './signupType'; diff --git a/src/pages/signUp/components/VAddressInputGroup.tsx b/src/pages/signUp/components/VAddressInputGroup.tsx index 1cb1f471..5b187502 100644 --- a/src/pages/signUp/components/VAddressInputGroup.tsx +++ b/src/pages/signUp/components/VAddressInputGroup.tsx @@ -1,4 +1,4 @@ -import Container from 'commons/Container'; +import Container from 'commons/components/Container'; import Postcode from 'commons/PostCode'; import { useRecoilValue } from 'recoil'; import { shelterSignupState } from 'recoil/shelterState'; diff --git a/src/pages/signUp/components/VSignupInputForm.tsx b/src/pages/signUp/components/VSignupInputForm.tsx index 17356e86..26f2b69c 100644 --- a/src/pages/signUp/components/VSignupInputForm.tsx +++ b/src/pages/signUp/components/VSignupInputForm.tsx @@ -1,5 +1,5 @@ import AddressInputGroup from 'pages/signUp/components/AddressInputGroup'; -import InputGroup from 'commons/InputGroup'; +import InputGroup from 'commons/components/InputGroup'; import { ClipLoader } from 'react-spinners'; import { VSignupInputProps } from '../signupType'; import ValidateText from './ValidateText'; diff --git a/src/pages/update/UpdatePage.tsx b/src/pages/update/UpdatePage.tsx index b47f93e5..dc651966 100644 --- a/src/pages/update/UpdatePage.tsx +++ b/src/pages/update/UpdatePage.tsx @@ -1,5 +1,5 @@ import { Suspense } from 'react'; -import ErrorBoundary from 'commons/ErrorBoundary'; +import ErrorBoundary from 'layouts/ErrorBoundary'; import UpdateTemplate from './components/UpdateTemplate'; const UpdatePage = () => { diff --git a/src/pages/update/components/VUpdateRegisterForm.tsx b/src/pages/update/components/VUpdateRegisterForm.tsx index 45b8fb6c..c98b6434 100644 --- a/src/pages/update/components/VUpdateRegisterForm.tsx +++ b/src/pages/update/components/VUpdateRegisterForm.tsx @@ -1,6 +1,6 @@ import RadioGroup from 'pages/register/components/RadioGroup'; -import SelectBox from 'commons/SelectBox'; -import InputGroup from 'commons/InputGroup'; +import SelectBox from 'commons/components/SelectBox'; +import InputGroup from 'commons/components/InputGroup'; import { RegisterProps } from '../updateType'; const VMRegisterForm = ({ handleChange, petInfo }: RegisterProps) => { From 125fb63f602e5bcae16799a166cf7e4eeb84de9f Mon Sep 17 00:00:00 2001 From: JeonDoGyun Date: Fri, 10 Nov 2023 15:26:27 +0900 Subject: [PATCH 6/7] =?UTF-8?q?refactor:=20home=20=EB=94=94=EB=A0=89?= =?UTF-8?q?=ED=86=A0=EB=A6=AC=20=EA=B5=AC=EC=A1=B0=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/commons/components/InputGroup.tsx | 2 +- src/pages/home/HomePage.tsx | 4 +- src/pages/home/{ => components}/Home.tsx | 3 +- .../HomeSkeleton.tsx} | 0 src/pages/home/{ => components}/HomeVideo.tsx | 14 +- .../home/{ => components}/HomeVideoSlider.tsx | 140 ++++++++---------- .../home/{ => components}/VideoDragBar.tsx | 0 src/pages/home/{ => components}/VideoInfo.tsx | 7 +- .../home/{ => components}/VideoMuteIcon.tsx | 5 +- .../home/{ => components}/VideoOverlay.tsx | 9 +- src/pages/home/homeType.d.ts | 60 ++++++++ src/pages/register/components/Calendar.tsx | 2 +- .../signUp/components/VAddressInputGroup.tsx | 2 +- 13 files changed, 131 insertions(+), 117 deletions(-) rename src/pages/home/{ => components}/Home.tsx (96%) rename src/pages/home/{Skeleton.tsx => components/HomeSkeleton.tsx} (100%) rename src/pages/home/{ => components}/HomeVideo.tsx (89%) rename src/pages/home/{ => components}/HomeVideoSlider.tsx (55%) rename src/pages/home/{ => components}/VideoDragBar.tsx (100%) rename src/pages/home/{ => components}/VideoInfo.tsx (84%) rename src/pages/home/{ => components}/VideoMuteIcon.tsx (88%) rename src/pages/home/{ => components}/VideoOverlay.tsx (86%) create mode 100644 src/pages/home/homeType.d.ts diff --git a/src/commons/components/InputGroup.tsx b/src/commons/components/InputGroup.tsx index 46435323..5d3a5928 100644 --- a/src/commons/components/InputGroup.tsx +++ b/src/commons/components/InputGroup.tsx @@ -1,6 +1,6 @@ import React from 'react'; import Container from 'commons/components/Container'; -import Input from 'commons/Input'; +import Input from 'commons/components/Input'; export interface InputGroupProps extends React.HTMLAttributes { diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx index 21ac9cc1..11caa808 100644 --- a/src/pages/home/HomePage.tsx +++ b/src/pages/home/HomePage.tsx @@ -1,7 +1,7 @@ import { Suspense } from 'react'; import ErrorBoundary from 'layouts/ErrorBoundary'; -import Home from './Home'; -import Skeleton from './Skeleton'; +import Home from './components/Home'; +import Skeleton from './components/HomeSkeleton'; const HomePage = () => { return ( diff --git a/src/pages/home/Home.tsx b/src/pages/home/components/Home.tsx similarity index 96% rename from src/pages/home/Home.tsx rename to src/pages/home/components/Home.tsx index 940d2bc1..157fc326 100644 --- a/src/pages/home/Home.tsx +++ b/src/pages/home/components/Home.tsx @@ -5,8 +5,9 @@ import 'swiper/css/pagination'; import { useRecoilState } from 'recoil'; import speciesState, { SpeciesType } from 'recoil/speciesState'; import regionState, { RegionType } from 'recoil/regionState'; -import HomeVideoSlider, { HomeVideoSliderProps } from './HomeVideoSlider'; +import HomeVideoSlider from './HomeVideoSlider'; import VideoMuteIcon from './VideoMuteIcon'; +import { HomeVideoSliderProps } from '../homeType'; const Home = () => { const [muted, setMuted] = useState(true); diff --git a/src/pages/home/Skeleton.tsx b/src/pages/home/components/HomeSkeleton.tsx similarity index 100% rename from src/pages/home/Skeleton.tsx rename to src/pages/home/components/HomeSkeleton.tsx diff --git a/src/pages/home/HomeVideo.tsx b/src/pages/home/components/HomeVideo.tsx similarity index 89% rename from src/pages/home/HomeVideo.tsx rename to src/pages/home/components/HomeVideo.tsx index 96b53b82..4dc5d8ed 100644 --- a/src/pages/home/HomeVideo.tsx +++ b/src/pages/home/components/HomeVideo.tsx @@ -1,16 +1,6 @@ import { useState, useRef, useEffect } from 'react'; -import VideoOverlay, { VideoOverlayProps } from './VideoOverlay'; - -export interface HomeVideoProps { - url: string; - muted: boolean; - handleDoubleClick: () => void; - hovering: boolean; - setHovering: (hover: boolean) => void; - playing: boolean; - setPlaying: (playing: boolean) => void; - index: number; -} +import VideoOverlay from './VideoOverlay'; +import { HomeVideoProps, VideoOverlayProps } from '../homeType'; const HomeVideo = (props: HomeVideoProps) => { const { diff --git a/src/pages/home/HomeVideoSlider.tsx b/src/pages/home/components/HomeVideoSlider.tsx similarity index 55% rename from src/pages/home/HomeVideoSlider.tsx rename to src/pages/home/components/HomeVideoSlider.tsx index 4d2e0b4f..895e054a 100644 --- a/src/pages/home/HomeVideoSlider.tsx +++ b/src/pages/home/components/HomeVideoSlider.tsx @@ -6,36 +6,12 @@ import 'swiper/css'; import 'swiper/css/pagination'; import HomeVideo from './HomeVideo'; import VideoInfo from './VideoInfo'; -import Skeleton from './Skeleton'; - -export interface HomeVideoSliderProps { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - data: any; - muted: boolean; - setMuted: (muted: boolean) => void; - setOpacity: (opacity: number) => void; - fetchNextPage: () => void; -} - -interface ShortFormPage { - error: string; - response: { - hasNext: boolean; - nextPage: number; - shortForms: ShortForm[]; - }; - success: boolean; -} -interface ShortForm { - adoptionStatus: string; - age: string; - likeCount: string; - name: string; - petId: number; - profileShortFormUrl: string; - shelterId: number; - shelterName: string; -} +import Skeleton from './HomeSkeleton'; +import { + HomeVideoSliderProps, + ShortFormPage, + ShortFormVideo, +} from '../homeType'; const HomeVideoSlider = (props: HomeVideoSliderProps) => { const { data, muted, setMuted, setOpacity, fetchNextPage } = props; @@ -85,13 +61,58 @@ const HomeVideoSlider = (props: HomeVideoSliderProps) => { keyboard={{ enabled: true, pageUpDown: true, onlyInViewport: true }} > {data?.pages.map((page: ShortFormPage, pagesIndex: number) => - page.response.shortForms.map((shortForm: ShortForm, index: number) => { - if (pagesIndex * 5 + index === 5 * data.pages.length - 1) { - return ( - -
+ page.response.shortForms.map( + (shortForm: ShortFormVideo, index: number) => { + if (pagesIndex * 5 + index === 5 * data.pages.length - 1) { + return ( + +
+ { + navigate(`/pet/${shortForm.petId}`); + }} + > + +
+ +
+ + + + + +
+ +
+ + ); + } + return ( + { }} > -
+
{
); - } - return ( - - { - navigate(`/pet/${shortForm.petId}`); - }} - > - -
- -
- - - - - -
- -
- - ); - }), + }, + ), )} ); diff --git a/src/pages/home/VideoDragBar.tsx b/src/pages/home/components/VideoDragBar.tsx similarity index 100% rename from src/pages/home/VideoDragBar.tsx rename to src/pages/home/components/VideoDragBar.tsx diff --git a/src/pages/home/VideoInfo.tsx b/src/pages/home/components/VideoInfo.tsx similarity index 84% rename from src/pages/home/VideoInfo.tsx rename to src/pages/home/components/VideoInfo.tsx index 94affe37..c9fb42a6 100644 --- a/src/pages/home/VideoInfo.tsx +++ b/src/pages/home/components/VideoInfo.tsx @@ -1,9 +1,4 @@ -interface ShortForm { - adoptionStatus: string; - age: string; - name: string; - shelterName: string; -} +import { ShortForm } from '../homeType'; const VideoInfo = (props: ShortForm) => { return ( diff --git a/src/pages/home/VideoMuteIcon.tsx b/src/pages/home/components/VideoMuteIcon.tsx similarity index 88% rename from src/pages/home/VideoMuteIcon.tsx rename to src/pages/home/components/VideoMuteIcon.tsx index 7d5d71e9..8a44cd67 100644 --- a/src/pages/home/VideoMuteIcon.tsx +++ b/src/pages/home/components/VideoMuteIcon.tsx @@ -1,7 +1,4 @@ -export interface VideoMuteIconProps { - muted: boolean; - opacity: number; -} +import { VideoMuteIconProps } from '../homeType'; const VideoMuteIcon = (props: VideoMuteIconProps) => { const { muted, opacity } = props; diff --git a/src/pages/home/VideoOverlay.tsx b/src/pages/home/components/VideoOverlay.tsx similarity index 86% rename from src/pages/home/VideoOverlay.tsx rename to src/pages/home/components/VideoOverlay.tsx index ae680285..eb7e0d0b 100644 --- a/src/pages/home/VideoOverlay.tsx +++ b/src/pages/home/components/VideoOverlay.tsx @@ -1,12 +1,5 @@ import VideoDragBar from './VideoDragBar'; - -export interface VideoOverlayProps { - opacity: number; - hovering: boolean; - loading: boolean; - playing: boolean; - index: number; -} +import { VideoOverlayProps } from '../homeType'; const VideoOverlay = (props: VideoOverlayProps) => { const { opacity, hovering, loading, playing, index } = props; diff --git a/src/pages/home/homeType.d.ts b/src/pages/home/homeType.d.ts new file mode 100644 index 00000000..8a85b538 --- /dev/null +++ b/src/pages/home/homeType.d.ts @@ -0,0 +1,60 @@ +export interface HomeVideoProps { + url: string; + muted: boolean; + handleDoubleClick: () => void; + hovering: boolean; + setHovering: (hover: boolean) => void; + playing: boolean; + setPlaying: (playing: boolean) => void; + index: number; +} + +export interface HomeVideoSliderProps { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + data: any; + muted: boolean; + setMuted: (muted: boolean) => void; + setOpacity: (opacity: number) => void; + fetchNextPage: () => void; +} + +export interface ShortFormPage { + error: string; + response: { + hasNext: boolean; + nextPage: number; + shortForms: ShortFormVideo[]; + }; + success: boolean; +} + +export interface ShortFormVideo extends ShortForm { + adoptionStatus: string; + age: string; + likeCount: string; + name: string; + petId: number; + profileShortFormUrl: string; + shelterId: number; + shelterName: string; +} + +export interface ShortForm { + adoptionStatus: string; + age: string; + name: string; + shelterName: string; +} + +export interface VideoMuteIconProps { + muted: boolean; + opacity: number; +} + +export interface VideoOverlayProps { + opacity: number; + hovering: boolean; + loading: boolean; + playing: boolean; + index: number; +} diff --git a/src/pages/register/components/Calendar.tsx b/src/pages/register/components/Calendar.tsx index 6596719a..91f4167f 100644 --- a/src/pages/register/components/Calendar.tsx +++ b/src/pages/register/components/Calendar.tsx @@ -5,7 +5,7 @@ import { CurrentMonthDays, NextMonthDays, PrevMonthDays, -} from '../../../commons/MonthDays'; +} from '../../../commons/components/MonthDays'; import { CalendarProps } from '../registerType'; const Calendar = ({ handleClick }: CalendarProps) => { diff --git a/src/pages/signUp/components/VAddressInputGroup.tsx b/src/pages/signUp/components/VAddressInputGroup.tsx index 5b187502..433c64cc 100644 --- a/src/pages/signUp/components/VAddressInputGroup.tsx +++ b/src/pages/signUp/components/VAddressInputGroup.tsx @@ -1,5 +1,5 @@ import Container from 'commons/components/Container'; -import Postcode from 'commons/PostCode'; +import Postcode from 'commons/components/PostCode'; import { useRecoilValue } from 'recoil'; import { shelterSignupState } from 'recoil/shelterState'; import { AddressInputProps } from '../signupType'; From d66979c0acc5e1c8dad34f04d6ffd8241f3dcc49 Mon Sep 17 00:00:00 2001 From: JeonDoGyun Date: Fri, 10 Nov 2023 15:31:02 +0900 Subject: [PATCH 7/7] =?UTF-8?q?refactor:=20=EB=AF=B8=EC=88=98=EC=A0=95?= =?UTF-8?q?=EB=90=9C=20=ED=8C=8C=EC=9D=BC=20=EB=B0=9C=EA=B2=AC=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EC=9D=B8=ED=95=9C=20=EC=B6=94=EA=B0=80=EC=A0=81?= =?UTF-8?q?=EC=9D=B8=20=EA=B5=AC=EC=A1=B0=20=EB=A6=AC=ED=8C=A9=ED=86=A0?= =?UTF-8?q?=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../shelterInfo/components/ShelterInfo.tsx | 3 +- .../shelterInfo/components/VShelterInfo.tsx | 32 +------------------ src/pages/shelterInfo/shelterInfoType.d.ts | 31 ++++++++++++++++++ 3 files changed, 34 insertions(+), 32 deletions(-) diff --git a/src/pages/shelterInfo/components/ShelterInfo.tsx b/src/pages/shelterInfo/components/ShelterInfo.tsx index ac4de87e..6c3d59b2 100644 --- a/src/pages/shelterInfo/components/ShelterInfo.tsx +++ b/src/pages/shelterInfo/components/ShelterInfo.tsx @@ -2,8 +2,9 @@ import { useNavigate, useParams } from 'react-router-dom'; import { useEffect, useState } from 'react'; import { useQuery } from '@tanstack/react-query'; import useFetch from 'commons/apis/useFetch'; -import VShelterInfo, { ShelterInfoPageProps } from './VShelterInfo'; +import VShelterInfo from './VShelterInfo'; import ShelterInfoSkeleton from './ShelterInfoSkeleton'; +import { ShelterInfoPageProps } from '../shelterInfoType'; const ShelterInfo = () => { const [currentPage, setCurrentPage] = useState(1); diff --git a/src/pages/shelterInfo/components/VShelterInfo.tsx b/src/pages/shelterInfo/components/VShelterInfo.tsx index 0393025c..f0cd11db 100644 --- a/src/pages/shelterInfo/components/VShelterInfo.tsx +++ b/src/pages/shelterInfo/components/VShelterInfo.tsx @@ -2,37 +2,7 @@ import Pagination from 'commons/components/VPagenation'; import ProfileCard from 'pages/profileList/components/ProfileCard'; import { getCookie } from 'commons/cookie/cookie'; import VShelterCard from './VShelterCard'; - -export interface ShelterInfoProps { - name: string; - id: number; - adress: string; - call: string; -} - -export interface PageNationProps { - setCurrentPage: (page: number) => void; - currentPage: number; - lastPage: number; - maxLength: number; -} - -export interface ProfileProps { - map( - arg0: (item: any, index: number) => import('react/jsx-runtime').JSX.Element, - ): import('react').ReactNode; - profileImageUrl: string; - id: number; - name: string; - adoptionStatus: string; - age: number; -} - -export interface ShelterInfoPageProps { - profileProps: ProfileProps; - shelterInfoProps: ShelterInfoProps; - pageNationProps: PageNationProps; -} +import { ShelterInfoPageProps } from '../shelterInfoType'; const VShelterInfo = (props: ShelterInfoPageProps) => { const loginAccount = getCookie('accountInfo'); diff --git a/src/pages/shelterInfo/shelterInfoType.d.ts b/src/pages/shelterInfo/shelterInfoType.d.ts index 8dfadfcb..0f4cc013 100644 --- a/src/pages/shelterInfo/shelterInfoType.d.ts +++ b/src/pages/shelterInfo/shelterInfoType.d.ts @@ -4,3 +4,34 @@ export interface VShelterInfoProps { adress?: string; call?: string; } + +export interface ShelterInfoProps { + name: string; + id: number; + adress: string; + call: string; +} + +export interface PageNationProps { + setCurrentPage: (page: number) => void; + currentPage: number; + lastPage: number; + maxLength: number; +} + +export interface ProfileProps { + map( + arg0: (item: any, index: number) => import('react/jsx-runtime').JSX.Element, + ): import('react').ReactNode; + profileImageUrl: string; + id: number; + name: string; + adoptionStatus: string; + age: number; +} + +export interface ShelterInfoPageProps { + profileProps: ProfileProps; + shelterInfoProps: ShelterInfoProps; + pageNationProps: PageNationProps; +}