Hotfix: 콜백 관련 페이지 skeletion ui 적용

kakao-tech-campus-2nd-step3 · Nov 15, 2024 · 39e8504 · 39e8504
1 parent dbe269f
commit 39e8504
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 49 deletions.
diff --git a/src/pages/sinitto/call-back/detail/components/menu/CallbackMenu.tsx b/src/pages/sinitto/call-back/detail/components/menu/CallbackMenu.tsx
@@ -1,8 +1,20 @@
+import { lazy } from 'react';
+
 import { useHandleCallback } from '../../hooks';
-import { PostAcceptMenu } from './post-accept';
-import { PreAcceptMenu } from './pre-accept';
 import { formatPhoneNumber } from '@/shared';
-import { Spinner } from '@chakra-ui/react';
+import { Skeleton } from '@chakra-ui/react';
+
+const PreAcceptMenu = lazy(() =>
+  import('./pre-accept/PreAcceptMenu').then((module) => ({
+    default: module.PreAcceptMenu,
+  }))
+);
+
+const PostAcceptMenu = lazy(() =>
+  import('./post-accept/PostAcceptMenu').then((module) => ({
+    default: module.PostAcceptMenu,
+  }))
+);
 
 type MenuProps = {
   callBackId: number;
@@ -19,7 +31,7 @@ export const CallbackMenu = ({
     useHandleCallback();
 
   return isLoading ? (
-    <Spinner size='xl' marginTop='30px' />
+    <Skeleton height='50px' width='100%' />
   ) : accept ? (
     <PostAcceptMenu
       completeCallback={() => completeCallback(callBackId)}

diff --git a/src/pages/sinitto/call-back/detail/ui/CallBackDetailPage.tsx b/src/pages/sinitto/call-back/detail/ui/CallBackDetailPage.tsx
@@ -1,11 +1,17 @@
+import { lazy } from 'react';
 import { Outlet } from 'react-router-dom';
 
-import { CallbackMenu } from '../components';
 import { useCallbackDetailParams } from '../hooks/useCallbackDetailParams';
 import { useCallbackMenuData } from '../hooks/useCallbackMenuData';
 import { useFetchCallback } from '../hooks/useFetchCallback';
 import { Notice, PageLayout, GuideLineButton } from '@/shared';
-import { Divider, Spinner } from '@chakra-ui/react';
+import { Divider, Skeleton } from '@chakra-ui/react';
+
+const CallbackMenu = lazy(() =>
+  import('../components/menu/CallbackMenu').then((module) => ({
+    default: module.CallbackMenu,
+  }))
+);
 
 export const CallBackDetailPage = () => {
   const { callBackId } = useCallbackDetailParams();
@@ -17,21 +23,18 @@ export const CallBackDetailPage = () => {
   return (
     <>
       <PageLayout>
+        <Notice
+          noticeType='요청 거부'
+          title='가이드라인을 잘 확인하고 수락해주세요!'
+          contents='시니어의 요청이 가이드라인에서 벗어난 요청일 경우 요청을 거부할 수 있습니다!'
+        />
+        <GuideLineButton userType='sinitto' />
+        <Divider />
         {isCallBackLoading ? (
-          <Spinner size='xl' />
+          <Skeleton height='50px' width='100%' />
         ) : (
-          callbackData && (
-            <>
-              <Notice
-                noticeType='요청 거부'
-                title='가이드라인을 잘 확인하고 수락해주세요!'
-                contents='시니어의 요청이 가이드라인에서 벗어난 요청일 경우 요청을 거부할 수 있습니다!'
-              />
-              <GuideLineButton userType='sinitto' />
-              <Divider />
-              {callbackMenuData && <CallbackMenu {...callbackMenuData} />}
-            </>
-          )
+          callbackData &&
+          callbackMenuData && <CallbackMenu {...callbackMenuData} />
         )}
       </PageLayout>
       <Outlet />

diff --git a/src/pages/sinitto/call-back/list/ui/CallBackListPage.tsx b/src/pages/sinitto/call-back/list/ui/CallBackListPage.tsx
@@ -1,8 +1,15 @@
-import { RequestRow } from '../components';
+import { lazy } from 'react';
+
 import { useInfiniteScroll, useCallbackList } from '../hooks';
 import { PageLayout } from '@/shared';
 import type { CallbackResponse } from '@/shared';
-import { Flex, Spinner, Text } from '@chakra-ui/react';
+import { Flex, Text, Skeleton } from '@chakra-ui/react';
+
+const RequestRow = lazy(() =>
+  import('../components/request-row/RequestRow').then((module) => ({
+    default: module.RequestRow,
+  }))
+);
 
 export const CallBackListPage = () => {
   const { data, isLoading, isError, fetchNextPage, hasNextPage } =
@@ -14,10 +21,23 @@ export const CallBackListPage = () => {
     isLoading
   );
 
+  if (isLoading && !data) {
+    return (
+      <PageLayout>
+        <Flex w='full' flexDir='column' gap='var(--space-xs)'>
+          <Skeleton height='60px' width='100%' />
+          <Skeleton height='60px' width='100%' />
+          <Skeleton height='60px' width='100%' />
+          <Skeleton height='60px' width='100%' />
+        </Flex>
+      </PageLayout>
+    );
+  }
+
   return (
     <PageLayout>
+      {isError && <Text>데이터를 불러오는데 오류가 발생했습니다</Text>}
       <Flex flexDirection='column' width='100%' gap='var(--space-xs)'>
-        {isError && <p>데이터를 불러오는데 오류가 발생했습니다</p>}
         {data &&
           data.pages.map((page, pageIndex) =>
             page.content.map((callback: CallbackResponse, index: number) => {
@@ -36,11 +56,7 @@ export const CallBackListPage = () => {
             })
           )}
       </Flex>
-      {isLoading ? (
-        <Spinner size='xl' />
-      ) : (
-        !isError && !hasNextPage && <Text>더 이상 요청이 없어요 🥲</Text>
-      )}
+      {!isError && !hasNextPage && <Text>더 이상 요청이 없어요 🥲</Text>}
     </PageLayout>
   );
 };

diff --git a/src/pages/sinitto/guide-line/ui/SinittoGuideLinePage.tsx b/src/pages/sinitto/guide-line/ui/SinittoGuideLinePage.tsx
@@ -1,16 +1,22 @@
+import { lazy } from 'react';
 import { useParams } from 'react-router-dom';
 
-import { GuideLineContainer } from '../components';
 import {
   useGuideLineData,
   useGuideLineErrorHandling,
   useCategoryName,
 } from '../hooks';
 import { GuideLineResponse } from '../types';
 import { PageLayout } from '@/shared';
-import { Spinner, Flex } from '@chakra-ui/react';
+import { Flex, Skeleton } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 
+const GuideLineContainer = lazy(() =>
+  import('../components/container/Container').then((module) => ({
+    default: module.GuideLineContainer,
+  }))
+);
+
 type GuideLineParams = {
   callBackId: string;
   guideLineId: string;
@@ -29,28 +35,30 @@ export const SinittoGuideLinePage = () => {
 
   return (
     <PageLayout>
+      <Title>
+        <EmphasisSpan>{guideLineInfo}</EmphasisSpan> 가이드라인
+      </Title>
       {isGuideLineLoading ? (
-        <Spinner size='xl' />
+        <Flex flexDir='column' width='100%' gap='var(--space-sm)'>
+          <Skeleton height='80px' width='100%' />
+          <Skeleton height='80px' width='100%' />
+          <Skeleton height='80px' width='100%' />
+        </Flex>
       ) : (
-        <>
-          <Title>
-            <EmphasisSpan>{guideLineInfo}</EmphasisSpan> 가이드라인
-          </Title>
-          <Flex flexDir='column' width='100%' gap='var(--space-sm)'>
-            {guideLine &&
-              (guideLine.length === 0 ? (
-                <p>등록된 가이드라인이 없습니다.</p>
-              ) : (
-                guideLine.map((data: GuideLineResponse) => (
-                  <GuideLineContainer
-                    key={data.id}
-                    title={data.title}
-                    content={data.content}
-                  />
-                ))
-              ))}
-          </Flex>
-        </>
+        <Flex flexDir='column' width='100%' gap='var(--space-sm)'>
+          {guideLine &&
+            (guideLine.length === 0 ? (
+              <p>등록된 가이드라인이 없습니다.</p>
+            ) : (
+              guideLine.map((data: GuideLineResponse) => (
+                <GuideLineContainer
+                  key={data.id}
+                  title={data.title}
+                  content={data.content}
+                />
+              ))
+            ))}
+        </Flex>
       )}
     </PageLayout>
   );