Skip to content

Commit

Permalink
style: #14-프리티어 설정 변경 및 잔디 제작
Browse files Browse the repository at this point in the history
  • Loading branch information
@jukrap
jukrap committed Jul 24, 2024
1 parent 4fcb350 commit 3a6483f
Show file tree
Hide file tree
Showing 3 changed files with 132 additions and 134 deletions.
40 changes: 20 additions & 20 deletions src/app/blog/userblog/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,32 @@ import React from 'react';
import WeeklyContributionGraph from '@/components/blog/userblog/WeeklyContributionGraph';

const generateContributionData = () => {
const data = [];
const today = new Date();
const currentWeekStart = new Date(today.setDate(today.getDate() - today.getDay()));
const oneYearAgo = new Date(currentWeekStart);
oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1);
const data = [];
const today = new Date();
const currentWeekStart = new Date(today.setDate(today.getDate() - today.getDay()));
const oneYearAgo = new Date(currentWeekStart);
oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1);

for (let d = new Date(oneYearAgo); d <= currentWeekStart; d.setDate(d.getDate() + 7)) {
const weekStart = d.toISOString().split('T')[0];
const count = Math.floor(Math.random() * 10); // 0-9 사이의 랜덤한 포스트 수
data.push({ weekStart, count });
}
for (let d = new Date(oneYearAgo); d <= currentWeekStart; d.setDate(d.getDate() + 7)) {
const weekStart = d.toISOString().split('T')[0];
const count = Math.floor(Math.random() * 10); // 0-9 사이의 랜덤한 포스트 수
data.push({ weekStart, count });
}

return data;
return data;
};

const UserBlogPage = () => {
const contributionData = generateContributionData();
const contributionData = generateContributionData();

return (
<div className="p-8">
<h1 className="text-3xl font-bold mb-6">User Blog</h1>
<div className="max-w-lg mx-auto">
<WeeklyContributionGraph data={contributionData} />
</div>
</div>
);
return (
<div className="p-8">
<h1 className="text-3xl font-bold mb-6">User Blog</h1>
<div className="max-w-lg mx-auto">
<WeeklyContributionGraph data={contributionData} />
</div>
</div>
);
};

export default UserBlogPage;
84 changes: 42 additions & 42 deletions src/components/blog/userblog/Tooltip.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,53 +1,53 @@
import React from 'react';

interface TooltipProps {
weekStart: string;
count: number;
position: { x: number; y: number };
weekStart: string;
count: number;
position: { x: number; y: number };
}

const Tooltip: React.FC<TooltipProps> = ({ weekStart, count, position }) => {
const date = new Date(weekStart);
const currentYear = new Date().getFullYear();
const weekNumber = Math.ceil((date.getDate() - date.getDay() + 1) / 7);
const month = date.toLocaleString('default', { month: 'long' });
const year = date.getFullYear();
const date = new Date(weekStart);
const currentYear = new Date().getFullYear();
const weekNumber = Math.ceil((date.getDate() - date.getDay() + 1) / 7);
const month = date.toLocaleString('default', { month: 'long' });
const year = date.getFullYear();

let dateString;
if (year === currentYear) {
dateString = `${month}, ${weekNumber}주차`;
} else {
dateString = `${year}년 ${month}, ${weekNumber}주차`;
}
let dateString;
if (year === currentYear) {
dateString = `${month}, ${weekNumber}주차`;
} else {
dateString = `${year}년 ${month}, ${weekNumber}주차`;
}

return (
<div
className="absolute z-10 bg-white border border-gray-200 p-3 rounded-lg shadow-lg text-sm whitespace-nowrap tooltip text-center"
style={{
left: `${position.x}px`,
top: `${position.y - 15}px`,
transform: 'translate(-50%, -100%)',
}}
>
<div className="relative">
<div className="font-semibold text-gray-800">{dateString}</div>
<div className="text-blue-600 mt-1">{`${count}개의 글 등록`}</div>
</div>
<style jsx>{`
.tooltip::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid white;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
}
`}</style>
</div>
);
return (
<div
className="absolute z-10 bg-white border border-gray-200 p-3 rounded-lg shadow-lg text-sm whitespace-nowrap tooltip text-center"
style={{
left: `${position.x}px`,
top: `${position.y - 15}px`,
transform: 'translate(-50%, -100%)',
}}
>
<div className="relative">
<div className="font-semibold text-gray-800">{dateString}</div>
<div className="text-blue-600 mt-1">{`${count}개의 글 등록`}</div>
</div>
<style jsx>{`
.tooltip::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid white;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
}
`}</style>
</div>
);
};

export default Tooltip;
142 changes: 70 additions & 72 deletions src/components/blog/userblog/WeeklyContributionGraph.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,93 +5,91 @@ import React, { useState, useRef } from 'react';
import Tooltip from './Tooltip';

interface ContributionData {
weekStart: string;
count: number;
weekStart: string;
count: number;
}

interface WeeklyContributionGraphProps {
data: ContributionData[];
data: ContributionData[];
}

