166 lines
4.6 KiB
TypeScript
166 lines
4.6 KiB
TypeScript
"use client";
|
|
|
|
interface AnalogClockProps {
|
|
time: Date;
|
|
theme: "light" | "dark" | "blue" | "gradient";
|
|
}
|
|
|
|
/**
|
|
* 아날로그 시계 컴포넌트
|
|
* - SVG 기반 아날로그 시계
|
|
* - 시침, 분침, 초침 애니메이션
|
|
* - 테마별 색상 지원
|
|
*/
|
|
export function AnalogClock({ time, theme }: AnalogClockProps) {
|
|
const hours = time.getHours() % 12;
|
|
const minutes = time.getMinutes();
|
|
const seconds = time.getSeconds();
|
|
|
|
// 각도 계산 (12시 방향을 0도로, 시계방향으로 회전)
|
|
const secondAngle = seconds * 6 - 90; // 6도씩 회전 (360/60)
|
|
const minuteAngle = minutes * 6 + seconds * 0.1 - 90; // 6도씩 + 초당 0.1도
|
|
const hourAngle = hours * 30 + minutes * 0.5 - 90; // 30도씩 + 분당 0.5도
|
|
|
|
// 테마별 색상
|
|
const colors = getThemeColors(theme);
|
|
|
|
return (
|
|
<div className="flex h-full items-center justify-center p-4">
|
|
<svg viewBox="0 0 200 200" className="h-full max-h-[250px] w-full max-w-[250px]">
|
|
{/* 시계판 배경 */}
|
|
<circle cx="100" cy="100" r="98" fill={colors.background} stroke={colors.border} strokeWidth="2" />
|
|
|
|
{/* 눈금 표시 */}
|
|
{[...Array(60)].map((_, i) => {
|
|
const angle = (i * 6 - 90) * (Math.PI / 180);
|
|
const isHour = i % 5 === 0;
|
|
const startRadius = isHour ? 85 : 90;
|
|
const endRadius = 95;
|
|
|
|
return (
|
|
<line
|
|
key={i}
|
|
x1={100 + startRadius * Math.cos(angle)}
|
|
y1={100 + startRadius * Math.sin(angle)}
|
|
x2={100 + endRadius * Math.cos(angle)}
|
|
y2={100 + endRadius * Math.sin(angle)}
|
|
stroke={colors.tick}
|
|
strokeWidth={isHour ? 2 : 1}
|
|
/>
|
|
);
|
|
})}
|
|
|
|
{/* 숫자 표시 (12시, 3시, 6시, 9시) */}
|
|
{[12, 3, 6, 9].map((num, idx) => {
|
|
const angle = (idx * 90 - 90) * (Math.PI / 180);
|
|
const radius = 70;
|
|
const x = 100 + radius * Math.cos(angle);
|
|
const y = 100 + radius * Math.sin(angle);
|
|
|
|
return (
|
|
<text
|
|
key={num}
|
|
x={x}
|
|
y={y}
|
|
textAnchor="middle"
|
|
dominantBaseline="middle"
|
|
fontSize="20"
|
|
fontWeight="bold"
|
|
fill={colors.number}
|
|
>
|
|
{num}
|
|
</text>
|
|
);
|
|
})}
|
|
|
|
{/* 시침 (짧고 굵음) */}
|
|
<line
|
|
x1="100"
|
|
y1="100"
|
|
x2={100 + 40 * Math.cos((hourAngle * Math.PI) / 180)}
|
|
y2={100 + 40 * Math.sin((hourAngle * Math.PI) / 180)}
|
|
stroke={colors.hourHand}
|
|
strokeWidth="6"
|
|
strokeLinecap="round"
|
|
/>
|
|
|
|
{/* 분침 (중간 길이) */}
|
|
<line
|
|
x1="100"
|
|
y1="100"
|
|
x2={100 + 60 * Math.cos((minuteAngle * Math.PI) / 180)}
|
|
y2={100 + 60 * Math.sin((minuteAngle * Math.PI) / 180)}
|
|
stroke={colors.minuteHand}
|
|
strokeWidth="4"
|
|
strokeLinecap="round"
|
|
/>
|
|
|
|
{/* 초침 (가늘고 긴) */}
|
|
<line
|
|
x1="100"
|
|
y1="100"
|
|
x2={100 + 75 * Math.cos((secondAngle * Math.PI) / 180)}
|
|
y2={100 + 75 * Math.sin((secondAngle * Math.PI) / 180)}
|
|
stroke={colors.secondHand}
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
/>
|
|
|
|
{/* 중심점 */}
|
|
<circle cx="100" cy="100" r="6" fill={colors.center} />
|
|
<circle cx="100" cy="100" r="3" fill={colors.background} />
|
|
</svg>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* 테마별 색상 반환
|
|
*/
|
|
function getThemeColors(theme: string) {
|
|
const themes = {
|
|
light: {
|
|
background: "#ffffff",
|
|
border: "#d1d5db",
|
|
tick: "#9ca3af",
|
|
number: "#374151",
|
|
hourHand: "#1f2937",
|
|
minuteHand: "#4b5563",
|
|
secondHand: "#ef4444",
|
|
center: "#1f2937",
|
|
},
|
|
dark: {
|
|
background: "#1f2937",
|
|
border: "#4b5563",
|
|
tick: "#6b7280",
|
|
number: "#f9fafb",
|
|
hourHand: "#f9fafb",
|
|
minuteHand: "#d1d5db",
|
|
secondHand: "#ef4444",
|
|
center: "#f9fafb",
|
|
},
|
|
blue: {
|
|
background: "#dbeafe",
|
|
border: "#3b82f6",
|
|
tick: "#60a5fa",
|
|
number: "#1e40af",
|
|
hourHand: "#1e3a8a",
|
|
minuteHand: "#2563eb",
|
|
secondHand: "#ef4444",
|
|
center: "#1e3a8a",
|
|
},
|
|
gradient: {
|
|
background: "#fce7f3",
|
|
border: "#ec4899",
|
|
tick: "#f472b6",
|
|
number: "#9333ea",
|
|
hourHand: "#7c3aed",
|
|
minuteHand: "#a855f7",
|
|
secondHand: "#ef4444",
|
|
center: "#7c3aed",
|
|
},
|
|
};
|
|
|
|
return themes[theme as keyof typeof themes] || themes.light;
|
|
}
|