Merge pull request #235 from kakao-tech-campus-2nd-step3/Master

Merge Master to Develop

README.md

@@ -39,8 +39,8 @@
 ### ✔️ Slack
 [https://join.slack.com/t/sinitto/shared_invite](https://join.slack.com/t/sinitto/shared_invite/zt-2uqws45gg-bsPq8cuH2iQV6Jk1Y3Zglw)
 
-### ✔️ Backend Repository
-[https://github.com/kakao-tech-campus-2nd-step3/Team8_BE](https://github.com/kakao-tech-campus-2nd-step3/Team8_BE)
+### ✔️ Backend 최종 개발현황
+[https://github.com/kakao-tech-campus-2nd-step3/Team8_BE](https://github.com/kakao-tech-campus-2nd-step3/Team8_BE/tree/Evaluation)
 
 ## ✨ Local 환경 실행 방법
 > project를 local 환경에 clone 합니다.

src/pages/guard/guide-line/ui/GuideLinePage.tsx

@@ -1,23 +1,61 @@
+import { lazy } from 'react';
+import Skeleton from 'react-loading-skeleton';
+import 'react-loading-skeleton/dist/skeleton.css';
 import { useParams } from 'react-router-dom';
 
-import { GuideLineInfo, GuidelineRegisterBox } from '../components';
 import { useGetSeniorAllGuidelines } from '../hooks';
 import { SeniorGuideLineData } from '../types';
 import { PageLayout } from '@/shared';
 import { Box, Flex, Text } from '@chakra-ui/react';
+import styled from '@emotion/styled';
+
+const GuideLineInfo = lazy(
+  () => import('../components/guide-info-box/GuideLineInfo')
+);
+
+const GuidelineRegisterBox = lazy(
+  () => import('../components/guide-register-box/GuidelineRegisterBox')
+);
 
 export type GuideLineDetailParams = {
-  seniorId: string; // 시니어 id
-  guidelineType: string; // 가이드라인 type (TAXI, DELIVERY)
+  seniorId: string;
+  guidelineType: string;
 };
 
 export const GuideLinePage = () => {
   const { seniorId, guidelineType } = useParams<GuideLineDetailParams>();
 
-  const { data: guidelineData, refetch } = useGetSeniorAllGuidelines(
-    Number(seniorId),
-    String(guidelineType)
-  );
+  const {
+    data: guidelineData,
+    isLoading,
+    refetch,
+  } = useGetSeniorAllGuidelines(Number(seniorId), String(guidelineType));
+
+  const renderSkeletons = () => {
+    return Array(5)
+      .fill(0)
+      .map((_, index) => (
+        <GuideLineInfoContainer key={`skeleton-${index}`}>
+          <Flex flexDir='column' w='100%' gap='var(--space-xs)'>
+            <Box
+              display='flex'
+              flexDir='row'
+              w='100%'
+              justifyContent='space-between'
+              alignItems='center'
+            >
+              <Box flex='1'>
+                <Skeleton width={200} height={24} />
+              </Box>
+              <Flex align='center' gap='var(--space-xxs)'>
+                <Skeleton width={30} height={30} />
+                <Skeleton width={30} height={30} />
+              </Flex>
+            </Box>
+          </Flex>
+        </GuideLineInfoContainer>
+      ));
+  };
 
   return (
     <PageLayout>
@@ -52,20 +90,31 @@ export const GuideLinePage = () => {
             fontSize='var(--font-size-xl)'
             fontWeight='500'
           >
-            {guidelineData?.length}개
+            {isLoading ? <Skeleton width={30} /> : `${guidelineData?.length}개`}
           </Text>
         </Box>
         <Flex w='full' flexDir='column' gap='var(--space-sm)'>
-          {guidelineData?.map((guideline: SeniorGuideLineData) => (
-            <GuideLineInfo
-              key={guideline.id}
-              refetch={refetch}
-              guideline={guideline}
-              seniorId={Number(seniorId)}
-            />
-          ))}
+          {isLoading
+            ? renderSkeletons()
+            : guidelineData?.map((guideline: SeniorGuideLineData) => (
+                <GuideLineInfo
+                  key={guideline.id}
+                  refetch={refetch}
+                  guideline={guideline}
+                  seniorId={Number(seniorId)}
+                />
+              ))}
         </Flex>
       </Flex>
     </PageLayout>
   );
 };
+
+const GuideLineInfoContainer = styled(Flex)`
+  width: 100%;
+  flex-direction: column;
+  background-color: var(--color-white);
+  border: 2px solid var(--color-white-gray);
+  border-radius: 10px;
+  padding: var(--space-md);
+`;

src/pages/guard/hello-call-report/components/GuardReportDetail.tsx

@@ -17,7 +17,6 @@ import {
 type Props = {
   helloCallId: number;
 };
-
 const GuardReportDetail = ({ helloCallId }: Props) => {
   const { reportData, isLoading, isError } = useReport(helloCallId);
   const { completeHelloCall } = useCompleteHelloCall(helloCallId);
@@ -94,9 +93,13 @@ const GuardReportDetail = ({ helloCallId }: Props) => {
             </Text>
           </Flex>
           <Box ml={8}>
-            <Text>
-              {reportData?.startDate}~{reportData?.endDate}
-            </Text>
+            {isLoading ? (
+              <Skeleton height={20} width={100} />
+            ) : (
+              <Text>
+                {reportData?.startDate}~{reportData?.endDate}
+              </Text>
+            )}
           </Box>
         </Flex>
         <Flex
@@ -114,7 +117,11 @@ const GuardReportDetail = ({ helloCallId }: Props) => {
             </Text>
           </Flex>
           <Flex ml={8} textAlign='center' alignItems='center'>
-            {reportData?.sinittoName}
+            {isLoading ? (
+              <Skeleton height={20} width={80} />
+            ) : (
+              reportData?.sinittoName
+            )}
           </Flex>
         </Flex>
         <Flex
@@ -133,7 +140,11 @@ const GuardReportDetail = ({ helloCallId }: Props) => {
             </Text>
           </Flex>
           <Flex ml={8} border='none' height='full'>
-            {reportData?.report}
+            {isLoading ? (
+              <Skeleton height={60} width='100%' />
+            ) : (
+              reportData?.report
+            )}
           </Flex>
         </Flex>
       </Flex>

src/pages/guard/hello-call-report/ui/GuardReportPage.tsx

@@ -1,7 +1,10 @@
-import { GuardReportDetail } from '../components';
+import { lazy } from 'react';
+
 import { useHelloCallId } from '../hooks';
 import { Flex } from '@chakra-ui/react';
 
+const GuardReportDetail = lazy(() => import('../components/GuardReportDetail'));
+
 const GuardReportPage = () => {
   const helloCallId = useHelloCallId();
 

src/pages/guard/mypage/components/profile-box/GuardProfileBox.tsx

@@ -165,7 +165,6 @@ const GuardProfileBox = () => {
 
 export default GuardProfileBox;
 
-// Styled Components
 const DivideLine = styled.div`
   width: 2px;
   height: 50px;

src/pages/guard/mypage/ui/GuardMyPage.tsx

@@ -1,5 +1,15 @@
+import { lazy } from 'react';
+
 import { GuardProfileBox } from '../components';
-import { PointBox, PointLogBox, Withdrawal, PageLayout } from '@/shared';
+import { Withdrawal, PageLayout } from '@/shared';
+
+const PointLogBox = lazy(
+  () => import('@/shared/components/features/mypage/point-log-box/PointLogBox')
+);
+
+const PointBox = lazy(
+  () => import('@/shared/components/features/mypage/point-box/PointBox')
+);
 
 export const GuardMyPage = () => {
   return (

src/pages/guard/register/ui/SeniorRegisterPage.tsx

@@ -1,13 +1,51 @@
+import { lazy } from 'react';
+import Skeleton from 'react-loading-skeleton';
+import 'react-loading-skeleton/dist/skeleton.css';
+
 import { useGetAllSeniorInfo } from '../../mypage';
-import SeniorInfo from '../components/senior-info/SeniorInfo';
-import SeniorRegisterBox from '../components/senior-register-box/SeniorRegisterBox';
 import { SeniorInfoType } from '../types';
 import { PageLayout } from '@/shared';
 import { Box, Flex, Text } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 
+const SeniorInfo = lazy(() => import('../components/senior-info/SeniorInfo'));
+
+const SeniorRegisterBox = lazy(
+  () => import('../components/senior-register-box/SeniorRegisterBox')
+);
+
 export const SeniorRegisterPage = () => {
-  const { data: seniors, refetch } = useGetAllSeniorInfo();
+  const { data: seniors, isLoading, refetch } = useGetAllSeniorInfo();
+
+  const renderSkeletons = () => {
+    return Array(5)
+      .fill(0)
+      .map((_, index) => (
+        <SeniorInfoSkeletonContainer key={`skeleton-${index}`}>
+          <Flex flexDir='column' w='100%' gap='var(--space-xs)'>
+            <Box
+              display='flex'
+              flexDir='row'
+              w='100%'
+              justifyContent='space-between'
+              alignItems='center'
+            >
+              <Box flex='1'>
+                <Skeleton width={200} height={24} />
+              </Box>
+              <Flex align='center' gap='var(--space-xxs)'>
+                <Skeleton width={30} height={30} />
+                <Skeleton width={30} height={30} />
+                <Skeleton width={30} height={30} />
+              </Flex>
+            </Box>
+            <Box>
+              <Skeleton width={100} height={20} />
+            </Box>
+          </Flex>
+        </SeniorInfoSkeletonContainer>
+      ));
+  };
 
   return (
     <PageLayout>
@@ -32,18 +70,20 @@ export const SeniorRegisterPage = () => {
             fontSize='var(--font-size-xl)'
             fontWeight='500'
           >
-            {seniors?.length}명
+            {isLoading ? <Skeleton width={30} /> : `${seniors?.length}명`}
           </Text>
         </Box>
 
         <Flex w='full' flexDir='column' gap='var(--space-sm)'>
-          {seniors?.map((senior: SeniorInfoType) => (
-            <SeniorInfo
-              key={senior.seniorId}
-              senior={senior}
-              refetch={refetch}
-            />
-          ))}
+          {isLoading
+            ? renderSkeletons()
+            : seniors?.map((senior: SeniorInfoType) => (
+                <SeniorInfo
+                  key={senior.seniorId}
+                  senior={senior}
+                  refetch={refetch}
+                />
+              ))}
         </Flex>
       </SeniorInfoContainer>
     </PageLayout>
@@ -57,4 +97,13 @@ const SeniorInfoContainer = styled(Flex)`
   gap: var(--space-sm);
 `;
 
+const SeniorInfoSkeletonContainer = styled(Flex)`
+  width: 100%;
+  flex-direction: column;
+  background-color: var(--color-white);
+  border: 2px solid var(--color-white-gray);
+  border-radius: 10px;
+  padding: var(--space-md);
+`;
+
 export default SeniorRegisterPage;

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)}

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 />