6a4e4d864c
- meta_common.php에 favicon 링크 및 로고 컴포넌트 추가 - 모든 index.php 페이지에 favicon 적용 - 일부 페이지 타이틀에서 CodeBridgeExy → CodeBridgeX 수정 - 23개 파일 일괄 업데이트 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
481 lines
30 KiB
PHP
481 lines
30 KiB
PHP
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>KoDATA EW 리포트 인터뷰 계획안 - SAM Project</title>
|
||
<!-- Favicon -->
|
||
<link rel="apple-touch-icon" sizes="180x180" href="../img/apple-touch-icon.png">
|
||
<link rel="icon" type="image/png" sizes="32x32" href="../img/favicon-32x32.png">
|
||
<link rel="icon" type="image/png" sizes="16x16" href="../img/favicon-16x16.png">
|
||
<link rel="shortcut icon" href="../img/favicon.png">
|
||
|
||
<!-- Fonts: Pretendard -->
|
||
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css" />
|
||
|
||
<!-- Tailwind CSS CDN -->
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
fontFamily: {
|
||
sans: ['Pretendard', 'sans-serif'],
|
||
},
|
||
borderRadius: {
|
||
'card': '20px',
|
||
},
|
||
colors: {
|
||
primary: {
|
||
50: '#f0f9ff',
|
||
100: '#e0f2fe',
|
||
200: '#bae6fd',
|
||
300: '#7dd3fc',
|
||
400: '#38bdf8',
|
||
500: '#0ea5e9',
|
||
600: '#0284c7',
|
||
700: '#0369a1',
|
||
800: '#075985',
|
||
900: '#0c4a6e',
|
||
},
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<!-- Lucide Icons -->
|
||
<script src="https://unpkg.com/lucide@latest"></script>
|
||
|
||
<style>
|
||
.glass-sidebar {
|
||
background: rgba(255, 255, 255, 0.7);
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
.glass-header {
|
||
background: rgba(255, 255, 255, 0.8);
|
||
backdrop-filter: blur(12px);
|
||
}
|
||
@media print {
|
||
.no-print { display: none !important; }
|
||
aside { display: none !important; }
|
||
main { width: 100% !important; margin-left: 0 !important; }
|
||
.scroll-mt-24 { scroll-margin-top: 0 !important; }
|
||
}
|
||
.stat-card {
|
||
transition: transform 0.2s, box-shadow 0.2s;
|
||
}
|
||
.stat-card:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
|
||
}
|
||
.question-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 4px;
|
||
border-radius: 4px 0 0 4px;
|
||
}
|
||
.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>
|
||
<?php
|
||
$MEETING_OVERVIEW = [
|
||
'date' => '12월 23일(화) 오후 2시 예정',
|
||
'target' => 'KoDATA 정성천 차장',
|
||
'purpose' => [
|
||
'EW 리포트 API 도입 비용 산정',
|
||
'데이터 가공 및 재제공에 따른 법적 리스크 점검',
|
||
'서비스 종료 이슈 대응'
|
||
]
|
||
];
|
||
|
||
$SECTIONS = [
|
||
[
|
||
'id' => 'cost',
|
||
'title' => 'Ⅰ. 비용 및 계약 조건',
|
||
'subtitle' => 'Cost Efficiency & Terms',
|
||
'icon' => 'credit-card',
|
||
'color' => 'blue',
|
||
'questions' => [
|
||
['id' => 'c1', 'text' => '과금 체계: EW 리포트 API 호출 시 건당 과금 방식인지, 아니면 정액제인지 명확한 기준은 무엇입니까?', 'priority' => 'high'],
|
||
['id' => 'c2', 'text' => 'API 방식별 차등: VALUE(JSON/XML) 방식과 WEB API(HTML/URL) 방식 간에 이용료 차이가 존재합니까?', 'priority' => 'high'],
|
||
['id' => 'c3', 'text' => '대량 호출 할인: SAM 프로젝트 규모에 따라 호출량이 늘어날 경우 적용 가능한 슬라이딩 단가제(구간별 할인)가 있습니까?', 'priority' => 'medium'],
|
||
['id' => 'c4', 'text' => '유지보수비: API 연동 이후 발생하는 별도의 기술 지원료나 유지보수 비용이 포함됩니까?', 'priority' => 'medium']
|
||
]
|
||
],
|
||
[
|
||
'id' => 'legal',
|
||
'title' => 'Ⅱ. 데이터 가공 및 법적 리스크',
|
||
'subtitle' => 'Legal Stability & Usage Rights',
|
||
'icon' => 'shield-check',
|
||
'color' => 'emerald',
|
||
'questions' => [
|
||
['id' => 'l1', 'text' => '데이터 가공 권한: VALUE 방식을 통해 받은 JSON 데이터를 SAM 프로젝트의 UI에 맞춰 재가공하거나, 다른 지표와 결합하여 새로운 인사이트를 도출해 제공하는 것이 저작권법상 허용됩니까?', 'priority' => 'high'],
|
||
['id' => 'l2', 'text' => '재제공 범위: KoDATA에서 제공하는 EW등급, 등급산출사유 등의 정보를 SAM 프로젝트 사용자(제3자)에게 열람하게 하는 것이 계약상 위반 소지가 없습니까?', 'priority' => 'high'],
|
||
['id' => 'l3', 'text' => '데이터 저장: API로 호출한 기업 개요, 재무 정보, 연체 정보 등을 당사 DB에 영구적 또는 일시적으로 저장하여 리포트 이력 관리용으로 사용할 수 있습니까?', 'priority' => 'medium'],
|
||
['id' => 'l4', 'text' => '법적 책임 소재: KoDATA 제공 데이터의 오류로 인해 SAM 프로젝트 사용자가 의사결정 손실을 보았을 경우, 법적 책임의 한계와 면책 조항은 어떻게 됩니까?', 'priority' => 'high']
|
||
]
|
||
],
|
||
[
|
||
'id' => 'continuity',
|
||
'title' => 'Ⅲ. 서비스 종료 및 연속성 대응',
|
||
'subtitle' => 'Business Continuity',
|
||
'icon' => 'refresh-ccw',
|
||
'color' => 'amber',
|
||
'questions' => [
|
||
['id' => 's1', 'text' => "종료 사유 및 영향: 2026년 2월 27일 종료 예정인 '기업신용안심서비스'의 종료 사유가 API 서비스의 품질 저하나 데이터 공급 중단과 관련이 있습니까?", 'priority' => 'medium'],
|
||
['id' => 's2', 'text' => "대체 서비스: 서비스 종료 공지에서 언급된 '더 좋은 서비스'가 현재 SAM 프로젝트에서 검토 중인 EW 리포트 API와 어떤 차별점이 있습니까?", 'priority' => 'medium'],
|
||
['id' => 's3', 'text' => '전환 지원: 만약 향후 API 사양이나 서비스 체계가 변경될 경우, SAM 프로젝트가 중단 없이 운영될 수 있도록 하는 마이그레이션 지원 대책이 있습니까?', 'priority' => 'medium']
|
||
]
|
||
],
|
||
[
|
||
'id' => 'technical',
|
||
'title' => 'Ⅳ. 기술적 활용 상세',
|
||
'subtitle' => 'Technical Integration',
|
||
'icon' => 'cpu',
|
||
'color' => 'slate',
|
||
'questions' => [
|
||
['id' => 't1', 'text' => '항목 선택: VALUE 방식을 선택할 경우, EW등급 외에 단기연체(신용정보원), 휴폐업정보 등 필요한 항목만 선별하여 단가를 낮추는 구성이 가능합니까?', 'priority' => 'medium'],
|
||
['id' => 't2', 'text' => "'VALUE API 목록WEB' 방식 사용 시 HTML에 인코딩된 CSS가 SAM 프로젝트의 기존 스타일과 충돌할 가능성에 대해 기술적 가이드를 제공합니까?", 'priority' => 'low']
|
||
]
|
||
]
|
||
];
|
||
|
||
$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 -->
|
||
<aside class="hidden md:flex w-72 glass-sidebar border-r border-slate-200 flex-col sticky top-0 h-screen no-print z-50">
|
||
<div class="p-8 border-b border-slate-100/50">
|
||
<div class="flex items-center gap-2 mb-2">
|
||
<div class="bg-indigo-600 text-white w-8 h-8 rounded-lg flex items-center justify-center font-black text-xs shadow-lg shadow-indigo-200">SAM</div>
|
||
<span class="font-extrabold text-slate-800 tracking-tight text-lg">KoDATA Plan</span>
|
||
</div>
|
||
<p class="text-[10px] text-slate-400 font-bold uppercase tracking-[0.2em]">Internal Guideline</p>
|
||
</div>
|
||
|
||
<nav class="flex-1 p-6 space-y-8 overflow-y-auto">
|
||
<div>
|
||
<p class="px-3 mb-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Main Overview</p>
|
||
<a href="#overview" 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="info" class="w-4 h-4 text-slate-400 group-hover:text-indigo-600"></i>
|
||
인터뷰 개요
|
||
</a>
|
||
</div>
|
||
|
||
<div>
|
||
<p class="px-3 mb-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">Questions</p>
|
||
<div class="space-y-1">
|
||
<?php foreach ($SECTIONS as $section): ?>
|
||
<a href="#<?php echo $section['id']; ?>" 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="<?php echo $section['icon']; ?>" class="w-4 h-4 text-slate-300 group-hover:text-indigo-400"></i>
|
||
<?php echo str_replace(['Ⅰ. ', 'Ⅱ. ', 'Ⅲ. ', 'Ⅳ. '], '', $section['title']); ?>
|
||
</a>
|
||
<?php endforeach; ?>
|
||
</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>
|
||
협상 전략 및 팁
|
||
</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="p-6 border-t border-slate-100 bg-slate-50/50">
|
||
<div class="flex items-center gap-3 p-4 bg-white border border-slate-200 rounded-2xl shadow-sm">
|
||
<div class="w-10 h-10 rounded-full bg-gradient-to-tr from-indigo-500 to-primary-400 flex items-center justify-center text-white font-black text-sm shadow-md">JD</div>
|
||
<div>
|
||
<p class="text-xs font-black text-slate-900 leading-tight">SAM Lead</p>
|
||
<p class="text-[10px] text-slate-400 font-bold uppercase mt-0.5">Project Manager</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- 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">
|
||
<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>
|
||
</button>
|
||
<button
|
||
onclick="window.print()"
|
||
class="flex items-center gap-2.5 px-6 py-3 bg-slate-900 text-white rounded-xl text-sm font-black hover:bg-slate-800 transition-all shadow-xl shadow-slate-200 active:scale-95"
|
||
>
|
||
<i data-lucide="printer" class="w-4 h-4"></i>
|
||
PDF 출력
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="flex-1 p-8 sm:p-12 max-w-5xl mx-auto w-full space-y-20">
|
||
<!-- Hero / Overview -->
|
||
<div id="overview" class="relative overflow-hidden rounded-[32px] bg-slate-900 p-10 sm:p-16 shadow-2xl shadow-indigo-100 scroll-mt-32">
|
||
<div class="absolute top-0 right-0 p-12 opacity-5 pointer-events-none">
|
||
<i data-lucide="package" class="w-64 h-64 text-white rotate-12"></i>
|
||
</div>
|
||
|
||
<div class="relative z-10 space-y-8">
|
||
<div class="inline-flex items-center gap-2.5 px-4 py-2 bg-indigo-500/10 text-indigo-300 rounded-full text-xs font-black border border-indigo-500/20 uppercase tracking-widest">
|
||
<i data-lucide="calendar" class="w-3.5 h-3.5"></i>
|
||
<?php echo $MEETING_OVERVIEW['date']; ?>
|
||
</div>
|
||
|
||
<div class="space-y-4">
|
||
<h1 class="text-4xl sm:text-6xl font-black text-white leading-[1.15] tracking-tight">
|
||
<?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]">
|
||
<?php echo $isInterview
|
||
? '상호 협력을 통한 데이터 에코시스템 구축 및 <br class="hidden sm:block" /> 안정적인 서비스 제공을 위한 질의 아젠다입니다.'
|
||
: '비용 효율성과 데이터 활용의 법적 안정성을 최우선으로 고려한 <br class="hidden sm:block" /> SAM 프로젝트의 데이터 소싱 가이드라인입니다.'; ?>
|
||
</p>
|
||
</div>
|
||
|
||
<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>
|
||
</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">
|
||
<div class="p-3 bg-indigo-500/20 rounded-2xl text-indigo-400">
|
||
<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>
|
||
<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 text-sm">
|
||
<span class="w-1 h-1 bg-indigo-500 rounded-full"></span>
|
||
<?php echo $purpose; ?>
|
||
</li>
|
||
<?php endforeach; ?>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Stats Summary (Admin Only) -->
|
||
<?php if (!$isInterview): ?>
|
||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-6">
|
||
<?php
|
||
$stats = [
|
||
['label' => '총 질문수', 'value' => '13건', 'color' => 'text-slate-900', 'bg' => 'bg-white'],
|
||
['label' => '필수 항목', 'value' => '6건', 'color' => 'text-rose-600', 'bg' => 'bg-rose-50/50'],
|
||
['label' => '미팅 시간', 'value' => '오후 2시', 'color' => 'text-slate-900', 'bg' => 'bg-white'],
|
||
['label' => '전략 우선순위', 'value' => '비용/법무', 'color' => 'text-indigo-600', 'bg' => 'bg-indigo-50/50'],
|
||
];
|
||
foreach ($stats as $stat): ?>
|
||
<div class="<?php echo $stat['bg']; ?> p-8 rounded-[32px] border border-slate-200 shadow-sm stat-card">
|
||
<p class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] mb-2"><?php echo $stat['label']; ?></p>
|
||
<p class="text-3xl font-black <?php echo $stat['color']; ?>"><?php echo $stat['value']; ?></p>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<!-- Sections -->
|
||
<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">
|
||
<div class="flex items-center gap-5">
|
||
<div class="p-4 rounded-3xl bg-white shadow-xl shadow-slate-200/50 group-hover:scale-110 transition-transform duration-300">
|
||
<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 $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>
|
||
<div class="hidden sm:block h-[2px] flex-1 mx-8 bg-slate-100 rounded-full"></div>
|
||
</div>
|
||
|
||
<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 <?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); ?>
|
||
</div>
|
||
<div class="space-y-4 flex-1">
|
||
<p class="text-slate-700 leading-relaxed font-semibold text-lg">
|
||
<?php
|
||
$parts = explode(':', $q['text'], 2);
|
||
if (count($parts) > 1): ?>
|
||
<span class="text-slate-900 font-black relative">
|
||
<?php echo $parts[0]; ?>:
|
||
<span class="absolute bottom-0 left-0 w-full h-[6px] bg-indigo-500/10 -z-10 rounded-sm"></span>
|
||
</span>
|
||
<?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">
|
||
<span class="w-1 h-1 bg-rose-600 rounded-full animate-pulse"></span>
|
||
Essential
|
||
</span>
|
||
<?php endif; ?>
|
||
<button class="flex items-center gap-2 text-[10px] font-black text-slate-400 hover:text-indigo-600 transition-all uppercase tracking-widest bg-slate-50 px-3 py-1.5 rounded-lg border border-transparent hover:border-indigo-100 hover:bg-white active:scale-95">
|
||
<i data-lucide="check-circle-2" class="w-3.5 h-3.5"></i>
|
||
Check Done
|
||
</button>
|
||
</div>
|
||
<?php endif; ?>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
</section>
|
||
<?php endforeach; ?>
|
||
|
||
<!-- 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>
|
||
</div>
|
||
<h3 class="text-3xl font-black text-slate-900">인터뷰 협상 전략 및 팁</h3>
|
||
</div>
|
||
|
||
<div class="relative overflow-hidden bg-white border border-slate-200 rounded-[40px] p-10 sm:p-14 shadow-2xl shadow-slate-200/50">
|
||
<div class="absolute top-0 right-0 p-12 opacity-[0.03] pointer-events-none">
|
||
<i data-lucide="lightbulb" class="w-48 h-48 text-amber-500"></i>
|
||
</div>
|
||
|
||
<div class="space-y-12">
|
||
<div class="relative">
|
||
<p class="text-2xl font-bold text-slate-800 leading-[1.6] italic pl-8 border-l-8 border-amber-400 py-2">
|
||
"데이터의 소유권은 KoDATA에 있지만, <span class="bg-amber-100 text-amber-900 px-2 py-0.5 rounded-lg">활용권은 SAM 프로젝트</span>에 있다"는 점을 명확히 하고, 가공된 데이터가 원본을 대체하지 않음을 강조하십시오.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid md:grid-cols-2 gap-12">
|
||
<div class="space-y-6">
|
||
<div class="flex items-center gap-4">
|
||
<div class="p-3 bg-amber-50 rounded-2xl text-amber-600">
|
||
<i data-lucide="chef-hat" class="w-6 h-6"></i>
|
||
</div>
|
||
<h4 class="text-xl font-black text-slate-900">식재료와 레시피의 비유</h4>
|
||
</div>
|
||
<p class="text-slate-600 leading-[1.8] text-lg font-medium">
|
||
이 과정은 마치 <strong class="text-slate-900 font-black underline decoration-amber-300 underline-offset-4">고급 식재료(KoDATA 데이터)</strong>를 구매하여 <br />
|
||
우리만의 <strong class="text-slate-900 font-black underline decoration-indigo-300 underline-offset-4">레시피(SAM 프로젝트)</strong>로 요리해 <br />
|
||
손님에게 대접할 때의 과정과 같습니다.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="bg-slate-50 rounded-3xl p-8 border border-slate-100 shadow-inner">
|
||
<h5 class="text-[10px] font-black text-slate-400 uppercase tracking-[0.25em] mb-6 flex items-center gap-2">
|
||
<span class="w-2 h-2 bg-amber-500 rounded-full"></span>
|
||
Core Negotiation Points
|
||
</h5>
|
||
<ul class="space-y-6">
|
||
<?php
|
||
$tips = [
|
||
"이 요리를 우리 메뉴로 팔아도 되는가? (활용권 권한 확보)",
|
||
"재료비는 얼마나 깎아줄 수 있는가? (구간별 대량 할인)",
|
||
"재료 공급이 중단될 경우 대안은? (데이터 지속성 협의)"
|
||
];
|
||
foreach ($tips as $tip): ?>
|
||
<li class="flex items-start gap-4 group">
|
||
<div class="mt-1 w-6 h-6 rounded-full bg-white flex items-center justify-center text-amber-500 shadow-sm border border-slate-100 group-hover:bg-amber-500 group-hover:text-white transition-all duration-300">
|
||
<i data-lucide="check" class="w-3.5 h-3.5"></i>
|
||
</div>
|
||
<span class="text-slate-700 font-bold text-lg group-hover:text-amber-900 transition-colors"><?php echo $tip; ?></span>
|
||
</li>
|
||
<?php endforeach; ?>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</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"><?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">
|
||
<div class="w-8 h-8 rounded-full bg-slate-100"></div>
|
||
<div class="w-8 h-8 rounded-full bg-slate-100"></div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<script>
|
||
// Initialize Lucide Icons
|
||
lucide.createIcons();
|
||
|
||
// Smooth Scroll for Navigation
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function (e) {
|
||
e.preventDefault();
|
||
const targetId = this.getAttribute('href');
|
||
if (targetId && targetId !== '#') {
|
||
const targetElement = document.querySelector(targetId);
|
||
if (targetElement) {
|
||
targetElement.scrollIntoView({
|
||
behavior: 'smooth'
|
||
});
|
||
}
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|