shared-dg05-coffeeQuokka/hgzero
1
0
Fork 0
mirror of https://github.com/hwanny1128/HGZero.git synced 2025-12-06 14:56:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

회의록 관련 화면 및 스타일 개선

Browse Source 
- 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 2025-10-22 16:53:02 +09:00
parent 6faeaa0d61
commit 954a86e5da
3 changed files with 191 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
design/uiux/prototype/10-회의록상세조회.html
View File

@ -132,20 +132,24 @@
.participants-list { .participants-list {
display: flex; display: flex;
flex-wrap: wrap;
align-items: center; align-items: center;
gap: var(--space-md); gap: var(--space-sm) var(--space-md);
margin: var(--space-md) 0; margin: var(--space-md) 0;
} }
.participant { .participant {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-sm); gap: var(--space-xs);
min-width: 0;
flex-shrink: 0;
} }
.participant-name { .participant-name {
font-size: var(--font-small); font-size: var(--font-small);
color: var(--gray-700); color: var(--gray-700);
white-space: nowrap;
} }
.role-badge { .role-badge {
@ -154,6 +158,15 @@
background: var(--primary-light); background: var(--primary-light);
color: var(--primary); color: var(--primary);
border-radius: 4px; 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 { .tab-content.active {
display: block; 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> </style>
</head> </head>
<body> <body>
@ -546,7 +586,6 @@
<button class="icon-btn" onclick="navigateTo('02-대시보드.html')">←</button> <button class="icon-btn" onclick="navigateTo('02-대시보드.html')">←</button>
<h1 class="header-title">회의록 상세</h1> <h1 class="header-title">회의록 상세</h1>
</div> </div>
<button class="icon-btn">⋮</button>
</header> </header>
<!-- 탭 네비게이션 --> <!-- 탭 네비게이션 -->
@ -616,10 +655,7 @@
<!-- AI 요약 --> <!-- AI 요약 -->
<div class="ai-summary"> <div class="ai-summary">
<div class="ai-summary-header"> <div class="ai-summary-header">
<span class="ai-summary-label"> <span class="ai-summary-label">💡 AI 요약</span>
💡 AI 요약
</span>
<button class="btn btn-ghost btn-sm">편집</button>
</div> </div>
<p class="ai-summary-content"> <p class="ai-summary-content">
신제품은 AI 기반 회의록 자동화 서비스로 결정. 타겟은 중소기업 및 스타트업이며, 주요 기능은 음성인식, AI 요약, Todo 추출입니다. 경쟁사 대비 차별점은 실시간 검증 및 협업 기능입니다. 신제품은 AI 기반 회의록 자동화 서비스로 결정. 타겟은 중소기업 및 스타트업이며, 주요 기능은 음성인식, AI 요약, Todo 추출입니다. 경쟁사 대비 차별점은 실시간 검증 및 협업 기능입니다.
@ -656,7 +692,6 @@
<div class="reference-item" onclick="window.open('10-회의록상세조회.html', '_blank')"> <div class="reference-item" onclick="window.open('10-회의록상세조회.html', '_blank')">
<div class="reference-header"> <div class="reference-header">
<span class="reference-icon">📄</span>
<span class="reference-title">AI 기능 개선 회의</span> <span class="reference-title">AI 기능 개선 회의</span>
<span class="relevance-badge relevance-high">92%</span> <span class="relevance-badge relevance-high">92%</span>
</div> </div>
@ -668,7 +703,6 @@
<div class="reference-item" onclick="window.open('10-회의록상세조회.html', '_blank')"> <div class="reference-item" onclick="window.open('10-회의록상세조회.html', '_blank')">
<div class="reference-header"> <div class="reference-header">
<span class="reference-icon">📄</span>
<span class="reference-title">경쟁사 분석 회의</span> <span class="reference-title">경쟁사 분석 회의</span>
<span class="relevance-badge relevance-medium">78%</span> <span class="relevance-badge relevance-medium">78%</span>
</div> </div>
@ -680,7 +714,6 @@
<div class="reference-item" onclick="window.open('10-회의록상세조회.html', '_blank')"> <div class="reference-item" onclick="window.open('10-회의록상세조회.html', '_blank')">
<div class="reference-header"> <div class="reference-header">
<span class="reference-icon">📄</span>
<span class="reference-title">사용자 인터뷰 결과</span> <span class="reference-title">사용자 인터뷰 결과</span>
<span class="relevance-badge relevance-low">65%</span> <span class="relevance-badge relevance-low">65%</span>
</div> </div>
@ -704,7 +737,6 @@
<div class="ai-summary"> <div class="ai-summary">
<div class="ai-summary-header"> <div class="ai-summary-header">
<span class="ai-summary-label">💡 AI 요약</span> <span class="ai-summary-label">💡 AI 요약</span>
<button class="btn btn-ghost btn-sm">편집</button>
</div> </div>
<p class="ai-summary-content"> <p class="ai-summary-content">
개발 기간은 3개월로 설정. 백엔드 2명, 프론트 2명, AI 엔지니어 1명 투입. 주간 스프린트로 진행하며, 2주마다 베타 테스트 실시. 개발 기간은 3개월로 설정. 백엔드 2명, 프론트 2명, AI 엔지니어 1명 투입. 주간 스프린트로 진행하며, 2주마다 베타 테스트 실시.
@ -739,7 +771,6 @@
<div class="reference-item" onclick="window.open('10-회의록상세조회.html', '_blank')"> <div class="reference-item" onclick="window.open('10-회의록상세조회.html', '_blank')">
<div class="reference-header"> <div class="reference-header">
<span class="reference-icon">📄</span>
<span class="reference-title">개발 리소스 계획 회의</span> <span class="reference-title">개발 리소스 계획 회의</span>
<span class="relevance-badge relevance-high">88%</span> <span class="relevance-badge relevance-high">88%</span>
</div> </div>
@ -763,7 +794,6 @@
<div class="ai-summary"> <div class="ai-summary">
<div class="ai-summary-header"> <div class="ai-summary-header">
<span class="ai-summary-label">💡 AI 요약</span> <span class="ai-summary-label">💡 AI 요약</span>
<button class="btn btn-ghost btn-sm">편집</button>
</div> </div>
<p class="ai-summary-content"> <p class="ai-summary-content">
베타 출시 전 프리 런칭 캠페인 진행. 주요 채널은 LinkedIn 및 스타트업 커뮤니티. 초기 100팀 무료 제공 후 유료 전환 유도. 베타 출시 전 프리 런칭 캠페인 진행. 주요 채널은 LinkedIn 및 스타트업 커뮤니티. 초기 100팀 무료 제공 후 유료 전환 유도.
@ -888,6 +918,7 @@
<div class="todo-filters"> <div class="todo-filters">
<button class="filter-btn active">전체 (5)</button> <button class="filter-btn active">전체 (5)</button>
<button class="filter-btn">시작 전 (1)</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>
<button class="filter-btn">완료 (2)</button> <button class="filter-btn">완료 (2)</button>
</div> </div>

58
design/uiux/prototype/11-회의록수정.html
View File

@ -7,7 +7,7 @@
<link rel="stylesheet" href="common.css"> <link rel="stylesheet" href="common.css">
<style> <style>
/* 페이지별 커스텀 스타일만 유지 */ /* 페이지별 커스텀 스타일만 유지 */
/* 공통 스타일(헤더, 메인콘텐츠, 섹션, AI요약, 참고자료, 액션바)은 common.css 사용 */ /* 공통 스타일(헤더, 메인콘텐츠, 섹션, AI요약, 관련회의록, 액션바)은 common.css 사용 */
/* 저장 상태 표시 */ /* 저장 상태 표시 */
.save-indicator { .save-indicator {
@ -100,7 +100,7 @@
box-shadow: 0 0 0 3px rgba(77, 213, 167, 0.1); box-shadow: 0 0 0 3px rgba(77, 213, 167, 0.1);
} }
/* 참고자료 편집 */ /* 관련회의록 편집 */
.references-edit { .references-edit {
background: var(--gray-100); background: var(--gray-100);
border-radius: var(--radius-md); border-radius: var(--radius-md);
@ -122,7 +122,16 @@
/* reference-item, reference-content, reference-title, reference-meta는 common.css 사용 */ /* reference-item, reference-content, reference-title, reference-meta는 common.css 사용 */
/* 관련회의록 아이템 오버라이드 (삭제 버튼 배치를 위한 relative 위치) */
.reference-item {
position: relative;
padding-right: 40px; /* 삭제 버튼 공간 확보 */
}
.remove-btn { .remove-btn {
position: absolute;
top: 8px;
right: 8px;
background: transparent; background: transparent;
border: none; border: none;
color: var(--error); color: var(--error);
@ -130,10 +139,17 @@
cursor: pointer; cursor: pointer;
padding: var(--space-xs); padding: var(--space-xs);
transition: transform var(--transition-fast); transition: transform var(--transition-fast);
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
} }
.remove-btn:hover { .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); border: 1px solid var(--primary);
} }
/* 참고자료 검색 모달 */ /* 관련회의록 검색 모달 */
.search-modal-content { .search-modal-content {
max-height: 60vh; max-height: 60vh;
overflow-y: auto; overflow-y: auto;
@ -278,7 +294,7 @@
<textarea <textarea
class="ai-summary-textarea" class="ai-summary-textarea"
placeholder="AI 요약을 입력하거나 수정하세요" placeholder="AI 요약을 입력하거나 수정하세요"
oninput="markAsUnsaved()" readonly
>신제품은 AI 기반 회의록 자동화 서비스로 결정. 타겟은 중소기업 및 스타트업이며, 주요 기능은 음성인식, AI 요약, Todo 추출입니다. 경쟁사 대비 차별점은 실시간 검증 및 협업 기능입니다.</textarea> >신제품은 AI 기반 회의록 자동화 서비스로 결정. 타겟은 중소기업 및 스타트업이며, 주요 기능은 음성인식, AI 요약, Todo 추출입니다. 경쟁사 대비 차별점은 실시간 검증 및 협업 기능입니다.</textarea>
<div class="ai-summary-footer"> <div class="ai-summary-footer">
<span class="ai-summary-time">마지막 수정: 1시간 전</span> <span class="ai-summary-time">마지막 수정: 1시간 전</span>
@ -302,10 +318,10 @@
- 초기 목표 사용자: 100개 팀</textarea> - 초기 목표 사용자: 100개 팀</textarea>
</div> </div>
<!-- 참고자료 편집 --> <!-- 관련회의록 편집 -->
<div class="references-edit"> <div class="references-edit">
<div class="references-header"> <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> <button class="btn btn-primary btn-sm" onclick="openReferenceModal()">+ 추가</button>
</div> </div>
@ -362,7 +378,7 @@
<textarea <textarea
class="ai-summary-textarea" class="ai-summary-textarea"
placeholder="AI 요약을 입력하거나 수정하세요" placeholder="AI 요약을 입력하거나 수정하세요"
oninput="markAsUnsaved()" readonly
>개발 기간은 3개월로 설정. 백엔드 2명, 프론트 2명, AI 엔지니어 1명 투입. 주간 스프린트로 진행하며, 2주마다 베타 테스트 실시.</textarea> >개발 기간은 3개월로 설정. 백엔드 2명, 프론트 2명, AI 엔지니어 1명 투입. 주간 스프린트로 진행하며, 2주마다 베타 테스트 실시.</textarea>
<div class="ai-summary-footer"> <div class="ai-summary-footer">
<span class="ai-summary-time">생성: 2025-10-25 16:32</span> <span class="ai-summary-time">생성: 2025-10-25 16:32</span>
@ -387,7 +403,7 @@
<div class="references-edit"> <div class="references-edit">
<div class="references-header"> <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> <button class="btn btn-primary btn-sm" onclick="openReferenceModal()">+ 추가</button>
</div> </div>
@ -427,7 +443,7 @@
<textarea <textarea
class="ai-summary-textarea" class="ai-summary-textarea"
placeholder="AI 요약을 입력하거나 수정하세요" placeholder="AI 요약을 입력하거나 수정하세요"
oninput="markAsUnsaved()" readonly
>베타 출시 전 프리 런칭 캠페인 진행. 주요 채널은 LinkedIn 및 스타트업 커뮤니티. 초기 100팀 무료 제공 후 유료 전환 유도.</textarea> >베타 출시 전 프리 런칭 캠페인 진행. 주요 채널은 LinkedIn 및 스타트업 커뮤니티. 초기 100팀 무료 제공 후 유료 전환 유도.</textarea>
<div class="ai-summary-footer"> <div class="ai-summary-footer">
<span class="ai-summary-time">생성: 2025-10-25 16:35</span> <span class="ai-summary-time">생성: 2025-10-25 16:35</span>
@ -452,11 +468,11 @@
<div class="references-edit"> <div class="references-edit">
<div class="references-header"> <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> <button class="btn btn-primary btn-sm" onclick="openReferenceModal()">+ 추가</button>
</div> </div>
<div class="empty-state"> <div class="empty-state">
<p class="text-muted text-small">참고자료가 없습니다</p> <p class="text-muted text-small">관련회의록이 없습니다</p>
</div> </div>
</div> </div>
@ -477,11 +493,11 @@
<button class="btn btn-primary" onclick="saveChanges()">저장</button> <button class="btn btn-primary" onclick="saveChanges()">저장</button>
</div> </div>
<!-- 참고자료 검색 모달 --> <!-- 관련회의록 검색 모달 -->
<div class="modal-overlay" id="referenceModal"> <div class="modal-overlay" id="referenceModal">
<div class="modal"> <div class="modal">
<div class="modal-header"> <div class="modal-header">
<h3 class="modal-title">참고자료 추가</h3> <h3 class="modal-title">관련회의록 추가</h3>
<button class="modal-close" onclick="closeModal('referenceModal')">×</button> <button class="modal-close" onclick="closeModal('referenceModal')">×</button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
@ -590,23 +606,23 @@
showToast('검증 해제 승인을 요청했습니다', 'info'); showToast('검증 해제 승인을 요청했습니다', 'info');
} }
// 참고자료 제거 // 관련회의록 제거
function removeReference(btn) { function removeReference(btn) {
const item = btn.closest('.reference-item'); const item = btn.closest('.reference-item');
item.style.animation = 'fadeOut 0.3s ease'; item.style.animation = 'fadeOut 0.3s ease';
setTimeout(() => { setTimeout(() => {
item.remove(); item.remove();
markAsUnsaved(); markAsUnsaved();
showToast('참고자료가 제거되었습니다', 'success'); showToast('관련회의록이 제거되었습니다', 'success');
}, 300); }, 300);
} }
// 참고자료 모달 열기 // 관련회의록 모달 열기
function openReferenceModal() { function openReferenceModal() {
openModal('referenceModal'); openModal('referenceModal');
} }
// 참고자료 검색 // 관련회의록 검색
function searchReferences(query) { function searchReferences(query) {
console.log('검색:', query); console.log('검색:', query);
// 실제 구현 시 API 호출 // 실제 구현 시 API 호출
@ -617,15 +633,15 @@
item.classList.toggle('selected'); item.classList.toggle('selected');
} }
// 선택된 참고자료 추가 // 선택된 관련회의록 추가
function addSelectedReferences() { function addSelectedReferences() {
const selected = document.querySelectorAll('.search-result-item.selected'); const selected = document.querySelectorAll('.search-result-item.selected');
if (selected.length === 0) { if (selected.length === 0) {
showToast('참고자료를 선택해주세요', 'error'); showToast('관련회의록을 선택해주세요', 'error');
return; return;
} }
showToast(`${selected.length}개의 참고자료가 추가되었습니다`, 'success'); showToast(`${selected.length}개의 관련회의록이 추가되었습니다`, 'success');
markAsUnsaved(); markAsUnsaved();
closeModal('referenceModal'); closeModal('referenceModal');
} }

111
design/uiux/prototype/common.css
View File

@ -1311,6 +1311,17 @@ input[type="date"]::-webkit-calendar-picker-indicator {
box-shadow: 0 0 0 3px rgba(77, 213, 167, 0.1); 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. 참고자료/관련회의록 카드 25. 참고자료/관련회의록 카드
======================================== */ ======================================== */
@ -1321,7 +1332,6 @@ input[type="date"]::-webkit-calendar-picker-indicator {
padding: var(--space-sm); padding: var(--space-sm);
margin-bottom: var(--space-sm); margin-bottom: var(--space-sm);
display: flex; display: flex;
align-items: center;
gap: var(--space-sm); gap: var(--space-sm);
transition: background var(--transition-fast); transition: background var(--transition-fast);
} }
@ -1339,6 +1349,7 @@ input[type="date"]::-webkit-calendar-picker-indicator {
.reference-content, .reference-content,
.related-meeting-content { .related-meeting-content {
flex: 1; flex: 1;
min-width: 0;
} }
.reference-title, .reference-title,
@ -1347,6 +1358,9 @@ input[type="date"]::-webkit-calendar-picker-indicator {
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
color: var(--gray-900); color: var(--gray-900);
margin-bottom: var(--space-xs); margin-bottom: var(--space-xs);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.reference-meta, .reference-meta,
@ -1355,6 +1369,101 @@ input[type="date"]::-webkit-calendar-picker-indicator {
color: var(--gray-500); 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. 통계 그리드 26. 통계 그리드
======================================== */ ======================================== */