zio
f6635edb06
- SCR-HOME (/home): post-login landing per owner directive — role-based KPI row, banner
carousel, exhibition poster showcase rail, WISE-pattern month calendar with dynamic
hall-center filter, role-based my-tasks widget, notices/quick-actions/activity,
workspace grid, ShellFooter; login now lands on /home (workspace picker absorbed);
backend /api/home/{todos,showcase,hall-centers,summary}; Stitch mockup harvested and reconciled
- tenant standard (owner directive): tenant id 'KINTEX', tenant_id leads composite PKs
(V31 conversion with FK-safe UNIQUE(id) preservation; V27/29/30/33/34/35 born compliant);
JWT tid backward-compat normalization
- crawl: 34 upcoming kintex.com exhibitions with posters + detail enrichment
(organizer/site/items/description) upserted idempotently (V32)
- wave 8: F100 AI router (Claude->Ollama fallback, AiConfig) + lead AI rescore + CMS AI
translation; F005/6 booth sales (V27, atomic hold); F035 BOQ + F084 auction fee -> invoice
(V28); F028 approval workflow (V29, /work/approval)
- wave 9: F041/42/43 logistics tabs (V33); F085 refund rules + F083 tax invoice/report
(V34, fiscal gates documented); F092 text-to-SQL with 7-step guard + F025 rules chatbot;
F099 webhook gateway (HMAC inbound, outbound stub) + F052 follow-up EDM trigger (V35)
- verified: compileJava, full test suite, tsc -b --force, vite build all EXIT 0
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
587 lines
37 KiB
HTML
587 lines
37 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="light" lang="ko"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>KINTEX AI 전시관리</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<style>
|
|
body { font-family: "Pretendard", "Inter", sans-serif; }
|
|
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20; }
|
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }
|
|
::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }
|
|
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
|
|
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
|
|
</style>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"primary-fixed": "#d3e4ff",
|
|
"surface": "#faf8ff",
|
|
"primary": "#003765",
|
|
"on-secondary-fixed": "#1b0063",
|
|
"surface-bright": "#f9f9ff",
|
|
"on-tertiary-fixed-variant": "#005236",
|
|
"outline-variant": "#c1c7d3",
|
|
"inverse-primary": "#a2c9ff",
|
|
"secondary-fixed": "#e5deff",
|
|
"surface-tint": "#24609e",
|
|
"tertiary-fixed-dim": "#72daa9",
|
|
"primary-container": "#004e8b",
|
|
"on-secondary-fixed-variant": "#4500d8",
|
|
"on-error": "#ffffff",
|
|
"on-secondary": "#ffffff",
|
|
"on-tertiary": "#ffffff",
|
|
"surface-container-low": "#f2f3ff",
|
|
"on-primary-container": "#91c0ff",
|
|
"on-surface-variant": "#424750",
|
|
"error-red": "#ba1a1a",
|
|
"on-primary": "#ffffff",
|
|
"surface-container": "#eaedff",
|
|
"inverse-on-surface": "#eef0ff",
|
|
"on-background": "#141b2c",
|
|
"surface-dim": "#d3d9f1",
|
|
"inverse-surface": "#293042",
|
|
"surface-container-lowest": "#ffffff",
|
|
"secondary-container": "#6d4aff",
|
|
"surface-variant": "#dbe2fa",
|
|
"surface-container-highest": "#dbe2fa",
|
|
"on-surface": "#141b2c",
|
|
"tertiary-container": "#00583b",
|
|
"tertiary": "#003e28",
|
|
"error-container": "#ffdad6",
|
|
"on-primary-fixed": "#001c38",
|
|
"background": "#faf8ff",
|
|
"secondary-fixed-dim": "#c9bfff",
|
|
"on-tertiary-container": "#68d1a0",
|
|
"error": "#ba1a1a",
|
|
"secondary": "#5427e6",
|
|
"primary-fixed-dim": "#a2c9ff",
|
|
"on-error-container": "#93000a",
|
|
"on-tertiary-fixed": "#002113",
|
|
"on-primary-fixed-variant": "#004881",
|
|
"surface-container-high": "#e1e7ff",
|
|
"outline": "#727781",
|
|
"tertiary-fixed": "#8ef7c4",
|
|
"on-secondary-container": "#f3edff"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"spacing": {
|
|
"stack-sm": "8px",
|
|
"stack-md": "16px",
|
|
"stack-lg": "24px",
|
|
"gutter": "16px",
|
|
"section-padding": "96px",
|
|
"container-padding": "24px",
|
|
"base": "4px"
|
|
},
|
|
"fontFamily": {
|
|
"display-lg": ["Inter", "Pretendard"],
|
|
"headline-md": ["Inter", "Pretendard"],
|
|
"label-xs": ["Geist", "Pretendard"],
|
|
"body-sm": ["Inter", "Pretendard"],
|
|
"body-base": ["Inter", "Pretendard"],
|
|
"title-sm": ["Inter", "Pretendard"],
|
|
"label-md": ["Geist", "Pretendard"]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="bg-surface-bright text-on-surface">
|
|
<!-- App Shell: SideNavBar -->
|
|
<aside class="fixed left-0 top-0 h-full w-[240px] bg-primary dark:bg-primary-container border-r border-outline-variant flex flex-col z-50">
|
|
<div class="px-5 py-6">
|
|
<h1 class="text-headline-md font-bold text-on-primary mb-1">KINTEX AI</h1>
|
|
<p class="text-label-md text-on-primary/70 font-label-md">전시관리 시스템</p>
|
|
</div>
|
|
<div class="px-3 mb-4">
|
|
<button class="w-full flex items-center justify-between bg-primary-container/40 text-on-primary px-3 py-2.5 rounded-lg border border-on-primary/10 hover:bg-primary-container transition-colors">
|
|
<span class="text-label-md font-semibold">이벤트 전환</span>
|
|
<span class="material-symbols-outlined text-[20px]">swap_horiz</span>
|
|
</button>
|
|
</div>
|
|
<nav class="flex-1 overflow-y-auto space-y-1">
|
|
<!-- Navigation Items Mapping from JSON -->
|
|
<a class="bg-secondary-container text-on-secondary-container rounded-lg mx-2 my-1 flex items-center px-3 py-2.5 transition-transform scale-95" href="#">
|
|
<span class="material-symbols-outlined mr-3">dashboard</span>
|
|
<span class="text-label-md font-label-md">대시보드</span>
|
|
</a>
|
|
<a class="text-on-primary/70 hover:text-on-primary hover:bg-primary-container/50 rounded-lg mx-2 my-1 flex items-center px-3 py-2.5 transition-colors" href="#">
|
|
<span class="material-symbols-outlined mr-3">event</span>
|
|
<span class="text-label-md font-label-md">전시회 관리</span>
|
|
</a>
|
|
<a class="text-on-primary/70 hover:text-on-primary hover:bg-primary-container/50 rounded-lg mx-2 my-1 flex items-center px-3 py-2.5 transition-colors" href="#">
|
|
<span class="material-symbols-outlined mr-3">group</span>
|
|
<span class="text-label-md font-label-md">참가업체</span>
|
|
</a>
|
|
<a class="text-on-primary/70 hover:text-on-primary hover:bg-primary-container/50 rounded-lg mx-2 my-1 flex items-center px-3 py-2.5 transition-colors" href="#">
|
|
<span class="material-symbols-outlined mr-3">smart_toy</span>
|
|
<span class="text-label-md font-label-md">마케팅 AI</span>
|
|
</a>
|
|
<a class="text-on-primary/70 hover:text-on-primary hover:bg-primary-container/50 rounded-lg mx-2 my-1 flex items-center px-3 py-2.5 transition-colors" href="#">
|
|
<span class="material-symbols-outlined mr-3">analytics</span>
|
|
<span class="text-label-md font-label-md">운영 리포트</span>
|
|
</a>
|
|
<a class="text-on-primary/70 hover:text-on-primary hover:bg-primary-container/50 rounded-lg mx-2 my-1 flex items-center px-3 py-2.5 transition-colors" href="#">
|
|
<span class="material-symbols-outlined mr-3">settings</span>
|
|
<span class="text-label-md font-label-md">설정</span>
|
|
</a>
|
|
</nav>
|
|
<div class="mt-auto border-t border-on-primary/10 pt-2 pb-4">
|
|
<a class="text-on-primary/70 hover:text-on-primary hover:bg-primary-container/50 rounded-lg mx-2 my-1 flex items-center px-3 py-2.5 transition-colors" href="#">
|
|
<span class="material-symbols-outlined mr-3">notifications</span>
|
|
<span class="text-label-md font-label-md">알림</span>
|
|
</a>
|
|
<a class="text-on-primary/70 hover:text-on-primary hover:bg-primary-container/50 rounded-lg mx-2 my-1 flex items-center px-3 py-2.5 transition-colors" href="#">
|
|
<span class="material-symbols-outlined mr-3">help_center</span>
|
|
<span class="text-label-md font-label-md">지원</span>
|
|
</a>
|
|
<div class="mt-4 px-5 flex items-center gap-3">
|
|
<img class="w-8 h-8 rounded-full border border-on-primary/20" data-alt="A small circular avatar of a professional Korean male admin in a corporate suit, soft studio lighting, ultra-clean professional look." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDPrstNpOC8FHPru98OKT3tvADQeCGZjPlWX9fwtXkxB6_Pd65Sl4DqbZadRiiOf3sfIcLJ0bMgjHONejSRZkm2bMY-pK7BnaqGG_m_qj3JbhP4co3rO4qmBhVnPfNz21Yy9qLhvljKvdK51feu05eHS-LuuumqAKoFpd82bcuVnzSNBAuP3-1kryhc-H2Yx0OuYuLaUvkPB-zoV9jInWXgmtzEOgK5RipPMp6e35DzndFLexutpaQ5pbV8MhBMdUa49wA7C3M9xoI"/>
|
|
<div class="overflow-hidden">
|
|
<p class="text-label-md text-on-primary font-bold truncate text-ellipsis">KINTEX Admin</p>
|
|
<p class="text-[10px] text-on-primary/60 truncate">김주최 주임</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<!-- App Shell: TopNavBar -->
|
|
<header class="fixed top-0 right-0 h-[48px] left-[240px] bg-surface-container-lowest border-b border-outline-variant flex justify-between items-center px-4 z-40">
|
|
<div class="flex items-center gap-4">
|
|
<nav class="flex items-center gap-4">
|
|
<a class="text-on-surface-variant text-label-md hover:text-primary transition-colors" href="#">홈</a>
|
|
<span class="text-outline text-[12px] transform rotate-12">/</span>
|
|
<a class="text-primary font-semibold text-label-md" href="#">대시보드</a>
|
|
</nav>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div class="relative group">
|
|
<input class="h-8 pl-9 pr-4 bg-surface-container-low border border-outline-variant rounded-full text-body-sm w-[240px] focus:ring-1 focus:ring-primary focus:border-primary transition-all" placeholder="통합 검색..." type="text"/>
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant text-[18px]">search</span>
|
|
</div>
|
|
<span class="bg-error-container text-on-error-container px-2 py-0.5 rounded text-label-md font-bold">개장 D-31</span>
|
|
<div class="flex items-center gap-2 border-l border-outline-variant pl-4">
|
|
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-colors">apps</button>
|
|
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-colors">account_circle</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Main Content Area -->
|
|
<main class="ml-[240px] mt-[48px] mb-[36px] p-6 max-w-[1400px] mx-auto overflow-x-hidden">
|
|
<!-- Header Row -->
|
|
<section class="mb-8 flex flex-col md:flex-row md:items-end justify-between gap-4">
|
|
<div>
|
|
<p class="text-label-md text-on-surface-variant font-label-md mb-1">2026년 3월 10일 화요일</p>
|
|
<div class="flex items-center gap-2">
|
|
<h2 class="text-headline-md font-bold text-on-surface">안녕하세요, 김주최님</h2>
|
|
<span class="bg-primary-fixed text-on-primary-fixed px-2 py-0.5 rounded text-label-xs font-bold">총괄 관리자</span>
|
|
</div>
|
|
</div>
|
|
<!-- KPI Cards -->
|
|
<div class="grid grid-cols-2 lg:grid-cols-4 gap-3 w-full md:w-auto">
|
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-3 min-w-[140px] flex flex-col shadow-sm">
|
|
<span class="text-label-xs text-on-surface-variant mb-1 font-bold">진행 중 전시</span>
|
|
<span class="text-title-sm font-bold text-primary">3 <span class="text-body-sm font-normal">건</span></span>
|
|
</div>
|
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-3 min-w-[140px] flex flex-col shadow-sm">
|
|
<span class="text-label-xs text-on-surface-variant mb-1 font-bold">오늘 체크인</span>
|
|
<span class="text-title-sm font-bold text-primary">1,240 <span class="text-body-sm font-normal">명</span></span>
|
|
</div>
|
|
<div class="bg-surface-container-lowest border border-error-red/20 rounded-xl p-3 min-w-[140px] flex flex-col shadow-sm border-l-4 border-l-error-red">
|
|
<span class="text-label-xs text-on-surface-variant mb-1 font-bold">임박 행사</span>
|
|
<span class="text-title-sm font-bold text-error">D-6</span>
|
|
</div>
|
|
<div class="bg-surface-container-lowest border border-secondary/20 rounded-xl p-3 min-w-[140px] flex flex-col shadow-sm border-l-4 border-l-secondary">
|
|
<span class="text-label-xs text-on-surface-variant mb-1 font-bold">미결 결재</span>
|
|
<span class="text-title-sm font-bold text-secondary">5 <span class="text-body-sm font-normal">건</span></span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Banner Carousel (Mockup) -->
|
|
<section class="mb-8 relative rounded-2xl overflow-hidden h-[240px] group">
|
|
|
|
<div class="absolute inset-0 bg-gradient-to-r from-primary/90 to-transparent flex flex-col justify-center px-12 z-10">
|
|
<span class="text-on-primary text-label-md font-bold mb-2 tracking-widest">NEXT EXHIBITION</span>
|
|
<h3 class="text-display-lg text-on-primary font-bold mb-4">제 20회 한국 국제 보트쇼 2026</h3>
|
|
<p class="text-on-primary/80 mb-6 max-w-lg font-body-base">아시아 최대 규모의 해양 레저 산업 박람회, 스마트 테크놀로지와 결합된 미래 지향적 전시를 경험하세요.</p>
|
|
<button class="w-fit bg-on-primary text-primary px-6 py-2 rounded-full font-bold text-label-md hover:bg-primary-container hover:text-on-primary transition-all">운영 현황 보기</button>
|
|
</div>
|
|
<div class="absolute bottom-4 right-8 flex gap-2 z-10">
|
|
<button class="w-8 h-1 rounded-full bg-on-primary"></button>
|
|
<button class="w-8 h-1 rounded-full bg-on-primary/40"></button>
|
|
<button class="w-8 h-1 rounded-full bg-on-primary/40"></button>
|
|
</div>
|
|
</section>
|
|
<!-- Exhibition Showcase -->
|
|
<section class="mb-10">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="flex gap-1 bg-surface-container rounded-lg p-1">
|
|
<button class="px-4 py-1.5 text-label-md font-bold bg-surface-container-lowest text-primary rounded-md shadow-sm">진행 중</button>
|
|
<button class="px-4 py-1.5 text-label-md font-bold text-on-surface-variant hover:text-primary transition-colors">이번 달</button>
|
|
<button class="px-4 py-1.5 text-label-md font-bold text-on-surface-variant hover:text-primary transition-colors">다음 달</button>
|
|
</div>
|
|
<button class="text-label-md text-primary font-bold flex items-center hover:underline">전체보기 <span class="material-symbols-outlined text-[16px]">chevron_right</span></button>
|
|
</div>
|
|
<div class="flex gap-4 overflow-x-auto pb-4 scroll-smooth">
|
|
<!-- Poster Cards -->
|
|
<div class="min-w-[220px] bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
|
|
<img class="w-full h-[280px] object-cover" data-alt="A smart factory AI expo poster, high-tech visuals, glowing blue lines and machinery silhouettes, modern digital aesthetic." src="https://lh3.googleusercontent.com/aida/AP1WRLuCUZ2V8B30oj8H8FmTenLm8_tE4DbeLgi-ZXL8As8ZdSM_7kiEkhYA0Hb7INcXEBtcbvWI4x0M3uSx7RroCP3TtipEW3VnmiYcjhlTrWTU4NiawPWKExRtMaryvF1Fy2gKQX2eeP9pI2t1tpwNdUm2MA_FY7M8pfCM8kKxdNzTXKWBUoXpxt51aSGeCg50CfOc5Gfz7Bqg97INMNOyFrpBYB16rKlBMcocjD9w1zinMuf7l0WvfiMh_4M"/>
|
|
<div class="p-4 border-l-4 border-primary">
|
|
<span class="text-[10px] font-bold text-primary mb-1 block">제1전시장 홀1-2</span>
|
|
<h4 class="text-label-md font-bold mb-1 line-clamp-1">Smart Factory & AI Expo 2026</h4>
|
|
<p class="text-label-xs text-on-surface-variant">03.10 - 03.15</p>
|
|
<div class="mt-3 flex justify-between items-center">
|
|
<span class="bg-primary-fixed text-on-primary-fixed px-2 py-0.5 rounded text-[10px] font-bold">진행중</span>
|
|
<span class="text-label-xs font-bold text-primary">D-Day</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="min-w-[220px] bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
|
|
<img class="w-full h-[280px] object-cover" data-alt="Professional yacht and ocean graphic for Korea International Boat Show 2026, premium nautical branding." src="https://lh3.googleusercontent.com/aida/AP1WRLvO2PD-NtLKh7J5OXaz3UGNRTn2BPe8pt1EiamX2PUiaedPzCMR26ccDoWVXpNBiqPCXh5gFWAImByD_slWdGsbepcCjctO7qg-3myiCIp0_IEFVyRWGSmEmjPTIX_4s33aV5B8cyjYLDpAkvBzjxrD1mnM0bRhWlb8ezQCgd7C7n9spqKVgpwlVWWe7O3qrm5QWEYOLMs9Er6tYhEKoF-D6SOFJktD3SJLTB9mZun1KUZHRn4EiCKTCRQ"/>
|
|
<div class="p-4 border-l-4 border-secondary">
|
|
<span class="text-[10px] font-bold text-secondary mb-1 block">제2전시장 홀7</span>
|
|
<h4 class="text-label-md font-bold mb-1 line-clamp-1">Korea International Boat Show</h4>
|
|
<p class="text-label-xs text-on-surface-variant">03.12 - 03.16</p>
|
|
<div class="mt-3 flex justify-between items-center">
|
|
<span class="bg-secondary-fixed text-on-secondary-fixed px-2 py-0.5 rounded text-[10px] font-bold">준비중</span>
|
|
<span class="text-label-xs font-bold text-error">D-2</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="min-w-[220px] bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow opacity-90">
|
|
<img class="w-full h-[280px] object-cover" data-alt="Vibrant anime illustration for Comic World Summer 2026, bright colors, youthful energy, professional event poster." src="https://lh3.googleusercontent.com/aida/AP1WRLu0tNx_07_jEN4cB0dfgBeFStfB4mk0ydoEjV1zRaYdV6nqEfRY4fV3rpMRgq3O5R5JocTgSu9o7HUOttrJD6Wm-m8GQIZSQjKRgsBr3xHfR5wxpIJBwUIX916y1lXm1lK1JhH_rUt3ApOMD9EjjA6OY5inLABOevZHfg87sASNvEfOrc3IiEDIFR-YZpUC_z2zXfJDOEU0hXnza55D5JjwKByvlSE_W4ClOUcVYuMDhsD7cqqUwiCe0A"/>
|
|
<div class="p-4 border-l-4 border-tertiary">
|
|
<span class="text-[10px] font-bold text-tertiary mb-1 block">제2전시장 홀9</span>
|
|
<h4 class="text-label-md font-bold mb-1 line-clamp-1">Comic World Summer 2026</h4>
|
|
<p class="text-label-xs text-on-surface-variant">03.14 - 03.15</p>
|
|
<div class="mt-3 flex justify-between items-center">
|
|
<span class="bg-tertiary-fixed text-on-tertiary-fixed px-2 py-0.5 rounded text-[10px] font-bold">준비중</span>
|
|
<span class="text-label-xs font-bold text-error">D-4</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Repeat for demo -->
|
|
<div class="min-w-[220px] bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
|
|
<div class="w-full h-[280px] bg-cover bg-center" data-alt="High-resolution architecture and interior design expo poster, clean minimal aesthetic, architectural lines." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBzrTxZZYXFXuvOqrkDVnH1QL2pMdcJyJACeJe5gUlcEFBh4ltzZiPlOZlistNvb02AN_uu3lp2xb972rQ46wkLa3IXdbZqy0AuDXLXJxKbai4s-JZrOD7H2dYJmedGBe4bnS0G0KEJahjYvREQ4O73lUL1pBuFf-h9zBWExq4UqR9D5oMU-0fswso84pOXkiLe5Gb44olFKIfUyS1KUUJiN7gQfaqUoexECQuTIxkqb6VoqFPfQC50cD0ymB60S4pRE_IwbUTWMbU')"></div>
|
|
<div class="p-4 border-l-4 border-primary">
|
|
<span class="text-[10px] font-bold text-primary mb-1 block">제1전시장 홀5</span>
|
|
<h4 class="text-label-md font-bold mb-1 line-clamp-1">K-Architecture & Interior</h4>
|
|
<p class="text-label-xs text-on-surface-variant">03.18 - 03.22</p>
|
|
<div class="mt-3 flex justify-between items-center">
|
|
<span class="bg-surface-container-highest text-on-surface-variant px-2 py-0.5 rounded text-[10px] font-bold">예정</span>
|
|
<span class="text-label-xs font-bold text-on-surface-variant">D-8</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="min-w-[220px] bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
|
|
<div class="w-full h-[280px] bg-cover bg-center" data-alt="Food and beverage industry trade show poster, clean food photography, commercial kitchen equipment silhouettes." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuC2Qdw_CaFbUHLdGauoAfpkNGwOWnAXi9x1Si8ogDmEZFJt6vtwSpWGqL-19MMHYevmZ0Wli2m_mQnCYOwBlR-40EgNAYVft0zp41OxKOk6vCQQ9D4Nf_omOILSF_DgQfQuohYt6EzUbGvJV0rnVJmEdxBZR8bhCfg6cKI0DsaG41PyZ-l43lv_I4j8giW5WR3zs-wsvJ7orPqGDb4s6SwR8LsdHuocFr0-rVWT29P3AJlP6LTex37oV5BS05fo6JSaG1R7-cT8nkU')"></div>
|
|
<div class="p-4 border-l-4 border-primary">
|
|
<span class="text-[10px] font-bold text-primary mb-1 block">제2전시장 홀8</span>
|
|
<h4 class="text-label-md font-bold mb-1 line-clamp-1">KINTEX Food Week</h4>
|
|
<p class="text-label-xs text-on-surface-variant">03.25 - 03.28</p>
|
|
<div class="mt-3 flex justify-between items-center">
|
|
<span class="bg-surface-container-highest text-on-surface-variant px-2 py-0.5 rounded text-[10px] font-bold">예정</span>
|
|
<span class="text-label-xs font-bold text-on-surface-variant">D-15</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div class="grid grid-cols-12 gap-8">
|
|
<!-- Left Column: Calendar (8/12) -->
|
|
<div class="col-span-12 lg:col-span-8">
|
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-6 shadow-sm">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h3 class="text-title-sm font-bold text-on-surface flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-primary">calendar_month</span>
|
|
전시 일정
|
|
</h3>
|
|
<div class="flex gap-2">
|
|
<select class="text-label-md border-outline-variant rounded-lg bg-surface-container-low px-3 py-1 focus:ring-primary focus:border-primary">
|
|
<option>전체 전시장</option>
|
|
<option>제1전시장 (1-5관)</option>
|
|
<option>제2전시장 (6-10관)</option>
|
|
</select>
|
|
<div class="flex items-center gap-1 bg-surface-container-low rounded-lg px-2">
|
|
<button class="material-symbols-outlined text-[18px]">chevron_left</button>
|
|
<span class="text-label-md font-bold px-2">2026.03</span>
|
|
<button class="material-symbols-outlined text-[18px]">chevron_right</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Calendar Grid -->
|
|
<div class="calendar-grid border-t border-l border-outline-variant/30">
|
|
<!-- Days of Week -->
|
|
<div class="h-10 flex items-center justify-center bg-surface-container-low border-r border-b border-outline-variant text-error-red font-bold text-label-xs">일</div>
|
|
<div class="h-10 flex items-center justify-center bg-surface-container-low border-r border-b border-outline-variant font-bold text-label-xs">월</div>
|
|
<div class="h-10 flex items-center justify-center bg-surface-container-low border-r border-b border-outline-variant font-bold text-label-xs">화</div>
|
|
<div class="h-10 flex items-center justify-center bg-surface-container-low border-r border-b border-outline-variant font-bold text-label-xs">수</div>
|
|
<div class="h-10 flex items-center justify-center bg-surface-container-low border-r border-b border-outline-variant font-bold text-label-xs">목</div>
|
|
<div class="h-10 flex items-center justify-center bg-surface-container-low border-r border-b border-outline-variant font-bold text-label-xs">금</div>
|
|
<div class="h-10 flex items-center justify-center bg-surface-container-low border-r border-b border-outline-variant text-primary font-bold text-label-xs">토</div>
|
|
<!-- Rows (Simplified for demo) -->
|
|
<script>
|
|
const days = 31;
|
|
const startDay = 0; // Sun
|
|
for(let i=0; i<35; i++) {
|
|
let dayNum = i - startDay + 1;
|
|
let isCurrentMonth = dayNum > 0 && dayNum <= 31;
|
|
let isToday = dayNum === 10;
|
|
let content = isCurrentMonth ? dayNum : '';
|
|
let bg = isToday ? 'bg-primary/5' : '';
|
|
let textWeight = isToday ? 'font-bold text-primary' : 'text-on-surface-variant';
|
|
|
|
document.write(`
|
|
<div class="h-24 relative border-r border-b border-outline-variant p-2 ${bg}">
|
|
<span class="text-label-xs ${textWeight}">${content}</span>
|
|
${isToday ? '<div class="w-1.5 h-1.5 bg-primary rounded-full absolute top-2 right-2"></div>' : ''}
|
|
${dayNum >= 10 && dayNum <= 15 ? '<div class="mt-1 h-2 bg-primary/60 rounded-full w-full"></div>' : ''}
|
|
${dayNum >= 12 && dayNum <= 16 ? '<div class="mt-1 h-2 bg-secondary/60 rounded-full w-full"></div>' : ''}
|
|
${dayNum === 18 ? '<div class="mt-1 flex gap-1"><div class="w-1.5 h-1.5 bg-primary rounded-full"></div><div class="w-1.5 h-1.5 bg-secondary rounded-full"></div></div>' : ''}
|
|
</div>
|
|
`);
|
|
}
|
|
</script>
|
|
</div>
|
|
<div class="mt-6 space-y-3">
|
|
<div class="flex items-center justify-between p-3 bg-surface-container-low rounded-lg border border-outline-variant">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-2 h-2 rounded-full bg-primary"></div>
|
|
<span class="text-label-md font-bold">Smart Factory & AI Expo 2026</span>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<span class="text-label-xs text-on-surface-variant">03.10 - 03.15 | 제1전시장</span>
|
|
<span class="text-primary font-bold text-label-xs">진행 중</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between p-3 bg-white rounded-lg border border-outline-variant">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-2 h-2 rounded-full bg-secondary"></div>
|
|
<span class="text-label-md font-bold">Korea International Boat Show</span>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<span class="text-label-xs text-on-surface-variant">03.12 - 03.16 | 제2전시장</span>
|
|
<span class="text-error font-bold text-label-xs">D-2</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Right Column: Stats & Lists (4/12) -->
|
|
<div class="col-span-12 lg:col-span-4 space-y-6">
|
|
<!-- Task List -->
|
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-5 shadow-sm">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="text-label-md font-bold text-on-surface">내 할 일 <span class="text-primary ml-1">(7)</span></h3>
|
|
<button class="material-symbols-outlined text-on-surface-variant text-[20px]">more_horiz</button>
|
|
</div>
|
|
<div class="space-y-3">
|
|
<div class="flex items-start gap-3 p-3 rounded-lg border-l-4 border-l-error bg-surface-container-low/50">
|
|
<input class="mt-1 rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/>
|
|
<div>
|
|
<p class="text-label-md font-bold">결재 대기 · 부스 설계 승인</p>
|
|
<p class="text-label-xs text-on-surface-variant mt-1">부스 A-102 디자인 최종 승인 필요</p>
|
|
<span class="text-[10px] text-error font-bold mt-2 block">기한: 오늘까지 (D-1)</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start gap-3 p-3 rounded-lg border-l-4 border-l-outline bg-white">
|
|
<input class="mt-1 rounded border-outline-variant text-primary focus:ring-primary" type="checkbox"/>
|
|
<div>
|
|
<p class="text-label-md font-bold">참가업체 오리엔테이션 준비</p>
|
|
<p class="text-label-xs text-on-surface-variant mt-1">발표 자료 및 홀 배치도 검수</p>
|
|
<span class="text-[10px] text-on-surface-variant font-bold mt-2 block">기한: 03.12 (D-2)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Fast Actions -->
|
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-5 shadow-sm">
|
|
<h3 class="text-label-md font-bold text-on-surface mb-4">빠른 작업</h3>
|
|
<div class="grid grid-cols-3 gap-3">
|
|
<button class="flex flex-col items-center justify-center p-3 rounded-lg border border-outline-variant hover:bg-primary-container/5 hover:border-primary transition-all group">
|
|
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary mb-1">map</span>
|
|
<span class="text-[10px] text-on-surface-variant group-hover:text-primary font-bold">배치 에디터</span>
|
|
</button>
|
|
<button class="flex flex-col items-center justify-center p-3 rounded-lg border border-outline-variant hover:bg-primary-container/5 hover:border-primary transition-all group">
|
|
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary mb-1">mail</span>
|
|
<span class="text-[10px] text-on-surface-variant group-hover:text-primary font-bold">업체 초대</span>
|
|
</button>
|
|
<button class="flex flex-col items-center justify-center p-3 rounded-lg border border-outline-variant hover:bg-primary-container/5 hover:border-primary transition-all group">
|
|
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary mb-1">description</span>
|
|
<span class="text-[10px] text-on-surface-variant group-hover:text-primary font-bold">서류 워크플로</span>
|
|
</button>
|
|
<button class="flex flex-col items-center justify-center p-3 rounded-lg border border-outline-variant hover:bg-primary-container/5 hover:border-primary transition-all group">
|
|
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary mb-1">payments</span>
|
|
<span class="text-[10px] text-on-surface-variant group-hover:text-primary font-bold">정산 관리</span>
|
|
</button>
|
|
<button class="flex flex-col items-center justify-center p-3 rounded-lg border border-outline-variant hover:bg-primary-container/5 hover:border-primary transition-all group">
|
|
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary mb-1">campaign</span>
|
|
<span class="text-[10px] text-on-surface-variant group-hover:text-primary font-bold">공지 작성</span>
|
|
</button>
|
|
<button class="flex flex-col items-center justify-center p-3 rounded-lg border border-outline-variant hover:bg-primary-container/5 hover:border-primary transition-all group">
|
|
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary mb-1">search</span>
|
|
<span class="text-[10px] text-on-surface-variant group-hover:text-primary font-bold">통합 검색</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Notices -->
|
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-5 shadow-sm">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="text-label-md font-bold text-on-surface">공지사항</h3>
|
|
<button class="text-[11px] text-primary font-bold">전체보기</button>
|
|
</div>
|
|
<ul class="space-y-4">
|
|
<li class="flex items-start justify-between gap-3 group">
|
|
<div class="flex-1">
|
|
<div class="flex items-center gap-2 mb-0.5">
|
|
<span class="bg-error text-white text-[9px] px-1 rounded font-bold">NEW</span>
|
|
<p class="text-label-xs font-bold text-on-surface group-hover:text-primary transition-colors cursor-pointer line-clamp-1">KINTEX 제2전시장 주차 공간 일시 제한 안내</p>
|
|
</div>
|
|
<p class="text-[10px] text-on-surface-variant">2026.03.10</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex items-start justify-between gap-3 group">
|
|
<div class="flex-1">
|
|
<p class="text-label-xs font-bold text-on-surface group-hover:text-primary transition-colors cursor-pointer line-clamp-1">AI 마케팅 툴 신규 기능 업데이트 배포 (v2.4.0)</p>
|
|
<p class="text-[10px] text-on-surface-variant">2026.03.08</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex items-start justify-between gap-3 group">
|
|
<div class="flex-1">
|
|
<p class="text-label-xs font-bold text-on-surface group-hover:text-primary transition-colors cursor-pointer line-clamp-1">2026 하반기 대관 정기 신청 접수 일정 공고</p>
|
|
<p class="text-[10px] text-on-surface-variant">2026.03.05</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- Recent Activity -->
|
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-5 shadow-sm">
|
|
<h3 class="text-label-md font-bold text-on-surface mb-4">최근 활동</h3>
|
|
<div class="space-y-4 relative before:content-[''] before:absolute before:left-[11px] before:top-2 before:bottom-2 before:w-[1px] before:bg-outline-variant">
|
|
<div class="relative pl-7 flex flex-col">
|
|
<div class="absolute left-0 top-1 w-6 h-6 rounded-full bg-primary-fixed flex items-center justify-center z-10 border-2 border-white">
|
|
<span class="material-symbols-outlined text-[14px] text-primary">done</span>
|
|
</div>
|
|
<p class="text-label-xs font-bold text-on-surface">부스 설계 승인됨 · A-102</p>
|
|
<p class="text-[10px] text-on-surface-variant mt-0.5">2시간 전 · 운영본부</p>
|
|
</div>
|
|
<div class="relative pl-7 flex flex-col">
|
|
<div class="absolute left-0 top-1 w-6 h-6 rounded-full bg-secondary-fixed flex items-center justify-center z-10 border-2 border-white">
|
|
<span class="material-symbols-outlined text-[14px] text-secondary">person_add</span>
|
|
</div>
|
|
<p class="text-label-xs font-bold text-on-surface">신규 참가업체 등록 · (주)넥스트테크</p>
|
|
<p class="text-[10px] text-on-surface-variant mt-0.5">5시간 전 · 김주최</p>
|
|
</div>
|
|
<div class="relative pl-7 flex flex-col">
|
|
<div class="absolute left-0 top-1 w-6 h-6 rounded-full bg-surface-container-highest flex items-center justify-center z-10 border-2 border-white">
|
|
<span class="material-symbols-outlined text-[14px] text-on-surface-variant">chat_bubble</span>
|
|
</div>
|
|
<p class="text-label-xs font-bold text-on-surface">운영 리포트 발송 완료</p>
|
|
<p class="text-[10px] text-on-surface-variant mt-0.5">어제 · 시스템 자동</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Workspace Section -->
|
|
<section class="mt-12 mb-12">
|
|
<h3 class="text-title-sm font-bold text-on-surface mb-6 flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-primary">workspaces</span>
|
|
내 행사 워크스페이스
|
|
</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
<!-- Workspace Cards -->
|
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-4 shadow-sm hover:border-primary transition-all group">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-primary">engineering</span>
|
|
</div>
|
|
<span class="bg-error-container text-on-error-container px-2 py-0.5 rounded text-[10px] font-bold">D-31</span>
|
|
</div>
|
|
<h4 class="text-label-md font-bold mb-1">건축/인테리어 박람회</h4>
|
|
<p class="text-[10px] text-on-surface-variant mb-4">총괄 관리자 권한</p>
|
|
<div class="flex items-center justify-between pt-4 border-t border-outline-variant/30">
|
|
<span class="text-[10px] text-on-surface-variant">참가업체 120개</span>
|
|
<div class="flex -space-x-2">
|
|
<div class="w-6 h-6 rounded-full bg-primary-fixed border-2 border-white"></div>
|
|
<div class="w-6 h-6 rounded-full bg-secondary-fixed border-2 border-white"></div>
|
|
<div class="w-6 h-6 rounded-full bg-surface-variant border-2 border-white"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-4 shadow-sm hover:border-primary transition-all group">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<div class="w-10 h-10 rounded-lg bg-secondary/10 flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-secondary">set_meal</span>
|
|
</div>
|
|
<span class="bg-surface-container text-on-surface-variant px-2 py-0.5 rounded text-[10px] font-bold">D-82</span>
|
|
</div>
|
|
<h4 class="text-label-md font-bold mb-1">킨텍스 푸드 위크</h4>
|
|
<p class="text-[10px] text-on-surface-variant mb-4">운영팀장 권한</p>
|
|
<div class="flex items-center justify-between pt-4 border-t border-outline-variant/30">
|
|
<span class="text-[10px] text-on-surface-variant">참가업체 450개</span>
|
|
<div class="flex -space-x-2">
|
|
<div class="w-6 h-6 rounded-full bg-primary-fixed border-2 border-white"></div>
|
|
<div class="w-6 h-6 rounded-full bg-tertiary-fixed border-2 border-white"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-4 shadow-sm hover:border-primary transition-all group">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<div class="w-10 h-10 rounded-lg bg-tertiary/10 flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-tertiary">styler</span>
|
|
</div>
|
|
<span class="bg-surface-container text-on-surface-variant px-2 py-0.5 rounded text-[10px] font-bold">D-145</span>
|
|
</div>
|
|
<h4 class="text-label-md font-bold mb-1">뷰티 & 헬스 엑스포</h4>
|
|
<p class="text-[10px] text-on-surface-variant mb-4">마케팅 관리 권한</p>
|
|
<div class="flex items-center justify-between pt-4 border-t border-outline-variant/30">
|
|
<span class="text-[10px] text-on-surface-variant">참가업체 320개</span>
|
|
<div class="flex -space-x-2">
|
|
<div class="w-6 h-6 rounded-full bg-secondary-fixed border-2 border-white"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col items-center justify-center border-2 border-dashed border-outline-variant rounded-xl p-4 cursor-pointer hover:bg-surface-container-low transition-colors group">
|
|
<span class="material-symbols-outlined text-on-surface-variant mb-2 text-[32px] group-hover:scale-110 transition-transform">add_circle</span>
|
|
<span class="text-label-md font-bold text-on-surface-variant">새 워크스페이스 추가</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<!-- App Shell: Footer -->
|
|
<footer class="fixed bottom-0 right-0 h-[36px] left-[240px] bg-surface-container-low border-t border-outline-variant flex justify-between items-center px-6 z-40">
|
|
<div class="flex items-center gap-4">
|
|
<span class="text-label-xs font-bold text-on-surface-variant">v2.4.0-stable</span>
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
|
|
<span class="text-label-xs text-on-surface-variant">System Status: Operational</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-6">
|
|
<nav class="flex items-center gap-4">
|
|
<a class="text-label-xs text-on-surface-variant hover:underline" href="#">Privacy Policy</a>
|
|
<a class="text-label-xs text-on-surface-variant hover:underline" href="#">Terms of Service</a>
|
|
</nav>
|
|
<div class="h-4 w-[1px] bg-outline-variant"></div>
|
|
<a class="text-label-xs text-primary font-bold hover:underline" href="#">Customer Support</a>
|
|
</div>
|
|
</footer>
|
|
<!-- FAB (Suppressed on Dashboard per logic, but usually for quick task) -->
|
|
<!-- Determined not necessary for dense professional dashboard to maintain focus -->
|
|
</body></html> |