diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 22278c057..7774577d1 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -3,6 +3,7 @@ import { RouterProvider } from 'react-router-dom'; import { RecoilRoot } from 'recoil'; import { ThemeProvider } from 'styled-components'; import Confirm from 'components/@common/Confirm'; +import PageLoadingBar from 'components/@common/PageLoadingBar'; import SvgSpriteMap from 'components/@common/SvgIcons/SvgSpriteMap'; import ToastList from 'components/@common/Toast/ToastList'; import { GlobalStyle } from 'style/Global.style'; @@ -22,6 +23,7 @@ const App = () => { + diff --git a/frontend/src/components/@common/Calendar/index.tsx b/frontend/src/components/@common/Calendar/index.tsx index d5757a719..0de282f4c 100644 --- a/frontend/src/components/@common/Calendar/index.tsx +++ b/frontend/src/components/@common/Calendar/index.tsx @@ -1,12 +1,12 @@ import { useState } from 'react'; import SvgIcons from 'components/@common/SvgIcons/SvgFill'; import { AlertSpan, Button, CalendarBox, DaysBox, HeaderBox, Wrapper } from './Calendar.style'; +import useCalendar from 'hooks/@common/useCalendar'; import { convertDateKorYear, getDateToString, getDayInfo, getDaysBetween } from 'utils/date'; import { DateValidate } from 'utils/validate'; import { DAYS_OF_THE_WEEK } from 'constants/index'; import theme from 'style/theme.style'; import DaySmallBox from './DaySmallBox'; -import useCalendar from './hooks/useCalendar'; interface CalendarProps { selectedDate: Date | null; diff --git a/frontend/src/components/@common/PageLoadingBar/PageLoadingBar.style.ts b/frontend/src/components/@common/PageLoadingBar/PageLoadingBar.style.ts new file mode 100644 index 000000000..206d0e061 --- /dev/null +++ b/frontend/src/components/@common/PageLoadingBar/PageLoadingBar.style.ts @@ -0,0 +1,43 @@ +import { keyframes, styled } from 'styled-components'; + +export const ProgressBar = styled.div` + position: fixed; + z-index: ${(props) => props.theme.zIndex.tooltip}; + top: 0; + left: 0; + + width: 100%; + height: 3px; + + background-color: ${(props) => props.theme.color.primary}; + border-radius: 0 4px 4px 0; +`; + +export const progressing = keyframes` + 0% { transform: translateX(-100%); } + 50% { transform: translateX(-20%); } + 100% { transform: translateX(0); } +`; + +export const Progressing = styled(ProgressBar)` + animation: ${progressing} 6s ease-out; +`; + +export const fillOut = keyframes` + 0% { + opacity: 1; + transform: translateX(-100%); + } + 50% { + opacity: 1; + transform: translateX(0); + } + 100% { + opacity: 0; + transform: translateX(0); + } +`; + +export const Finish = styled(ProgressBar)<{ $animationTime: number }>` + animation: ${fillOut} ${(props) => props.$animationTime}ms; +`; diff --git a/frontend/src/components/@common/PageLoadingBar/index.tsx b/frontend/src/components/@common/PageLoadingBar/index.tsx new file mode 100644 index 000000000..9b69cba8c --- /dev/null +++ b/frontend/src/components/@common/PageLoadingBar/index.tsx @@ -0,0 +1,44 @@ +import { useEffect, useMemo } from 'react'; +import { createPortal } from 'react-dom'; +import { useRecoilValue } from 'recoil'; +import { Finish, Progressing } from './PageLoadingBar.style'; +import { isShowPageLoadingState } from 'store/atoms/@common'; +import useToggle from 'hooks/@common/useToggle'; + +export const FINISH_ANIMATION_TIME = 600; + +const PageLoadingBar = () => { + const isShowPageLoading = useRecoilValue(isShowPageLoadingState); + + const { isOn: isShow, on: show, off: hide } = useToggle(); + const { isOn: isShowFinish, on: showFinish, off: hideFinish } = useToggle(); + + const root = useMemo(() => document.getElementById('root')!, []); + + useEffect(() => { + if (isShowPageLoading) { + show(); + hideFinish(); + return; + } + + showFinish(); + const hideId = setTimeout(hide, FINISH_ANIMATION_TIME / 2); + const hideFinishId = setTimeout(hideFinish, FINISH_ANIMATION_TIME); + + return () => { + clearTimeout(hideId); + clearTimeout(hideFinishId); + }; + }, [isShowPageLoading, show, hide, showFinish, hideFinish]); + + return createPortal( + <> + {isShow && } + {isShowFinish && } + , + root + ); +}; + +export default PageLoadingBar; diff --git a/frontend/src/components/@common/PageLogger/index.tsx b/frontend/src/components/@common/PageLogger/index.tsx new file mode 100644 index 000000000..d937956a2 --- /dev/null +++ b/frontend/src/components/@common/PageLogger/index.tsx @@ -0,0 +1,18 @@ +import { PropsWithChildren, useEffect } from 'react'; +import { useSetRecoilState } from 'recoil'; +import { isShowPageLoadingState, lastPageState } from 'store/atoms/@common'; + +const PageLogger = (props: PropsWithChildren) => { + const { children } = props; + const setLastPage = useSetRecoilState(lastPageState); + const setIsShowPageLoadingState = useSetRecoilState(isShowPageLoadingState); + + useEffect(() => { + setLastPage(children); + setIsShowPageLoadingState(false); + }, [children, setLastPage, setIsShowPageLoadingState]); + + return children; +}; + +export default PageLogger; diff --git a/frontend/src/components/@common/SeeMoreContentBox/index.tsx b/frontend/src/components/@common/SeeMoreContentBox/index.tsx index f528cdab7..4fc3db3d5 100644 --- a/frontend/src/components/@common/SeeMoreContentBox/index.tsx +++ b/frontend/src/components/@common/SeeMoreContentBox/index.tsx @@ -1,6 +1,6 @@ import { Fragment } from 'react'; +import useShowState from 'hooks/@common/useShowState'; import { ContentBox, SeeMoreButton, SeeMoreButtonArea, Wrapper } from './SeeMoreContentBox.styles'; -import useShowState from './hooks/useShowState'; interface SeeMoreContentBoxProps { children: string; diff --git a/frontend/src/components/@common/Calendar/hooks/useCalendar.ts b/frontend/src/hooks/@common/useCalendar.ts similarity index 100% rename from frontend/src/components/@common/Calendar/hooks/useCalendar.ts rename to frontend/src/hooks/@common/useCalendar.ts diff --git a/frontend/src/components/@common/SeeMoreContentBox/hooks/useShowState.ts b/frontend/src/hooks/@common/useShowState.ts similarity index 100% rename from frontend/src/components/@common/SeeMoreContentBox/hooks/useShowState.ts rename to frontend/src/hooks/@common/useShowState.ts diff --git a/frontend/src/mocks/browser.ts b/frontend/src/mocks/browser.ts index 890a21be4..d24332d15 100644 --- a/frontend/src/mocks/browser.ts +++ b/frontend/src/mocks/browser.ts @@ -5,7 +5,7 @@ import gardenHandlers from './handlers/gardenHandlers'; import historyHandlers from './handlers/historyHandlers'; export const worker = setupWorker( - ...makeHandler(0, 0), + ...makeHandler(200, 0), ...historyHandlers, ...dictionaryPlantRegistrationHandlers, ...gardenHandlers diff --git a/frontend/src/pages/@common/Main/Main.style.tsx b/frontend/src/pages/@common/Home/Home.style.tsx similarity index 96% rename from frontend/src/pages/@common/Main/Main.style.tsx rename to frontend/src/pages/@common/Home/Home.style.tsx index 76b55508a..660c4f8ab 100644 --- a/frontend/src/pages/@common/Main/Main.style.tsx +++ b/frontend/src/pages/@common/Home/Home.style.tsx @@ -1,6 +1,6 @@ import { keyframes, styled } from 'styled-components'; -export const Wrapper = styled.div` +export const Main = styled.main` display: flex; flex-direction: column; align-items: center; diff --git a/frontend/src/pages/@common/Main/index.tsx b/frontend/src/pages/@common/Home/index.tsx similarity index 83% rename from frontend/src/pages/@common/Main/index.tsx rename to frontend/src/pages/@common/Home/index.tsx index a3ee79517..8de0abf8d 100644 --- a/frontend/src/pages/@common/Main/index.tsx +++ b/frontend/src/pages/@common/Home/index.tsx @@ -1,20 +1,21 @@ import { useState } from 'react'; import InstallPrompt from 'components/@common/InstallPrompt'; import Navbar from 'components/@common/Navbar'; +import PageLogger from 'components/@common/PageLogger'; import SearchBox from 'components/search/SearchBox'; -import { LogoMessage, SearchBoxArea, SearchMessage, Wrapper, Image, ImageArea } from './Main.style'; +import { LogoMessage, SearchBoxArea, SearchMessage, Main, Image, ImageArea } from './Home.style'; import useDictionaryNavigate from 'hooks/dictionaryPlant/useDictionaryPlantNavigate'; import LogoSvg from 'assets/logo.svg'; import LogoWebp from 'assets/logo.webp'; -const Main = () => { +const Home = () => { const { goToProperDictionaryPlantPage, goToDictionaryPlantDetailPage } = useDictionaryNavigate(); const [searchValue, setSearchValue] = useState(''); return ( - <> + - +
식물을 쉽게 @@ -32,10 +33,10 @@ const Main = () => { /> 피움에 등록된 식물을 검색해 보세요! - +
- + ); }; -export default Main; +export default Home; diff --git a/frontend/src/pages/@common/LastPageLoading/index.tsx b/frontend/src/pages/@common/LastPageLoading/index.tsx new file mode 100644 index 000000000..2b8321f98 --- /dev/null +++ b/frontend/src/pages/@common/LastPageLoading/index.tsx @@ -0,0 +1,21 @@ +import { useEffect } from 'react'; +import { useRecoilValue, useSetRecoilState } from 'recoil'; +import Loading from 'pages/@common/Loading'; +import { isShowPageLoadingState, lastPageState } from 'store/atoms/@common'; + +const LastPageLoading = () => { + const lastPage = useRecoilValue(lastPageState); + const setIsShowPageLoading = useSetRecoilState(isShowPageLoadingState); + + useEffect(() => { + setIsShowPageLoading(true); + + return () => { + setIsShowPageLoading(false); + }; + }, [setIsShowPageLoading]); + + return lastPage ?? ; +}; + +export default LastPageLoading; diff --git a/frontend/src/pages/@common/RootTemplate/index.tsx b/frontend/src/pages/@common/RootTemplate/index.tsx index 18ef4cd58..9deaff3d3 100644 --- a/frontend/src/pages/@common/RootTemplate/index.tsx +++ b/frontend/src/pages/@common/RootTemplate/index.tsx @@ -1,7 +1,7 @@ import { Suspense } from 'react'; import { Outlet } from 'react-router-dom'; import NotFound from 'pages/@common/Error/NotFound'; -import Loading from 'pages/@common/Loading'; +import LastPageLoading from 'pages/@common/LastPageLoading'; import ErrorBoundary from 'components/@common/ErrorBoundary'; import Redirect from 'components/@common/Redirect'; import { PageArea, Wrapper } from './RootTemplate.style'; @@ -23,7 +23,7 @@ const RootTemplate = () => { } statusCode={401} > - }> + }> diff --git a/frontend/src/pages/auth/MyPage/MyPage.style.ts b/frontend/src/pages/auth/MyPage/MyPage.style.ts index c68b0a32f..d6874e615 100644 --- a/frontend/src/pages/auth/MyPage/MyPage.style.ts +++ b/frontend/src/pages/auth/MyPage/MyPage.style.ts @@ -1,7 +1,7 @@ import { Link } from 'react-router-dom'; import styled from 'styled-components'; -export const Wrapper = styled.main` +export const Main = styled.main` position: relative; display: flex; diff --git a/frontend/src/pages/auth/MyPage/index.tsx b/frontend/src/pages/auth/MyPage/index.tsx index 75b8cd092..5e7e7aa97 100644 --- a/frontend/src/pages/auth/MyPage/index.tsx +++ b/frontend/src/pages/auth/MyPage/index.tsx @@ -1,6 +1,7 @@ import { FixedButtonArea } from 'pages/garden/GardenPostList/GardenPostList.style'; import ContentHeader from 'components/@common/ContentHeader'; import Navbar from 'components/@common/Navbar'; +import PageLogger from 'components/@common/PageLogger'; import SvgFill from 'components/@common/SvgIcons/SvgFill'; import Toggle from 'components/@common/Toggle'; import VerticalDivider from 'components/@common/VerticalDivider/VerticalDivider.style'; @@ -11,7 +12,7 @@ import { PushAlertContent, PushAlertWrapper, WarnParagraph, - Wrapper, + Main, } from './MyPage.style'; import useConfirm from 'hooks/@common/useConfirm'; import usePushAlert from 'hooks/@common/usePushAlert'; @@ -43,9 +44,9 @@ const MyPage = () => { }; return ( - <> + - +

리마인더 알림 받기

@@ -74,7 +75,7 @@ const MyPage = () => { 회원 탈퇴 - +
@@ -82,7 +83,7 @@ const MyPage = () => { 문의하기 - + ); }; diff --git a/frontend/src/pages/dictionaryPlant/DictionaryPlantDetail/index.tsx b/frontend/src/pages/dictionaryPlant/DictionaryPlantDetail/index.tsx index c14f8f798..a1fab6965 100644 --- a/frontend/src/pages/dictionaryPlant/DictionaryPlantDetail/index.tsx +++ b/frontend/src/pages/dictionaryPlant/DictionaryPlantDetail/index.tsx @@ -1,6 +1,7 @@ import { generatePath, useNavigate, useParams } from 'react-router-dom'; import { Header } from 'pages/petPlant/PetPlantRegister/Form/Form.style'; import Image from 'components/@common/Image'; +import PageLogger from 'components/@common/PageLogger'; import SvgFill from 'components/@common/SvgIcons/SvgFill'; import DictionaryPlantContent from 'components/dictionaryPlant/DictionaryPlantContent'; import { BackButton, BottomSheet, Main, PrimaryButton } from './DictionaryPlantDetail.style'; @@ -46,7 +47,7 @@ const DictionaryPlantDetail = () => { }; return ( - <> +
@@ -61,7 +62,7 @@ const DictionaryPlantDetail = () => { 반려 식물로 등록하기 - + ); }; diff --git a/frontend/src/pages/dictionaryPlant/DictionaryPlantSearch/index.tsx b/frontend/src/pages/dictionaryPlant/DictionaryPlantSearch/index.tsx index 461a253d2..e201600df 100644 --- a/frontend/src/pages/dictionaryPlant/DictionaryPlantSearch/index.tsx +++ b/frontend/src/pages/dictionaryPlant/DictionaryPlantSearch/index.tsx @@ -1,6 +1,7 @@ import { useState } from 'react'; import { useSearchParams } from 'react-router-dom'; import Navbar from 'components/@common/Navbar'; +import PageLogger from 'components/@common/PageLogger'; import SearchBox from 'components/search/SearchBox'; import SearchResults from 'components/search/SearchResults'; import { Title, Wrapper } from './DictionaryPlantSearch.style'; @@ -14,7 +15,7 @@ const DictionarySearch = () => { const [searchValue, setSearchValue] = useState(''); return ( - <> + { - + ); }; diff --git a/frontend/src/pages/dictionaryPlant/NewDictionaryPlantRequest/index.tsx b/frontend/src/pages/dictionaryPlant/NewDictionaryPlantRequest/index.tsx index 59bfc2f76..f69642a9b 100644 --- a/frontend/src/pages/dictionaryPlant/NewDictionaryPlantRequest/index.tsx +++ b/frontend/src/pages/dictionaryPlant/NewDictionaryPlantRequest/index.tsx @@ -1,6 +1,7 @@ import { useLocation } from 'react-router-dom'; import ContentHeader from 'components/@common/ContentHeader'; import Navbar from 'components/@common/Navbar'; +import PageLogger from 'components/@common/PageLogger'; import { Description, Main } from './NewDictionaryPlantRequest.style'; import { NUMBER } from 'constants/index'; import Form from './Form'; @@ -11,14 +12,14 @@ const NewDictionaryPlantRequest = () => { const initialName = typeof state === 'string' ? state.slice(0, NUMBER.maxNicknameLength) : ''; return ( - <> +
요청하신 식물은 저희가 검토 후 추가할게요!
- + ); }; diff --git a/frontend/src/pages/garden/GardenPostList/index.tsx b/frontend/src/pages/garden/GardenPostList/index.tsx index fafea3425..c997ead4b 100644 --- a/frontend/src/pages/garden/GardenPostList/index.tsx +++ b/frontend/src/pages/garden/GardenPostList/index.tsx @@ -3,6 +3,7 @@ import { useEffect } from 'react'; import { useNavigate } from 'react-router'; import { useRecoilState } from 'recoil'; import Navbar from 'components/@common/Navbar'; +import PageLogger from 'components/@common/PageLogger'; import SvgStroke from 'components/@common/SvgIcons/SvgStroke'; import GardenPostItem from 'components/garden/GardenPostItem'; import GardenPostItemSkeleton from 'components/garden/GardenPostItem/GardenPostItemSkeleton'; @@ -54,7 +55,7 @@ const GardenPostList = () => { .map((_, index) => ); return ( - <> + { )} - + ); }; diff --git a/frontend/src/pages/garden/GardenRegisterForm/index.tsx b/frontend/src/pages/garden/GardenRegisterForm/index.tsx index 97355f7ba..1466e911b 100644 --- a/frontend/src/pages/garden/GardenRegisterForm/index.tsx +++ b/frontend/src/pages/garden/GardenRegisterForm/index.tsx @@ -2,6 +2,7 @@ import { Suspense } from 'react'; import { useParams } from 'react-router-dom'; import ContentHeader from 'components/@common/ContentHeader'; import Navbar from 'components/@common/Navbar'; +import PageLogger from 'components/@common/PageLogger'; import GardenRegisterFormSection from 'components/garden/GardenRegisterFormSection'; import Profile from 'components/petPlant/Profile'; import ProfileSkeleton from 'components/petPlant/Profile/ProfileSkeleton'; @@ -15,7 +16,7 @@ const GardenRegisterForm = () => { if (!petPlantId) throw new Error('URL에 id가 없습니다.'); return ( - <> +
}> @@ -24,7 +25,7 @@ const GardenRegisterForm = () => {
- + ); }; diff --git a/frontend/src/pages/garden/GardenRegisterPick/index.tsx b/frontend/src/pages/garden/GardenRegisterPick/index.tsx index 2f45bded0..7010c3dbc 100644 --- a/frontend/src/pages/garden/GardenRegisterPick/index.tsx +++ b/frontend/src/pages/garden/GardenRegisterPick/index.tsx @@ -2,6 +2,7 @@ import { Link, generatePath } from 'react-router-dom'; import { CardList, Wrapper } from 'pages/petPlant/PetPlantCardList/PetPlantCardList.style'; import ContentHeader from 'components/@common/ContentHeader'; import Navbar from 'components/@common/Navbar'; +import PageLogger from 'components/@common/PageLogger'; import PetPlantCard from 'components/petPlant/PetPlantCard'; import { SubTitle } from './GardenRegisterPick.style'; import useCheckSessionId from 'hooks/queries/auth/useCheckSessionId'; @@ -13,7 +14,7 @@ const PetPlantPicker = () => { const { data: petPlantCardList } = usePetPlantCardList(); return ( - <> + 반려 식물을 골라주세요. @@ -30,7 +31,7 @@ const PetPlantPicker = () => { - + ); }; diff --git a/frontend/src/pages/petPlant/PetPlantCardList/index.tsx b/frontend/src/pages/petPlant/PetPlantCardList/index.tsx index 95b0ec9c5..e91b07a2d 100644 --- a/frontend/src/pages/petPlant/PetPlantCardList/index.tsx +++ b/frontend/src/pages/petPlant/PetPlantCardList/index.tsx @@ -1,6 +1,7 @@ import { Link, generatePath } from 'react-router-dom'; import ContentHeader from 'components/@common/ContentHeader'; import Navbar from 'components/@common/Navbar'; +import PageLogger from 'components/@common/PageLogger'; import PetPlantCard from 'components/petPlant/PetPlantCard'; import { CardList, RegisterButton, Wrapper } from './PetPlantCardList.style'; import usePetPlantCardList from 'hooks/queries/petPlant/usePetPlantCardList'; @@ -9,7 +10,7 @@ import { URL_PATH } from 'constants/index'; const PetPlantCardList = () => { const { data: petPlantCardList } = usePetPlantCardList(); return ( - <> + @@ -28,7 +29,7 @@ const PetPlantCardList = () => { - + ); }; diff --git a/frontend/src/pages/petPlant/PetPlantDetails/index.tsx b/frontend/src/pages/petPlant/PetPlantDetails/index.tsx index 5e5cd44b3..c2dae0eff 100644 --- a/frontend/src/pages/petPlant/PetPlantDetails/index.tsx +++ b/frontend/src/pages/petPlant/PetPlantDetails/index.tsx @@ -2,18 +2,19 @@ import { Suspense } from 'react'; import { useParams } from 'react-router-dom'; import Loading from 'pages/@common/Loading'; import Navbar from 'components/@common/Navbar'; +import PageLogger from 'components/@common/PageLogger'; import PetPlantDetailContent from 'components/petPlant/PetPlantDetail'; const PetPlantDetails = () => { const { id } = useParams(); return ( - <> + }> - + ); }; diff --git a/frontend/src/pages/petPlant/PetPlantEdit/index.tsx b/frontend/src/pages/petPlant/PetPlantEdit/index.tsx index c66aceb80..4f1ffd66b 100644 --- a/frontend/src/pages/petPlant/PetPlantEdit/index.tsx +++ b/frontend/src/pages/petPlant/PetPlantEdit/index.tsx @@ -1,4 +1,5 @@ import { useParams } from 'react-router-dom'; +import PageLogger from 'components/@common/PageLogger'; import PetPlantEditForm from 'components/petPlant/PetPlantEditForm'; import usePetPlantDetails from 'hooks/queries/petPlant/usePetPlantDetails'; @@ -6,7 +7,11 @@ const PetPlantEdit = () => { const { id } = useParams(); const { data: petPlantDetails } = usePetPlantDetails(Number(id)); - return ; + return ( + + + + ); }; export default PetPlantEdit; diff --git a/frontend/src/pages/petPlant/PetPlantRegister/Form/index.tsx b/frontend/src/pages/petPlant/PetPlantRegister/Form/index.tsx index b2d63fa58..cffaa155e 100644 --- a/frontend/src/pages/petPlant/PetPlantRegister/Form/index.tsx +++ b/frontend/src/pages/petPlant/PetPlantRegister/Form/index.tsx @@ -1,5 +1,6 @@ import { useNavigate, useParams } from 'react-router-dom'; import Modal from 'components/@common/Modal'; +import PageLogger from 'components/@common/PageLogger'; import SvgFill from 'components/@common/SvgIcons/SvgFill'; import SvgStroke from 'components/@common/SvgIcons/SvgStroke'; import DictionaryPlantContent from 'components/dictionaryPlant/DictionaryPlantContent'; @@ -27,7 +28,7 @@ const PetPlantRegisterFormPage = () => { }; return ( - <> +
@@ -47,7 +48,7 @@ const PetPlantRegisterFormPage = () => { - + ); }; diff --git a/frontend/src/pages/petPlant/PetPlantRegister/Search/Search.style.ts b/frontend/src/pages/petPlant/PetPlantRegister/Search/Search.style.ts index 478182572..ae8640c32 100644 --- a/frontend/src/pages/petPlant/PetPlantRegister/Search/Search.style.ts +++ b/frontend/src/pages/petPlant/PetPlantRegister/Search/Search.style.ts @@ -1,6 +1,6 @@ import { styled } from 'styled-components'; -export const Wrapper = styled.main` +export const Main = styled.main` display: flex; flex-direction: column; align-items: center; diff --git a/frontend/src/pages/petPlant/PetPlantRegister/Search/index.tsx b/frontend/src/pages/petPlant/PetPlantRegister/Search/index.tsx index 0c0c5e408..da022b9eb 100644 --- a/frontend/src/pages/petPlant/PetPlantRegister/Search/index.tsx +++ b/frontend/src/pages/petPlant/PetPlantRegister/Search/index.tsx @@ -2,8 +2,9 @@ import type { DictionaryPlantNameSearchResult } from 'types/dictionaryPlant'; import { useState } from 'react'; import { generatePath, useNavigate } from 'react-router-dom'; import Navbar from 'components/@common/Navbar'; +import PageLogger from 'components/@common/PageLogger'; import SearchBox from 'components/search/SearchBox'; -import { Wrapper, Message, SearchBoxArea } from './Search.style'; +import { Main, Message, SearchBoxArea } from './Search.style'; import useCheckSessionId from 'hooks/queries/auth/useCheckSessionId'; import { URL_PATH } from 'constants/index'; @@ -18,8 +19,8 @@ const PetPlantRegisterSearch = () => { }; return ( - <> - + +
어떤 식물을 키우시나요? { onResultClick={navigateForm} /> - +
- + ); }; diff --git a/frontend/src/pages/petPlant/PetPlantTimeline/index.tsx b/frontend/src/pages/petPlant/PetPlantTimeline/index.tsx index e33aef1eb..420a6d6ca 100644 --- a/frontend/src/pages/petPlant/PetPlantTimeline/index.tsx +++ b/frontend/src/pages/petPlant/PetPlantTimeline/index.tsx @@ -3,6 +3,7 @@ import { useState } from 'react'; import { useParams } from 'react-router-dom'; import CheckButton from 'components/@common/CheckButton'; import Navbar from 'components/@common/Navbar'; +import PageLogger from 'components/@common/PageLogger'; import SvgIcons from 'components/@common/SvgIcons/SvgFill'; import Timeline from 'components/petPlant/Timeline'; import { ButtonLabel, Header, Main } from './PetPlantTimeline.style'; @@ -51,7 +52,7 @@ const PetPlantTimeline = () => { const { water, background, primary, sub } = theme.color; return ( - <> +
{ - + ); }; diff --git a/frontend/src/pages/reminder/ReminderPage/ReminderPage.style.ts b/frontend/src/pages/reminder/ReminderPage/ReminderPage.style.ts index cdfd3f17e..56b86b6b2 100644 --- a/frontend/src/pages/reminder/ReminderPage/ReminderPage.style.ts +++ b/frontend/src/pages/reminder/ReminderPage/ReminderPage.style.ts @@ -14,7 +14,7 @@ const convertReminderBackground: { future: '#F3F3F3', }; -export const Wrapper = styled.div` +export const Main = styled.main` width: 100%; height: 100%; min-height: calc(100vh - 72px); @@ -23,7 +23,7 @@ export const Wrapper = styled.div` background: ${({ status }) => convertReminderBackground[status]}; `; -export const ContentBox = styled.main` +export const ContentBox = styled.div` width: 100%; margin: 0 auto; `; diff --git a/frontend/src/pages/reminder/ReminderPage/index.tsx b/frontend/src/pages/reminder/ReminderPage/index.tsx index 5f5a60750..b2cb39fa6 100644 --- a/frontend/src/pages/reminder/ReminderPage/index.tsx +++ b/frontend/src/pages/reminder/ReminderPage/index.tsx @@ -1,8 +1,9 @@ import { PrimaryButton } from 'components/@common/Confirm/Confirm.style'; import ContentHeader from 'components/@common/ContentHeader'; import Navbar from 'components/@common/Navbar'; +import PageLogger from 'components/@common/PageLogger'; import MonthBox from 'components/reminder/MonthBox'; -import { ContentBox, NoDataContainer, Register, Title, Wrapper } from './ReminderPage.style'; +import { ContentBox, NoDataContainer, Register, Title, Main } from './ReminderPage.style'; import ReminderProvider from 'contexts/reminderContext'; import { URL_PATH } from 'constants/index'; import PiumiEmotionlessPng from 'assets/piumi-emotionless.png'; @@ -17,9 +18,9 @@ const ReminderPage = () => { }); return ( - <> + - +
{reminderBox.length === 0 ? ( @@ -41,10 +42,10 @@ const ReminderPage = () => { ) : ( {reminderBox} )} - +
- + ); }; diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx index 9cfd87722..88d1f5453 100644 --- a/frontend/src/router.tsx +++ b/frontend/src/router.tsx @@ -1,7 +1,7 @@ import { lazy } from 'react'; import { createBrowserRouter } from 'react-router-dom'; import NotFound from 'pages/@common/Error/NotFound'; -import Main from 'pages/@common/Main'; +import Home from 'pages/@common/Home'; import RootTemplate from 'pages/@common/RootTemplate'; import DictionaryPlantDetail from 'pages/dictionaryPlant/DictionaryPlantDetail'; import DictionaryPlantSearch from 'pages/dictionaryPlant/DictionaryPlantSearch'; @@ -32,7 +32,7 @@ const router = createBrowserRouter([ children: [ { index: true, - element:
, + element: , }, { path: URL_PATH.petRegisterSearch, diff --git a/frontend/src/store/atoms/@common.ts b/frontend/src/store/atoms/@common.ts index dc8e1b798..12d247ce0 100644 --- a/frontend/src/store/atoms/@common.ts +++ b/frontend/src/store/atoms/@common.ts @@ -1,4 +1,5 @@ import type { ToastItem } from 'types/@common'; +import type { ReactNode } from 'react'; import { atom } from 'recoil'; interface ConfirmState { @@ -22,3 +23,13 @@ export const toastListState = atom({ key: 'toasts', default: [], }); + +export const lastPageState = atom({ + key: 'lastPage', + default: null, +}); + +export const isShowPageLoadingState = atom({ + key: 'showPageLoading', + default: true, +});