shared-dg05-coffeeQuokka/hgzero
1
0
Fork 0
mirror of https://github.com/hwanny1128/HGZero.git synced 2026-06-12 22:59:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

회의록 상세조회 및 수정 화면 UI 개선

Browse Source 
- Todo 진행상황 → Todo 리스트 명칭 통일
- Todo 리스트 카드 스타일 개선 (플랫 디자인)
- 관련회의록 카드 클릭 피드백 추가 (hover/active)
- 대시보드 섹션 폰트 사이즈 일관성 확보 (제목 16px, 메타 14px)
- 관련회의록 카드 테두리 및 그림자 스타일 강화

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
yabo0812
2025-10-27 16:43:46 +09:00
parent a66a3e4b31
commit b15f0c7da0
4 changed files with 354 additions and 551 deletions
Download Patch File Download Diff File Expand all files Collapse all files
design/uiux/prototype/10-회의록상세조회.html
+329 -89
View File
@@ -107,11 +107,41 @@
margin-bottom: var(--space-md);
}
/* 회의 제목 컨테이너 */
.meeting-title-container {
display: flex;
flex-direction: column;
gap: var(--space-sm);
margin-bottom: var(--space-md);
}
/* 배지 영역 (배지 + 크라운) */
.meeting-badges {
display: flex;
align-items: center;
gap: var(--space-xs);
}
/* 회의 제목 */
.meeting-basic-info h2 {
font-size: var(--font-h2);
font-weight: var(--font-weight-bold);
color: var(--gray-900);
margin-bottom: var(--space-sm);
margin: 0;
line-height: 1.3;
}
/* 데스크톱: 기존 가로 배치 유지 */
@media (min-width: 768px) {
.meeting-title-container {
flex-direction: row;
align-items: center;
gap: var(--space-sm);
}
.meeting-basic-info h2 {
margin: 0;
}
}
.info-row {
@@ -165,23 +195,6 @@
.participant {
width: calc(50% - var(--space-md) / 2);
}
/* 통계 그리드: 모바일에서도 4열 유지, gap만 축소 */
.stats-grid {
gap: var(--space-xs);
}
.stat-item {
padding: var(--space-sm);
}
.stat-value {
font-size: var(--font-base);
}
.stat-label {
font-size: var(--font-xs);
}
}
/* 회의록 섹션 */
@@ -279,22 +292,6 @@
margin-bottom: var(--space-md);
}
.reference-item {
background: var(--white);
border-radius: var(--radius-md);
padding: var(--space-sm);
margin-bottom: var(--space-sm);
cursor: pointer;
transition: all var(--transition-fast);
}
.reference-item:hover {
box-shadow: var(--shadow-sm);
}
.reference-item:last-child {
margin-bottom: 0;
}
.reference-header {
display: flex;
@@ -310,7 +307,7 @@
.reference-title {
flex: 1;
font-size: var(--font-small);
font-size: var(--font-body);
font-weight: var(--font-weight-medium);
color: var(--gray-900);
}
@@ -338,7 +335,7 @@
}
.reference-meta {
font-size: var(--font-caption);
font-size: var(--font-small);
color: var(--gray-500);
margin-bottom: var(--space-xs);
}
@@ -405,10 +402,11 @@
color: var(--white);
}
/* 통계 그리드 - 모바일 기본 (2x2) */
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-md);
grid-template-columns: repeat(2, 1fr);
gap: var(--space-sm);
margin-top: var(--space-md);
}
@@ -431,6 +429,14 @@
color: var(--gray-500);
}
/* 데스크톱: 1x4 그리드 */
@media (min-width: 768px) {
.stats-grid {
grid-template-columns: repeat(4, 1fr);
gap: var(--space-md);
}
}
/* 결정사항 카드 */
.decision-card {
background: var(--white);
@@ -462,7 +468,7 @@
border-top: 1px solid var(--gray-300);
}
/* Todo 진행상황 */
/* Todo 리스트 */
.todo-filters {
display: flex;
gap: var(--space-sm);
@@ -523,7 +529,64 @@
margin-bottom: var(--space-xs);
}
/* Todo 진행상황 - 09-Todo관리 스타일 적용 */
/* Todo 리스트 - 단순 조회 스타일 */
.simple-todo-list {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.simple-todo-item {
position: relative;
padding: var(--space-md);
background: var(--white);
border-radius: var(--radius-md);
border: 1px solid var(--gray-300);
}
.simple-todo-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--space-sm);
margin-bottom: var(--space-xs);
}
.simple-todo-title {
flex: 1;
font-size: var(--font-body);
font-weight: var(--font-weight-medium);
color: var(--gray-900);
min-width: 0;
}
.simple-todo-edit-btn {
background: transparent;
border: none;
font-size: 20px;
cursor: pointer;
padding: 4px;
color: var(--gray-500);
transition: all var(--transition-fast);
flex-shrink: 0;
border-radius: 4px;
}
.simple-todo-edit-btn:hover {
color: var(--primary);
background: var(--primary-light);
transform: scale(1.1);
}
.simple-todo-meta {
font-size: var(--font-small);
color: var(--gray-600);
display: flex;
gap: var(--space-md);
align-items: center;
}
/* Todo 리스트 - 09-Todo관리 스타일 적용 */
.todo-filters {
display: flex;
gap: var(--space-sm);
@@ -688,6 +751,24 @@
display: block;
}
/* 대시보드 탭의 관련회의록 카드 스타일 강화 */
.card .reference-item {
border: 1px solid var(--gray-200) !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
margin-bottom: var(--space-sm) !important;
}
.card .reference-item:hover {
border-color: var(--primary) !important;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12) !important;
transform: translateY(-1px) !important;
}
.card .reference-item:active {
transform: translateY(0) !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}
/* 모바일 화면에서 관련회의록 왼쪽 정렬 */
@media (max-width: 600px) {
.reference-item {
@@ -738,10 +819,14 @@
<!-- 기본 정보 카드 -->
<div class="info-card">
<div class="meeting-basic-info">
<div id="meeting-title-container" style="display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm);">
<span class="badge badge-complete">확정완료</span>
<!-- 생성자일 경우 👑 아이콘이 JavaScript로 추가됨 -->
<h2 style="margin: 0;">2025년 1분기 제품 기획 회의</h2>
<div class="meeting-title-container">
<!-- 배지 + 크라운 영역 -->
<div class="meeting-badges" id="meeting-badges">
<span class="badge badge-complete">확정완료</span>
<!-- 생성자일 경우 👑 아이콘이 JavaScript로 추가됨 -->
</div>
<!-- 회의 제목 -->
<h2>2025년 1분기 제품 기획 회의</h2>
</div>
<div class="info-row">
<span class="info-icon">📅</span>
@@ -757,7 +842,7 @@
<div class="participant">
<div class="avatar avatar-green">김</div>
<span class="participant-name">김민준</span>
<span class="role-badge">작성자</span>
<span class="role-badge">생성자</span>
</div>
<div class="participant">
<div class="avatar avatar-blue">박</div>
@@ -1044,60 +1129,65 @@
<!-- Todo 단순 조회 (MVP 스코프 축소 v1.5.1) -->
<div class="card mb-lg">
<h3 class="card-title">📋 Todo 진행상황</h3>
<h3 class="card-title">📋 Todo 리스트</h3>
<p style="font-size: var(--font-small); color: var(--gray-600); margin-bottom: var(--space-md);">
Todo 항목은 조회만 가능합니다. 제목, 담당자, 마감일 정보만 표시됩니다.
</p>
<!-- Todo 단순 조회 리스트 (제목 + 담당자 + 마감일만 표시) -->
<div style="display: flex; flex-direction: column; gap: var(--space-sm);">
<div style="padding: var(--space-md); background: var(--gray-50); border-radius: var(--radius-md); border: 1px solid var(--gray-200);">
<div style="font-weight: var(--font-weight-medium); color: var(--gray-900); margin-bottom: var(--space-xs);">
데이터베이스 스키마 설계
<!-- Todo 단순 조회 리스트 (제목 + 담당자 + 마감일 + 수정 버튼) -->
<div class="simple-todo-list">
<div class="simple-todo-item">
<div class="simple-todo-header">
<div class="simple-todo-title">데이터베이스 스키마 설계</div>
<button class="simple-todo-edit-btn" onclick="editTodo(1)" title="수정">✏️</button>
</div>
<div style="font-size: var(--font-small); color: var(--gray-600);">
<div class="simple-todo-meta">
<span>👤 이준호</span>
<span style="margin-left: var(--space-md);">📅 2025-10-20</span>
<span>📅 2025-10-20</span>
</div>
</div>
<div style="padding: var(--space-md); background: var(--gray-50); border-radius: var(--radius-md); border: 1px solid var(--gray-200);">
<div style="font-weight: var(--font-weight-medium); color: var(--gray-900); margin-bottom: var(--space-xs);">
API 명세서 작성
<div class="simple-todo-item">
<div class="simple-todo-header">
<div class="simple-todo-title">API 명세서 작성</div>
<button class="simple-todo-edit-btn" onclick="editTodo(2)" title="수정">✏️</button>
</div>
<div style="font-size: var(--font-small); color: var(--gray-600);">
<div class="simple-todo-meta">
<span>👤 이준호</span>
<span style="margin-left: var(--space-md);">📅 2025-10-23</span>
<span>📅 2025-10-23</span>
</div>
</div>
<div style="padding: var(--space-md); background: var(--gray-50); border-radius: var(--radius-md); border: 1px solid var(--gray-200);">
<div style="font-weight: var(--font-weight-medium); color: var(--gray-900); margin-bottom: var(--space-xs);">
예산 편성안 검토
<div class="simple-todo-item">
<div class="simple-todo-header">
<div class="simple-todo-title">예산 편성안 검토</div>
<button class="simple-todo-edit-btn" onclick="editTodo(3)" title="수정">✏️</button>
</div>
<div style="font-size: var(--font-small); color: var(--gray-600);">
<div class="simple-todo-meta">
<span>👤 김민준</span>
<span style="margin-left: var(--space-md);">📅 2025-10-22</span>
<span>📅 2025-10-22</span>
</div>
</div>
<div style="padding: var(--space-md); background: var(--gray-50); border-radius: var(--radius-md); border: 1px solid var(--gray-200);">
<div style="font-weight: var(--font-weight-medium); color: var(--gray-900); margin-bottom: var(--space-xs);">
UI 프로토타입 디자인
<div class="simple-todo-item">
<div class="simple-todo-header">
<div class="simple-todo-title">UI 프로토타입 디자인</div>
<button class="simple-todo-edit-btn" onclick="editTodo(4)" title="수정">✏️</button>
</div>
<div style="font-size: var(--font-small); color: var(--gray-600);">
<div class="simple-todo-meta">
<span>👤 최유진</span>
<span style="margin-left: var(--space-md);">📅 2025-10-28</span>
<span>📅 2025-10-28</span>
</div>
</div>
<div style="padding: var(--space-md); background: var(--gray-50); border-radius: var(--radius-md); border: 1px solid var(--gray-200);">
<div style="font-weight: var(--font-weight-medium); color: var(--gray-900); margin-bottom: var(--space-xs);">
사용자 피드백 분석
<div class="simple-todo-item">
<div class="simple-todo-header">
<div class="simple-todo-title">사용자 피드백 분석</div>
<button class="simple-todo-edit-btn" onclick="editTodo(5)" title="수정">✏️</button>
</div>
<div style="font-size: var(--font-small); color: var(--gray-600);">
<div class="simple-todo-meta">
<span>👤 김민준</span>
<span style="margin-left: var(--space-md);">📅 2025-10-19</span>
<span>📅 2025-10-19</span>
</div>
</div>
</div>
@@ -1113,7 +1203,7 @@
<span class="reference-title">AI 기능 개선 회의</span>
<span class="relevance-badge relevance-high">92%</span>
</div>
<div class="reference-meta">2025-10-23 15:00 · 이준호</div>
<div class="reference-meta">이준호 · 2025-10-23 15:00</div>
<div class="reference-summary">
AI 요약 정확도 개선 방안 논의. BERT 모델 도입 및 학습 데이터 확보 계획 수립.
</div>
@@ -1125,7 +1215,7 @@
<span class="reference-title">개발 리소스 계획 회의</span>
<span class="relevance-badge relevance-medium">88%</span>
</div>
<div class="reference-meta">2025-10-22 11:00 · 김민준</div>
<div class="reference-meta">김민준 · 2025-10-22 11:00</div>
<div class="reference-summary">
Q4 개발 리소스 현황 및 배분 계획. 신규 프로젝트 우선순위 협의.
</div>
@@ -1137,7 +1227,7 @@
<span class="reference-title">경쟁사 분석 회의</span>
<span class="relevance-badge relevance-medium">78%</span>
</div>
<div class="reference-meta">2025-10-20 10:00 · 박서연</div>
<div class="reference-meta">박서연 · 2025-10-20 10:00</div>
<div class="reference-summary">
경쟁사 A, B, C 분석 결과. 우리의 차별점은 실시간 협업 및 검증 기능.
</div>
@@ -1151,6 +1241,33 @@
<button class="btn btn-secondary" onclick="navigateTo('11-회의록수정.html')">수정</button>
</div>
<!-- Todo 추가 모달 -->
<div class="modal-overlay" id="addTodoModal">
<div class="modal">
<div class="modal-header">
<h3 class="modal-title">Todo 추가</h3>
<button class="modal-close">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label class="form-label">Todo 내용</label>
<input type="text" class="form-control" placeholder="할 일을 입력하세요">
</div>
<div class="form-group">
<label class="form-label">마감일</label>
<div class="date-input-wrapper">
<input type="date" class="form-control">
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-ghost" onclick="closeModal('addTodoModal')">취소</button>
<button class="btn btn-primary" onclick="addTodo()">추가</button>
</div>
</div>
</div>
<!-- Todo 편집 모달 -->
<div class="modal-overlay" id="editTodoModal">
<div class="modal">
@@ -1159,6 +1276,7 @@
<button class="modal-close" onclick="closeModal('editTodoModal')">×</button>
</div>
<div class="modal-body">
<input type="hidden" id="editTodoId">
<div class="form-group">
<label class="form-label">Todo 제목 <span class="text-error">*</span></label>
<input type="text" id="editTodoTitle" class="form-control" placeholder="할 일을 입력하세요">
@@ -1181,14 +1299,6 @@
</div>
<p class="form-hint">📅 마감일 변경 시 캘린더가 자동 업데이트됩니다</p>
</div>
<div class="form-group">
<label class="form-label">우선순위 <span class="text-error">*</span></label>
<select id="editTodoPriority" class="form-control">
<option value="high">높음</option>
<option value="medium">보통</option>
<option value="low">낮음</option>
</select>
</div>
<!-- 권한 안내 (동적 메시지) -->
<div class="alert alert-info" id="editTodoPermissionInfo">
<span class="material-icons" style="font-size: 20px;">info</span>
@@ -1612,6 +1722,136 @@
if (filterCompletedCount) filterCompletedCount.textContent = completed;
}
/**
* 회의 생성자 여부 확인
* @param {string} meetingId - 회의 ID
* @param {string} userName - 사용자 이름
* @returns {boolean} 회의 생성자 여부
*/
function checkIfUserIsCreator(meetingId, userName) {
// 실제로는 서버 API를 호출하여 확인
// 프로토타입에서는 샘플 데이터로 시뮬레이션
const meetingCreators = {
'meeting-001': '김민준',
'meeting-002': '이서연',
'meeting-003': '박준호'
};
return meetingCreators[meetingId] === userName;
}
/**
* Todo 수정 함수 (index 기반)
* @param {number} index - Todo 인덱스 (1-based)
*/
function editTodo(index) {
// 1-based index를 0-based로 변환
const todo = meetingTodos[index - 1];
if (!todo) {
showToast('Todo를 찾을 수 없습니다', 'error');
return;
}
// 모달에 데이터 채우기
document.getElementById('editTodoId').value = index;
document.getElementById('editTodoTitle').value = todo.title;
// 담당자 처리 (assignee가 객체인 경우 name 속성 사용)
const assigneeName = typeof todo.assignee === 'object' ? todo.assignee.name : todo.assignee;
document.getElementById('editTodoAssignee').value = assigneeName;
document.getElementById('editTodoDueDate').value = todo.dueDate;
// 회의 생성자 여부 확인
const currentUser = '김민준'; // 현재 로그인 사용자
const isCreator = checkIfUserIsCreator(CURRENT_MEETING_ID, currentUser);
// 담당자 필드 표시 여부 결정
const assigneeGroup = document.getElementById('editTodoAssigneeGroup');
const permissionText = document.getElementById('editTodoPermissionText');
if (isCreator) {
// 회의 생성자: 담당자 변경 가능
assigneeGroup.style.display = 'block';
permissionText.textContent = '회의 생성자로서 모든 항목을 수정할 수 있습니다.';
} else {
// 일반 담당자: 담당자 변경 불가
assigneeGroup.style.display = 'none';
permissionText.textContent = '본인에게 할당된 Todo만 수정할 수 있습니다. 담당자는 변경할 수 없습니다.';
}
// 모달 열기
openModal('editTodoModal');
}
/**
* Todo 수정 저장 (index 기반)
*/
function saveTodoEdit() {
const index = parseInt(document.getElementById('editTodoId').value);
const title = document.getElementById('editTodoTitle').value.trim();
const assignee = document.getElementById('editTodoAssignee').value.trim();
const dueDate = document.getElementById('editTodoDueDate').value;
if (!title) {
showToast('제목을 입력해주세요', 'error');
return;
}
if (!assignee) {
showToast('담당자를 입력해주세요', 'error');
return;
}
if (!dueDate) {
showToast('마감일을 선택해주세요', 'error');
return;
}
// 1-based index를 0-based로 변환하여 Todo 업데이트
const todoIndex = index - 1;
if (todoIndex >= 0 && todoIndex < meetingTodos.length) {
const todo = meetingTodos[todoIndex];
const oldAssignee = typeof todo.assignee === 'object' ? todo.assignee.name : todo.assignee;
const oldDueDate = todo.dueDate;
// Todo 업데이트 (실제로는 API 호출)
todo.title = title;
// assignee가 객체인 경우 name 속성만 업데이트
if (typeof todo.assignee === 'object') {
todo.assignee.name = assignee;
} else {
todo.assignee = assignee;
}
todo.dueDate = dueDate;
showToast('Todo가 수정되었습니다', 'success');
// 담당자 변경 시 알림
if (oldAssignee !== assignee) {
setTimeout(() => {
showToast(`${oldAssignee}와 ${assignee}에게 알림이 전송되었습니다`, 'info');
}, 1000);
}
// 마감일 변경 시 알림
if (oldDueDate !== dueDate) {
setTimeout(() => {
showToast('캘린더가 업데이트되었습니다', 'info');
}, oldAssignee !== assignee ? 2000 : 1000);
}
}
closeModal('editTodoModal');
// 페이지 새로고침 (실제로는 해당 Todo 항목만 업데이트)
setTimeout(() => {
location.reload();
}, 1500);
}
/**
* 페이지 초기화
*/
@@ -1621,13 +1861,13 @@
const isCreator = checkIfUserIsCreator(CURRENT_MEETING_ID, currentUser);
if (isCreator) {
const titleContainer = document.getElementById('meeting-title-container');
const badge = titleContainer.querySelector('.badge');
const badgesContainer = document.getElementById('meeting-badges');
const crownIcon = document.createElement('span');
crownIcon.textContent = '👑';
crownIcon.style.fontSize = '24px';
// badge 다음에 👑 삽입
badge.insertAdjacentElement('afterend', crownIcon);
crownIcon.style.fontSize = '20px';
crownIcon.title = '회의 생성자';
// 배지 영역에 크라운 추가
badgesContainer.appendChild(crownIcon);
}
updateTodoProgress();
design/uiux/prototype/11-회의록수정.html
+11 -3
View File
@@ -174,6 +174,14 @@
.reference-item {
position: relative;
padding-right: 40px; /* 삭제 버튼 공간 확보 */
cursor: default; /* 카드 전체는 클릭 불가 */
}
/* 수정 페이지에서는 카드 hover 효과 제거 (삭제 버튼만 클릭 가능) */
.reference-item:hover {
transform: none;
border-color: var(--gray-200);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.remove-btn {
@@ -399,7 +407,7 @@
<div class="ai-summary-edit">
<div class="ai-summary-header">
<span class="ai-summary-label">💡 AI 요약</span>
<button class="btn-primary btn-sm" onclick="regenerateSummary(1)">AI 재생성</button>
<button class="btn btn-primary btn-sm" onclick="regenerateSummary(1)">AI 재생성</button>
</div>
<textarea
class="ai-summary-textarea"
@@ -492,7 +500,7 @@
<div class="ai-summary-edit">
<div class="ai-summary-header">
<span class="ai-summary-label">💡 AI 요약</span>
<button class="btn-primary btn-sm" onclick="regenerateSummary(2)">AI 재생성</button>
<button class="btn btn-primary btn-sm" onclick="regenerateSummary(2)">AI 재생성</button>
</div>
<textarea
class="ai-summary-textarea"
@@ -569,7 +577,7 @@
<div class="ai-summary-edit">
<div class="ai-summary-header">
<span class="ai-summary-label">💡 AI 요약</span>
<button class="btn-primary btn-sm" onclick="regenerateSummary(3)">AI 재생성</button>
<button class="btn btn-primary btn-sm" onclick="regenerateSummary(3)">AI 재생성</button>
</div>
<textarea
class="ai-summary-textarea"
design/uiux/prototype/common.css
+14 -5
View File
@@ -1429,11 +1429,12 @@ input[type="date"]::-webkit-calendar-picker-indicator {
.related-meeting-item {
background: var(--white);
border-radius: var(--radius-md);
padding: var(--space-sm);
padding: var(--space-md);
margin-bottom: var(--space-sm);
display: flex;
gap: var(--space-sm);
transition: background var(--transition-fast);
cursor: pointer;
transition: all var(--transition-fast);
border: 1px solid var(--gray-200);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.reference-item:last-child,
@@ -1443,7 +1444,15 @@ input[type="date"]::-webkit-calendar-picker-indicator {
.reference-item:hover,
.related-meeting-item:hover {
background: var(--gray-100);
border-color: var(--primary);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
transform: translateY(-1px);
}
.reference-item:active,
.related-meeting-item:active {
transform: translateY(0);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.reference-content,