Skip to content

Commit 9a84dd6

Browse files
GamjaIsMine02GamjaIsMine02
committed
Merge branch 'dev' into feature/plan-management-page
2 parents 3e06dd8 + 36c39af commit 9a84dd6

16 files changed

Lines changed: 531 additions & 34 deletions

‎app/(with-sidebar)/(home)/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ const Page = () => {
9999
/>
100100

101101
{/* 2-2. GraphSection */}
102-
<GraphSection></GraphSection>
102+
<GraphSection uid={currentUser.uid}></GraphSection>
103103

104104
{/* 2-3. BottomSection */}
105105
<BottomSection

‎app/(with-sidebar)/tils/page.tsx‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { fetchTilList } from '@/services/tils/tilListService.service';
1111
import { deleteTil } from '@/services/write/til.service';
1212

1313
import type { TilItem } from '@/types/til';
14+
import Pagination from '@/components/common/Pagination';
1415

1516
const Page = () => {
1617
const { user, authLoading } = useAuthUser();
@@ -23,6 +24,9 @@ const Page = () => {
2324

2425
const [searchTerm, setSearchTerm] = useState('');
2526

27+
const [currentPage, setCurrentPage] = useState(1);
28+
const itemsPerPage = 4;
29+
2630
// 데이터 가져오기
2731
useEffect(() => {
2832
if (!user) {
@@ -64,6 +68,27 @@ const Page = () => {
6468
setSortedItems(sorted);
6569
}, [items, sort, searchTerm]);
6670

71+
const totalPages = Math.ceil(sortedItems.length / itemsPerPage);
72+
73+
useEffect(() => {
74+
if (totalPages === 0) {
75+
if (currentPage !== 1) setCurrentPage(1);
76+
return;
77+
}
78+
if (currentPage > totalPages) {
79+
setCurrentPage(totalPages);
80+
}
81+
}, [totalPages, currentPage]);
82+
83+
const currentData = sortedItems.slice(
84+
(currentPage - 1) * itemsPerPage,
85+
currentPage * itemsPerPage
86+
);
87+
88+
const handlePageChange = (page: number) => {
89+
setCurrentPage(page);
90+
};
91+
6792
const handleDelete = async (id: string) => {
6893
if (!user) return;
6994

@@ -115,8 +140,14 @@ const Page = () => {
115140
{loading ? (
116141
<p className="text-sm text-slate-400">불러오는 중...</p>
117142
) : (
118-
<TilList items={sortedItems} onDelete={handleDelete} />
143+
<TilList items={currentData} onDelete={handleDelete} />
119144
)}
145+
146+
<Pagination
147+
currentPage={currentPage}
148+
totalPages={totalPages}
149+
onPageChange={handlePageChange}
150+
/>
120151
</div>
121152
);
122153
};

‎app/globals.css‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,3 +42,33 @@
4242
/* 텍스트(흰색) */
4343
--color-text-invert: #ffffff;
4444
}
45+
/* --- 잔디그래프 --- */
46+
.react-calendar-heatmap {
47+
transform-origin: top left;
48+
}
49+
50+
.react-calendar-heatmap text {
51+
font-size: 8px;
52+
fill: #9ca3af; /* gray-400 */
53+
}
54+
55+
.react-calendar-heatmap rect {
56+
rx: 3px;
57+
ry: 3px;
58+
}
59+
60+
.react-calendar-heatmap .grass-empty {
61+
fill: #f1f5f9;
62+
}
63+
.react-calendar-heatmap .grass-1 {
64+
fill: #a7f3d0;
65+
}
66+
.react-calendar-heatmap .grass-2 {
67+
fill: #34d399;
68+
}
69+
.react-calendar-heatmap .grass-3 {
70+
fill: #059669;
71+
}
72+
.react-calendar-heatmap .grass-4 {
73+
fill: #065f46;
74+
}

‎components/common/Pagination.tsx‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
type PaginationProps = {
2+
totalPages: number;
3+
currentPage: number;
4+
onPageChange: (page: number) => void;
5+
};
6+
7+
const Pagination = ({
8+
totalPages,
9+
currentPage,
10+
onPageChange,
11+
}: PaginationProps) => {
12+
const handleClick = (page: number) => {
13+
if (page < 1 || page > totalPages) return;
14+
onPageChange(page);
15+
};
16+
17+
const getPages = (): number[] => {
18+
const pages: number[] = [];
19+
const maxVisible = 5;
20+
21+
let start = Math.max(1, currentPage - Math.floor(maxVisible / 2));
22+
const end = Math.min(totalPages, start + maxVisible - 1);
23+
24+
if (end - start < maxVisible - 1) {
25+
start = Math.max(1, end - maxVisible + 1);
26+
}
27+
28+
for (let i = start; i <= end; i++) pages.push(i);
29+
return pages;
30+
};
31+
32+
const pages = getPages();
33+
34+
const baseBtn =
35+
'border-0 bg-transparent cursor-pointer text-[16px] font-medium text-[#616161] px-[10px] py-[6px] rounded-[6px] transition-all duration-200 ease-in-out';
36+
const activeBtn = '!bg-[#616161] text-white';
37+
const disabledBtn = 'disabled:text-[#ccc] disabled:cursor-not-allowed';
38+
39+
return (
40+
<div className="mt-7.5 flex items-center justify-center gap-1.5">
41+
<button
42+
className={`${baseBtn} ${disabledBtn}`}
43+
onClick={() => handleClick(currentPage - 1)}
44+
disabled={currentPage === 1}
45+
type="button"
46+
>
47+
&lt; 이전
48+
</button>
49+
50+
{pages[0] > 1 && (
51+
<>
52+
<button
53+
className={baseBtn}
54+
onClick={() => handleClick(1)}
55+
type="button"
56+
>
57+
1
58+
</button>
59+
{totalPages > 10 && <span className="px-1 text-[#888]">...</span>}
60+
</>
61+
)}
62+
63+
{pages.map((page) => (
64+
<button
65+
key={page}
66+
className={`${baseBtn} ${page === currentPage ? activeBtn : ''}`}
67+
onClick={() => handleClick(page)}
68+
type="button"
69+
>
70+
{page}
71+
</button>
72+
))}
73+
74+
{pages[pages.length - 1] < totalPages && (
75+
<>
76+
{totalPages > 10 && <span className="px-1 text-[#888]">...</span>}
77+
<button
78+
className={baseBtn}
79+
onClick={() => handleClick(totalPages)}
80+
type="button"
81+
>
82+
{totalPages}
83+
</button>
84+
</>
85+
)}
86+
87+
<button
88+
className={`${baseBtn} ${disabledBtn}`}
89+
onClick={() => handleClick(currentPage + 1)}
90+
disabled={currentPage === totalPages}
91+
type="button"
92+
>
93+
다음 &gt;
94+
</button>
95+
</div>
96+
);
97+
};
98+
99+
export default Pagination;

‎components/heatmap/GrassHeatmap.tsx‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
'use client';
2+
3+
import { useEffect, useMemo, useState } from 'react';
4+
import CalendarHeatmap from 'react-calendar-heatmap';
5+
import 'react-calendar-heatmap/dist/styles.css';
6+
import { Tooltip } from 'react-tooltip';
7+
import 'react-tooltip/dist/react-tooltip.css';
8+
import { fetchDailyStats } from '@/services/heatmap/dailyStat.service';
9+
10+
type HeatmapValue = { date: string; count: number };
11+
12+
function endOfWeek(date = new Date()) {
13+
const d = new Date(date);
14+
d.setDate(d.getDate() + (6 - d.getDay()));
15+
return d;
16+
}
17+
18+
type Props = { uid?: string };
19+
20+
export default function GrassHeatmap({ uid }: Props) {
21+
const endDate = useMemo(() => endOfWeek(new Date()), []);
22+
const startDate = useMemo(() => {
23+
const d = new Date(endDate);
24+
d.setFullYear(d.getFullYear() - 1);
25+
d.setDate(d.getDate() + 1);
26+
return d;
27+
}, [endDate]);
28+
29+
const [values, setValues] = useState<
30+
{ date: string; total: number; tilCount?: number; todoDoneCount?: number }[]
31+
>([]);
32+
33+
useEffect(() => {
34+
if (!uid) return;
35+
(async () => {
36+
const stats = await fetchDailyStats(uid);
37+
setValues(stats);
38+
})();
39+
}, [uid]);
40+
41+
const byDate = useMemo(() => {
42+
const m = new Map<
43+
string,
44+
{ tilCount: number; todoDoneCount: number; total: number }
45+
>();
46+
for (const s of values) {
47+
m.set(s.date, {
48+
tilCount: s.tilCount ?? 0,
49+
todoDoneCount: s.todoDoneCount ?? 0,
50+
total: s.total ?? 0,
51+
});
52+
}
53+
return m;
54+
}, [values]);
55+
56+
const heatmapValues: HeatmapValue[] = useMemo(
57+
() => values.map((s) => ({ date: s.date, count: s.total ?? 0 })),
58+
[values]
59+
);
60+
61+
return (
62+
<>
63+
<div className="overflow-x-auto">
64+
<div className="min-w-max">
65+
<CalendarHeatmap
66+
startDate={startDate}
67+
endDate={endDate}
68+
values={heatmapValues}
69+
gutterSize={2}
70+
showWeekdayLabels
71+
classForValue={(value) => {
72+
if (!value) return 'grass-empty';
73+
if (value.count >= 4) return 'grass-4';
74+
if (value.count === 3) return 'grass-3';
75+
if (value.count === 2) return 'grass-2';
76+
return 'grass-1';
77+
}}
78+
tooltipDataAttrs={(value) => {
79+
if (!value?.date)
80+
return { 'data-tooltip-id': '', 'data-tooltip-html': '' };
81+
const d = byDate.get(value.date);
82+
83+
const til = d?.tilCount ?? 0;
84+
const todo = d?.todoDoneCount ?? 0;
85+
const total = d?.total ?? 0;
86+
87+
return {
88+
'data-tooltip-id': 'grass-tip',
89+
// HTML 툴팁 (작은 박스)
90+
'data-tooltip-html':
91+
total === 0
92+
? `<div style="font-size:12px"><b>${value.date}</b><br/>기록 없음</div>`
93+
: `<div style="font-size:12px">
94+
<b>${value.date}</b><br/>
95+
📘 TIL: ${til}개<br/>
96+
✅ Plan: ${todo}개<br/>
97+
🔥 합계: ${total}개
98+
</div>`,
99+
};
100+
}}
101+
/>
102+
</div>
103+
</div>
104+
105+
{/* 툴팁 컴포넌트 */}
106+
<Tooltip
107+
id="grass-tip"
108+
place="top"
109+
className="!rounded-lg !bg-black/80 !px-3 !py-2 !text-xs !text-white"
110+
/>
111+
{/* 범례 */}
112+
<div className="mt-4 flex items-center justify-end gap-2 text-xs text-slate-500">
113+
<span>Less</span>
114+
<span className="h-3 w-3 rounded-sm bg-slate-100" />
115+
<span className="h-3 w-3 rounded-sm bg-emerald-200" />
116+
<span className="h-3 w-3 rounded-sm bg-emerald-400" />
117+
<span className="h-3 w-3 rounded-sm bg-emerald-600" />
118+
<span className="h-3 w-3 rounded-sm bg-emerald-800" />
119+
<span>More</span>
120+
</div>
121+
</>
122+
);
123+
}

‎components/home/GraphSection.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
import Card from './Card';
2+
import GrassHeatmap from '../heatmap/GrassHeatmap';
23

34
interface GraphSectionProps {
45
className?: string;
6+
uid?: string;
57
}
68

7-
const GraphSection = ({ className }: GraphSectionProps) => {
9+
const GraphSection = ({ className, uid }: GraphSectionProps) => {
810
return (
911
<div className={className}>
10-
<Card title="학습 기록">잔디그래프 구현 예정</Card>
12+
<Card title="학습 기록">
13+
<GrassHeatmap uid={uid} />
14+
</Card>
1115
</div>
1216
);
1317
};

‎components/home/ProfileSection.tsx‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1+
import Image from 'next/image';
12
import { Profile } from '@/services/home/profileService.service';
23
import Card from './Card';
34
import { getRandomProfileIcon } from '@/utils/getRandomProfileIcon';
5+
46
interface ProfileSectionProps {
57
className?: string;
68
profile: Profile | null;
@@ -9,12 +11,26 @@ interface ProfileSectionProps {
911

1012
const ProfileSection = ({ className, profile, uid }: ProfileSectionProps) => {
1113
const icon = getRandomProfileIcon(uid);
14+
const avatarUrl = profile?.avatar_url;
15+
1216
return (
1317
<div className={className}>
1418
<div className="md:col-span-2">
1519
<Card className="flex items-center gap-4">
1620
<div className="flex h-16 w-16 items-center justify-center overflow-hidden rounded-full border border-gray-100 bg-purple-100 pt-1">
17-
<span className="text-3xl">{icon}</span>
21+
<span className="text-3xl">
22+
{avatarUrl ? (
23+
<Image
24+
src={avatarUrl}
25+
alt="profile avatar"
26+
width={50}
27+
height={50}
28+
className="h-full w-full object-cover"
29+
/>
30+
) : (
31+
<span className="text-3xl">{icon}</span>
32+
)}
33+
</span>
1834
</div>
1935

2036
<div>

‎next.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { NextConfig } from 'next';
22

33
const nextConfig: NextConfig = {
4-
/* config options here */
4+
images: { domains: ['avatars.githubusercontent.com'] },
55
};
66

77
export default nextConfig;

0 commit comments

Comments
 (0)