diff --git a/src/app/routes/path.ts b/src/app/routes/path.ts index f8ce4d6..b3aa681 100644 --- a/src/app/routes/path.ts +++ b/src/app/routes/path.ts @@ -1,5 +1,6 @@ export const RouterPath = { ROOT: '/', + ONBOARD: 'onboard', LOGIN: 'login', SIGNUP: 'signup', REGISTER: 'register', diff --git a/src/app/routes/router.tsx b/src/app/routes/router.tsx index 802f8ae..3337f88 100644 --- a/src/app/routes/router.tsx +++ b/src/app/routes/router.tsx @@ -3,7 +3,12 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom'; import { ProtectedRoute } from './components'; import { RouterPath } from './path'; -import { OnboardPage, RedirectPage, DummyRedirectPage } from '@/pages'; +import { + OnboardPage, + RedirectPage, + DummyRedirectPage, + RootPage, +} from '@/pages'; import { Layout, LoadingView } from '@/shared/components'; export const RegisterPage = lazy( @@ -128,6 +133,15 @@ export const router = createBrowserRouter([ children: [ { path: '', + children: [ + { + index: true, + element: , + }, + ], + }, + { + path: RouterPath.ONBOARD, children: [ { index: true, diff --git a/src/pages/common/index.ts b/src/pages/common/index.ts index 7ccecf9..1db0660 100644 --- a/src/pages/common/index.ts +++ b/src/pages/common/index.ts @@ -3,3 +3,4 @@ export * from './onboard'; export * from './redirect'; export * from './register'; export * from './service-manual'; +export * from './root'; diff --git a/src/pages/common/root/RootPage.tsx b/src/pages/common/root/RootPage.tsx new file mode 100644 index 0000000..7c5f977 --- /dev/null +++ b/src/pages/common/root/RootPage.tsx @@ -0,0 +1,7 @@ +import { Navigate } from 'react-router-dom'; + +export const RootPage = () => { + if (window.location.pathname !== '/') return null; + + return ; +}; diff --git a/src/pages/common/root/index.ts b/src/pages/common/root/index.ts new file mode 100644 index 0000000..dab2aef --- /dev/null +++ b/src/pages/common/root/index.ts @@ -0,0 +1 @@ +export { RootPage } from './RootPage'; diff --git a/src/pages/guard/guard-main/components/hello-call-apply/HelloCallApply.tsx b/src/pages/guard/guard-main/components/hello-call-apply/HelloCallApply.tsx index 629cc7e..0bc25c4 100644 --- a/src/pages/guard/guard-main/components/hello-call-apply/HelloCallApply.tsx +++ b/src/pages/guard/guard-main/components/hello-call-apply/HelloCallApply.tsx @@ -26,7 +26,7 @@ export const HelloCallApply = () => { - + ); diff --git a/src/pages/guard/hello-call-report/components/GuardReportDetail.tsx b/src/pages/guard/hello-call-report/components/GuardReportDetail.tsx index 915ea07..dd30f98 100644 --- a/src/pages/guard/hello-call-report/components/GuardReportDetail.tsx +++ b/src/pages/guard/hello-call-report/components/GuardReportDetail.tsx @@ -3,7 +3,16 @@ import { useReport } from '../hooks/useReport'; import IconCalendar from '@/pages/assets/hello-call/calendar.svg'; import IconFile from '@/pages/assets/hello-call/file.svg'; import heartIcon from '@/pages/assets/hello-call/heart.svg'; -import { Box, Text, Image, Divider, Button, Flex } from '@chakra-ui/react'; +import { + Box, + Text, + Image, + Divider, + Button, + Flex, + Skeleton, + SkeletonText, +} from '@chakra-ui/react'; type Props = { helloCallId: number; @@ -13,8 +22,40 @@ const GuardReportDetail = ({ helloCallId }: Props) => { const { reportData, isLoading, isError } = useReport(helloCallId); const { completeHelloCall } = useCompleteHelloCall(helloCallId); - if (isLoading) return Loading...; - if (isError) return Error loading report data; + if (isLoading) { + return ( + <> + + + + + + + + + + + + ); + } + + if (isError) { + return 보고서를 불러올 수 없습니다!; + } return ( <> diff --git a/src/pages/sinitto/hello-call-list/ui/HelloCallListPage.tsx b/src/pages/sinitto/hello-call-list/ui/HelloCallListPage.tsx index 17d6656..39339ce 100644 --- a/src/pages/sinitto/hello-call-list/ui/HelloCallListPage.tsx +++ b/src/pages/sinitto/hello-call-list/ui/HelloCallListPage.tsx @@ -6,8 +6,7 @@ import { useNavigateToDetail, useGetServiceList, } from '../hooks'; -import { LoadingView } from '@/shared/components'; -import { Text } from '@chakra-ui/react'; +import { Text, Skeleton } from '@chakra-ui/react'; import styled from '@emotion/styled'; const CallRequest = lazy( @@ -28,28 +27,46 @@ const HelloCallListPage = () => { const allContent = data?.pages.flatMap((page) => page.content) ?? []; - if (isLoading && !data) return ; + if (isLoading && !data) { + return ( + + + + + + + ); + } + if (isError && !isLastPageReached) return 에러가 발생했습니다.; if (!data) return null; return ( - {allContent.map((item, index) => { - const isLastElement = index === allContent.length - 1; - return ( - handlerNavigate(item.helloCallId)} - ref={isLastElement ? lastElementRef : null} - /> - ); - })} + {isLoading + ? Array(10) + .fill(null) + .map((_, index) => ( + + )) + : allContent.map((item, index) => { + const isLastElement = index === allContent.length - 1; + return ( + handlerNavigate(item.helloCallId)} + ref={isLastElement ? lastElementRef : null} + /> + ); + })} {(!hasNextPage || isLastPageReached) && ( 더 이상 요청이 없어요 🥲 )} - {isLoading && hasNextPage && !isLastPageReached && } + {isLoading && hasNextPage && !isLastPageReached && ( + + )} ); }; @@ -64,3 +81,12 @@ const HelloCallListLayout = styled.div` gap: 1rem; margin: 3rem 1.5rem; `; + +const SkeletonPageWrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; + height: 100%; + gap: 1rem; + margin: 3rem 1.5rem; +`; diff --git a/src/pages/sinitto/service-history/ui/SinittoServiceHistoryPage.tsx b/src/pages/sinitto/service-history/ui/SinittoServiceHistoryPage.tsx index c2170e0..a958fd0 100644 --- a/src/pages/sinitto/service-history/ui/SinittoServiceHistoryPage.tsx +++ b/src/pages/sinitto/service-history/ui/SinittoServiceHistoryPage.tsx @@ -1,14 +1,33 @@ -import { - CallBackServiceList, - HelloCallServiceList, - TextArea, -} from '../components'; +import { lazy } from 'react'; + import { CALLBACK_SCHEMA, HELLO_CALL_SCHEMA } from '../data'; import { useAcceptedCallBackData, useApplyHelloCallData } from '../hooks'; import { PageLayout } from '@/shared'; -import { Spinner, Flex } from '@chakra-ui/react'; +import { Flex, Skeleton } from '@chakra-ui/react'; import styled from '@emotion/styled'; +const CallBackServiceList = lazy(() => + import( + '../components/common/call-back-service-list/CallBackServiceList' + ).then((module) => ({ + default: module.CallBackServiceList, + })) +); + +const HelloCallServiceList = lazy(() => + import( + '../components/common/hello-call-service-list/HelloCallServiceList' + ).then((module) => ({ + default: module.HelloCallServiceList, + })) +); + +const TextArea = lazy(() => + import('../components/features/text-area/TextArea').then((module) => ({ + default: module.TextArea, + })) +); + export const SinittoServiceHistoryPage = () => { const { acceptedCallBackList, isAcceptedLoading, isAcceptedError } = useAcceptedCallBackData(); @@ -18,15 +37,19 @@ export const SinittoServiceHistoryPage = () => { return ( -