zio/kintex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(css): resolve global class collisions breaking dashboard feed and schedule aside

Browse Source 
- .kx-feed defined by 3 screens (dashboard/contractor/visitor-account); later
  align-items:center flex def collapsed dashboard feed text to 1ch/line.
  contractor -> .kx-confeed, visitor account -> .kx-accfeed (dashboard canonical)
- .kx-cal shared with work.css WISE calendar broke new schedule month nav
  (vertical 1-char text); schedule -> .kx-schedcal

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
zio 2026-07-24 07:41:03 +09:00
parent a9826df87b
commit 933fb613c6
6 changed files with 48 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/frontend/src/screens/contractor/ContractorBoothDashboardPage.tsx
View File

@ -135,13 +135,13 @@ export function ContractorBoothDashboardPage() {
<div className="kx-card__head">
<h2 style={{ fontSize: 'var(--fs-h3)' }}><IconBell className="kx-title-ic" size={18} />알림 피드</h2>
</div>
<div className="kx-feed">
<div className="kx-confeed">
{data.feed.length === 0 ? (
<p className="kx-feed__meta">새로운 알림이 없습니다.</p>
<p className="kx-confeed__meta">새로운 알림이 없습니다.</p>
) : (
data.feed.map((f) => (
<div key={f.text} className="kx-feed__item">
<span className={`kx-feed__dot kx-feed__dot--${f.tone}`}>
<div key={f.text} className="kx-confeed__item">
<span className={`kx-confeed__dot kx-confeed__dot--${f.tone}`}>
{f.tone === 'ok' ? (
<IconCheckCircle size={14} />
) : f.tone === 'warn' ? (
@ -150,8 +150,8 @@ export function ContractorBoothDashboardPage() {
<IconDocument size={14} />
)}
</span>
<p className="kx-feed__text">{f.text}</p>
<p className="kx-feed__meta">{f.meta}</p>
<p className="kx-confeed__text">{f.text}</p>
<p className="kx-confeed__meta">{f.meta}</p>
</div>
))
)}

18
src/frontend/src/screens/contractor/contractor.css
View File

@ -255,13 +255,13 @@
}
/* 알림 피드 타임라인 */
.kx-feed {
.kx-confeed {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.kx-feed::before {
.kx-confeed::before {
content: '';
position: absolute;
left: 11px;
@ -270,11 +270,11 @@
width: 2px;
background: var(--color-neutral-200);
}
.kx-feed__item {
.kx-confeed__item {
position: relative;
padding-left: 34px;
}
.kx-feed__dot {
.kx-confeed__dot {
position: absolute;
left: 0;
top: 0;
@ -285,23 +285,23 @@
align-items: center;
justify-content: center;
}
.kx-feed__dot--ok {
.kx-confeed__dot--ok {
background: var(--color-primary-100);
color: var(--color-primary-700);
}
.kx-feed__dot--warn {
.kx-confeed__dot--warn {
background: var(--color-error-bg);
color: var(--color-error);
}
.kx-feed__dot--info {
.kx-confeed__dot--info {
background: var(--color-neutral-100);
color: var(--color-neutral-700);
}
.kx-feed__text {
.kx-confeed__text {
font-size: var(--fs-body);
color: var(--color-neutral-900);
}
.kx-feed__meta {
.kx-confeed__meta {
font-size: var(--fs-caption);
color: var(--color-neutral-500);
margin-top: 2px;

14
src/frontend/src/screens/schedule/ExhibitionSchedulePage.tsx
View File

@ -334,15 +334,15 @@ function AsideMonthNav({
const year = cursor.getFullYear();
const month = cursor.getMonth();
return (
<section className="kx-card kx-cal kx-cal--compact" aria-label={t('schedule.asideMonthPicker')}>
<div className="kx-cal__role">
<strong className="kx-cal__role-title">{t('schedule.asideMonthPicker')}</strong>
<span className="kx-cal__role-hint">{t('schedule.asideMonthPickerHint')}</span>
<section className="kx-card kx-schedcal kx-schedcal--compact" aria-label={t('schedule.asideMonthPicker')}>
<div className="kx-schedcal__role">
<strong className="kx-schedcal__role-title">{t('schedule.asideMonthPicker')}</strong>
<span className="kx-schedcal__role-hint">{t('schedule.asideMonthPickerHint')}</span>
</div>
<div className="kx-cal__head">
<button className="kx-cal__nav" aria-label={t('schedule.prevMonth')} onClick={() => onCursor(new Date(year, month - 1, 1))}>‹</button>
<div className="kx-schedcal__head">
<button className="kx-schedcal__nav" aria-label={t('schedule.prevMonth')} onClick={() => onCursor(new Date(year, month - 1, 1))}>‹</button>
<strong className="tnum">{t('schedule.yearMonth', { y: year, m: month + 1 })}</strong>
<button className="kx-cal__nav" aria-label={t('schedule.nextMonth')} onClick={() => onCursor(new Date(year, month + 1, 1))}>›</button>
<button className="kx-schedcal__nav" aria-label={t('schedule.nextMonth')} onClick={() => onCursor(new Date(year, month + 1, 1))}>›</button>
</div>
</section>
);

30
src/frontend/src/screens/schedule/schedule.css
View File

@ -158,7 +158,7 @@
}
/* 미니 캘린더 */
.kx-cal__role {
.kx-schedcal__role {
display: flex;
flex-direction: column;
gap: 2px;
@ -166,18 +166,18 @@
margin-bottom: var(--space-2);
border-bottom: 1px solid var(--color-neutral-100);
}
.kx-cal__role-title {
.kx-schedcal__role-title {
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
color: var(--color-neutral-900);
text-align: left;
}
.kx-cal__role-hint {
.kx-schedcal__role-hint {
font-size: var(--fs-caption);
color: var(--color-neutral-500);
text-align: left;
}
.kx-cal__head {
.kx-schedcal__head {
display: flex;
align-items: center;
justify-content: space-between;
@ -185,7 +185,7 @@
font-size: var(--fs-body);
color: var(--color-neutral-900);
}
.kx-cal__nav {
.kx-schedcal__nav {
width: 28px;
height: 28px;
border: var(--border-card);
@ -195,21 +195,21 @@
font-size: var(--fs-h3);
cursor: pointer;
}
.kx-cal__nav:hover {
.kx-schedcal__nav:hover {
background: var(--color-neutral-050);
}
.kx-cal__grid {
.kx-schedcal__grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
.kx-cal__wd {
.kx-schedcal__wd {
text-align: center;
font-size: var(--fs-micro);
color: var(--color-neutral-500);
padding-bottom: 4px;
}
.kx-cal__cell {
.kx-schedcal__cell {
aspect-ratio: 1;
display: flex;
align-items: center;
@ -220,15 +220,15 @@
border-radius: var(--radius-sm);
position: relative;
}
.kx-cal__cell.is-empty {
.kx-schedcal__cell.is-empty {
visibility: hidden;
}
.kx-cal__cell.has-event {
.kx-schedcal__cell.has-event {
background: var(--color-primary-050);
color: var(--color-primary-700);
font-weight: var(--fw-semibold);
}
.kx-cal__cell.has-event::after {
.kx-schedcal__cell.has-event::after {
content: '';
position: absolute;
bottom: 3px;
@ -237,17 +237,17 @@
border-radius: 50%;
background: var(--color-primary-600);
}
.kx-cal__cell.is-holiday {
.kx-schedcal__cell.is-holiday {
color: var(--color-error);
font-weight: var(--fw-bold);
}
/* today — 진남색 알약 제거 → Nifty식 옅은 노랑 틴트 + 진한 숫자(회색 테두리 유지). */
.kx-cal__cell.is-today {
.kx-schedcal__cell.is-today {
background: var(--color-warning-bg);
color: var(--color-primary-700);
font-weight: var(--fw-bold);
}
.kx-cal__cell.is-today.has-event::after {
.kx-schedcal__cell.is-today.has-event::after {
background: var(--color-primary-600);
}

6
src/frontend/src/screens/visitor/VisitorAccountPage.tsx
View File

@ -352,9 +352,9 @@ function FeedSection() {
return (
<ul className="kx-acct__feed">
{items.map((f) => (
<li key={f.id} className="kx-card kx-feed">
<span className={`kx-feed__type is-${f.itemType.toLowerCase()}`}>{f.itemType === 'EVENT' ? '행사' : '부스'}</span>
<div className="kx-feed__info">
<li key={f.id} className="kx-card kx-accfeed">
<span className={`kx-accfeed__type is-${f.itemType.toLowerCase()}`}>{f.itemType === 'EVENT' ? '행사' : '부스'}</span>
<div className="kx-accfeed__info">
<b>{f.itemTitle}</b>
{f.itemSub && <span>{f.itemSub}</span>}
</div>

16
src/frontend/src/screens/visitor/account.css
View File

@ -120,14 +120,14 @@
/* 피드 */
.kx-acct__feed { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.kx-feed { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); }
.kx-feed__type { font-size: var(--fs-nano); font-weight: var(--fw-semibold); padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); }
.kx-feed__type.is-event { background: var(--color-primary-050); color: var(--color-primary-700); }
.kx-feed__type.is-booth { background: var(--color-neutral-100); color: var(--color-neutral-700); }
.kx-feed__info { display: grid; gap: 2px; flex: 1; }
.kx-feed__info b { font-size: var(--fs-body); color: var(--color-neutral-900); }
.kx-feed__info span { font-size: var(--fs-caption); color: var(--color-text-muted); }
.kx-feed time { font-size: var(--fs-nano); color: var(--color-text-muted); }
.kx-accfeed { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); }
.kx-accfeed__type { font-size: var(--fs-nano); font-weight: var(--fw-semibold); padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); }
.kx-accfeed__type.is-event { background: var(--color-primary-050); color: var(--color-primary-700); }
.kx-accfeed__type.is-booth { background: var(--color-neutral-100); color: var(--color-neutral-700); }
.kx-accfeed__info { display: grid; gap: 2px; flex: 1; }
.kx-accfeed__info b { font-size: var(--fs-body); color: var(--color-neutral-900); }
.kx-accfeed__info span { font-size: var(--fs-caption); color: var(--color-text-muted); }
.kx-accfeed time { font-size: var(--fs-nano); color: var(--color-text-muted); }
/* 알림 */
.kx-acct__alerts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }