mirror of
https://github.com/hwanny1128/HGZero.git
synced 2025-12-06 16:06:23 +00:00
회의록 관련 화면 및 스타일 개선
- 10-회의록상세조회.html: 회의록 상세 조회 화면 개선 - 11-회의록수정.html: 회의록 수정 화면 개선 - common.css: 공통 스타일 개선 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
yabo0812
parent
6faeaa0d61
commit
954a86e5da
@ -132,20 +132,24 @@
|
||||
|
||||
.participants-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
gap: var(--space-sm) var(--space-md);
|
||||
margin: var(--space-md) 0;
|
||||
}
|
||||
|
||||
.participant {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
gap: var(--space-xs);
|
||||
min-width: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.participant-name {
|
||||
font-size: var(--font-small);
|
||||
color: var(--gray-700);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.role-badge {
|
||||
@ -154,6 +158,15 @@
|
||||
background: var(--primary-light);
|
||||
color: var(--primary);
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 모바일: 참여자 2명씩 배치 */
|
||||
@media (max-width: 600px) {
|
||||
.participant {
|
||||
width: calc(50% - var(--space-md) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
/* 회의록 섹션 */
|
||||
@ -537,6 +550,33 @@
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 모바일 화면에서 관련회의록 왼쪽 정렬 */
|
||||
@media (max-width: 600px) {
|
||||
.reference-item {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.reference-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-sm);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.reference-title {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.reference-meta {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.reference-summary {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -546,7 +586,6 @@
|
||||
<button class="icon-btn" onclick="navigateTo('02-대시보드.html')">←</button>
|
||||
<h1 class="header-title">회의록 상세</h1>
|
||||
</div>
|
||||
<button class="icon-btn">⋮</button>
|
||||
</header>
|
||||
|
||||
<!-- 탭 네비게이션 -->
|
||||
@ -616,10 +655,7 @@
|
||||
<!-- AI 요약 -->
|
||||
<div class="ai-summary">
|
||||
<div class="ai-summary-header">
|
||||
<span class="ai-summary-label">
|
||||
💡 AI 요약
|
||||
</span>
|
||||
<button class="btn btn-ghost btn-sm">편집</button>
|
||||
<span class="ai-summary-label">💡 AI 요약</span>
|
||||
</div>
|
||||
<p class="ai-summary-content">
|
||||
신제품은 AI 기반 회의록 자동화 서비스로 결정. 타겟은 중소기업 및 스타트업이며, 주요 기능은 음성인식, AI 요약, Todo 추출입니다. 경쟁사 대비 차별점은 실시간 검증 및 협업 기능입니다.
|
||||
@ -656,7 +692,6 @@
|
||||
|
||||
<div class="reference-item" onclick="window.open('10-회의록상세조회.html', '_blank')">
|
||||
<div class="reference-header">
|
||||
<span class="reference-icon">📄</span>
|
||||
<span class="reference-title">AI 기능 개선 회의</span>
|
||||
<span class="relevance-badge relevance-high">92%</span>
|
||||
</div>
|
||||
@ -668,7 +703,6 @@
|
||||
|
||||
<div class="reference-item" onclick="window.open('10-회의록상세조회.html', '_blank')">
|
||||
<div class="reference-header">
|
||||
<span class="reference-icon">📄</span>
|
||||
<span class="reference-title">경쟁사 분석 회의</span>
|
||||
<span class="relevance-badge relevance-medium">78%</span>
|
||||
</div>
|
||||
@ -680,7 +714,6 @@
|
||||
|
||||
<div class="reference-item" onclick="window.open('10-회의록상세조회.html', '_blank')">
|
||||
<div class="reference-header">
|
||||
<span class="reference-icon">📄</span>
|
||||
<span class="reference-title">사용자 인터뷰 결과</span>
|
||||
<span class="relevance-badge relevance-low">65%</span>
|
||||
</div>
|
||||
@ -704,7 +737,6 @@
|
||||
<div class="ai-summary">
|
||||
<div class="ai-summary-header">
|
||||
<span class="ai-summary-label">💡 AI 요약</span>
|
||||
<button class="btn btn-ghost btn-sm">편집</button>
|
||||
</div>
|
||||
<p class="ai-summary-content">
|
||||
개발 기간은 3개월로 설정. 백엔드 2명, 프론트 2명, AI 엔지니어 1명 투입. 주간 스프린트로 진행하며, 2주마다 베타 테스트 실시.
|
||||
@ -739,7 +771,6 @@
|
||||
|
||||
<div class="reference-item" onclick="window.open('10-회의록상세조회.html', '_blank')">
|
||||
<div class="reference-header">
|
||||
<span class="reference-icon">📄</span>
|
||||
<span class="reference-title">개발 리소스 계획 회의</span>
|
||||
<span class="relevance-badge relevance-high">88%</span>
|
||||
</div>
|
||||
@ -763,7 +794,6 @@
|
||||
<div class="ai-summary">
|
||||
<div class="ai-summary-header">
|
||||
<span class="ai-summary-label">💡 AI 요약</span>
|
||||
<button class="btn btn-ghost btn-sm">편집</button>
|
||||
</div>
|
||||
<p class="ai-summary-content">
|
||||
베타 출시 전 프리 런칭 캠페인 진행. 주요 채널은 LinkedIn 및 스타트업 커뮤니티. 초기 100팀 무료 제공 후 유료 전환 유도.
|
||||
@ -888,6 +918,7 @@
|
||||
<div class="todo-filters">
|
||||
<button class="filter-btn active">전체 (5)</button>
|
||||
<button class="filter-btn">시작 전 (1)</button>
|
||||
<button class="filter-btn">지연 (1)</button>
|
||||
<button class="filter-btn">진행 중 (2)</button>
|
||||
<button class="filter-btn">완료 (2)</button>
|
||||
</div>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<link rel="stylesheet" href="common.css">
|
||||
<style>
|
||||
/* 페이지별 커스텀 스타일만 유지 */
|
||||
/* 공통 스타일(헤더, 메인콘텐츠, 섹션, AI요약, 참고자료, 액션바)은 common.css 사용 */
|
||||
/* 공통 스타일(헤더, 메인콘텐츠, 섹션, AI요약, 관련회의록, 액션바)은 common.css 사용 */
|
||||
|
||||
/* 저장 상태 표시 */
|
||||
.save-indicator {
|
||||
@ -100,7 +100,7 @@
|
||||
box-shadow: 0 0 0 3px rgba(77, 213, 167, 0.1);
|
||||
}
|
||||
|
||||
/* 참고자료 편집 */
|
||||
/* 관련회의록 편집 */
|
||||
.references-edit {
|
||||
background: var(--gray-100);
|
||||
border-radius: var(--radius-md);
|
||||
@ -122,7 +122,16 @@
|
||||
|
||||
/* reference-item, reference-content, reference-title, reference-meta는 common.css 사용 */
|
||||
|
||||
/* 관련회의록 아이템 오버라이드 (삭제 버튼 배치를 위한 relative 위치) */
|
||||
.reference-item {
|
||||
position: relative;
|
||||
padding-right: 40px; /* 삭제 버튼 공간 확보 */
|
||||
}
|
||||
|
||||
.remove-btn {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--error);
|
||||
@ -130,10 +139,17 @@
|
||||
cursor: pointer;
|
||||
padding: var(--space-xs);
|
||||
transition: transform var(--transition-fast);
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.remove-btn:hover {
|
||||
transform: scale(1.2);
|
||||
transform: scale(1.1);
|
||||
background: rgba(255, 86, 86, 0.1);
|
||||
}
|
||||
|
||||
/* 검증 완료 */
|
||||
@ -152,7 +168,7 @@
|
||||
border: 1px solid var(--primary);
|
||||
}
|
||||
|
||||
/* 참고자료 검색 모달 */
|
||||
/* 관련회의록 검색 모달 */
|
||||
.search-modal-content {
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
@ -278,7 +294,7 @@
|
||||
<textarea
|
||||
class="ai-summary-textarea"
|
||||
placeholder="AI 요약을 입력하거나 수정하세요"
|
||||
oninput="markAsUnsaved()"
|
||||
readonly
|
||||
>신제품은 AI 기반 회의록 자동화 서비스로 결정. 타겟은 중소기업 및 스타트업이며, 주요 기능은 음성인식, AI 요약, Todo 추출입니다. 경쟁사 대비 차별점은 실시간 검증 및 협업 기능입니다.</textarea>
|
||||
<div class="ai-summary-footer">
|
||||
<span class="ai-summary-time">마지막 수정: 1시간 전</span>
|
||||
@ -302,10 +318,10 @@
|
||||
- 초기 목표 사용자: 100개 팀</textarea>
|
||||
</div>
|
||||
|
||||
<!-- 참고자료 편집 -->
|
||||
<!-- 관련회의록 편집 -->
|
||||
<div class="references-edit">
|
||||
<div class="references-header">
|
||||
<span class="references-label">📚 참고자료 (3개)</span>
|
||||
<span class="references-label">📚 관련회의록 (3개)</span>
|
||||
<button class="btn btn-primary btn-sm" onclick="openReferenceModal()">+ 추가</button>
|
||||
</div>
|
||||
|
||||
@ -362,7 +378,7 @@
|
||||
<textarea
|
||||
class="ai-summary-textarea"
|
||||
placeholder="AI 요약을 입력하거나 수정하세요"
|
||||
oninput="markAsUnsaved()"
|
||||
readonly
|
||||
>개발 기간은 3개월로 설정. 백엔드 2명, 프론트 2명, AI 엔지니어 1명 투입. 주간 스프린트로 진행하며, 2주마다 베타 테스트 실시.</textarea>
|
||||
<div class="ai-summary-footer">
|
||||
<span class="ai-summary-time">생성: 2025-10-25 16:32</span>
|
||||
@ -387,7 +403,7 @@
|
||||
|
||||
<div class="references-edit">
|
||||
<div class="references-header">
|
||||
<span class="references-label">📚 참고자료 (1개)</span>
|
||||
<span class="references-label">📚 관련회의록 (1개)</span>
|
||||
<button class="btn btn-primary btn-sm" onclick="openReferenceModal()">+ 추가</button>
|
||||
</div>
|
||||
|
||||
@ -427,7 +443,7 @@
|
||||
<textarea
|
||||
class="ai-summary-textarea"
|
||||
placeholder="AI 요약을 입력하거나 수정하세요"
|
||||
oninput="markAsUnsaved()"
|
||||
readonly
|
||||
>베타 출시 전 프리 런칭 캠페인 진행. 주요 채널은 LinkedIn 및 스타트업 커뮤니티. 초기 100팀 무료 제공 후 유료 전환 유도.</textarea>
|
||||
<div class="ai-summary-footer">
|
||||
<span class="ai-summary-time">생성: 2025-10-25 16:35</span>
|
||||
@ -452,11 +468,11 @@
|
||||
|
||||
<div class="references-edit">
|
||||
<div class="references-header">
|
||||
<span class="references-label">📚 참고자료 (0개)</span>
|
||||
<span class="references-label">📚 관련회의록 (0개)</span>
|
||||
<button class="btn btn-primary btn-sm" onclick="openReferenceModal()">+ 추가</button>
|
||||
</div>
|
||||
<div class="empty-state">
|
||||
<p class="text-muted text-small">참고자료가 없습니다</p>
|
||||
<p class="text-muted text-small">관련회의록이 없습니다</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -477,11 +493,11 @@
|
||||
<button class="btn btn-primary" onclick="saveChanges()">저장</button>
|
||||
</div>
|
||||
|
||||
<!-- 참고자료 검색 모달 -->
|
||||
<!-- 관련회의록 검색 모달 -->
|
||||
<div class="modal-overlay" id="referenceModal">
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title">참고자료 추가</h3>
|
||||
<h3 class="modal-title">관련회의록 추가</h3>
|
||||
<button class="modal-close" onclick="closeModal('referenceModal')">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@ -590,23 +606,23 @@
|
||||
showToast('검증 해제 승인을 요청했습니다', 'info');
|
||||
}
|
||||
|
||||
// 참고자료 제거
|
||||
// 관련회의록 제거
|
||||
function removeReference(btn) {
|
||||
const item = btn.closest('.reference-item');
|
||||
item.style.animation = 'fadeOut 0.3s ease';
|
||||
setTimeout(() => {
|
||||
item.remove();
|
||||
markAsUnsaved();
|
||||
showToast('참고자료가 제거되었습니다', 'success');
|
||||
showToast('관련회의록이 제거되었습니다', 'success');
|
||||
}, 300);
|
||||
}
|
||||
|
||||
// 참고자료 모달 열기
|
||||
// 관련회의록 모달 열기
|
||||
function openReferenceModal() {
|
||||
openModal('referenceModal');
|
||||
}
|
||||
|
||||
// 참고자료 검색
|
||||
// 관련회의록 검색
|
||||
function searchReferences(query) {
|
||||
console.log('검색:', query);
|
||||
// 실제 구현 시 API 호출
|
||||
@ -617,15 +633,15 @@
|
||||
item.classList.toggle('selected');
|
||||
}
|
||||
|
||||
// 선택된 참고자료 추가
|
||||
// 선택된 관련회의록 추가
|
||||
function addSelectedReferences() {
|
||||
const selected = document.querySelectorAll('.search-result-item.selected');
|
||||
if (selected.length === 0) {
|
||||
showToast('참고자료를 선택해주세요', 'error');
|
||||
showToast('관련회의록을 선택해주세요', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
showToast(`${selected.length}개의 참고자료가 추가되었습니다`, 'success');
|
||||
showToast(`${selected.length}개의 관련회의록이 추가되었습니다`, 'success');
|
||||
markAsUnsaved();
|
||||
closeModal('referenceModal');
|
||||
}
|
||||
|
||||
@ -1311,6 +1311,17 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
||||
box-shadow: 0 0 0 3px rgba(77, 213, 167, 0.1);
|
||||
}
|
||||
|
||||
.ai-summary-textarea[readonly] {
|
||||
background: var(--gray-50);
|
||||
border-color: var(--gray-300);
|
||||
color: var(--gray-700);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.ai-summary-textarea[readonly]:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
25. 참고자료/관련회의록 카드
|
||||
======================================== */
|
||||
@ -1321,7 +1332,6 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
||||
padding: var(--space-sm);
|
||||
margin-bottom: var(--space-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
transition: background var(--transition-fast);
|
||||
}
|
||||
@ -1339,6 +1349,7 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
||||
.reference-content,
|
||||
.related-meeting-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.reference-title,
|
||||
@ -1347,6 +1358,9 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--gray-900);
|
||||
margin-bottom: var(--space-xs);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.reference-meta,
|
||||
@ -1355,6 +1369,101 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
||||
color: var(--gray-500);
|
||||
}
|
||||
|
||||
/* 관련회의록 카드 헤더 */
|
||||
.reference-header,
|
||||
.related-meeting-header {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
.reference-icon,
|
||||
.related-meeting-icon {
|
||||
font-size: 16px;
|
||||
color: var(--primary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.reference-summary,
|
||||
.related-meeting-summary {
|
||||
font-size: var(--font-caption);
|
||||
color: var(--gray-700);
|
||||
line-height: 1.4;
|
||||
margin-top: var(--space-xs);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 관련회의록 테이블 형식 (모바일) - 제목/일시/내용 각각 별도 row */
|
||||
@media (max-width: 600px) {
|
||||
.reference-item,
|
||||
.related-meeting-item {
|
||||
padding: var(--space-md);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.reference-header,
|
||||
.related-meeting-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-sm);
|
||||
margin-bottom: 0;
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.reference-icon,
|
||||
.related-meeting-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.relevance-badge {
|
||||
order: 1;
|
||||
margin: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.reference-title,
|
||||
.related-meeting-title {
|
||||
order: 2;
|
||||
font-size: var(--font-body);
|
||||
font-weight: var(--font-weight-bold);
|
||||
margin-bottom: 0;
|
||||
white-space: normal;
|
||||
overflow: visible;
|
||||
text-overflow: unset;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.reference-meta,
|
||||
.related-meeting-meta {
|
||||
display: block;
|
||||
font-size: var(--font-caption);
|
||||
color: var(--gray-600);
|
||||
order: 2;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.reference-summary,
|
||||
.related-meeting-summary {
|
||||
margin-top: 0;
|
||||
font-size: var(--font-small);
|
||||
color: var(--gray-700);
|
||||
display: block;
|
||||
-webkit-line-clamp: unset;
|
||||
-webkit-box-orient: unset;
|
||||
order: 3;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
26. 통계 그리드
|
||||
======================================== */
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user