Skip to content

Commit

Permalink
perf
Browse files Browse the repository at this point in the history
  • Loading branch information
SeungJL committed Nov 17, 2024
1 parent 0cc699c commit 49acb6a
Show file tree
Hide file tree
Showing 10 changed files with 67 additions and 32 deletions.
1 change: 1 addition & 0 deletions components/molecules/cards/GatherThumbnailCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ const STATUS_TO_BADGE_PROPS: Record<GatherStatus, { text: string; colorScheme: s
close: { text: "취소", colorScheme: "gray" },
pending: { text: "모집중", colorScheme: "mint" },
end: { text: "종료", colorScheme: "gray" },
ready: { text: "오픈 예정", colorScheme: "purple" },
};

export function GatherThumbnailCard({
Expand Down
40 changes: 21 additions & 19 deletions components/skeleton/GatherThumbnailCardSkeleton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,33 @@ import { Box, Flex, Skeleton } from "@chakra-ui/react";

export function GatherThumbnailCardSkeleton() {
return (
<Box h="98px" mb={4} border="var(--border)" borderRadius="12px" p="8px" bg="white">
<Flex justify="space-between">
{/* Image placeholder */}
<Skeleton w="98px" h="98px" borderRadius="12px" />
<Box pb={4} mb={4}>
<Box h="98px" border="var(--border)" borderRadius="12px" p="8px" bg="white">
<Flex justify="space-between">
{/* Image placeholder */}
<Skeleton w="98px" h="98px" borderRadius="12px" />

<Flex direction="column" ml={4} flex={1}>
{/* Badges placeholder */}
<Flex mb={2}>
<Skeleton w="40px" h="20px" borderRadius="4px" mr={2} />
<Skeleton w="40px" h="20px" borderRadius="4px" />
</Flex>
<Flex direction="column" ml={4} flex={1}>
{/* Badges placeholder */}
<Flex mb={2}>
<Skeleton w="40px" h="20px" borderRadius="4px" mr={2} />
<Skeleton w="40px" h="20px" borderRadius="4px" />
</Flex>

{/* Title placeholder */}
<Skeleton w="150px" h="20px" mb={2} />
{/* Title placeholder */}
<Skeleton w="150px" h="20px" mb={2} />

{/* Subtitle placeholder */}
<Skeleton w="110px" h="12px" mb={2} />
{/* Subtitle placeholder */}
<Skeleton w="110px" h="12px" mb={2} />

{/* Avatar and User Count placeholder */}
<Flex justify="space-between" alignItems="center" mt={1}>
<Skeleton w="60px" h="16px" />
<Skeleton w="40px" h="16px" />
{/* Avatar and User Count placeholder */}
<Flex justify="space-between" alignItems="center" mt={1}>
<Skeleton w="60px" h="16px" />
<Skeleton w="40px" h="16px" />
</Flex>
</Flex>
</Flex>
</Flex>
</Box>
</Box>
);
}
1 change: 1 addition & 0 deletions constants/styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ export const STATUS_TP_COLOR: Record<GatherStatus, string> = {
pending: "var(--color-red)",
close: "var(--gray-500)",
end: "var(--gray-500)",
ready: "purple",
};

export const COLOR_SCHEME_BG = {
Expand Down
1 change: 1 addition & 0 deletions hooks/groupStudy/queries.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
interface GroupShapShotProps {
online: IGroup[];
offline: IGroup[];
new: IGroup[];
}

export const useGroupSnapshotQuery = (options?: QueryOptions<GroupShapShotProps>) =>
Expand Down
16 changes: 9 additions & 7 deletions pageTemplates/home/HomeGatherCol.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -43,15 +43,17 @@ export default function HomeGatherCol() {
{cardDataArr.map((cardData, idx) => (
<GatherThumbnailCard key={idx} {...cardData} />
))}
{cardDataArr.length >= 3 && (
<SectionFooterButton
url={`/gather?location=${convertLocationLangTo(session?.user.location, "en")}`}
/>
)}
</Flex>
) : (
[1, 2, 3].map((idx) => <GatherThumbnailCardSkeleton key={idx} />)
)}
<Flex direction="column">
{[1, 2, 3].map((idx) => (
<GatherThumbnailCardSkeleton key={idx} />
))}
</Flex>
)}{" "}
<SectionFooterButton
url={`/gather?location=${convertLocationLangTo(session?.user.location, "en")}`}
/>
</Box>
);
}
Expand Down
2 changes: 1 addition & 1 deletion pageTemplates/home/HomeGroupCol.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ export const setGroupDataToCardCol = (
const cardCol: GatherThumbnailCardProps[] = groups.map((group, idx) => ({
type: "group",
title: group.title,
status: group.status,
status: group.participants.length <= 1 ? "ready" : group.status,
category: group.category.main,
date: dayjsToFormat(dayjs(group.createdAt).locale("ko"), "YY년 M월 D일 개설"),
place: group.category.sub,
Expand Down
10 changes: 9 additions & 1 deletion pageTemplates/home/HomeGroupSection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,17 @@ import HomeGroupCol from "./HomeGroupCol";

function HomeGroupSection() {
const { data: data } = useGroupSnapshotQuery();

console.log(42, data);
return (
<>
<Box my={5}>
<SectionHeader title="About 신규 소모임" subTitle="Group">
<ButtonWrapper size="xs" url="/group">
<ShortArrowIcon dir="right" />
</ButtonWrapper>
</SectionHeader>
<HomeGroupCol threeGroups={data?.new} />
</Box>
<Box my={5}>
<SectionHeader title="About 오프라인 소모임" subTitle="Group">
<ButtonWrapper size="xs" url="/group">
Expand Down
22 changes: 20 additions & 2 deletions pageTemplates/home/HomeReviewSection.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Box } from "@chakra-ui/react";
import { Box, Grid, GridItem, Skeleton } from "@chakra-ui/react";
import { useRouter } from "next/navigation";

import ButtonWrapper from "../../components/atoms/ButtonWrapper";
Expand Down Expand Up @@ -28,7 +28,25 @@ export default function HomeReviewSection() {
<ShortArrowIcon dir="right" />
</ButtonWrapper>
</SectionHeader>
<Box mt={4}>{imageArr && <ImageTileGridLayout size="lg" imageDataArr={imageArr} />}</Box>
<Box mt={4}>
{imageArr ? (
<ImageTileGridLayout size="lg" imageDataArr={imageArr} />
) : (
<Grid
templateColumns="repeat(auto-fit, minmax(150px, 1fr))"
gap={3} // 각 셀 간의 간격
>
{[1, 2, 3, 4].map((item) => (
<GridItem key={item} w="full">
<Skeleton w="full" aspectRatio={1 / 1} bg="pink" borderRadius="12px"></Skeleton>
<Skeleton mt={2} h="16.5px" w="full" bg="pink">
34
</Skeleton>
</GridItem>
))}
</Grid>
)}
</Box>
</Box>
);
}
4 changes: 3 additions & 1 deletion pages/group/[id]/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,9 @@ function GroupDetail() {
</UnorderedList>
</Box>
<Box lineHeight="20px" mt={4} fontSize="13px">
<Box>오픈채팅방</Box>
<Box>
<b style={{ color: "var(--gray-800)" }}>단톡방 링크</b>(가입 후 입장)
</Box>
<BlurredLink isBlur={!isMember} url={group.link} />
</Box>
<Flex mt={4}>
Expand Down
2 changes: 1 addition & 1 deletion types/models/gatherTypes/gatherTypes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export interface IGatherWriting {
export type GatherCategory = "전체" | "모집중" | "완료";
export type IGatherType = { title: string; subtitle?: string };

export type GatherStatus = "open" | "close" | "end" | "pending";
export type GatherStatus = "open" | "close" | "end" | "pending" | "ready";

export type IGatherLocation = {
main: string;
Expand Down

0 comments on commit 49acb6a

Please sign in to comment.