mirror of
https://github.com/hwanny1128/HGZero.git
synced 2025-12-06 12:36:23 +00:00
bb921e10eb
- 가파팀 프로토타입 파일 삭제 - 가파팀 유저스토리 삭제 - 실시간 회의록 작성 플로우 설계서 추가 (Mermaid, Markdown) - 백업 및 데이터 디렉토리 추가 - AI 데이터 샘플 생성 도구 추가 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1017 lines
30 KiB
HTML
1017 lines
30 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>회의록 대시보드 - 회의록 서비스</title>
|
|
<link rel="stylesheet" href="common.css">
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: var(--color-gray-50);
|
|
}
|
|
|
|
/* Header */
|
|
.meeting-header {
|
|
background-color: var(--color-white);
|
|
border-bottom: 1px solid var(--color-gray-200);
|
|
padding: var(--spacing-6);
|
|
}
|
|
|
|
.header-content {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.back-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--spacing-2);
|
|
color: var(--color-gray-600);
|
|
text-decoration: none;
|
|
font-size: var(--font-size-body-small);
|
|
margin-bottom: var(--spacing-4);
|
|
transition: color var(--transition-fast);
|
|
}
|
|
|
|
.back-button:hover {
|
|
color: var(--color-primary-main);
|
|
}
|
|
|
|
.meeting-title {
|
|
font-size: var(--font-size-h2);
|
|
font-weight: var(--font-weight-bold);
|
|
color: var(--color-gray-900);
|
|
margin-bottom: var(--spacing-2);
|
|
}
|
|
|
|
.meeting-meta-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-4);
|
|
flex-wrap: wrap;
|
|
margin-bottom: var(--spacing-4);
|
|
}
|
|
|
|
.meeting-meta-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-2);
|
|
font-size: var(--font-size-body-small);
|
|
color: var(--color-gray-600);
|
|
}
|
|
|
|
/* Tabs */
|
|
.tabs {
|
|
display: flex;
|
|
gap: var(--spacing-2);
|
|
border-bottom: 1px solid var(--color-gray-200);
|
|
}
|
|
|
|
.tab {
|
|
padding: var(--spacing-3) var(--spacing-4);
|
|
font-size: var(--font-size-body);
|
|
color: var(--color-gray-600);
|
|
text-decoration: none;
|
|
border-bottom: 2px solid transparent;
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.tab:hover {
|
|
color: var(--color-primary-main);
|
|
}
|
|
|
|
.tab.active {
|
|
color: var(--color-primary-main);
|
|
border-bottom-color: var(--color-primary-main);
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
/* Main Content */
|
|
.dashboard-content {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: var(--spacing-6);
|
|
}
|
|
|
|
/* Section */
|
|
.dashboard-section {
|
|
background-color: var(--color-white);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--spacing-6);
|
|
margin-bottom: var(--spacing-6);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: var(--spacing-4);
|
|
padding-bottom: var(--spacing-3);
|
|
border-bottom: 2px solid var(--color-gray-100);
|
|
}
|
|
|
|
.section-title {
|
|
font-size: var(--font-size-h3);
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-gray-900);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-2);
|
|
}
|
|
|
|
.section-icon {
|
|
font-size: 24px;
|
|
}
|
|
|
|
/* 핵심내용 섹션 */
|
|
.key-points {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
.key-point-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--spacing-3);
|
|
padding: var(--spacing-3);
|
|
background-color: var(--color-gray-50);
|
|
border-radius: var(--radius-md);
|
|
border-left: 3px solid var(--color-primary-main);
|
|
}
|
|
|
|
.key-point-number {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
min-width: 28px;
|
|
background-color: var(--color-primary-main);
|
|
color: var(--color-white);
|
|
border-radius: var(--radius-full);
|
|
font-weight: var(--font-weight-bold);
|
|
font-size: var(--font-size-body-small);
|
|
}
|
|
|
|
.key-point-text {
|
|
flex: 1;
|
|
color: var(--color-gray-800);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.keywords {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-2);
|
|
margin-top: var(--spacing-4);
|
|
}
|
|
|
|
.keyword-tag {
|
|
padding: var(--spacing-2) var(--spacing-3);
|
|
background-color: rgba(0, 217, 177, 0.1);
|
|
color: var(--color-primary-main);
|
|
border-radius: var(--radius-full);
|
|
font-size: var(--font-size-body-small);
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
.meeting-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: var(--spacing-4);
|
|
margin-top: var(--spacing-4);
|
|
padding-top: var(--spacing-4);
|
|
border-top: 1px solid var(--color-gray-200);
|
|
}
|
|
|
|
.stat-item {
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: var(--font-size-h3);
|
|
font-weight: var(--font-weight-bold);
|
|
color: var(--color-primary-main);
|
|
margin-bottom: var(--spacing-1);
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: var(--font-size-body-small);
|
|
color: var(--color-gray-600);
|
|
}
|
|
|
|
/* 결정사항 섹션 */
|
|
.decisions-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
.decision-item {
|
|
padding: var(--spacing-4);
|
|
border: 1px solid var(--color-gray-200);
|
|
border-radius: var(--radius-md);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.decision-item:hover {
|
|
box-shadow: var(--shadow-sm);
|
|
border-color: var(--color-primary-main);
|
|
}
|
|
|
|
.decision-content {
|
|
color: var(--color-gray-900);
|
|
font-weight: var(--font-weight-medium);
|
|
margin-bottom: var(--spacing-3);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.decision-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-4);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.decision-meta-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-2);
|
|
font-size: var(--font-size-body-small);
|
|
color: var(--color-gray-600);
|
|
}
|
|
|
|
.decision-background {
|
|
margin-top: var(--spacing-3);
|
|
padding: var(--spacing-3);
|
|
background-color: var(--color-gray-50);
|
|
border-radius: var(--radius-sm);
|
|
font-size: var(--font-size-body-small);
|
|
color: var(--color-gray-700);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Todo 진행상황 섹션 */
|
|
.todo-filters {
|
|
display: flex;
|
|
gap: var(--spacing-2);
|
|
margin-bottom: var(--spacing-4);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.filter-button {
|
|
padding: var(--spacing-2) var(--spacing-3);
|
|
border: 1px solid var(--color-gray-300);
|
|
background-color: var(--color-white);
|
|
border-radius: var(--radius-full);
|
|
font-size: var(--font-size-body-small);
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.filter-button:hover {
|
|
border-color: var(--color-primary-main);
|
|
color: var(--color-primary-main);
|
|
}
|
|
|
|
.filter-button.active {
|
|
background-color: var(--color-primary-main);
|
|
color: var(--color-white);
|
|
border-color: var(--color-primary-main);
|
|
}
|
|
|
|
.todo-groups {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-5);
|
|
}
|
|
|
|
.todo-group {
|
|
border: 1px solid var(--color-gray-200);
|
|
border-radius: var(--radius-md);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.group-header {
|
|
padding: var(--spacing-3) var(--spacing-4);
|
|
background-color: var(--color-gray-50);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid var(--color-gray-200);
|
|
}
|
|
|
|
.assignee-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-2);
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--color-gray-900);
|
|
}
|
|
|
|
.todo-count {
|
|
background-color: var(--color-primary-main);
|
|
color: var(--color-white);
|
|
padding: 2px 8px;
|
|
border-radius: var(--radius-full);
|
|
font-size: var(--font-size-caption);
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
.group-todos {
|
|
padding: var(--spacing-2);
|
|
}
|
|
|
|
.todo-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-3);
|
|
padding: var(--spacing-3);
|
|
margin-bottom: var(--spacing-2);
|
|
border: 1px solid var(--color-gray-200);
|
|
border-radius: var(--radius-md);
|
|
transition: all var(--transition-fast);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.todo-card:hover {
|
|
box-shadow: var(--shadow-sm);
|
|
border-color: var(--color-primary-main);
|
|
}
|
|
|
|
.todo-main {
|
|
flex: 1;
|
|
}
|
|
|
|
.todo-title {
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--color-gray-900);
|
|
margin-bottom: var(--spacing-2);
|
|
}
|
|
|
|
.todo-progress {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-2);
|
|
}
|
|
|
|
.progress-bar {
|
|
flex: 1;
|
|
height: 6px;
|
|
background-color: var(--color-gray-200);
|
|
border-radius: var(--radius-full);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background-color: var(--color-primary-main);
|
|
transition: width var(--transition-base);
|
|
}
|
|
|
|
.progress-text {
|
|
font-size: var(--font-size-body-small);
|
|
color: var(--color-gray-600);
|
|
min-width: 40px;
|
|
text-align: right;
|
|
}
|
|
|
|
.todo-side {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
gap: var(--spacing-2);
|
|
}
|
|
|
|
.duedate {
|
|
font-size: var(--font-size-body-small);
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
.duedate.urgent { color: var(--color-error-main); }
|
|
.duedate.warning { color: var(--color-warning-main); }
|
|
.duedate.normal { color: var(--color-gray-600); }
|
|
|
|
/* 참고자료 섹션 */
|
|
.reference-tabs {
|
|
display: flex;
|
|
gap: var(--spacing-2);
|
|
margin-bottom: var(--spacing-4);
|
|
border-bottom: 1px solid var(--color-gray-200);
|
|
}
|
|
|
|
.ref-tab {
|
|
padding: var(--spacing-2) var(--spacing-3);
|
|
font-size: var(--font-size-body-small);
|
|
color: var(--color-gray-600);
|
|
cursor: pointer;
|
|
border-bottom: 2px solid transparent;
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.ref-tab:hover {
|
|
color: var(--color-primary-main);
|
|
}
|
|
|
|
.ref-tab.active {
|
|
color: var(--color-primary-main);
|
|
border-bottom-color: var(--color-primary-main);
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
.reference-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-3);
|
|
}
|
|
|
|
.reference-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--spacing-3);
|
|
padding: var(--spacing-3);
|
|
border: 1px solid var(--color-gray-200);
|
|
border-radius: var(--radius-md);
|
|
text-decoration: none;
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.reference-item:hover {
|
|
box-shadow: var(--shadow-sm);
|
|
border-color: var(--color-primary-main);
|
|
}
|
|
|
|
.ref-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
min-width: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: var(--color-gray-100);
|
|
border-radius: var(--radius-md);
|
|
font-size: 20px;
|
|
}
|
|
|
|
.ref-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.ref-title {
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--color-gray-900);
|
|
margin-bottom: var(--spacing-1);
|
|
}
|
|
|
|
.ref-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-3);
|
|
font-size: var(--font-size-body-small);
|
|
color: var(--color-gray-600);
|
|
margin-bottom: var(--spacing-2);
|
|
}
|
|
|
|
.ref-summary {
|
|
font-size: var(--font-size-body-small);
|
|
color: var(--color-gray-700);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.relevance-score {
|
|
padding: var(--spacing-1) var(--spacing-2);
|
|
background-color: rgba(0, 217, 177, 0.1);
|
|
color: var(--color-primary-main);
|
|
border-radius: var(--radius-sm);
|
|
font-size: var(--font-size-caption);
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
/* Empty State */
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: var(--spacing-8) var(--spacing-4);
|
|
color: var(--color-gray-500);
|
|
}
|
|
|
|
.empty-icon {
|
|
font-size: 48px;
|
|
margin-bottom: var(--spacing-3);
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 767px) {
|
|
.meeting-header {
|
|
padding: var(--spacing-4);
|
|
}
|
|
|
|
.dashboard-content {
|
|
padding: var(--spacing-4);
|
|
}
|
|
|
|
.dashboard-section {
|
|
padding: var(--spacing-4);
|
|
}
|
|
|
|
.meeting-title {
|
|
font-size: var(--font-size-h3);
|
|
}
|
|
|
|
.section-title {
|
|
font-size: var(--font-size-h4);
|
|
}
|
|
|
|
.meeting-stats {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.decision-meta {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: var(--spacing-2);
|
|
}
|
|
|
|
.todo-filters {
|
|
overflow-x: auto;
|
|
flex-wrap: nowrap;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Header -->
|
|
<header class="meeting-header">
|
|
<div class="header-content">
|
|
<a href="12-회의록목록.html" class="back-button">
|
|
← 회의록 목록
|
|
</a>
|
|
<h1 class="meeting-title">2024 Q4 마케팅 전략 회의</h1>
|
|
<div class="meeting-meta-row">
|
|
<div class="meeting-meta-item">
|
|
<span>📅</span>
|
|
<span>2024-01-15 14:00</span>
|
|
</div>
|
|
<div class="meeting-meta-item">
|
|
<span>📍</span>
|
|
<span>본사 대회의실</span>
|
|
</div>
|
|
<div class="meeting-meta-item">
|
|
<span>👥</span>
|
|
<span>참석자 5명</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Dashboard Content -->
|
|
<main class="dashboard-content">
|
|
<!-- 핵심내용 섹션 -->
|
|
<section class="dashboard-section">
|
|
<div class="section-header">
|
|
<h2 class="section-title">
|
|
<span class="section-icon">💡</span>
|
|
핵심내용
|
|
</h2>
|
|
</div>
|
|
<div class="key-points">
|
|
<div class="key-point-item">
|
|
<div class="key-point-number">1</div>
|
|
<div class="key-point-text">
|
|
Q4 마케팅 예산을 전년 대비 30% 증액하여 디지털 채널 확대에 집중하기로 결정
|
|
</div>
|
|
</div>
|
|
<div class="key-point-item">
|
|
<div class="key-point-number">2</div>
|
|
<div class="key-point-text">
|
|
신규 인플루언서 마케팅 캠페인을 2월부터 시작하며, 타겟 연령층을 20-30대로 설정
|
|
</div>
|
|
</div>
|
|
<div class="key-point-item">
|
|
<div class="key-point-number">3</div>
|
|
<div class="key-point-text">
|
|
경쟁사 분석 결과를 바탕으로 가격 정책 재조정 필요, 가격 탄력성 분석 선행 필요
|
|
</div>
|
|
</div>
|
|
<div class="key-point-item">
|
|
<div class="key-point-number">4</div>
|
|
<div class="key-point-text">
|
|
브랜드 리뉴얼 작업을 3월까지 완료하고, 4월에 대규모 리브랜딩 캠페인 론칭 계획
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="keywords">
|
|
<span class="keyword-tag">#디지털마케팅</span>
|
|
<span class="keyword-tag">#예산증액</span>
|
|
<span class="keyword-tag">#인플루언서</span>
|
|
<span class="keyword-tag">#가격정책</span>
|
|
<span class="keyword-tag">#브랜드리뉴얼</span>
|
|
</div>
|
|
|
|
<div class="meeting-stats">
|
|
<div class="stat-item">
|
|
<div class="stat-value">5명</div>
|
|
<div class="stat-label">참석자</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">90분</div>
|
|
<div class="stat-label">회의 시간</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">32회</div>
|
|
<div class="stat-label">발언 횟수</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">8개</div>
|
|
<div class="stat-label">주요 의제</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 결정사항 섹션 -->
|
|
<section class="dashboard-section">
|
|
<div class="section-header">
|
|
<h2 class="section-title">
|
|
<span class="section-icon">✅</span>
|
|
결정사항
|
|
</h2>
|
|
</div>
|
|
<div class="decisions-list">
|
|
<div class="decision-item">
|
|
<div class="decision-content">
|
|
Q4 마케팅 예산 30% 증액 승인 (총 3억 → 3.9억)
|
|
</div>
|
|
<div class="decision-meta">
|
|
<div class="decision-meta-item">
|
|
<span>👤</span>
|
|
<span>결정자: 김민준 (마케팅 본부장)</span>
|
|
</div>
|
|
<div class="decision-meta-item">
|
|
<span>🕐</span>
|
|
<span>14:25</span>
|
|
</div>
|
|
</div>
|
|
<div class="decision-background">
|
|
<strong>배경:</strong> 디지털 채널 성과가 예상을 상회하며, 경쟁사 대비 투자 비중이 낮아 시장 점유율 확대를 위해 예산 증액 필요
|
|
</div>
|
|
</div>
|
|
|
|
<div class="decision-item">
|
|
<div class="decision-content">
|
|
인플루언서 마케팅 캠페인 2월 1일 론칭 결정
|
|
</div>
|
|
<div class="decision-meta">
|
|
<div class="decision-meta-item">
|
|
<span>👤</span>
|
|
<span>결정자: 박서연 (디지털 마케팅 팀장)</span>
|
|
</div>
|
|
<div class="decision-meta-item">
|
|
<span>🕐</span>
|
|
<span>14:45</span>
|
|
</div>
|
|
</div>
|
|
<div class="decision-background">
|
|
<strong>배경:</strong> 인플루언서 마케팅의 ROI가 기존 채널 대비 2배 높으며, 타겟 고객층 도달률이 우수하여 조기 론칭 결정
|
|
</div>
|
|
</div>
|
|
|
|
<div class="decision-item">
|
|
<div class="decision-content">
|
|
브랜드 리뉴얼 프로젝트 3월 말 완료 목표 설정
|
|
</div>
|
|
<div class="decision-meta">
|
|
<div class="decision-meta-item">
|
|
<span>👤</span>
|
|
<span>결정자: 이준호 (브랜드 전략 팀장)</span>
|
|
</div>
|
|
<div class="decision-meta-item">
|
|
<span>🕐</span>
|
|
<span>15:20</span>
|
|
</div>
|
|
</div>
|
|
<div class="decision-background">
|
|
<strong>배경:</strong> 현재 브랜드 이미지가 타겟 고객층과 괴리가 있으며, 4월 리브랜딩 캠페인 론칭 일정에 맞추기 위해 3월 완료 필요
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Todo 진행상황 섹션 -->
|
|
<section class="dashboard-section">
|
|
<div class="section-header">
|
|
<h2 class="section-title">
|
|
<span class="section-icon">📋</span>
|
|
Todo 진행상황
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="todo-filters">
|
|
<button class="filter-button active">전체 (12)</button>
|
|
<button class="filter-button">시작 전 (3)</button>
|
|
<button class="filter-button">진행 중 (6)</button>
|
|
<button class="filter-button">완료 (3)</button>
|
|
</div>
|
|
|
|
<div class="todo-groups">
|
|
<!-- 담당자 그룹 1 -->
|
|
<div class="todo-group">
|
|
<div class="group-header">
|
|
<div class="assignee-info">
|
|
<span>👤</span>
|
|
<span>박서연 (디지털 마케팅 팀장)</span>
|
|
</div>
|
|
<div class="todo-count">4개</div>
|
|
</div>
|
|
<div class="group-todos">
|
|
<div class="todo-card">
|
|
<div class="todo-main">
|
|
<div class="todo-title">인플루언서 후보 리스트 작성 및 제안서 준비</div>
|
|
<div class="todo-progress">
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: 75%"></div>
|
|
</div>
|
|
<div class="progress-text">75%</div>
|
|
</div>
|
|
</div>
|
|
<div class="todo-side">
|
|
<div class="duedate normal">D-5</div>
|
|
<span class="badge badge-warning">높음</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="todo-card">
|
|
<div class="todo-main">
|
|
<div class="todo-title">디지털 채널별 예산 배분 계획 수립</div>
|
|
<div class="todo-progress">
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: 40%"></div>
|
|
</div>
|
|
<div class="progress-text">40%</div>
|
|
</div>
|
|
</div>
|
|
<div class="todo-side">
|
|
<div class="duedate warning">D-2</div>
|
|
<span class="badge badge-error">긴급</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="todo-card">
|
|
<div class="todo-main">
|
|
<div class="todo-title">SNS 채널 성과 분석 리포트 작성</div>
|
|
<div class="todo-progress">
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: 100%"></div>
|
|
</div>
|
|
<div class="progress-text">100%</div>
|
|
</div>
|
|
</div>
|
|
<div class="todo-side">
|
|
<span class="badge badge-success">완료</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="todo-card">
|
|
<div class="todo-main">
|
|
<div class="todo-title">인플루언서 마케팅 KPI 설정</div>
|
|
<div class="todo-progress">
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: 0%"></div>
|
|
</div>
|
|
<div class="progress-text">0%</div>
|
|
</div>
|
|
</div>
|
|
<div class="todo-side">
|
|
<div class="duedate normal">D-10</div>
|
|
<span class="badge badge-neutral">보통</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 담당자 그룹 2 -->
|
|
<div class="todo-group">
|
|
<div class="group-header">
|
|
<div class="assignee-info">
|
|
<span>👤</span>
|
|
<span>이준호 (브랜드 전략 팀장)</span>
|
|
</div>
|
|
<div class="todo-count">3개</div>
|
|
</div>
|
|
<div class="group-todos">
|
|
<div class="todo-card">
|
|
<div class="todo-main">
|
|
<div class="todo-title">브랜드 리뉴얼 디자인 시안 1차 검토</div>
|
|
<div class="todo-progress">
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: 60%"></div>
|
|
</div>
|
|
<div class="progress-text">60%</div>
|
|
</div>
|
|
</div>
|
|
<div class="todo-side">
|
|
<div class="duedate normal">D-7</div>
|
|
<span class="badge badge-warning">높음</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="todo-card">
|
|
<div class="todo-main">
|
|
<div class="todo-title">브랜드 가이드라인 문서 업데이트</div>
|
|
<div class="todo-progress">
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: 30%"></div>
|
|
</div>
|
|
<div class="progress-text">30%</div>
|
|
</div>
|
|
</div>
|
|
<div class="todo-side">
|
|
<div class="duedate normal">D-14</div>
|
|
<span class="badge badge-neutral">보통</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="todo-card">
|
|
<div class="todo-main">
|
|
<div class="todo-title">리브랜딩 캠페인 타임라인 수립</div>
|
|
<div class="todo-progress">
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: 0%"></div>
|
|
</div>
|
|
<div class="progress-text">0%</div>
|
|
</div>
|
|
</div>
|
|
<div class="todo-side">
|
|
<div class="duedate normal">D-20</div>
|
|
<span class="badge badge-neutral">보통</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 담당자 그룹 3 -->
|
|
<div class="todo-group">
|
|
<div class="group-header">
|
|
<div class="assignee-info">
|
|
<span>👤</span>
|
|
<span>최유진 (가격 전략 팀장)</span>
|
|
</div>
|
|
<div class="todo-count">2개</div>
|
|
</div>
|
|
<div class="group-todos">
|
|
<div class="todo-card">
|
|
<div class="todo-main">
|
|
<div class="todo-title">가격 탄력성 분석 보고서 작성</div>
|
|
<div class="todo-progress">
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: 50%"></div>
|
|
</div>
|
|
<div class="progress-text">50%</div>
|
|
</div>
|
|
</div>
|
|
<div class="todo-side">
|
|
<div class="duedate urgent">D-1</div>
|
|
<span class="badge badge-error">긴급</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="todo-card">
|
|
<div class="todo-main">
|
|
<div class="todo-title">경쟁사 가격 정책 비교 분석</div>
|
|
<div class="todo-progress">
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: 100%"></div>
|
|
</div>
|
|
<div class="progress-text">100%</div>
|
|
</div>
|
|
</div>
|
|
<div class="todo-side">
|
|
<span class="badge badge-success">완료</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 참고자료 섹션 -->
|
|
<section class="dashboard-section">
|
|
<div class="section-header">
|
|
<h2 class="section-title">
|
|
<span class="section-icon">📚</span>
|
|
참고자료
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="reference-tabs">
|
|
<div class="ref-tab active">관련 회의록 (3)</div>
|
|
<div class="ref-tab">프로젝트 문서 (5)</div>
|
|
<div class="ref-tab">이슈 트래커 (2)</div>
|
|
<div class="ref-tab">위키 페이지 (4)</div>
|
|
</div>
|
|
|
|
<div class="reference-list">
|
|
<a href="#" class="reference-item">
|
|
<div class="ref-icon">📄</div>
|
|
<div class="ref-content">
|
|
<div class="ref-title">2024 Q3 마케팅 전략 회의</div>
|
|
<div class="ref-meta">
|
|
<span>2023-12-20</span>
|
|
<span>•</span>
|
|
<span>김민준</span>
|
|
<span>•</span>
|
|
<span class="relevance-score">관련도 92%</span>
|
|
</div>
|
|
<div class="ref-summary">
|
|
이전 분기 마케팅 전략 회의로, 디지털 채널 투자 확대 방향성이 처음 논의되었으며, 예산 증액 근거 자료로 활용 가능
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="#" class="reference-item">
|
|
<div class="ref-icon">📄</div>
|
|
<div class="ref-content">
|
|
<div class="ref-title">인플루언서 마케팅 효과 분석 회의</div>
|
|
<div class="ref-meta">
|
|
<span>2024-01-05</span>
|
|
<span>•</span>
|
|
<span>박서연</span>
|
|
<span>•</span>
|
|
<span class="relevance-score">관련도 88%</span>
|
|
</div>
|
|
<div class="ref-summary">
|
|
인플루언서 마케팅 ROI 분석 결과를 다룬 회의로, 이번 캠페인 론칭 결정의 주요 근거 자료
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="#" class="reference-item">
|
|
<div class="ref-icon">📄</div>
|
|
<div class="ref-content">
|
|
<div class="ref-title">브랜드 리뉴얼 킥오프 회의</div>
|
|
<div class="ref-meta">
|
|
<span>2023-12-15</span>
|
|
<span>•</span>
|
|
<span>이준호</span>
|
|
<span>•</span>
|
|
<span class="relevance-score">관련도 85%</span>
|
|
</div>
|
|
<div class="ref-summary">
|
|
브랜드 리뉴얼 프로젝트 시작 회의로, 리뉴얼 방향성과 타임라인이 최초 설정되었으며 현재 진행 상황 추적 가능
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- JavaScript -->
|
|
<script src="common.js"></script>
|
|
<script>
|
|
const { AppState, Storage, Toast, navigateTo } = window.MeetingApp;
|
|
|
|
// 필터 버튼 이벤트
|
|
const filterButtons = document.querySelectorAll('.filter-button');
|
|
filterButtons.forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
filterButtons.forEach(btn => btn.classList.remove('active'));
|
|
button.classList.add('active');
|
|
// 필터링 로직 구현
|
|
Toast.info(`${button.textContent} 필터 적용`);
|
|
});
|
|
});
|
|
|
|
// 참고자료 탭 이벤트
|
|
const refTabs = document.querySelectorAll('.ref-tab');
|
|
refTabs.forEach(tab => {
|
|
tab.addEventListener('click', () => {
|
|
refTabs.forEach(t => t.classList.remove('active'));
|
|
tab.classList.add('active');
|
|
// 탭 전환 로직 구현
|
|
Toast.info(`${tab.textContent} 탭으로 전환`);
|
|
});
|
|
});
|
|
|
|
// Todo 카드 클릭 이벤트
|
|
const todoCards = document.querySelectorAll('.todo-card');
|
|
todoCards.forEach(card => {
|
|
card.addEventListener('click', () => {
|
|
navigateTo('09-Todo관리.html');
|
|
});
|
|
});
|
|
|
|
// 참고자료 클릭 이벤트
|
|
const refItems = document.querySelectorAll('.reference-item');
|
|
refItems.forEach(item => {
|
|
item.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
Toast.info('관련 문서로 이동합니다');
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|