From 6e95ac6273dd06d5cd754081cd8260ac57d002b9 Mon Sep 17 00:00:00 2001
From: zio <admin@zioinfo.co.kr>
Date: Sun, 12 Jul 2026 19:46:25 +0900
Subject: [PATCH] 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>
---
 src/frontend/src/screens/mobile/mobile.css    |  2 +-
 .../schedule/ExhibitionSchedulePage.tsx       | 25 ++++++++++++++++---
 .../src/screens/schedule/schedule.css         |  5 ++++
 3 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/screens/mobile/mobile.css b/src/frontend/src/screens/mobile/mobile.css
index 8d41da3..1bbd5e8 100644
--- a/src/frontend/src/screens/mobile/mobile.css
+++ b/src/frontend/src/screens/mobile/mobile.css
@@ -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 {
diff --git a/src/frontend/src/screens/schedule/ExhibitionSchedulePage.tsx b/src/frontend/src/screens/schedule/ExhibitionSchedulePage.tsx
index 9d58092..fb3b1f8 100644
--- a/src/frontend/src/screens/schedule/ExhibitionSchedulePage.tsx
+++ b/src/frontend/src/screens/schedule/ExhibitionSchedulePage.tsx
@@ -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>
diff --git a/src/frontend/src/screens/schedule/schedule.css b/src/frontend/src/screens/schedule/schedule.css
index 135e3bd..26d7e1f 100644
--- a/src/frontend/src/screens/schedule/schedule.css
+++ b/src/frontend/src/screens/schedule/schedule.css
@@ -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);