fix(schedule,ui): mark holidays on mini-calendar + neutral cell borders; fix disabled CTA label contrast
- ExhibitionSchedulePage MiniCalendar: pass/receive holidays prop, apply is-holiday class + title/aria per date cell - schedule.css: neutral-200 border on kx-cal cells; is-holiday cells in error color - mobile.css: disabled CTA label neutral-500 (contrast fix) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
parent
cf6a9a2171
commit
6e95ac6273
@ -319,7 +319,7 @@
|
||||
}
|
||||
.kx-m__cta:disabled {
|
||||
background: var(--color-primary-100);
|
||||
color: var(--color-white);
|
||||
color: var(--color-neutral-500);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.kx-m__foot--dual {
|
||||
|
||||
@ -305,7 +305,7 @@ export function ExhibitionSchedulePage() {
|
||||
)}
|
||||
|
||||
<aside className="kx-sched__aside">
|
||||
<MiniCalendar cursor={asideCursor} onCursor={setAsideCursor} />
|
||||
<MiniCalendar cursor={asideCursor} onCursor={setAsideCursor} holidays={holidays} />
|
||||
<HallAvailability cursor={asideCursor} />
|
||||
<HallUtilization cursor={asideCursor} />
|
||||
</aside>
|
||||
@ -316,7 +316,15 @@ export function ExhibitionSchedulePage() {
|
||||
|
||||
const WD = ['일', '월', '화', '수', '목', '금', '토'];
|
||||
|
||||
function MiniCalendar({ cursor, onCursor }: { cursor: Date; onCursor: (d: Date) => void }) {
|
||||
function MiniCalendar({
|
||||
cursor,
|
||||
onCursor,
|
||||
holidays,
|
||||
}: {
|
||||
cursor: Date;
|
||||
onCursor: (d: Date) => void;
|
||||
holidays?: Map<string, string>;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const year = cursor.getFullYear();
|
||||
const month = cursor.getMonth();
|
||||
@ -366,12 +374,21 @@ function MiniCalendar({ cursor, onCursor }: { cursor: Date; onCursor: (d: Date)
|
||||
{cells.map((d, i) => {
|
||||
if (d === null) return <span key={`e${i}`} className="kx-cal__cell is-empty" />;
|
||||
const hasEvent = eventDays.has(`${year}-${month + 1}-${d}`);
|
||||
const hkey = `${year}-${String(month + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
|
||||
const holidayName = holidays?.get(hkey);
|
||||
return (
|
||||
<span
|
||||
key={d}
|
||||
className={`kx-cal__cell tnum ${isToday(d) ? 'is-today' : ''} ${hasEvent ? 'has-event' : ''}`}
|
||||
className={`kx-cal__cell tnum ${isToday(d) ? 'is-today' : ''} ${hasEvent ? 'has-event' : ''} ${holidayName ? 'is-holiday' : ''}`}
|
||||
role="gridcell"
|
||||
aria-label={hasEvent ? t('schedule.dayHasEvent', { d }) : t('schedule.day', { d })}
|
||||
title={holidayName || undefined}
|
||||
aria-label={
|
||||
holidayName
|
||||
? `${t('schedule.day', { d })} ${holidayName}`
|
||||
: hasEvent
|
||||
? t('schedule.dayHasEvent', { d })
|
||||
: t('schedule.day', { d })
|
||||
}
|
||||
>
|
||||
{d}
|
||||
</span>
|
||||
|
||||
@ -183,6 +183,7 @@
|
||||
justify-content: center;
|
||||
font-size: var(--fs-caption);
|
||||
color: var(--color-neutral-700);
|
||||
border: 1px solid var(--color-neutral-200);
|
||||
border-radius: var(--radius-sm);
|
||||
position: relative;
|
||||
}
|
||||
@ -203,6 +204,10 @@
|
||||
border-radius: 50%;
|
||||
background: var(--color-primary-600);
|
||||
}
|
||||
.kx-cal__cell.is-holiday {
|
||||
color: var(--color-error);
|
||||
font-weight: 700;
|
||||
}
|
||||
.kx-cal__cell.is-today {
|
||||
background: var(--color-primary-600);
|
||||
color: var(--color-white);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user