kodata 외부 인터뷰 자료 추가

This commit is contained in:
2025-12-23 09:19:59 +09:00
parent 2bbd0e30a3
commit 00a13bc570
3 changed files with 81 additions and 31 deletions

View File

@@ -76,10 +76,14 @@
.question-card-high::before { background-color: #f43f5e; }
.question-card-medium::before { background-color: #f59e0b; }
.question-card-low::before { background-color: #94a3b8; }
/* Interview Mode Overrides */
.interview-mode .internal-only { display: none !important; }
.interview-mode aside { display: none !important; }
.interview-mode main { margin-left: 0 !important; max-width: 6xl !important; }
.interview-mode .question-card::before { display: none !important; }
</style>
</head>
<body class="bg-slate-50 text-slate-900 font-sans selection:bg-primary-100 selection:text-primary-700">
<?php
$MEETING_OVERVIEW = [
'date' => '12월 23일(화) 오후 2시 예정',
@@ -142,7 +146,11 @@ $SECTIONS = [
]
]
];
$view = $_GET['view'] ?? 'admin';
$isInterview = ($view === 'partner');
?>
<body class="bg-slate-50 text-slate-900 font-sans selection:bg-primary-100 selection:text-primary-700 <?php echo $isInterview ? 'interview-mode' : ''; ?>">
<div class="min-h-screen flex flex-col md:flex-row">
<!-- Sidebar - Desktop Only -->
@@ -176,7 +184,7 @@ $SECTIONS = [
</div>
</div>
<div>
<div class="internal-only">
<p class="px-3 mb-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Strategy</p>
<a href="#tips" class="flex items-center gap-3 px-4 py-3 text-sm font-semibold text-slate-600 hover:bg-white hover:text-indigo-600 rounded-xl transition-all hover:shadow-sm group">
<i data-lucide="lightbulb" class="w-4 h-4 text-amber-400"></i>
@@ -199,10 +207,19 @@ $SECTIONS = [
<!-- Main Content Area -->
<main class="flex-1 flex flex-col min-w-0">
<header class="sticky top-0 z-40 flex h-20 items-center justify-between border-b border-slate-200 glass-header px-8 no-print">
<h2 class="text-sm font-black text-slate-800 truncate uppercase tracking-widest flex items-center gap-3">
<span class="w-2 h-2 rounded-full bg-indigo-500 animate-pulse"></span>
KoDATA EW API Interview Dashboard
</h2>
<div class="flex items-center gap-6">
<h2 class="text-sm font-black text-slate-800 truncate uppercase tracking-widest flex items-center gap-3">
<span class="w-2 h-2 rounded-full bg-indigo-500 animate-pulse"></span>
<?php echo $isInterview ? 'Partnership Discussion Agenda' : 'KoDATA EW API Interview Dashboard'; ?>
</h2>
<!-- View Mode Switcher -->
<div class="flex bg-slate-100 p-1 rounded-xl border border-slate-200 shadow-inner">
<a href="?view=admin" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all <?php echo !$isInterview ? 'bg-white text-indigo-600 shadow-sm border border-slate-200' : 'text-slate-400 hover:text-slate-600'; ?>">본사 가이드</a>
<a href="?view=partner" class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all <?php echo $isInterview ? 'bg-indigo-600 text-white shadow-lg shadow-indigo-100' : 'text-slate-400 hover:text-slate-600'; ?>">인터뷰 모드</a>
</div>
</div>
<div class="flex items-center gap-4">
<button class="p-2.5 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-xl transition-all">
<i data-lucide="share-2" class="w-5 h-5"></i>
@@ -232,23 +249,26 @@ $SECTIONS = [
<div class="space-y-4">
<h1 class="text-4xl sm:text-6xl font-black text-white leading-[1.15] tracking-tight">
KoDATA EW 리포트 <br />
<span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-primary-400">인터뷰 계획안</span>
<?php echo $isInterview ? 'KoDATA Partnership' : 'KoDATA EW 리포트'; ?> <br />
<span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-primary-400">
<?php echo $isInterview ? 'Discussion Agenda' : '인터뷰 계획안'; ?>
</span>
</h1>
<p class="text-slate-400 max-w-2xl text-xl font-medium leading-[1.6]">
비용 효율성과 데이터 활용의 법적 안정성을 최우선으로 고려한 <br class="hidden sm:block" />
SAM 프로젝트의 데이터 소싱 가이드라인입니다.
<?php echo $isInterview
? '상호 협력을 통한 데이터 에코시스템 구축 및 <br class="hidden sm:block" /> 안정적인 서비스 제공을 위한 질의 아젠다입니다.'
: '비용 효율성과 데이터 활용의 법적 안정성을 최우선으로 고려한 <br class="hidden sm:block" /> SAM 프로젝트의 데이터 소싱 가이드라인입니다.'; ?>
</p>
</div>
<div class="grid sm:grid-cols-2 gap-6 pt-6">
<div class="grid sm:grid-cols-1 md:grid-cols-2 gap-6 pt-6">
<div class="bg-white/5 backdrop-blur-md border border-white/10 rounded-3xl p-6 flex items-start gap-4 hover:bg-white/10 transition-all duration-300">
<div class="p-3 bg-indigo-500/20 rounded-2xl text-indigo-400">
<i data-lucide="user" class="w-6 h-6"></i>
</div>
<div>
<p class="text-[10px] font-black text-slate-500 uppercase tracking-[0.2em] mb-1">미팅 대상</p>
<p class="text-white text-lg font-bold"><?php echo $MEETING_OVERVIEW['target']; ?></p>
<p class="text-[10px] font-black text-slate-500 uppercase tracking-[0.2em] mb-1">참석 대상</p>
<p class="text-white text-lg font-bold"><?php echo $MEETING_OVERVIEW['target']; ?> 외 관계자</p>
</div>
</div>
<div class="bg-white/5 backdrop-blur-md border border-white/10 rounded-3xl p-6 flex items-start gap-4 hover:bg-white/10 transition-all duration-300">
@@ -256,10 +276,10 @@ $SECTIONS = [
<i data-lucide="target" class="w-6 h-6"></i>
</div>
<div>
<p class="text-[10px] font-black text-slate-500 uppercase tracking-[0.2em] mb-1">주요 목적</p>
<p class="text-[10px] font-black text-slate-500 uppercase tracking-[0.2em] mb-1">논의 아젠다</p>
<ul class="text-white font-bold text-base space-y-1">
<?php foreach ($MEETING_OVERVIEW['purpose'] as $purpose): ?>
<li class="flex items-center gap-2">
<li class="flex items-center gap-2 text-sm">
<span class="w-1 h-1 bg-indigo-500 rounded-full"></span>
<?php echo $purpose; ?>
</li>
@@ -271,7 +291,8 @@ $SECTIONS = [
</div>
</div>
<!-- Stats Summary -->
<!-- Stats Summary (Admin Only) -->
<?php if (!$isInterview): ?>
<div class="grid grid-cols-2 lg:grid-cols-4 gap-6">
<?php
$stats = [
@@ -287,9 +308,10 @@ $SECTIONS = [
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
<!-- Sections -->
<div class="space-y-24">
<div class="space-y-32">
<?php foreach ($SECTIONS as $section): ?>
<section id="<?php echo $section['id']; ?>" class="scroll-mt-32">
<div class="flex items-center justify-between mb-8 group">
@@ -298,7 +320,7 @@ $SECTIONS = [
<i data-lucide="<?php echo $section['icon']; ?>" class="w-8 h-8 text-indigo-600"></i>
</div>
<div>
<h3 class="text-3xl font-black text-slate-900 leading-tight"><?php echo $section['title']; ?></h3>
<h3 class="text-3xl font-black text-slate-900 leading-tight"><?php echo $isInterview ? str_replace(['. ', 'Ⅱ. ', 'Ⅲ. ', 'Ⅳ. '], '', $section['title']) : $section['title']; ?></h3>
<p class="text-xs text-slate-400 font-bold uppercase tracking-[0.2em] mt-1"><?php echo $section['subtitle']; ?></p>
</div>
</div>
@@ -307,7 +329,7 @@ $SECTIONS = [
<div class="grid gap-6">
<?php foreach ($section['questions'] as $idx => $q): ?>
<div class="relative group bg-white rounded-[28px] border border-slate-200 p-8 shadow-sm hover:shadow-2xl hover:shadow-indigo-100/50 hover:border-indigo-100 transition-all duration-300 question-card question-card-<?php echo $q['priority']; ?>">
<div class="relative group bg-white rounded-[28px] border border-slate-200 p-8 shadow-sm hover:shadow-2xl hover:shadow-indigo-100/50 hover:border-indigo-100 transition-all duration-300 question-card <?php echo !$isInterview ? 'question-card-'.$q['priority'] : ''; ?>">
<div class="flex gap-6">
<div class="shrink-0 flex items-center justify-center w-10 h-10 rounded-2xl bg-slate-50 text-xs font-black text-slate-400 border border-slate-100 group-hover:bg-indigo-600 group-hover:text-white group-hover:border-indigo-600 transition-all duration-300">
<?php echo str_pad($idx + 1, 2, '0', STR_PAD_LEFT); ?>
@@ -324,6 +346,8 @@ $SECTIONS = [
<?php echo $parts[1]; ?>
<?php else: echo $q['text']; endif; ?>
</p>
<?php if (!$isInterview): ?>
<div class="flex items-center gap-4">
<?php if ($q['priority'] === 'high'): ?>
<span class="inline-flex items-center gap-1.5 px-3 py-1 bg-rose-50 text-rose-600 rounded-full text-[10px] font-black uppercase tracking-widest border border-rose-100">
@@ -336,6 +360,7 @@ $SECTIONS = [
Check Done
</button>
</div>
<?php endif; ?>
</div>
</div>
</div>
@@ -344,8 +369,9 @@ $SECTIONS = [
</section>
<?php endforeach; ?>
<!-- Tips Section -->
<div id="tips" class="scroll-mt-32 space-y-10">
<!-- Tips Section (Admin Only) -->
<?php if (!$isInterview): ?>
<div id="tips" class="scroll-mt-32 space-y-10 internal-only">
<div class="flex items-center gap-5">
<div class="p-4 rounded-3xl bg-amber-100 shadow-xl shadow-amber-100/50">
<i data-lucide="lightbulb" class="w-8 h-8 text-amber-600"></i>
@@ -406,12 +432,13 @@ $SECTIONS = [
</div>
</div>
</div>
<?php endif; ?>
</div>
<footer class="pt-20 pb-12 border-t border-slate-200 flex flex-col sm:flex-row justify-between items-center gap-6">
<div class="flex items-center gap-3">
<div class="bg-indigo-600 text-white w-6 h-6 rounded flex items-center justify-center font-black text-[10px]">SAM</div>
<span class="text-sm font-black text-slate-400 uppercase tracking-widest">Internal Document</span>
<span class="text-sm font-black text-slate-400 uppercase tracking-widest"><?php echo $isInterview ? 'Discussion Agenda' : 'Internal Document'; ?></span>
</div>
<p class="text-sm text-slate-400 font-medium">© 2025 CodeBridge-X</p>
<div class="flex gap-4">
@@ -431,12 +458,18 @@ $SECTIONS = [
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
const targetId = this.getAttribute('href');
if (targetId && targetId !== '#') {
const targetElement = document.querySelector(targetId);
if (targetElement) {
targetElement.scrollIntoView({
behavior: 'smooth'
});
}
}
});
});
</script>
</body>
</html>
</html>