위젯의 최소 크기를 1x1 로 변경

This commit is contained in:
dohyeons
2025-10-28 15:02:37 +09:00
parent 71beae8e24
commit 28ecc31128
6 changed files with 34 additions and 32 deletions

View File

@@ -31,8 +31,8 @@ export function AnalogClock({ time, theme, timezone, customColor }: AnalogClockP
const timezoneLabel = timezone ? getTimezoneLabel(timezone) : "";
return (
<div className="flex h-full flex-col items-center justify-center p-2">
<svg viewBox="0 0 200 200" className="h-full max-h-[200px] w-full max-w-[200px]">
<div className="flex h-full flex-col items-center justify-center p-0.5">
<svg viewBox="0 0 200 200" className="h-full w-full">
{/* 시계판 배경 */}
<circle cx="100" cy="100" r="98" fill={colors.background} stroke={colors.border} strokeWidth="2" />
@@ -70,7 +70,7 @@ export function AnalogClock({ time, theme, timezone, customColor }: AnalogClockP
y={y}
textAnchor="middle"
dominantBaseline="middle"
fontSize="20"
fontSize="16"
fontWeight="bold"
fill={colors.number}
>
@@ -86,7 +86,7 @@ export function AnalogClock({ time, theme, timezone, customColor }: AnalogClockP
x2={100 + 40 * Math.cos((hourAngle * Math.PI) / 180)}
y2={100 + 40 * Math.sin((hourAngle * Math.PI) / 180)}
stroke={colors.hourHand}
strokeWidth="6"
strokeWidth="5"
strokeLinecap="round"
/>
@@ -97,7 +97,7 @@ export function AnalogClock({ time, theme, timezone, customColor }: AnalogClockP
x2={100 + 60 * Math.cos((minuteAngle * Math.PI) / 180)}
y2={100 + 60 * Math.sin((minuteAngle * Math.PI) / 180)}
stroke={colors.minuteHand}
strokeWidth="4"
strokeWidth="3"
strokeLinecap="round"
/>
@@ -108,18 +108,18 @@ export function AnalogClock({ time, theme, timezone, customColor }: AnalogClockP
x2={100 + 75 * Math.cos((secondAngle * Math.PI) / 180)}
y2={100 + 75 * Math.sin((secondAngle * Math.PI) / 180)}
stroke={colors.secondHand}
strokeWidth="2"
strokeWidth="1.5"
strokeLinecap="round"
/>
{/* 중심점 */}
<circle cx="100" cy="100" r="6" fill={colors.center} />
<circle cx="100" cy="100" r="3" fill={colors.background} />
<circle cx="100" cy="100" r="4" fill={colors.center} />
<circle cx="100" cy="100" r="2" fill={colors.background} />
</svg>
{/* 타임존 표시 */}
{timezoneLabel && (
<div className="mt-1 text-center text-xs font-medium" style={{ color: colors.number }}>
<div className="mt-0 text-center text-[8px] font-medium" style={{ color: colors.number }}>
{timezoneLabel}
</div>
)}

View File

@@ -56,21 +56,21 @@ export function DigitalClock({
return (
<div
className={`flex h-full flex-col items-center justify-center ${compact ? "p-1" : "p-4"} text-center ${themeClasses.container}`}
className={`flex h-full flex-col items-center justify-center ${compact ? "p-0.5" : "p-2"} text-center ${themeClasses.container}`}
style={themeClasses.style}
>
{/* 날짜 표시 (compact 모드에서는 숨김) */}
{!compact && showDate && dateString && (
<div className={`mb-3 text-sm font-medium ${themeClasses.date}`}>{dateString}</div>
<div className={`mb-1 text-[10px] leading-tight font-medium ${themeClasses.date}`}>{dateString}</div>
)}
{/* 시간 표시 */}
<div className={`font-bold tabular-nums ${themeClasses.time} ${compact ? "text-xl" : "text-5xl"}`}>
<div className={`leading-none font-bold tabular-nums ${themeClasses.time} ${compact ? "text-sm" : "text-2xl"}`}>
{timeString}
</div>
{/* 타임존 표시 */}
<div className={`${compact ? "mt-0.5" : "mt-3"} text-xs font-medium ${themeClasses.timezone}`}>
<div className={`${compact ? "mt-0" : "mt-1"} text-[9px] font-medium ${themeClasses.timezone}`}>
{timezoneLabel}
</div>
</div>