Skip to content

Commit 8f27bb9

Browse files
YOOJEYEONGYOOJEYEONG
authored
Merge pull request #192 from Codeit-FE18-Part3-Team4/feature/#55
[#55] 대시보드 컬럼 스켈레톤
2 parents 3b09bac + 3ebbac7 commit 8f27bb9

4 files changed

Lines changed: 179 additions & 43 deletions

File tree

‎src/components/dashboard-side-bar/dashboard-button-skeleton.tsx‎

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,36 @@
1+
import { useSsrResponsive } from "@/hooks/use-ssr-responsive";
12
import Skeleton from "react-loading-skeleton";
23
import "react-loading-skeleton/dist/skeleton.css";
34
import styles from "./dashboard-side-bar.module.css";
45

6+
const skeletonBaseColor = "var(--color-black700)";
7+
const skeletonHighlightColor = "var(--color-black600)";
8+
59
export default function DashboardButtonSkeleton() {
10+
const { isTablet } = useSsrResponsive();
11+
12+
const leftSize = isTablet ? 20 : 24;
13+
const MainWidth = isTablet ? 120 : 190;
14+
615
return (
716
<div className={`${styles.button} ${styles.dashboardButton}`}>
817
<Skeleton
9-
width={24}
10-
height={24}
11-
baseColor="var(--color-black700)"
12-
highlightColor="var(--color-black600)"
18+
width={leftSize}
19+
height={leftSize}
20+
baseColor={skeletonBaseColor}
21+
highlightColor={skeletonHighlightColor}
1322
/>
1423
<Skeleton
15-
width={190}
16-
height={24}
17-
baseColor="var(--color-black700)"
18-
highlightColor="var(--color-black600)"
24+
width={MainWidth}
25+
height={leftSize}
26+
baseColor={skeletonBaseColor}
27+
highlightColor={skeletonHighlightColor}
1928
/>
2029
<Skeleton
2130
width={20}
2231
height={20}
23-
baseColor="var(--color-black700)"
24-
highlightColor="var(--color-black600)"
32+
baseColor={skeletonBaseColor}
33+
highlightColor={skeletonHighlightColor}
2534
/>
2635
</div>
2736
);

‎src/components/dashboard/card/card-skeleton.tsx‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import Skeleton from "react-loading-skeleton";
2+
import "react-loading-skeleton/dist/skeleton.css";
3+
import styles from "./card.module.css";
4+
5+
const skeletonBaseColor = "var(--color-black500)";
6+
const skeletonHighlightColor = "var(--color-black300)";
7+
8+
export default function CardSkeleton() {
9+
return (
10+
<article className={styles.cardContainer}>
11+
<div className={styles.cardImage}>
12+
<Skeleton
13+
height={160}
14+
borderRadius={8}
15+
baseColor={skeletonBaseColor}
16+
highlightColor={skeletonHighlightColor}
17+
/>
18+
</div>
19+
20+
<Skeleton
21+
height={24}
22+
width="80%"
23+
borderRadius={6}
24+
baseColor={skeletonBaseColor}
25+
highlightColor={skeletonHighlightColor}
26+
style={{ marginBottom: 8 }}
27+
/>
28+
29+
<div className={styles.badge}>
30+
<Skeleton
31+
width={60}
32+
height={22}
33+
borderRadius={11}
34+
style={{ marginRight: 6 }}
35+
baseColor={skeletonBaseColor}
36+
highlightColor={skeletonHighlightColor}
37+
/>
38+
<Skeleton
39+
width={50}
40+
height={22}
41+
borderRadius={11}
42+
baseColor={skeletonBaseColor}
43+
highlightColor={skeletonHighlightColor}
44+
/>
45+
</div>
46+
47+
<Skeleton
48+
width={100}
49+
height={18}
50+
borderRadius={4}
51+
style={{ marginBottom: 8 }}
52+
baseColor={skeletonBaseColor}
53+
highlightColor={skeletonHighlightColor}
54+
/>
55+
56+
<div className={styles.assignee}>
57+
<Skeleton
58+
circle
59+
width={26}
60+
height={26}
61+
style={{ marginRight: 8 }}
62+
baseColor={skeletonBaseColor}
63+
highlightColor={skeletonHighlightColor}
64+
/>
65+
<Skeleton
66+
width={80}
67+
height={18}
68+
borderRadius={4}
69+
baseColor={skeletonBaseColor}
70+
highlightColor={skeletonHighlightColor}
71+
/>
72+
</div>
73+
</article>
74+
);
75+
}

‎src/components/dashboard/column/column-title-skeleton.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import Skeleton from "react-loading-skeleton";
2+
import "react-loading-skeleton/dist/skeleton.css";
3+
import styles from "./column.module.css";
4+
5+
const skeletonBaseColor = "var(--color-black500)";
6+
const skeletonHighlightColor = "var(--color-black300)";
7+
8+
export default function ColumnTitleSkeleton() {
9+
return (
10+
<div className={styles.columnTitleWrapper}>
11+
<div className={styles.columnTitle}>
12+
<Skeleton
13+
width={110}
14+
height={24}
15+
borderRadius={8}
16+
baseColor={skeletonBaseColor}
17+
highlightColor={skeletonHighlightColor}
18+
/>
19+
<Skeleton
20+
width={20}
21+
height={24}
22+
borderRadius={8}
23+
baseColor={skeletonBaseColor}
24+
highlightColor={skeletonHighlightColor}
25+
/>
26+
</div>
27+
<div className={styles.buttonWrapper}>
28+
<Skeleton
29+
width={24}
30+
height={24}
31+
borderRadius={8}
32+
baseColor={skeletonBaseColor}
33+
highlightColor={skeletonHighlightColor}
34+
/>
35+
<Skeleton
36+
width={24}
37+
height={24}
38+
borderRadius={8}
39+
baseColor={skeletonBaseColor}
40+
highlightColor={skeletonHighlightColor}
41+
/>
42+
</div>
43+
</div>
44+
);
45+
}

‎src/components/dashboard/column/column.tsx‎

Lines changed: 40 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import { Direction, Menu, MenuItem } from "@/features/card/components/menu";
55
import { Card as CardData } from "@/types/card";
66
import { classnames } from "@/utils/classnames";
77
import { useEffect, useRef } from "react";
8+
import CardSkeleton from "../card/card-skeleton";
9+
import ColumnTitleSkeleton from "./column-title-skeleton";
810
import styles from "./column.module.css";
911
import PlusSvg from "./plus-svg";
1012

@@ -60,42 +62,47 @@ export default function Column({
6062

6163
return (
6264
<section className={styles.columnContainer}>
63-
<div className={styles.columnTitleWrapper}>
64-
<div className={styles.columnTitle}>
65-
<h3
66-
title={columnTitle}
67-
className={classnames(Typography.xlSemiBold, styles.columnName)}
68-
>
69-
{columnTitle}
70-
</h3>
71-
<h3 className={Typography.lgSemiBold}>{cards.length}</h3>
72-
</div>
73-
<div className={styles.buttonWrapper}>
74-
<button
75-
className={styles.columnTitleButton}
76-
onClick={() => onClick?.(ColumnActionType.Create)}
77-
>
78-
<PlusSvg className={styles.icon} />
79-
</button>
80-
<Menu
81-
items={[
82-
MenuItem.edit(() => onClick?.(ColumnActionType.Modify)),
83-
MenuItem.delete(() => onClick?.(ColumnActionType.Delete)),
84-
]}
85-
direction={Direction.Right}
86-
>
87-
<SettingSvg
88-
className={classnames(
89-
styles.columnEditIcon,
90-
styles.columnTitleButton
91-
)}
92-
/>
93-
</Menu>
65+
{isLoadingCards && cards.length === 0 ? (
66+
<ColumnTitleSkeleton />
67+
) : (
68+
<div className={styles.columnTitleWrapper}>
69+
<div className={styles.columnTitle}>
70+
<h3
71+
title={columnTitle}
72+
className={classnames(Typography.xlSemiBold, styles.columnName)}
73+
>
74+
{columnTitle}
75+
</h3>
76+
<h3 className={Typography.lgSemiBold}>{cards.length}</h3>
77+
</div>
78+
<div className={styles.buttonWrapper}>
79+
<button
80+
className={styles.columnTitleButton}
81+
onClick={() => onClick?.(ColumnActionType.Create)}
82+
>
83+
<PlusSvg className={styles.icon} />
84+
</button>
85+
<Menu
86+
items={[
87+
MenuItem.edit(() => onClick?.(ColumnActionType.Modify)),
88+
MenuItem.delete(() => onClick?.(ColumnActionType.Delete)),
89+
]}
90+
direction={Direction.Right}
91+
>
92+
<SettingSvg
93+
className={classnames(
94+
styles.columnEditIcon,
95+
styles.columnTitleButton
96+
)}
97+
/>
98+
</Menu>
99+
</div>
94100
</div>
95-
</div>
101+
)}
102+
96103
<div className={styles.cardsWrapper}>
97104
{isLoadingCards && cards.length === 0 ? (
98-
<div>카드 로딩중...</div>
105+
<CardSkeleton />
99106
) : (
100107
<>
101108
{cards.map((card) => (

0 commit comments

Comments
 (0)