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 {
|
.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 {
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user