From 892ddb109320a0e0b956a464b205acd388e81092 Mon Sep 17 00:00:00 2001 From: nimod7890 Date: Wed, 21 Aug 2024 16:03:30 +0900 Subject: [PATCH 1/7] perf: modal lazy loading --- .../src/components/event/racing/dashboard/card/index.tsx | 8 ++++---- .../user/src/components/home/teamsDescriptions/index.tsx | 4 +++- packages/user/src/components/shared/withAuthHOC.tsx | 5 +++-- 3 files changed, 10 insertions(+), 7 deletions(-) diff --git a/packages/user/src/components/event/racing/dashboard/card/index.tsx b/packages/user/src/components/event/racing/dashboard/card/index.tsx index 90f061fd..124e8924 100644 --- a/packages/user/src/components/event/racing/dashboard/card/index.tsx +++ b/packages/user/src/components/event/racing/dashboard/card/index.tsx @@ -1,11 +1,11 @@ -import { memo } from 'react'; -import TeamSelectModal, { - type TeamSelectModalProps, -} from 'src/components/shared/modal/teamSelectModal/index.tsx'; +import { lazy, memo } from 'react'; +import type { TeamSelectModalProps } from 'src/components/shared/modal/teamSelectModal/index.tsx'; import withAuth from 'src/components/shared/withAuthHOC.tsx'; import useGetUserInfo from 'src/hooks/query/useGetUserInfo.ts'; import UnassignedCard from './UnassignedCard.tsx'; +const TeamSelectModal = lazy(() => import('src/components/shared/modal/teamSelectModal/index.tsx')); + const ProtectedTeamSelectModal = withAuth(TeamSelectModal); const RacingCard = memo(() => { diff --git a/packages/user/src/components/home/teamsDescriptions/index.tsx b/packages/user/src/components/home/teamsDescriptions/index.tsx index e55b3646..57b8bac9 100644 --- a/packages/user/src/components/home/teamsDescriptions/index.tsx +++ b/packages/user/src/components/home/teamsDescriptions/index.tsx @@ -1,10 +1,12 @@ import { CATEGORIES } from '@softeer/common/constants'; +import { lazy } from 'react'; import Button from 'src/components/common/Button.tsx'; import TriggerButtonWrapper from 'src/components/common/TriggerButtonWrapper.tsx'; -import TeamDescriptionModal from 'src/components/shared/modal/TeamDescriptionModal.tsx'; import EXTERNAL_LINKS from 'src/constants/externalLinks.ts'; import TeamInfoCard from './TeamInfoCard.tsx'; +const TeamDescriptionModal = lazy(() => import('src/components/shared/modal/TeamDescriptionModal.tsx')); + /** 팀 소개 섹션 */ export default function TeamsDescriptions() { const goDetailDescriptions = () => window.open(EXTERNAL_LINKS.CASPER_HOMEPAGE); diff --git a/packages/user/src/components/shared/withAuthHOC.tsx b/packages/user/src/components/shared/withAuthHOC.tsx index 1d6cfb5c..c620166a 100644 --- a/packages/user/src/components/shared/withAuthHOC.tsx +++ b/packages/user/src/components/shared/withAuthHOC.tsx @@ -1,8 +1,9 @@ -import React, { PropsWithChildren, ReactElement, useCallback, useState } from 'react'; +import React, { lazy, PropsWithChildren, ReactElement, useCallback, useState } from 'react'; import TriggerButtonWrapper from 'src/components/common/TriggerButtonWrapper.tsx'; -import LoginModal from 'src/components/shared/modal/login/index.tsx'; import useAuth from 'src/hooks/useAuth.ts'; +const LoginModal = lazy(() => import('src/components/shared/modal/login/index.tsx')); + interface WithAuthProps { unauthenticatedDisplay: ReactElement; } From c9217ec2f57fd5dce8bc6bd7278fb3da8af61c45 Mon Sep 17 00:00:00 2001 From: nimod7890 Date: Wed, 21 Aug 2024 16:16:06 +0900 Subject: [PATCH 2/7] =?UTF-8?q?fix:=20=EC=84=A0=EC=B0=A9=EC=88=9C=20?= =?UTF-8?q?=ED=80=B4=EC=A6=88=20=EC=B1=84=EC=A0=90=20=EA=B2=B0=EA=B3=BC=20?= =?UTF-8?q?=ED=99=94=EB=A9=B4=20=EB=B3=B4=EC=9D=B4=EC=A7=80=20=EC=95=8A?= =?UTF-8?q?=EC=95=98=EB=8D=98=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/shared/modal/fcfs/QuizStep.tsx | 14 +++++++------- .../src/components/shared/modal/fcfs/index.tsx | 6 ------ packages/user/src/hooks/query/useSubmitFCFSQuiz.ts | 2 -- 3 files changed, 7 insertions(+), 15 deletions(-) diff --git a/packages/user/src/components/shared/modal/fcfs/QuizStep.tsx b/packages/user/src/components/shared/modal/fcfs/QuizStep.tsx index 7651873b..218f8c80 100644 --- a/packages/user/src/components/shared/modal/fcfs/QuizStep.tsx +++ b/packages/user/src/components/shared/modal/fcfs/QuizStep.tsx @@ -1,12 +1,12 @@ -import { useEffect } from 'react'; import Chip from 'src/components/common/Chip.tsx'; import OptionButton from 'src/components/common/OptionButton.tsx'; +import PendingStep from 'src/components/shared/modal/PendingStep.tsx'; import useGetFCFSQuiz from 'src/hooks/query/useGetFCFSQuiz.ts'; import useSubmitFCFSQuiz, { SubmitFCFSQuizResponse } from 'src/hooks/query/useSubmitFCFSQuiz.ts'; export type ResultStepType = ReturnType; interface QuizStepProps { - onStepChange: (step: ResultStepType | 'pending') => void; + onStepChange: (step: ResultStepType) => void; } export default function QuizStep({ onStepChange }: QuizStepProps) { @@ -16,16 +16,16 @@ export default function QuizStep({ onStepChange }: QuizStepProps) { const { isPending, mutate: submitAnswer } = useSubmitFCFSQuiz(); - useEffect(() => { - if (isPending) onStepChange('pending'); - }, [isPending]); - const handleSubmit = (answer: number) => submitAnswer( { answer }, { onSuccess: (response) => onStepChange(getResultStepFromStatus(response)) }, ); + if (isPending) { + return 선착순 퀴즈 결과 불러오는 중...; + } + return (
@@ -34,7 +34,7 @@ export default function QuizStep({ onStepChange }: QuizStepProps) {
{choices.map(({ num, text }) => ( - handleSubmit(num)}> + handleSubmit(num)}> {text} ))} diff --git a/packages/user/src/components/shared/modal/fcfs/index.tsx b/packages/user/src/components/shared/modal/fcfs/index.tsx index 9dd88ad2..23f22d04 100644 --- a/packages/user/src/components/shared/modal/fcfs/index.tsx +++ b/packages/user/src/components/shared/modal/fcfs/index.tsx @@ -12,7 +12,6 @@ export default function FCFSModal(props: ModalProps) { const [Funnel, setStep] = useFunnel( [ 'quiz', - 'pending', 'already-done', 'correct-answer', 'wrong-answer', @@ -38,11 +37,6 @@ export default function FCFSModal(props: ModalProps) { )} - - - 선착순 퀴즈 결과 불러오는 중... - - diff --git a/packages/user/src/hooks/query/useSubmitFCFSQuiz.ts b/packages/user/src/hooks/query/useSubmitFCFSQuiz.ts index e727ab7c..57af8872 100644 --- a/packages/user/src/hooks/query/useSubmitFCFSQuiz.ts +++ b/packages/user/src/hooks/query/useSubmitFCFSQuiz.ts @@ -1,5 +1,3 @@ -/* eslint-disable @typescript-eslint/no-unused-vars */ -/* eslint-disable @typescript-eslint/naming-convention */ import { useMutation } from '@tanstack/react-query'; import http from 'src/services/api/index.ts'; From 193dec9c8659699104ba2244d51342381f4ceed1 Mon Sep 17 00:00:00 2001 From: nimod7890 Date: Wed, 21 Aug 2024 16:16:24 +0900 Subject: [PATCH 3/7] style: prettier --- .../components/appLayout/SideBarContainer.tsx | 10 ++-- packages/admin/src/components/chat/Chat.tsx | 12 ++-- packages/admin/src/components/common/Tab.tsx | 4 +- .../src/components/table/ResultTable.tsx | 2 +- packages/admin/src/layouts/appLayout.tsx | 2 +- .../admin/src/pages/events/CommonEventTab.tsx | 2 +- .../admin/src/pages/events/RaceEventTab.tsx | 8 ++- packages/common/src/utils/socket.ts | 2 +- .../components/common/PendingContainer.tsx | 5 +- .../racing/dashboard/card/UnassignedCard.tsx | 2 +- .../components/home/eventHero/racing/Cars.tsx | 4 +- .../home/eventHero/racing/Caspers.tsx | 30 ++++++++-- .../home/eventHero/racing/Effects.tsx | 60 +++++++++++++++---- .../components/home/quizHint/HintCards.tsx | 6 +- .../home/teamsDescriptions/index.tsx | 4 +- .../components/layout/header/tab/index.tsx | 4 +- .../components/shared/modal/fcfs/index.tsx | 8 +-- .../user/src/hooks/socket/useChatSocket.ts | 37 +++++------- packages/user/src/main.tsx | 5 +- packages/user/src/services/socket.ts | 5 +- 20 files changed, 129 insertions(+), 83 deletions(-) diff --git a/packages/admin/src/components/appLayout/SideBarContainer.tsx b/packages/admin/src/components/appLayout/SideBarContainer.tsx index bba37d25..85fe3881 100644 --- a/packages/admin/src/components/appLayout/SideBarContainer.tsx +++ b/packages/admin/src/components/appLayout/SideBarContainer.tsx @@ -16,8 +16,8 @@ function SideBarContainer() { 'block w-8 h-1 mb-1 relative bg-[#cdcdcd] rounded z-10 origin-[4px_0px] transition-transform transition-bg duration-500 ease-custom-bezier'; return ( -