const WeeklyContributionGraph: React.FC<WeeklyContributionGraphProps> = ({ data }) => {
const [tooltipData, setTooltipData] = useState<ContributionData | null>(null);
const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
const graphRef = useRef<HTMLDivElement>(null);
const [tooltipData, setTooltipData] = useState<ContributionData | null>(null);
const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
const graphRef = useRef<HTMLDivElement>(null);

const getColor = (count: number): string => {
if (count === 0) return 'bg-gray-100';
if (count <= 2) return 'bg-green-100';
if (count <= 4) return 'bg-green-200';
if (count <= 6) return 'bg-green-300';
return 'bg-green-400';
};
const getColor = (count: number): string => {
if (count === 0) return 'bg-gray-100';
if (count <= 2) return 'bg-green-100';
if (count <= 4) return 'bg-green-200';
if (count <= 6) return 'bg-green-300';
return 'bg-green-400';
};

const generateWeeks = () => {
const today = new Date();
const currentWeekStart = new Date(today.setDate(today.getDate() - today.getDay()));
const oneYearAgo = new Date(currentWeekStart);
oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1);
const weeks = [];
const generateWeeks = () => {
const today = new Date();
const currentWeekStart = new Date(today.setDate(today.getDate() - today.getDay()));
const oneYearAgo = new Date(currentWeekStart);
oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1);
const weeks = [];

for (let d = new Date(oneYearAgo); d <= currentWeekStart; d.setDate(d.getDate() + 7)) {
const weekStart = new Date(d);
const weekStartString = weekStart.toISOString().split('T')[0];
const contributionData = data.find((item) => item.weekStart === weekStartString);
weeks.push({
weekStart: weekStartString,
count: contributionData ? contributionData.count : 0,
isMonthStart: weekStart.getDate() <= 7,
month: weekStart.toLocaleString('default', { month: 'short' }),
});
}
for (let d = new Date(oneYearAgo); d <= currentWeekStart; d.setDate(d.getDate() + 7)) {
const weekStart = new Date(d);
const weekStartString = weekStart.toISOString().split('T')[0];
const contributionData = data.find((item) => item.weekStart === weekStartString);
weeks.push({
weekStart: weekStartString,
count: contributionData ? contributionData.count : 0,
isMonthStart: weekStart.getDate() <= 7,
month: weekStart.toLocaleString('default', { month: 'short' }),
});
}

return weeks;
};
return weeks;
};

const weeks = generateWeeks();
const weeks = generateWeeks();

const handleMouseEnter = (week: ContributionData, event: React.MouseEvent<HTMLDivElement>) => {
const rect = event.currentTarget.getBoundingClientRect();
const graphRect = graphRef.current?.getBoundingClientRect();
const handleMouseEnter = (week: ContributionData, event: React.MouseEvent<HTMLDivElement>) => {
const rect = event.currentTarget.getBoundingClientRect();
const graphRect = graphRef.current?.getBoundingClientRect();

if (graphRect) {
setTooltipData(week);
setTooltipPosition({
x: rect.left - graphRect.left + rect.width / 2,
y: rect.top - graphRect.top,
});
}
};
if (graphRect) {
setTooltipData(week);
setTooltipPosition({
x: rect.left - graphRect.left + rect.width / 2,
y: rect.top - graphRect.top,
});
}
};

const handleMouseLeave = () => {
setTooltipData(null);
};
const handleMouseLeave = () => {
setTooltipData(null);
};

return (
<div className="mx-auto relative" ref={graphRef}>
<div className="flex flex-wrap justify-start items-end">
{weeks.map((week, index) => (
<div key={index} className="flex flex-col items-center mb-3">
{week.isMonthStart && (
<div className="text-xs text-gray-500 mb-1">{week.month}</div>
)}
<div
className={`w-5 h-5 m-0.5 ${getColor(week.count)}`}
onMouseEnter={(e) => handleMouseEnter(week, e)}
onMouseLeave={handleMouseLeave}
/>
</div>
))}
</div>
{tooltipData && (
<Tooltip
weekStart={tooltipData.weekStart}
count={tooltipData.count}
position={tooltipPosition}
/>
)}
</div>
);
return (
<div className="mx-auto relative" ref={graphRef}>
<div className="flex flex-wrap justify-start items-end">
{weeks.map((week, index) => (
<div key={index} className="flex flex-col items-center mb-3">
{week.isMonthStart && <div className="text-xs text-gray-500 mb-1">{week.month}</div>}
<div
className={`w-5 h-5 m-0.5 ${getColor(week.count)}`}
onMouseEnter={(e) => handleMouseEnter(week, e)}
onMouseLeave={handleMouseLeave}
/>
</div>
))}
</div>
{tooltipData && (
<Tooltip
weekStart={tooltipData.weekStart}
count={tooltipData.count}
position={tooltipPosition}
/>
)}
</div>
);
};

export default WeeklyContributionGraph;

0 comments on commit 3a6483f

Please sign in to comment.