diff --git a/design/uiux/prototype/07-회의종료.html b/design/uiux/prototype/07-회의종료.html index 8490af7..02fce7d 100644 --- a/design/uiux/prototype/07-회의종료.html +++ b/design/uiux/prototype/07-회의종료.html @@ -113,13 +113,99 @@ transition: width 1s ease; } - /* Todo 리스트 */ - .todo-list-item { - padding: var(--space-md); + /* 안건 카드 */ + .agenda-card { background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); + margin-bottom: var(--space-md); + overflow: hidden; + border: 1px solid var(--gray-200); + } + + .agenda-header { + padding: var(--space-md); + cursor: pointer; + display: flex; + justify-content: space-between; + align-items: center; + background: var(--gray-50); + } + + .agenda-header:hover { + background: var(--gray-100); + } + + .agenda-title { + font-size: var(--font-h4); + font-weight: var(--font-weight-bold); + color: var(--gray-900); + margin-bottom: var(--space-xs); + } + + .ai-summary-short { + background: var(--gray-100); + border-left: 4px solid var(--primary); + padding: var(--space-sm) var(--space-md); + margin-top: var(--space-sm); + border-radius: var(--radius-sm); + font-size: var(--font-small); + color: var(--gray-700); + display: flex; + align-items: center; + gap: var(--space-sm); + } + + .ai-summary-short .lock-icon { + color: var(--gray-500); + font-size: 16px; + } + + .expand-icon { + font-size: 20px; + color: var(--gray-500); + transition: transform 0.3s ease; + } + + .agenda-card.expanded .expand-icon { + transform: rotate(180deg); + } + + .agenda-content { + display: none; + padding: var(--space-md); + border-top: 1px solid var(--gray-200); + } + + .agenda-card.expanded .agenda-content { + display: block; + } + + .agenda-section { + margin-bottom: var(--space-md); + } + + .agenda-section-title { + font-size: var(--font-small); + font-weight: var(--font-weight-bold); + color: var(--gray-500); + margin-bottom: var(--space-xs); + text-transform: uppercase; + } + + .agenda-section-content { + font-size: var(--font-body); + color: var(--gray-700); + line-height: 1.6; + } + + /* Todo 리스트 (읽기 전용) */ + .todo-list-item { + padding: var(--space-md); + background: var(--gray-50); + border-radius: var(--radius-md); margin-bottom: var(--space-sm); + opacity: 0.8; } .todo-header { @@ -129,10 +215,15 @@ margin-bottom: var(--space-sm); } + .todo-checkbox { + margin-right: var(--space-sm); + cursor: not-allowed; + } + .todo-content { flex: 1; font-weight: var(--font-weight-medium); - color: var(--gray-900); + color: var(--gray-700); } .todo-meta { @@ -143,83 +234,58 @@ color: var(--gray-500); } - /* 체크리스트 */ - .checklist { - background: var(--gray-100); + /* 하단 액션 바 - 3개 버튼 배치 */ + .action-bar { + position: fixed; + bottom: 0; + left: 0; + right: 0; + background: var(--white); padding: var(--space-md); - border-radius: var(--radius-md); - margin-bottom: var(--space-md); - } - - .checklist-item { + box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1); display: flex; - align-items: center; gap: var(--space-sm); - padding: var(--space-sm) 0; - color: var(--success); - font-size: var(--font-small); + z-index: 100; } - .checklist-item::before { - content: '✓'; - font-weight: var(--font-weight-bold); - } - - /* 하단 액션 바 - common.css에서 기본 스타일 적용됨 */ - /* 이 화면만 버튼 크기 비율 조정: 공유(1) : 수정(1) : 대시보드(4) */ - .action-bar .btn-secondary { + .action-bar .btn { flex: 1; } .action-bar .btn-primary { - flex: 4; + flex: 2; /* 바로 최종 확정 버튼 강조 */ } @media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } + + .action-bar { + position: static; + box-shadow: none; + justify-content: center; + gap: var(--space-md); + } + + .action-bar .btn { + flex: 0 1 200px; + } + + .action-bar .btn-primary { + flex: 0 1 250px; + } } - /* 날짜 입력 필드 래퍼 - 달력 아이콘 보호 */ - .date-input-wrapper { - position: relative; - } - - .date-input-wrapper input[type="date"] { - position: relative; - z-index: 1; - } - - /* 달력 아이콘을 별도 요소로 표시 */ - .date-input-wrapper::after { - content: '📅'; - position: absolute; - right: 12px; - top: 50%; - transform: translateY(-50%); - pointer-events: none; - font-size: 18px; - z-index: 3; - } - - /* 네이티브 달력 아이콘 숨김 */ - .date-input-wrapper input[type="date"]::-webkit-calendar-picker-indicator { - position: absolute; - right: 0; - width: 100%; - height: 100%; - opacity: 0; - cursor: pointer; - z-index: 2; - /* Edge 브라우저 캘린더 팝업에 그림자 추가 */ - filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2)); - } - - /* Edge 브라우저용 포커스 시 하단 테두리 강조 */ - .date-input-wrapper input[type="date"]:focus { - box-shadow: 0 0 0 3px rgba(77, 213, 167, 0.15), - 0 4px 0 0 var(--primary); + .readonly-notice { + background: var(--warning-light); + border: 1px solid var(--warning); + border-radius: var(--radius-md); + padding: var(--space-md); + margin-bottom: var(--space-lg); + font-size: var(--font-small); + color: var(--warning-dark); + text-align: center; } @@ -232,6 +298,11 @@

2025년 1분기 제품 기획 회의

+ +
+ 🔒 이 화면은 확인 전용입니다. 내용을 수정하려면 "회의록 수정" 버튼을 클릭하세요. +
+
@@ -243,8 +314,8 @@
참석자
-
0
-
섹션
+
0
+
안건
0
@@ -271,97 +342,128 @@
- +
-
-

AI가 추출한 Todo

- -
-
+

안건별 AI 요약

+
- -
-

최종 회의록 확정

-
-
회의 제목 작성
-
참석자 목록 작성
-
주요 논의 내용 작성
-
결정 사항 작성
-
- -
- - -
- -
-
- -