위젯의 최소 크기를 1x1 로 변경
This commit is contained in:
@@ -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>
|
||||
)}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user