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:
zio 2026-07-12 19:46:25 +09:00
parent cf6a9a2171
commit 6e95ac6273
3 changed files with 27 additions and 5 deletions

View File

@ -319,7 +319,7 @@
} }
.kx-m__cta:disabled { .kx-m__cta:disabled {
background: var(--color-primary-100); background: var(--color-primary-100);
color: var(--color-white); color: var(--color-neutral-500);
cursor: not-allowed; cursor: not-allowed;
} }
.kx-m__foot--dual { .kx-m__foot--dual {

View File

@ -305,7 +305,7 @@ export function ExhibitionSchedulePage() {
)} )}
<aside className="kx-sched__aside"> <aside className="kx-sched__aside">
<MiniCalendar cursor={asideCursor} onCursor={setAsideCursor} /> <MiniCalendar cursor={asideCursor} onCursor={setAsideCursor} holidays={holidays} />
<HallAvailability cursor={asideCursor} /> <HallAvailability cursor={asideCursor} />
<HallUtilization cursor={asideCursor} /> <HallUtilization cursor={asideCursor} />
</aside> </aside>
@ -316,7 +316,15 @@ export function ExhibitionSchedulePage() {
const WD = ['일', '월', '화', '수', '목', '금', '토']; 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 { t } = useTranslation();
const year = cursor.getFullYear(); const year = cursor.getFullYear();
const month = cursor.getMonth(); const month = cursor.getMonth();
@ -366,12 +374,21 @@ function MiniCalendar({ cursor, onCursor }: { cursor: Date; onCursor: (d: Date)
{cells.map((d, i) => { {cells.map((d, i) => {
if (d === null) return <span key={`e${i}`} className="kx-cal__cell is-empty" />; if (d === null) return <span key={`e${i}`} className="kx-cal__cell is-empty" />;
const hasEvent = eventDays.has(`${year}-${month + 1}-${d}`); 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 ( return (
<span <span
key={d} 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" 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} {d}
</span> </span>

View File

@ -183,6 +183,7 @@
justify-content: center; justify-content: center;
font-size: var(--fs-caption); font-size: var(--fs-caption);
color: var(--color-neutral-700); color: var(--color-neutral-700);
border: 1px solid var(--color-neutral-200);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
position: relative; position: relative;
} }
@ -203,6 +204,10 @@
border-radius: 50%; border-radius: 50%;
background: var(--color-primary-600); background: var(--color-primary-600);
} }
.kx-cal__cell.is-holiday {
color: var(--color-error);
font-weight: 700;
}
.kx-cal__cell.is-today { .kx-cal__cell.is-today {
background: var(--color-primary-600); background: var(--color-primary-600);
color: var(--color-white); color: var(--color-white);