Merge pull request #226 from kakao-tech-campus-2nd-step3/Develop

개발 상황 업데이트

Author: Dobbymin

src/app/routes/path.ts

@@ -1,5 +1,6 @@
 export const RouterPath = {
   ROOT: '/',
+  ONBOARD: 'onboard',
   LOGIN: 'login',
   SIGNUP: 'signup',
   REGISTER: 'register',

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: <RootPage />,
+          },
+        ],
+      },
+      {
+        path: RouterPath.ONBOARD,
         children: [
           {
             index: true,

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';

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 <Navigate to='/onboard' />;
+};

src/pages/common/root/index.ts

@@ -0,0 +1 @@
+export { RootPage } from './RootPage';

src/pages/guard/guard-main/components/hello-call-apply/HelloCallApply.tsx

@@ -26,7 +26,7 @@ export const HelloCallApply = () => {
             <IconArrow fill='black' />
           </ServiceApplyButton>
         </Link>
-        <StyledImage src={HelloCallImg} alt='hello-call' />
+        <StyledImage src={HelloCallImg} alt='hello-call' fetchpriority='high' />
       </ContentWrapper>
     </Flex>
   );

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 <Text>Loading...</Text>;
-  if (isError) return <Text>Error loading report data</Text>;
+  if (isLoading) {
+    return (
+      <>
+        <Flex
+          justifyContent='center'
+          alignItems='center'
+          backgroundColor='var(--color-secondary)'
+          borderRadius='5px'
+          padding='0.5rem'
+        >
+          <SkeletonText noOfLines={2} spacing='4' width='80%' />
+        </Flex>
+        <Flex
+          direction='column'
+          width='full'
+          padding={4}
+          borderRadius='0.5rem'
+          gap='1rem'
+          backgroundColor='#e4e4e4'
+          border='1px solid var(--color-gray)'
+        >
+          <Skeleton height='50px' width='100%' />
+          <Skeleton height='50px' width='100%' />
+          <Skeleton height='50px' width='100%' />
+        </Flex>
+        <Divider />
+        <Skeleton height='40px' width='200px' marginBottom='10px' />
+      </>
+    );
+  }
+
+  if (isError) {
+    return <Text>보고서를 불러올 수 없습니다!</Text>;
+  }
 
   return (
     <>

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 <LoadingView />;
+  if (isLoading && !data) {
+    return (
+      <SkeletonPageWrapper>
+        <Skeleton height='60px' width='100%' mb='1rem' />
+        <Skeleton height='60px' width='100%' mb='1rem' />
+        <Skeleton height='60px' width='100%' mb='1rem' />
+        <Skeleton height='60px' width='100%' mb='1rem' />
+      </SkeletonPageWrapper>
+    );
+  }
+
   if (isError && !isLastPageReached) return <Text>에러가 발생했습니다.</Text>;
   if (!data) return null;
 
   return (
     <HelloCallListLayout>
-      {allContent.map((item, index) => {
-        const isLastElement = index === allContent.length - 1;
-        return (
-          <CallRequest
-            key={item.helloCallId}
-            seniorName={item.seniorName}
-            days={item.days}
-            onClick={() => handlerNavigate(item.helloCallId)}
-            ref={isLastElement ? lastElementRef : null}
-          />
-        );
-      })}
+      {isLoading
+        ? Array(10)
+            .fill(null)
+            .map((_, index) => (
+              <Skeleton key={index} height='70px' width='100%' mb='1rem' />
+            ))
+        : allContent.map((item, index) => {
+            const isLastElement = index === allContent.length - 1;
+            return (
+              <CallRequest
+                key={item.helloCallId}
+                seniorName={item.seniorName}
+                days={item.days}
+                onClick={() => handlerNavigate(item.helloCallId)}
+                ref={isLastElement ? lastElementRef : null}
+              />
+            );
+          })}
       {(!hasNextPage || isLastPageReached) && (
         <Text>더 이상 요청이 없어요 🥲</Text>
       )}
-      {isLoading && hasNextPage && !isLastPageReached && <LoadingView />}
+      {isLoading && hasNextPage && !isLastPageReached && (
+        <Skeleton height='70px' width='100%' mb='1rem' />
+      )}
     </HelloCallListLayout>
   );
 };
@@ -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;
+`;

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 (
     <PageLayout>
       <Flex flexDir='column' w='full' gap='var(--space-sm)'>
-        <TextArea
-          title={CALLBACK_SCHEMA.TITLE}
-          status={CALLBACK_SCHEMA.STATUS}
-          description={CALLBACK_SCHEMA.DESCRIPTION}
-          textDirection='start'
-        />
+        {isAcceptedLoading ? (
+          <SkeletonTextArea />
+        ) : (
+          <TextArea
+            title={CALLBACK_SCHEMA.TITLE}
+            status={CALLBACK_SCHEMA.STATUS}
+            description={CALLBACK_SCHEMA.DESCRIPTION}
+            textDirection='start'
+          />
+        )}
         {isAcceptedLoading ? (
           <StyledSpinnerWrapper>
-            <Spinner size='lg' thickness='3px' color='blue.500' />
+            <Skeleton height='50px' width='100%' />
           </StyledSpinnerWrapper>
         ) : isAcceptedError ? (
           <NoServiceMessage>
@@ -46,21 +69,25 @@ export const SinittoServiceHistoryPage = () => {
       </Flex>
 
       <Flex flexDir='column' w='full' gap='var(--space-sm)'>
-        <TextArea
-          title={HELLO_CALL_SCHEMA.TITLE}
-          status={[
-            HELLO_CALL_SCHEMA.STATUS_PROCESS,
-            HELLO_CALL_SCHEMA.STATUS_FINISH,
-          ]}
-          description={[
-            HELLO_CALL_SCHEMA.DESCRIPTION_PROCESS,
-            HELLO_CALL_SCHEMA.DESCRIPTION_FINISH,
-          ]}
-          textDirection='end'
-        />
+        {isApplyHelloLoading ? (
+          <SkeletonTextArea />
+        ) : (
+          <TextArea
+            title={HELLO_CALL_SCHEMA.TITLE}
+            status={[
+              HELLO_CALL_SCHEMA.STATUS_PROCESS,
+              HELLO_CALL_SCHEMA.STATUS_FINISH,
+            ]}
+            description={[
+              HELLO_CALL_SCHEMA.DESCRIPTION_PROCESS,
+              HELLO_CALL_SCHEMA.DESCRIPTION_FINISH,
+            ]}
+            textDirection='end'
+          />
+        )}
         {isApplyHelloLoading ? (
           <StyledSpinnerWrapper>
-            <Spinner size='lg' thickness='3px' color='blue.500' />
+            <Skeleton height='50px' width='100%' />
           </StyledSpinnerWrapper>
         ) : applyHelloCallList && applyHelloCallList.length > 0 ? (
           <Flex w='full' flexDir='column' gap='var(--space-xs)'>
@@ -96,3 +123,5 @@ const NoServiceMessage = styled.p`
   color: var(--color-black);
   text-align: center;
 `;
+
+const SkeletonTextArea = () => <Skeleton height='150px' width='100%' />;