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

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

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

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

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

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

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

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

@ -352,9 +352,9 @@ function FeedSection() {
return ( return (
<ul className="kx-acct__feed"> <ul className="kx-acct__feed">
{items.map((f) => ( {items.map((f) => (
<li key={f.id} className="kx-card kx-feed"> <li key={f.id} className="kx-card kx-accfeed">
<span className={`kx-feed__type is-${f.itemType.toLowerCase()}`}>{f.itemType === 'EVENT' ? '행사' : '부스'}</span> <span className={`kx-accfeed__type is-${f.itemType.toLowerCase()}`}>{f.itemType === 'EVENT' ? '행사' : '부스'}</span>
<div className="kx-feed__info"> <div className="kx-accfeed__info">
<b>{f.itemTitle}</b> <b>{f.itemTitle}</b>
{f.itemSub && <span>{f.itemSub}</span>} {f.itemSub && <span>{f.itemSub}</span>}
</div> </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-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-accfeed { 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-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-feed__type.is-event { background: var(--color-primary-050); color: var(--color-primary-700); } .kx-accfeed__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-accfeed__type.is-booth { background: var(--color-neutral-100); color: var(--color-neutral-700); }
.kx-feed__info { display: grid; gap: 2px; flex: 1; } .kx-accfeed__info { display: grid; gap: 2px; flex: 1; }
.kx-feed__info b { font-size: var(--fs-body); color: var(--color-neutral-900); } .kx-accfeed__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-accfeed__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 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); } .kx-acct__alerts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }