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

Merge Master to Weekly
kakao-tech-campus-2nd-step3 · Nov 15, 2024 · 2f795ab · 2f795ab
2 parents 39e8504 + 7261370
commit 2f795ab
Show file tree

Hide file tree

Showing 14 changed files with 416 additions and 182 deletions.
diff --git a/README.md b/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 합니다.

diff --git a/src/pages/guard/guide-line/ui/GuideLinePage.tsx b/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);
+`;
diff --git a/src/pages/guard/hello-call-report/components/GuardReportDetail.tsx b/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>

diff --git a/src/pages/guard/hello-call-report/ui/GuardReportPage.tsx b/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();
 

diff --git a/src/pages/guard/mypage/components/profile-box/GuardProfileBox.tsx b/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;

diff --git a/src/pages/guard/mypage/ui/GuardMyPage.tsx b/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 (

diff --git a/src/pages/guard/register/ui/SeniorRegisterPage.tsx b/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;
diff --git a/src/pages/sinitto/mypage/components/account-info-box/AccountInfoBox.tsx b/src/pages/sinitto/mypage/components/account-info-box/AccountInfoBox.tsx
@@ -1,11 +1,13 @@
+import Skeleton from 'react-loading-skeleton';
+
 import { useAccountInfo } from '../../hooks';
 import { BasicButton } from '@/shared';
 import { Text, Input, Flex } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 
 const AccountInfoBox = () => {
   const {
-    accountData: { accountNumber, bankName, sinittoBankInfo },
+    accountData: { accountNumber, bankName, sinittoBankInfo, isLoading },
     states: { isEditingAccount, isRegistering },
     handlers: {
       setAccountNumber,
@@ -17,6 +19,28 @@ const AccountInfoBox = () => {
     },
   } = useAccountInfo();
 
+  const renderSkeletonContent = () => (
+    <AccountBoxLayout>
+      <Row>
+        <Title>계좌번호</Title>
+        <Skeleton width={180} height={24} />
+      </Row>
+      <Row>
+        <Title>은행 이름</Title>
+        <Skeleton width={120} height={24} />
+      </Row>
+      <Row>
+        <Title>계좌 등록 여부</Title>
+        <Skeleton width={80} height={24} />
+      </Row>
+      <Skeleton width='100%' height={40} borderRadius={5} />
+    </AccountBoxLayout>
+  );
+
+  if (isLoading) {
+    return renderSkeletonContent();
+  }
+
   return (
     <AccountBoxLayout>
       <Row>

diff --git a/src/pages/sinitto/mypage/components/profile-box/SinittoProfileBox.tsx b/src/pages/sinitto/mypage/components/profile-box/SinittoProfileBox.tsx
@@ -1,15 +1,46 @@
+import Skeleton from 'react-loading-skeleton';
+import 'react-loading-skeleton/dist/skeleton.css';
+
 import { useSinittoProfile } from '../../hooks';
 import { formatPhoneNumber, Logout, BasicButton } from '@/shared';
 import { Box, Text, Input, Flex } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 
 const SinittoProfileBox = () => {
   const {
-    profileData: { name, phoneNumber, seniorInfo },
+    profileData: { name, phoneNumber, seniorInfo, isLoading },
     states: { isEditing },
     handlers: { setName, setPhoneNumber, setIsEditing, saveModifiedInfo },
   } = useSinittoProfile();
 
+  const renderSkeletonContent = () => (
+    <>
+      <Flex w='full'>
+        <Flex marginRight='auto' alignItems='center' gap={2}>
+          <Skeleton width={100} height={32} />
+          <Skeleton width={120} height={28} />
+        </Flex>
+        <Skeleton width={60} height={28} />
+      </Flex>
+
+      <SinittoProfileBoxLayout>
+        <Row>
+          <Title>이름</Title>
+          <Skeleton width={80} height={24} />
+        </Row>
+        <Row>
+          <Title>전화번호</Title>
+          <Skeleton width={120} height={24} />
+        </Row>
+        <Skeleton width='100%' height={40} borderRadius={5} />
+      </SinittoProfileBoxLayout>
+    </>
+  );
+
+  if (isLoading) {
+    return renderSkeletonContent();
+  }
+
   return (
     <>
       <Flex w='full'>