-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(Leaderboard): Segment 변경 시 불필요한 재렌더링
SegmentedControl 변경시 재렌더링될 필요 없는 부분까지 되는 문제 ex. SegmentedControl, PromoSelect loading, error, !data 처리를 내부 -Result 컴포넌트에서 처리하는 방식으로 해결하였습니다.
- Loading branch information
Showing
15 changed files
with
667 additions
and
458 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
67 changes: 0 additions & 67 deletions
67
app/src/Leaderboard/components/Leaderboard/LeaderboardHeader.tsx
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import { | ||
| Pagination, | ||
| type PaginationProps, | ||
| } from '@shared/components/Pagination'; | ||
| import { useDeviceType } from '@shared/utils/react-responsive/useDeviceType'; | ||
|
|
||
| type LeaderboardPaginationProps = Omit<PaginationProps, 'pagePerRow'>; | ||
|
|
||
| export function LeaderboardPagination(props: LeaderboardPaginationProps) { | ||
| const device = useDeviceType(); | ||
| const pagePerRow = device === 'mobile' ? 5 : 10; | ||
|
|
||
| return <Pagination {...props} pagePerRow={pagePerRow} />; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import { Promo } from '@shared/__generated__/graphql'; | ||
| import { Select, SelectContent, SelectTrigger } from '@shared/ui-kit'; | ||
| import { numberWithUnitFormatter } from '@shared/utils/formatters/numberWithUnitFormatter'; | ||
|
|
||
| import { PromoSelectList } from './PromoSelectList'; | ||
|
|
||
| type PromoSelectProps = { | ||
| curr: number | null; | ||
| list: Promo[]; | ||
| onChange: (promo: string | null) => void; | ||
| }; | ||
|
|
||
| export function PromoSelect({ curr, list, onChange }: PromoSelectProps) { | ||
| const unit = '기'; | ||
|
|
||
| return ( | ||
| <Select | ||
| width="21rem" | ||
| onValueChange={onChange} | ||
| defaultValue={curr !== null ? curr.toString() : undefined} | ||
| defaultRenderValue={ | ||
| curr !== null ? numberWithUnitFormatter(curr, unit) : undefined | ||
| } | ||
| > | ||
| <SelectTrigger placeholder="전체" /> | ||
| <SelectContent maxHeight="20rem"> | ||
| <PromoSelectList list={list} /> | ||
| </SelectContent> | ||
| </Select> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
96 changes: 96 additions & 0 deletions
96
app/src/Leaderboard/pages/Comment/components/LeaderboardCommentResult.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| import { QueryResult } from '@apollo/client'; | ||
| import { useAtomValue } from 'jotai'; | ||
| import { useSearchParams } from 'react-router-dom'; | ||
|
|
||
| import { leaderboardArgsAtom } from '@/Leaderboard/atoms/leaderboardArgsAtom'; | ||
| import { Leaderboard } from '@/Leaderboard/components/Leaderboard'; | ||
| import { LeaderboardDateDescriptor } from '@/Leaderboard/components/Leaderboard/LeaderboardDateDescriptor'; | ||
| import { LeaderboardPagination } from '@/Leaderboard/components/LeaderboardPagination'; | ||
| import { LeaderboardResultSkeleton } from '@/Leaderboard/components/skeletons/LeaderboardResultSkeleton'; | ||
| import { SIZE_PER_PAGE } from '@/Leaderboard/constants/defaultOptions'; | ||
| import { LEADERBOARD_PARAM_KEYS } from '@/Leaderboard/constants/paramKeys'; | ||
| import { | ||
| DateTemplate, | ||
| GetLeaderboardCommentQuery, | ||
| } from '@shared/__generated__/graphql'; | ||
| import { FullPageApolloErrorView } from '@shared/components/ApolloError/FullPageApolloErrorView'; | ||
| import { HStack, Spacer, VStack } from '@shared/ui-kit'; | ||
|
|
||
| type LeaderboardCommentResultProps = { | ||
| result: QueryResult< | ||
| GetLeaderboardCommentQuery, | ||
| { | ||
| dateTemplate: DateTemplate; | ||
| pageNumber: number; | ||
| promo: number | null; | ||
| pageSize: number; | ||
| } | ||
| >; | ||
| }; | ||
|
|
||
| export function LeaderboardCommentResult({ | ||
| result: { loading, error, data }, | ||
| }: LeaderboardCommentResultProps) { | ||
| const [_, setSearchParams] = useSearchParams(); | ||
| const params = new URLSearchParams(); | ||
|
|
||
| const { PROMO, PAGE } = LEADERBOARD_PARAM_KEYS; | ||
|
|
||
| const leaderboardArgs = useAtomValue(leaderboardArgsAtom); | ||
|
|
||
| if (leaderboardArgs === null) { | ||
| throw new Error('leaderboardArgs is null'); | ||
| } | ||
|
|
||
| const { promo, pageNumber } = leaderboardArgs; | ||
|
|
||
| function handlePageNumberChange(pageNumber: number) { | ||
| if (promo) { | ||
| params.set(PROMO, promo.toString()); | ||
| } | ||
| params.set(PAGE, pageNumber.toString()); | ||
|
|
||
| setSearchParams(params); | ||
| } | ||
|
|
||
| if (loading) { | ||
| return <LeaderboardResultSkeleton />; | ||
| } | ||
| if (error) { | ||
| return <FullPageApolloErrorView message={error.message} />; | ||
| } | ||
| if (!data) { | ||
| return <LeaderboardResultSkeleton />; | ||
| } | ||
|
|
||
| const { | ||
| data: { | ||
| me, | ||
| totalRanking: { nodes, totalCount }, | ||
| }, | ||
| start, | ||
| end, | ||
| } = data.getLeaderboardComment.byDateTemplate; | ||
|
|
||
| const unit = '자'; | ||
|
|
||
| return ( | ||
| <VStack w="100%" spacing="4rem"> | ||
| <VStack w="100%" spacing="1rem"> | ||
| <HStack w="100%"> | ||
| <Spacer /> | ||
| <LeaderboardDateDescriptor | ||
| start={new Date(start)} | ||
| end={new Date(end)} | ||
| /> | ||
| </HStack> | ||
| <Leaderboard me={me} list={nodes} unit={unit} /> | ||
| </VStack> | ||
| <LeaderboardPagination | ||
| currPageNumber={pageNumber} | ||
| onPageNumberChange={handlePageNumberChange} | ||
| totalPageNumber={Math.ceil(totalCount / SIZE_PER_PAGE)} | ||
| /> | ||
| </VStack> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.