From 9c477a0f21ff88f44f942824dd0c4dd7f7919aac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EA=B0=95=EB=AF=BC?= <79429482+Dobbymin@users.noreply.github.com> Date: Fri, 15 Nov 2024 16:06:06 +0900 Subject: [PATCH 1/4] =?UTF-8?q?Docs:=20=EB=B0=B1=EC=97=94=EB=93=9C=20?= =?UTF-8?q?=EB=A0=88=ED=8F=AC=20=EC=A3=BC=EC=86=8C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index e56840a..d6ce54e 100644 --- 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 합니다. From 9dafc88c2e6b31815054e50a44c431e3a8ba2f4e Mon Sep 17 00:00:00 2001 From: diwoni <70441308+Diwoni@users.noreply.github.com> Date: Fri, 15 Nov 2024 16:10:06 +0900 Subject: [PATCH 2/4] =?UTF-8?q?Refactor:=20=EB=A7=88=EC=9D=B4=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80(=EB=B3=B4=ED=98=B8=EC=9E=90,=EC=8B=9C?= =?UTF-8?q?=EB=8B=88=EB=98=90)=20lazy=20loading=20=EB=B0=8F=20=EC=8A=A4?= =?UTF-8?q?=EC=BC=88=EB=A0=88=ED=86=A4=20UI=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/guard/mypage/ui/GuardMyPage.tsx | 12 +- .../account-info-box/AccountInfoBox.tsx | 26 ++- .../profile-box/SinittoProfileBox.tsx | 33 ++- .../sinitto/mypage/hooks/useAccountInfo.ts | 3 +- .../sinitto/mypage/hooks/useSinittoProfile.ts | 3 +- src/pages/sinitto/mypage/ui/SinittoMyPage.tsx | 11 +- .../features/mypage/point-box/PointBox.tsx | 198 ++++++++++-------- .../mypage/point-log-box/PointLogBox.tsx | 127 ++++++----- 8 files changed, 268 insertions(+), 145 deletions(-) diff --git a/src/pages/guard/mypage/ui/GuardMyPage.tsx b/src/pages/guard/mypage/ui/GuardMyPage.tsx index a8b84d6..3fc4df9 100644 --- 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/sinitto/mypage/components/account-info-box/AccountInfoBox.tsx b/src/pages/sinitto/mypage/components/account-info-box/AccountInfoBox.tsx index 0e4209e..17c21f5 100644 --- a/src/pages/sinitto/mypage/components/account-info-box/AccountInfoBox.tsx +++ b/src/pages/sinitto/mypage/components/account-info-box/AccountInfoBox.tsx @@ -1,3 +1,5 @@ +import Skeleton from 'react-loading-skeleton'; + import { useAccountInfo } from '../../hooks'; import { BasicButton } from '@/shared'; import { Text, Input, Flex } from '@chakra-ui/react'; @@ -5,7 +7,7 @@ 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 = () => ( + + + 계좌번호 + + + + 은행 이름 + + + + 계좌 등록 여부 + + + + + ); + + if (isLoading) { + return renderSkeletonContent(); + } + return ( diff --git a/src/pages/sinitto/mypage/components/profile-box/SinittoProfileBox.tsx b/src/pages/sinitto/mypage/components/profile-box/SinittoProfileBox.tsx index 0ac3d2e..3aa9bdf 100644 --- a/src/pages/sinitto/mypage/components/profile-box/SinittoProfileBox.tsx +++ b/src/pages/sinitto/mypage/components/profile-box/SinittoProfileBox.tsx @@ -1,3 +1,6 @@ +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'; @@ -5,11 +8,39 @@ 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 = () => ( + <> + + + + + + + + + + + 이름 + + + + 전화번호 + + + + + + ); + + if (isLoading) { + return renderSkeletonContent(); + } + return ( <> diff --git a/src/pages/sinitto/mypage/hooks/useAccountInfo.ts b/src/pages/sinitto/mypage/hooks/useAccountInfo.ts index e95c185..1038670 100644 --- a/src/pages/sinitto/mypage/hooks/useAccountInfo.ts +++ b/src/pages/sinitto/mypage/hooks/useAccountInfo.ts @@ -8,7 +8,7 @@ import { import { validateAccountNumber } from '@/shared'; export const useAccountInfo = () => { - const { data: sinittoBankInfo, refetch } = useGetSinittoBankInfo(); + const { data: sinittoBankInfo, isLoading, refetch } = useGetSinittoBankInfo(); const [isEditingAccount, setIsEditingAccount] = useState(false); const [isRegistering, setIsRegistering] = useState(false); const [accountNumber, setAccountNumber] = useState( @@ -65,6 +65,7 @@ export const useAccountInfo = () => { accountNumber, bankName, sinittoBankInfo, + isLoading, }, states: { isEditingAccount, diff --git a/src/pages/sinitto/mypage/hooks/useSinittoProfile.ts b/src/pages/sinitto/mypage/hooks/useSinittoProfile.ts index eaaf87b..2f68ba5 100644 --- a/src/pages/sinitto/mypage/hooks/useSinittoProfile.ts +++ b/src/pages/sinitto/mypage/hooks/useSinittoProfile.ts @@ -14,7 +14,7 @@ export const useSinittoProfile = () => { const [phoneNumber, setPhoneNumber] = useState(''); const [isEditing, setIsEditing] = useState(false); - const { data: seniorInfo, refetch } = useSinittoInfo(); + const { data: seniorInfo, isLoading, refetch } = useSinittoInfo(); const modifySinittoInfoMutation = useModifySinittoInformation(); useEffect(() => { @@ -51,6 +51,7 @@ export const useSinittoProfile = () => { name, phoneNumber, seniorInfo, + isLoading, }, states: { isEditing, diff --git a/src/pages/sinitto/mypage/ui/SinittoMyPage.tsx b/src/pages/sinitto/mypage/ui/SinittoMyPage.tsx index 28daad0..ca47954 100644 --- a/src/pages/sinitto/mypage/ui/SinittoMyPage.tsx +++ b/src/pages/sinitto/mypage/ui/SinittoMyPage.tsx @@ -1,4 +1,5 @@ -import { AccountInfoBox, SinittoProfileBox } from '../components'; +import { lazy } from 'react'; + import { PointBox, PointLogBox, @@ -6,6 +7,14 @@ import { PageLayout, } from '@/shared/components'; +const SinittoProfileBox = lazy( + () => import('../components/profile-box/SinittoProfileBox') +); + +const AccountInfoBox = lazy( + () => import('../components/account-info-box/AccountInfoBox') +); + export const SinittoMyPage = () => { return ( diff --git a/src/shared/components/features/mypage/point-box/PointBox.tsx b/src/shared/components/features/mypage/point-box/PointBox.tsx index 3a32a2e..611815a 100644 --- a/src/shared/components/features/mypage/point-box/PointBox.tsx +++ b/src/shared/components/features/mypage/point-box/PointBox.tsx @@ -1,6 +1,9 @@ +import Skeleton from 'react-loading-skeleton'; +import 'react-loading-skeleton/dist/skeleton.css'; + import { BasicButton } from '@/shared/components'; import { usePoint } from '@/shared/hooks/point/usePoint'; -import { Box, Flex, Spinner, Text, Input } from '@chakra-ui/react'; +import { Box, Flex, Text, Input } from '@chakra-ui/react'; import styled from '@emotion/styled'; type Props = { @@ -19,99 +22,112 @@ const PointBox = ({ isSinitto = false }: Props) => { }, } = usePoint(); - if (isLoading) { - return ( - - - - ); - } + const renderSkeletonContent = () => ( + + + + + + + + + {!isSinitto && ( + + + + )} + + ); - return ( - - - - - 내 포인트 - - - {pointData?.price.toLocaleString()} 포인트 - - - {actionType ? ( - - setAmount(e.target.value)} - type='number' - min='1' - /> - - { - setActionType(''); - }} - > - {actionType === 'charge' ? '충전 취소' : '출금 취소'} - - - {actionType === 'charge' ? '충전 신청' : '출금 신청'} - - - - ) : ( + const renderContent = () => ( + + + + 내 포인트 + + + {pointData?.price.toLocaleString()} 포인트 + + + {actionType ? ( + + setAmount(e.target.value)} + type='number' + min='1' + /> - {isSinitto ? ( - setActionType('withdraw')} - > - 출금하기 - - ) : ( - setActionType('charge')} - > - 충전하기 - - )} + { + setActionType(''); + }} + > + {actionType === 'charge' ? '충전 취소' : '출금 취소'} + + + {actionType === 'charge' ? '충전 신청' : '출금 신청'} + - )} - {isSinitto ? null : ( - - 포인트 충전 요청 후 꼭 카카오톡 나에게 보내기 메세지를 확인해주세요. - - )} - + + ) : ( + + {isSinitto ? ( + setActionType('withdraw')} + > + 출금하기 + + ) : ( + setActionType('charge')} + > + 충전하기 + + )} + + )} + {isSinitto ? null : ( + + 포인트 충전 요청 후 꼭 카카오톡 나에게 보내기 메세지를 확인해주세요. + + )} + + ); + + return ( + + {isLoading ? renderSkeletonContent() : renderContent()} ); }; diff --git a/src/shared/components/features/mypage/point-log-box/PointLogBox.tsx b/src/shared/components/features/mypage/point-log-box/PointLogBox.tsx index 0dd2d87..880dc55 100644 --- a/src/shared/components/features/mypage/point-log-box/PointLogBox.tsx +++ b/src/shared/components/features/mypage/point-log-box/PointLogBox.tsx @@ -1,7 +1,9 @@ import { useState, useCallback, useMemo } from 'react'; +import Skeleton from 'react-loading-skeleton'; +import 'react-loading-skeleton/dist/skeleton.css'; import { getPointStatusLabel, useGetPointLogs } from '@/shared/hooks'; -import { Box, Spinner, Text } from '@chakra-ui/react'; +import { Box, Text } from '@chakra-ui/react'; import styled from '@emotion/styled'; const PointLogBox = () => { @@ -36,69 +38,93 @@ const PointLogBox = () => { [refetch, serverPage] ); - if (isLoading) { - return ( - - - - ); - } + const renderSkeletons = () => { + return Array(5) + .fill(0) + .map((_, index) => ( + + + + + + + + + + + + + + + + + + + + )); + }; return ( 포인트 내역 - {currentPageData.map((item, index) => ( - - - - {new Date(item.postTime).toLocaleDateString()} - - - {getPointStatusLabel(item.status)} - - - - - {item.content} - - - {(item.status === 'SPEND_COMPLETE' || - item.status === 'WITHDRAW_COMPLETE' - ? '-' - : item.status === 'EARN' || - item.status === 'CHARGE_COMPLETE' - ? '+' - : '') + item.price.toLocaleString()} - - - - - ))} + {isLoading + ? renderSkeletons() + : currentPageData.map((item, index) => ( + + + + {new Date(item.postTime).toLocaleDateString()} + + + {getPointStatusLabel(item.status)} + + + + + {item.content} + + + {(item.status === 'SPEND_COMPLETE' || + item.status === 'WITHDRAW_COMPLETE' + ? '-' + : item.status === 'EARN' || + item.status === 'CHARGE_COMPLETE' + ? '+' + : '') + item.price.toLocaleString()} + + + + + ))} pageChange(Math.max(currentPage - 1, 0))} - disabled={currentPage === 0} + disabled={currentPage === 0 || isLoading} > 이전 - 페이지 {currentPage + 1} / {totalPages || 1} + {isLoading ? ( + + ) : ( + `페이지 ${currentPage + 1} / ${totalPages || 1}` + )} pageChange(currentPage + 1)} - disabled={currentPage >= totalPages - 1} + disabled={currentPage >= totalPages - 1 || isLoading} > 다음 @@ -164,6 +190,11 @@ const PaginationButton = styled.button` font-weight: bold; padding: 0 var(--space-xs); outline: 0; + + &:disabled { + cursor: not-allowed; + opacity: 0.5; + } `; const DetailText = styled(Box)` From 14f33901f823cfca2cde0b38b7a4de8263b535fe Mon Sep 17 00:00:00 2001 From: diwoni <70441308+Diwoni@users.noreply.github.com> Date: Fri, 15 Nov 2024 16:32:08 +0900 Subject: [PATCH 3/4] =?UTF-8?q?Refactor:=20=EA=B8=B0=ED=83=80=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20lazy=20loading=20=EB=B0=8F=20=EC=8A=A4?= =?UTF-8?q?=EC=BC=88=EB=A0=88=ED=86=A4=20UI=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../guard/guide-line/ui/GuideLinePage.tsx | 81 +++++++++++++++---- .../components/GuardReportDetail.tsx | 43 ++++++++-- .../hello-call-report/ui/GuardReportPage.tsx | 5 +- .../profile-box/GuardProfileBox.tsx | 1 - .../guard/register/ui/SeniorRegisterPage.tsx | 71 +++++++++++++--- 5 files changed, 165 insertions(+), 36 deletions(-) diff --git a/src/pages/guard/guide-line/ui/GuideLinePage.tsx b/src/pages/guard/guide-line/ui/GuideLinePage.tsx index 460731d..0f42838 100644 --- 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(); - 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) => ( + + + + + + + + + + + + + + )); + }; return ( @@ -52,20 +90,31 @@ export const GuideLinePage = () => { fontSize='var(--font-size-xl)' fontWeight='500' > - {guidelineData?.length}개 + {isLoading ? : `${guidelineData?.length}개`} - {guidelineData?.map((guideline: SeniorGuideLineData) => ( - - ))} + {isLoading + ? renderSkeletons() + : guidelineData?.map((guideline: SeniorGuideLineData) => ( + + ))} ); }; + +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 index 915ea07..6b2d116 100644 --- a/src/pages/guard/hello-call-report/components/GuardReportDetail.tsx +++ b/src/pages/guard/hello-call-report/components/GuardReportDetail.tsx @@ -1,3 +1,5 @@ +import Skeleton from 'react-loading-skeleton'; + import { useCompleteHelloCall } from '../hooks/useCompleteHelloCall'; import { useReport } from '../hooks/useReport'; import IconCalendar from '@/pages/assets/hello-call/calendar.svg'; @@ -8,12 +10,27 @@ import { Box, Text, Image, Divider, Button, Flex } from '@chakra-ui/react'; type Props = { helloCallId: number; }; - const GuardReportDetail = ({ helloCallId }: Props) => { const { reportData, isLoading, isError } = useReport(helloCallId); const { completeHelloCall } = useCompleteHelloCall(helloCallId); - if (isLoading) return Loading...; + if (isLoading) { + return ( + + + + + + + ); + } + if (isError) return Error loading report data; return ( @@ -53,9 +70,13 @@ const GuardReportDetail = ({ helloCallId }: Props) => { - - {reportData?.startDate}~{reportData?.endDate} - + {isLoading ? ( + + ) : ( + + {reportData?.startDate}~{reportData?.endDate} + + )} { - {reportData?.sinittoName} + {isLoading ? ( + + ) : ( + reportData?.sinittoName + )} { - {reportData?.report} + {isLoading ? ( + + ) : ( + reportData?.report + )} diff --git a/src/pages/guard/hello-call-report/ui/GuardReportPage.tsx b/src/pages/guard/hello-call-report/ui/GuardReportPage.tsx index a4505e6..f93fbd7 100644 --- 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 index 2cae17a..799f5df 100644 --- 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/register/ui/SeniorRegisterPage.tsx b/src/pages/guard/register/ui/SeniorRegisterPage.tsx index 5c71839..25bc2ad 100644 --- 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) => ( + + + + + + + + + + + + + + + + + + )); + }; return ( @@ -32,18 +70,20 @@ export const SeniorRegisterPage = () => { fontSize='var(--font-size-xl)' fontWeight='500' > - {seniors?.length}명 + {isLoading ? : `${seniors?.length}명`} - {seniors?.map((senior: SeniorInfoType) => ( - - ))} + {isLoading + ? renderSkeletons() + : seniors?.map((senior: SeniorInfoType) => ( + + ))} @@ -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; From 39e8504def9d04632a10ac6c50fa705634aaed06 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 15 Nov 2024 16:32:35 +0900 Subject: [PATCH 4/4] =?UTF-8?q?Hotfix:=20=EC=BD=9C=EB=B0=B1=20=EA=B4=80?= =?UTF-8?q?=EB=A0=A8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20skeletion=20ui=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../detail/components/menu/CallbackMenu.tsx | 20 +++++-- .../detail/ui/CallBackDetailPage.tsx | 33 ++++++------ .../call-back/list/ui/CallBackListPage.tsx | 32 +++++++++--- .../guide-line/ui/SinittoGuideLinePage.tsx | 52 +++++++++++-------- 4 files changed, 88 insertions(+), 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 index ab83ba9..9208e2e 100644 --- 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 ? ( - + ) : accept ? ( completeCallback(callBackId)} diff --git a/src/pages/sinitto/call-back/detail/ui/CallBackDetailPage.tsx b/src/pages/sinitto/call-back/detail/ui/CallBackDetailPage.tsx index d86b1f6..ee91172 100644 --- 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 ( <> + + + {isCallBackLoading ? ( - + ) : ( - callbackData && ( - <> - - - - {callbackMenuData && } - - ) + callbackData && + callbackMenuData && )} diff --git a/src/pages/sinitto/call-back/list/ui/CallBackListPage.tsx b/src/pages/sinitto/call-back/list/ui/CallBackListPage.tsx index 5c166b9..132c322 100644 --- 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 ( + + + + + + + + + ); + } + return ( + {isError && 데이터를 불러오는데 오류가 발생했습니다} - {isError &&

데이터를 불러오는데 오류가 발생했습니다

} {data && data.pages.map((page, pageIndex) => page.content.map((callback: CallbackResponse, index: number) => { @@ -36,11 +56,7 @@ export const CallBackListPage = () => { }) )} - {isLoading ? ( - - ) : ( - !isError && !hasNextPage && 더 이상 요청이 없어요 🥲 - )} + {!isError && !hasNextPage && 더 이상 요청이 없어요 🥲} ); }; diff --git a/src/pages/sinitto/guide-line/ui/SinittoGuideLinePage.tsx b/src/pages/sinitto/guide-line/ui/SinittoGuideLinePage.tsx index d2dabc2..6ef608d 100644 --- a/src/pages/sinitto/guide-line/ui/SinittoGuideLinePage.tsx +++ b/src/pages/sinitto/guide-line/ui/SinittoGuideLinePage.tsx @@ -1,6 +1,6 @@ +import { lazy } from 'react'; import { useParams } from 'react-router-dom'; -import { GuideLineContainer } from '../components'; import { useGuideLineData, useGuideLineErrorHandling, @@ -8,9 +8,15 @@ import { } 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 ( + + <EmphasisSpan>{guideLineInfo}</EmphasisSpan> 가이드라인 + {isGuideLineLoading ? ( - + + + + + ) : ( - <> - - <EmphasisSpan>{guideLineInfo}</EmphasisSpan> 가이드라인 - - - {guideLine && - (guideLine.length === 0 ? ( -

등록된 가이드라인이 없습니다.

- ) : ( - guideLine.map((data: GuideLineResponse) => ( - - )) - ))} - - + + {guideLine && + (guideLine.length === 0 ? ( +

등록된 가이드라인이 없습니다.

+ ) : ( + guideLine.map((data: GuideLineResponse) => ( + + )) + ))} + )} );