mirror of
https://github.com/hwanny1128/HGZero.git
synced 2025-12-06 12:36:23 +00:00
공유하기 기능 제거 및 문서 업데이트
- .gitignore 업데이트 - 대시보드 프로토타입 수정 - 회의록공유 프로토타입 삭제 - UI/UX 설계서 업데이트 - 공유하기 제거 검토 보고서 추가 - 유저스토리 업데이트 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
yabo0812
parent
9794926651
commit
4d8878aad3
5
.gitignore
vendored
5
.gitignore
vendored
@ -4,4 +4,7 @@
|
||||
.env
|
||||
design/uiux/ref_img/
|
||||
reference/sampleimg/
|
||||
settings.local.json
|
||||
*copy.html
|
||||
design/*copy.md
|
||||
design/*/*copy.md
|
||||
.claude/settings.local.json
|
||||
|
||||
@ -137,11 +137,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* 헤더 */
|
||||
/* 헤더 - 개선안 A: 간결한 인사 + 실질적 정보 */
|
||||
.header {
|
||||
background: var(--white);
|
||||
border-bottom: 1px solid var(--gray-300);
|
||||
padding: var(--space-lg) var(--space-md);
|
||||
padding: var(--space-md) var(--space-md);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@ -150,16 +150,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: var(--font-h2);
|
||||
.header-greeting {
|
||||
font-size: var(--font-h3);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--gray-900);
|
||||
margin-bottom: var(--space-xs);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.header-subtitle {
|
||||
font-size: var(--font-small);
|
||||
color: var(--gray-500);
|
||||
.header-info {
|
||||
font-size: var(--font-body);
|
||||
color: var(--gray-600);
|
||||
}
|
||||
|
||||
/* 메인 콘텐츠 */
|
||||
@ -176,36 +179,67 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* 통계 카드 */
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: var(--space-md);
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
/* 통계 카드 - 개선안 A: 컴팩트 수평 배치 */
|
||||
.stats-compact {
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-lg);
|
||||
padding: var(--space-md);
|
||||
margin-bottom: var(--space-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
font-size: 32px;
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
.stats-compact-title {
|
||||
font-size: var(--font-small);
|
||||
color: var(--gray-500);
|
||||
margin-bottom: var(--space-xs);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--gray-700);
|
||||
margin-bottom: var(--space-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: var(--font-h2);
|
||||
.stats-compact-items {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.stats-compact-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
font-size: var(--font-small);
|
||||
color: var(--gray-600);
|
||||
}
|
||||
|
||||
.stats-compact-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.stats-compact-value {
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--gray-900);
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.stats-compact {
|
||||
padding: var(--space-lg);
|
||||
}
|
||||
|
||||
.stats-compact-items {
|
||||
justify-content: flex-start;
|
||||
gap: var(--space-xl);
|
||||
}
|
||||
|
||||
.stats-compact-item {
|
||||
font-size: var(--font-body);
|
||||
}
|
||||
|
||||
.stats-compact-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 섹션 헤더 */
|
||||
@ -528,28 +562,30 @@
|
||||
|
||||
<!-- 메인 콘텐츠 -->
|
||||
<main class="main-content">
|
||||
<!-- 헤더 -->
|
||||
<!-- 헤더 - 개선안 A: 간결한 인사 + 실질적 정보 -->
|
||||
<header class="header">
|
||||
<h1 class="header-title">안녕하세요, 김민준님!</h1>
|
||||
<p class="header-subtitle">오늘의 일정을 확인하세요</p>
|
||||
<h1 class="header-greeting">
|
||||
안녕하세요 👋
|
||||
</h1>
|
||||
<p class="header-info" id="header-meeting-info">오늘 <strong id="header-meeting-count">2</strong>건의 회의가 예정되어 있어요</p>
|
||||
</header>
|
||||
|
||||
<!-- 통계 -->
|
||||
<section class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">📅</div>
|
||||
<div class="stat-label">예정된 회의</div>
|
||||
<div class="stat-value" id="stat-scheduled">3</div>
|
||||
<!-- 통계 - 개선안 A: 컴팩트 수평 배치 -->
|
||||
<section class="stats-compact">
|
||||
<div class="stats-compact-title">📊 오늘의 현황</div>
|
||||
<div class="stats-compact-items">
|
||||
<div class="stats-compact-item">
|
||||
<span class="stats-compact-icon">📅</span>
|
||||
<span>예정 <span class="stats-compact-value" id="stat-scheduled">2</span></span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">✅</div>
|
||||
<div class="stat-label">진행 중 Todo</div>
|
||||
<div class="stat-value" id="stat-todos">1</div>
|
||||
<div class="stats-compact-item">
|
||||
<span class="stats-compact-icon">✅</span>
|
||||
<span>진행 <span class="stats-compact-value" id="stat-todos">1</span></span>
|
||||
</div>
|
||||
<div class="stats-compact-item">
|
||||
<span class="stats-compact-icon">📈</span>
|
||||
<span>완료 <span class="stats-compact-value" id="stat-completion">0%</span></span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">📈</div>
|
||||
<div class="stat-label">Todo 완료율</div>
|
||||
<div class="stat-value" id="stat-completion">33%</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -585,17 +621,6 @@
|
||||
<!-- 동적 생성 -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 공유받은 회의록 -->
|
||||
<section>
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">공유받은 회의록</h2>
|
||||
<a href="12-회의록목록조회.html" class="section-link">전체 보기 →</a>
|
||||
</div>
|
||||
<div class="minutes-list" id="shared-minutes">
|
||||
<!-- 동적 생성 -->
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- 하단 네비게이션 (모바일) -->
|
||||
@ -813,7 +838,7 @@
|
||||
}
|
||||
|
||||
/**
|
||||
* 통계 업데이트
|
||||
* 통계 업데이트 - 개선안 A: 헤더 정보 포함
|
||||
*/
|
||||
function updateStats() {
|
||||
const scheduled = SAMPLE_MEETINGS.filter(m => m.status === 'scheduled' || m.status === 'ongoing').length;
|
||||
@ -822,6 +847,15 @@
|
||||
const completedTodos = SAMPLE_TODOS.filter(t => t.assignee.id === currentUser.id && t.status === 'completed').length;
|
||||
const completion = totalTodos > 0 ? Math.round((completedTodos / totalTodos) * 100) : 0;
|
||||
|
||||
// 헤더 정보 업데이트
|
||||
$('#header-meeting-count').textContent = scheduled;
|
||||
if (scheduled === 0) {
|
||||
$('#header-meeting-info').innerHTML = '예정된 회의가 없습니다';
|
||||
} else {
|
||||
$('#header-meeting-info').innerHTML = `오늘 <strong>${scheduled}</strong>건의 회의가 예정되어 있어요`;
|
||||
}
|
||||
|
||||
// 통계 카드 업데이트
|
||||
$('#stat-scheduled').textContent = scheduled;
|
||||
$('#stat-todos').textContent = todos;
|
||||
$('#stat-completion').textContent = completion + '%';
|
||||
|
||||
@ -1,491 +0,0 @@
|
||||
<!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 배경 흰색으로 변경 */
|
||||
body {
|
||||
background: var(--white);
|
||||
}
|
||||
|
||||
/* 헤더 - 회의록 수정화면과 통일 */
|
||||
.header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 64px;
|
||||
background: var(--white);
|
||||
border-bottom: 1px solid var(--gray-300);
|
||||
box-shadow: var(--shadow-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 var(--space-md);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: 24px;
|
||||
color: var(--gray-700);
|
||||
cursor: pointer;
|
||||
padding: var(--space-sm);
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.icon-btn:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: var(--font-h3);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--gray-900);
|
||||
}
|
||||
|
||||
/* 메인 콘텐츠 */
|
||||
.main-content {
|
||||
margin-top: 64px;
|
||||
padding: var(--space-md);
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.main-content {
|
||||
max-width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-bottom: var(--space-lg);
|
||||
}
|
||||
}
|
||||
|
||||
/* 섹션 타이틀 */
|
||||
.section-title {
|
||||
font-size: var(--font-h3);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--gray-900);
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
/* 라디오 버튼 그룹 */
|
||||
.radio-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.radio-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--space-md);
|
||||
border: 2px solid var(--gray-300);
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.radio-option:hover {
|
||||
border-color: var(--primary-light);
|
||||
background: var(--primary-light);
|
||||
}
|
||||
|
||||
.radio-option.selected {
|
||||
border-color: var(--primary);
|
||||
background: var(--primary-light);
|
||||
}
|
||||
|
||||
.radio-option input[type="radio"] {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
accent-color: var(--primary);
|
||||
}
|
||||
|
||||
.radio-option label {
|
||||
flex: 1;
|
||||
cursor: pointer;
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
/* 참석자 체크리스트 */
|
||||
.participant-list {
|
||||
display: none;
|
||||
margin-top: var(--space-md);
|
||||
padding: var(--space-md);
|
||||
background: var(--gray-100);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.participant-list.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.participant-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
padding: var(--space-sm) 0;
|
||||
}
|
||||
|
||||
/* 토글 스위치 */
|
||||
.toggle-group {
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.toggle-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: var(--space-md);
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-sm);
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
.toggle-label {
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--gray-900);
|
||||
}
|
||||
|
||||
.toggle-switch {
|
||||
position: relative;
|
||||
width: 48px;
|
||||
height: 24px;
|
||||
background: var(--gray-300);
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-normal);
|
||||
}
|
||||
|
||||
.toggle-switch.active {
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
.toggle-switch::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: var(--white);
|
||||
border-radius: 50%;
|
||||
transition: transform var(--transition-normal);
|
||||
}
|
||||
|
||||
.toggle-switch.active::after {
|
||||
transform: translateX(24px);
|
||||
}
|
||||
|
||||
/* 옵션 콘텐츠 */
|
||||
.toggle-content {
|
||||
display: none;
|
||||
margin-top: var(--space-md);
|
||||
padding: var(--space-md);
|
||||
background: var(--gray-100);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.toggle-content.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 공유 이력 */
|
||||
.history-list {
|
||||
margin-top: var(--space-md);
|
||||
}
|
||||
|
||||
.history-item {
|
||||
padding: var(--space-md);
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-sm);
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
.history-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
.history-date {
|
||||
font-size: var(--font-small);
|
||||
color: var(--gray-500);
|
||||
}
|
||||
|
||||
.history-info {
|
||||
font-size: var(--font-small);
|
||||
color: var(--gray-700);
|
||||
}
|
||||
|
||||
/* 하단 버튼 - 회의록 수정화면과 통일 */
|
||||
.bottom-buttons {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: var(--space-md);
|
||||
background: var(--white);
|
||||
border-top: 1px solid var(--gray-300);
|
||||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bottom-buttons {
|
||||
position: static;
|
||||
margin-top: var(--space-lg);
|
||||
border-top: none;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header -->
|
||||
<header class="header">
|
||||
<div class="header-left">
|
||||
<button class="icon-btn" onclick="history.back()">←</button>
|
||||
<h1 class="header-title">회의록 공유</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="main-content">
|
||||
<!-- 공유 대상 -->
|
||||
<section class="mb-lg">
|
||||
<h3 class="section-title">공유 대상</h3>
|
||||
<div class="radio-group">
|
||||
<div class="radio-option selected" id="shareAllOption" onclick="selectShareTarget('all')">
|
||||
<input type="radio" name="shareTarget" id="shareAll" checked>
|
||||
<label for="shareAll">참석자 전체</label>
|
||||
</div>
|
||||
<div class="radio-option" id="shareSelectedOption" onclick="selectShareTarget('selected')">
|
||||
<input type="radio" name="shareTarget" id="shareSelected">
|
||||
<label for="shareSelected">특정 참석자 선택</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="participant-list" id="participantList">
|
||||
<div id="participantCheckList"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 공유 권한 -->
|
||||
<section class="mb-lg">
|
||||
<h3 class="section-title">공유 권한</h3>
|
||||
<div class="form-group">
|
||||
<select class="form-control" id="sharePermission">
|
||||
<option value="readonly" selected>읽기 전용</option>
|
||||
<option value="comment">댓글 가능</option>
|
||||
<option value="edit">편집 가능</option>
|
||||
</select>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 공유 방식 -->
|
||||
<section class="mb-lg">
|
||||
<h3 class="section-title">공유 방식</h3>
|
||||
<div class="checkbox-wrapper mb-md">
|
||||
<input type="checkbox" class="checkbox" id="emailShare" checked>
|
||||
<label for="emailShare">이메일 발송</label>
|
||||
</div>
|
||||
<button class="btn btn-secondary" style="width: 100%;" onclick="copyShareLink()">
|
||||
🔗 링크 복사
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<!-- 링크 보안 설정 -->
|
||||
<section class="mb-lg">
|
||||
<h3 class="section-title">링크 보안 설정 (선택)</h3>
|
||||
|
||||
<div class="toggle-group">
|
||||
<div class="toggle-item">
|
||||
<span class="toggle-label">유효기간 설정</span>
|
||||
<div class="toggle-switch" id="expiryToggle" onclick="toggleOption('expiry')"></div>
|
||||
</div>
|
||||
<div class="toggle-content" id="expiryContent">
|
||||
<select class="form-control">
|
||||
<option value="7">7일</option>
|
||||
<option value="30" selected>30일</option>
|
||||
<option value="90">90일</option>
|
||||
<option value="0">무제한</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="toggle-item">
|
||||
<span class="toggle-label">비밀번호 설정</span>
|
||||
<div class="toggle-switch" id="passwordToggle" onclick="toggleOption('password')"></div>
|
||||
</div>
|
||||
<div class="toggle-content" id="passwordContent">
|
||||
<input type="password" class="form-control" placeholder="비밀번호 입력">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 공유 이력 -->
|
||||
<section>
|
||||
<h3 class="section-title">공유 이력</h3>
|
||||
<div class="history-list" id="shareHistory"></div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- 하단 버튼 -->
|
||||
<div class="bottom-buttons">
|
||||
<button class="btn btn-primary" style="flex: 1;" onclick="shareMinutes()">
|
||||
공유하기
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<script src="common.js"></script>
|
||||
<script>
|
||||
// 페이지 초기화
|
||||
function initPage() {
|
||||
renderParticipantList();
|
||||
renderShareHistory();
|
||||
}
|
||||
|
||||
// 공유 대상 선택
|
||||
function selectShareTarget(target) {
|
||||
const allOption = $('#shareAllOption');
|
||||
const selectedOption = $('#shareSelectedOption');
|
||||
const participantList = $('#participantList');
|
||||
|
||||
if (target === 'all') {
|
||||
allOption.classList.add('selected');
|
||||
selectedOption.classList.remove('selected');
|
||||
$('#shareAll').checked = true;
|
||||
participantList.classList.remove('show');
|
||||
} else {
|
||||
allOption.classList.remove('selected');
|
||||
selectedOption.classList.add('selected');
|
||||
$('#shareSelected').checked = true;
|
||||
participantList.classList.add('show');
|
||||
}
|
||||
}
|
||||
|
||||
// 참석자 체크리스트 렌더링
|
||||
function renderParticipantList() {
|
||||
const participants = SAMPLE_MEETINGS[0].participants;
|
||||
const container = $('#participantCheckList');
|
||||
|
||||
participants.forEach(participant => {
|
||||
const item = createElement('div', { className: 'participant-item' }, `
|
||||
<input type="checkbox" class="checkbox" id="participant-${participant.id}" value="${participant.id}" checked>
|
||||
${createAvatar(participant, 'sm')}
|
||||
<label for="participant-${participant.id}">${participant.name}</label>
|
||||
`);
|
||||
container.appendChild(item);
|
||||
});
|
||||
}
|
||||
|
||||
// 토글 옵션
|
||||
function toggleOption(option) {
|
||||
const toggle = $(`#${option}Toggle`);
|
||||
const content = $(`#${option}Content`);
|
||||
|
||||
toggle.classList.toggle('active');
|
||||
content.classList.toggle('show');
|
||||
}
|
||||
|
||||
// 링크 복사
|
||||
function copyShareLink() {
|
||||
const link = `https://meeting.example.com/share/meeting-001-${Date.now()}`;
|
||||
|
||||
// 클립보드 복사 (실제 구현)
|
||||
if (navigator.clipboard) {
|
||||
navigator.clipboard.writeText(link).then(() => {
|
||||
showToast('링크가 복사되었습니다', 'success');
|
||||
});
|
||||
} else {
|
||||
// Fallback
|
||||
showToast('링크가 복사되었습니다', 'success');
|
||||
}
|
||||
}
|
||||
|
||||
// 공유 이력 렌더링
|
||||
function renderShareHistory() {
|
||||
const history = [
|
||||
{ date: '2025-10-20 14:30', targets: '참석자 전체', permission: '읽기 전용' },
|
||||
{ date: '2025-10-19 16:45', targets: '박서연, 이준호', permission: '편집 가능' }
|
||||
];
|
||||
|
||||
const container = $('#shareHistory');
|
||||
|
||||
if (history.length === 0) {
|
||||
container.innerHTML = '<div class="empty-state"><p>공유 이력이 없습니다</p></div>';
|
||||
return;
|
||||
}
|
||||
|
||||
history.forEach(item => {
|
||||
const historyItem = createElement('div', { className: 'history-item' }, `
|
||||
<div class="history-header">
|
||||
<span class="history-date">${item.date}</span>
|
||||
${createBadge(item.permission, 'draft')}
|
||||
</div>
|
||||
<div class="history-info">
|
||||
<strong>대상:</strong> ${item.targets}
|
||||
</div>
|
||||
`);
|
||||
container.appendChild(historyItem);
|
||||
});
|
||||
}
|
||||
|
||||
// 회의록 공유
|
||||
function shareMinutes() {
|
||||
const emailShare = $('#emailShare').checked;
|
||||
const permission = $('#sharePermission').value;
|
||||
const shareAll = $('#shareAll').checked;
|
||||
|
||||
// 특정 참석자 선택 시 검증
|
||||
if (!shareAll) {
|
||||
const selectedParticipants = Array.from($$('#participantCheckList input[type="checkbox"]:checked'));
|
||||
if (selectedParticipants.length === 0) {
|
||||
showToast('공유할 참석자를 선택해주세요', 'error');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 로딩 시뮬레이션
|
||||
const btn = event.target;
|
||||
const originalText = btn.textContent;
|
||||
btn.textContent = '공유 중...';
|
||||
btn.disabled = true;
|
||||
|
||||
setTimeout(() => {
|
||||
btn.textContent = originalText;
|
||||
btn.disabled = false;
|
||||
showToast('회의록이 공유되었습니다', 'success');
|
||||
|
||||
// 캘린더 등록 제안
|
||||
setTimeout(() => {
|
||||
if (confirm('다음 회의 일정을 캘린더에 등록하시겠습니까?')) {
|
||||
showToast('캘린더에 등록되었습니다', 'success');
|
||||
}
|
||||
navigateTo('01-대시보드.html');
|
||||
}, 1500);
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// 페이지 로드 시 초기화
|
||||
initPage();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -85,11 +85,10 @@
|
||||
| 05 | 회의진행 | UFR-MEET-030, UFR-STT-010/020, UFR-AI-010, UFR-COLLAB-010 | 높음 | 실시간 회의 진행 및 회의록 작성 | X | X | |
|
||||
| 06 | 검증완료 | UFR-COLLAB-030 | 중간 | 섹션별 검증 | X | X | |
|
||||
| 07 | 회의종료 | UFR-MEET-040, UFR-MEET-050 | 높음 | 회의 통계 및 최종 확정 | X | X | |
|
||||
| 08 | 회의록공유 | UFR-MEET-060 | 높음 | 공유 설정 | X | O | |
|
||||
| 09 | Todo관리 | UFR-TODO-010, UFR-TODO-030 | 높음 | Todo 목록 및 진행 관리 | O | X | |
|
||||
| 10 | 회의록상세조회 | UFR-MEET-045 | 중간 | 회의록 상세 보기 | X | O | |
|
||||
| 11 | 회의록수정 | UFR-MEET-055 | 중간 | 지난 회의록 수정 | X | O | |
|
||||
| 12 | 회의록목록조회 | UFR-MEET-030, UFR-MEET-045 | 높음 | 회의록 목록 필터링/정렬/검색 | O | X | |
|
||||
| 08 | Todo관리 | UFR-TODO-010, UFR-TODO-030 | 높음 | Todo 목록 및 진행 관리 | O | X | |
|
||||
| 09 | 회의록상세조회 | UFR-MEET-045 | 중간 | 회의록 상세 보기 | X | O | |
|
||||
| 10 | 회의록수정 | UFR-MEET-055 | 중간 | 지난 회의록 수정 | X | O | |
|
||||
| 11 | 회의록목록조회 | UFR-MEET-030, UFR-MEET-045 | 높음 | 회의록 목록 필터링/정렬/검색 | O | X | |
|
||||
|
||||
---
|
||||
|
||||
@ -100,7 +99,7 @@
|
||||
#### 시나리오 1: 새 회의 진행 (Full Flow)
|
||||
```
|
||||
로그인 → 대시보드 → 회의예약 → 템플릿선택 → 회의진행
|
||||
→ 검증완료 → 회의종료 → 회의록공유 → 대시보드
|
||||
→ 검증완료 → 회의종료 → 대시보드
|
||||
```
|
||||
|
||||
#### 시나리오 2: 지난 회의록 조회 및 수정
|
||||
@ -129,8 +128,7 @@ graph TD
|
||||
E --> F{검증 완료?}
|
||||
F -->|Yes| G[회의종료]
|
||||
F -->|No| E
|
||||
G --> H[회의록공유]
|
||||
H --> B
|
||||
G --> B
|
||||
|
||||
B --> I[회의록상세조회]
|
||||
I --> J{수정 필요?}
|
||||
@ -222,21 +220,26 @@ graph TD
|
||||
- 진행중 회의 (참여 가능한 회의)
|
||||
3. **내 Todo 우선순위별 표시** (지연중 → 진행중 → 미진행 → 완료, 최대 5개)
|
||||
4. **내 회의록** (참여자/생성자로 등록된 최근 3개, 상태 포함)
|
||||
5. **공유받은 회의록** (최근 공유받은 순 3개)
|
||||
6. 전역 검색
|
||||
5. 전역 검색
|
||||
|
||||
#### UI 구성요소
|
||||
|
||||
**Mobile (320px~768px)**
|
||||
- **헤더** (상단)
|
||||
- "안녕하세요, {사용자명}님!" (H2, Bold)
|
||||
- 부제: "오늘의 일정을 확인하세요" (Body-sm, 회색)
|
||||
- **헤더** (상단) - **개선안 A 적용 (v1.5)**
|
||||
- "안녕하세요 👋" (H3, Bold)
|
||||
- 부제: "오늘 {N}건의 회의가 예정되어 있어요" (Body, 회색)
|
||||
- N = 예정된 회의 개수 (동적 업데이트)
|
||||
- 예정된 회의가 없을 경우: "예정된 회의가 없습니다"
|
||||
|
||||
- **메인 콘텐츠** (스크롤, padding-bottom: 80px, background: gray-50)
|
||||
- **통계 카드 그리드** (3개 카드)
|
||||
- "예정된 회의": 개수 표시 (아이콘: 📅)
|
||||
- "진행 중 Todo": 개수 표시 (아이콘: ✅)
|
||||
- "Todo 완료율": 퍼센트 표시 (아이콘: 📈)
|
||||
- **통계 카드 컴팩트 배치** (단일 카드) - **개선안 A 적용 (v1.5)**
|
||||
- 제목: "📊 오늘의 현황" (H5, Semibold)
|
||||
- 수평 배치 (flex, space-around):
|
||||
- "📅 예정 {N}" (Icon + Label + Value)
|
||||
- "✅진행 {N}" (Icon + Label + Value)
|
||||
- "📈 완료 {N}%" (Icon + Label + Value)
|
||||
- 높이: ~80px (기존 대비 70% 감소)
|
||||
- 반응형: 태블릿 이상에서 justify-content: flex-start, gap 증가
|
||||
|
||||
- **최근 회의** 섹션
|
||||
- 헤더: "예정된 회의" (H4) + "전체 보기 →" 링크
|
||||
@ -301,18 +304,6 @@ graph TD
|
||||
- 클릭 시: 회의록 상세 화면으로 이동
|
||||
- 빈 상태: "작성한 회의록이 없습니다. 첫 회의를 시작해보세요!"
|
||||
|
||||
- **공유받은 회의록** 카드 (개선)
|
||||
- 헤더: "공유받은 회의록" (H4) + "전체 보기 →" 링크 (회의록 목록 화면으로 이동)
|
||||
- **최근 공유받은 회의록 리스트** (최대 3개):
|
||||
- 정렬: 최근 공유받은 순
|
||||
- 각 항목:
|
||||
- 회의 제목 (H5)
|
||||
- 공유자 정보 (아바타 + 이름)
|
||||
- 공유 일시 (상대 시간)
|
||||
- 상태 배지
|
||||
- 클릭 시: 회의록 상세 화면으로 이동 (읽기 전용)
|
||||
- 빈 상태: "공유받은 회의록이 없습니다"
|
||||
|
||||
**Mobile (320px~768px)**
|
||||
- **하단 네비게이션**: [Mobile 하단 네비게이션](#mobile-하단-네비게이션-320px768px) 참조 (홈 활성)
|
||||
|
||||
@ -339,11 +330,7 @@ graph TD
|
||||
|
||||
- **내 회의록 리스트**
|
||||
- 화이트 카드 배경
|
||||
- 전체보기 → 12-회의록목록조회.html
|
||||
|
||||
- **공유받은 회의록 리스트**
|
||||
- 화이트 카드 배경
|
||||
- 전체보기 → 12-회의록목록조회.html
|
||||
- 전체보기 → 11-회의록목록조회.html
|
||||
|
||||
- **하단 네비게이션**: 숨김 (데스크톱에서는 사이드바 사용)
|
||||
|
||||
@ -433,12 +420,6 @@ graph TD
|
||||
- 정렬: 생성일시 (최근 순)
|
||||
- 최대 3개
|
||||
|
||||
- **공유받은 회의록**:
|
||||
- 회의 ID, 제목, 공유자 정보, 공유 일시, 상태
|
||||
- 필터: 공유 대상 = 현재 사용자
|
||||
- 정렬: 공유 일시 (최근 순)
|
||||
- 최대 3개
|
||||
|
||||
- **통계 데이터** (Desktop):
|
||||
- 예정된/진행중 회의 수 (진행중 회의 수 별도 배지)
|
||||
- 진행 중 Todo 수
|
||||
@ -447,7 +428,6 @@ graph TD
|
||||
- **연동**:
|
||||
- Meeting 서비스 (회의 정보, 회의록 정보)
|
||||
- Todo 서비스 (Todo 목록)
|
||||
- Share 서비스 (공유 정보)
|
||||
|
||||
#### 에러 처리
|
||||
- **데이터 로딩 실패**:
|
||||
@ -463,7 +443,6 @@ graph TD
|
||||
- 예정된/진행중 회의: "예정된 회의가 없습니다"
|
||||
- Todo: "할당된 Todo가 없습니다"
|
||||
- 내 회의록: "작성한 회의록이 없습니다. 첫 회의를 시작해보세요!"
|
||||
- 공유받은 회의록: "공유받은 회의록이 없습니다"
|
||||
|
||||
- **진행중 회의 참여 실패**:
|
||||
- "회의에 참여할 수 없습니다." 토스트 메시지
|
||||
@ -1108,94 +1087,7 @@ graph TD
|
||||
|
||||
---
|
||||
|
||||
### 08-회의록공유
|
||||
|
||||
#### 개요
|
||||
- **목적**: 회의록 공유 설정 및 참석자에게 전송
|
||||
- **관련 유저스토리**: UFR-MEET-060
|
||||
- **비즈니스 중요도**: 높음
|
||||
- **접근 경로**: 회의종료 → "회의록 공유하기" 또는 대시보드 → 회의록 상세 → "공유"
|
||||
|
||||
#### 주요 기능
|
||||
1. 공유 대상 선택 (전체/특정 참석자)
|
||||
2. 공유 권한 설정 (읽기 전용/댓글/편집)
|
||||
3. 공유 방식 선택 (이메일/링크)
|
||||
4. 링크 보안 설정 (유효기간, 비밀번호)
|
||||
5. 공유 이력 확인
|
||||
|
||||
#### UI 구성요소
|
||||
|
||||
**Mobile (320px~768px)**
|
||||
- **헤더**
|
||||
- 뒤로가기 버튼
|
||||
- "회의록 공유" 타이틀
|
||||
- "공유하기" 버튼 (Primary)
|
||||
|
||||
- **공유 설정 폼**
|
||||
- **공유 대상**
|
||||
- "참석자 전체" 라디오 버튼 (기본 선택)
|
||||
- "특정 참석자 선택" 라디오 버튼
|
||||
- 참석자 목록 (체크박스)
|
||||
|
||||
- **공유 권한**
|
||||
- 드롭다운 또는 라디오 버튼
|
||||
- 읽기 전용 (기본)
|
||||
- 댓글 가능
|
||||
- 편집 가능
|
||||
|
||||
- **공유 방식**
|
||||
- "이메일 발송" 체크박스 (기본 선택)
|
||||
- "링크 복사" 버튼
|
||||
|
||||
- **링크 보안 설정** (선택)
|
||||
- "유효기간 설정" 토글
|
||||
- 기간 선택 (7일, 30일, 90일, 무제한)
|
||||
- "비밀번호 설정" 토글
|
||||
- 비밀번호 입력 필드
|
||||
|
||||
- **공유 이력** (하단)
|
||||
- 이전 공유 기록 리스트
|
||||
- 각 항목: 공유 날짜, 대상, 권한
|
||||
|
||||
**Tablet/Desktop (768px+)**
|
||||
- 좌측: 공유 설정 폼 (모바일과 동일)
|
||||
- 우측: 회의록 미리보기
|
||||
|
||||
#### 인터랙션
|
||||
1. **공유 대상 선택**
|
||||
- "참석자 전체" 선택: 모든 참석자에게 발송
|
||||
- "특정 참석자 선택": 체크박스로 개별 선택
|
||||
|
||||
2. **링크 생성 및 복사**
|
||||
- "링크 복사" 클릭: 고유 URL 생성 → 클립보드 복사
|
||||
- 토스트 메시지: "링크가 복사되었습니다"
|
||||
|
||||
3. **공유 실행**
|
||||
- "공유하기" 버튼 클릭:
|
||||
- 이메일 발송 진행 (로딩 인디케이터)
|
||||
- 성공: "회의록이 공유되었습니다" 토스트
|
||||
- 다음 회의 일정 언급 확인: 자동 캘린더 등록 제안
|
||||
|
||||
#### 데이터 요구사항
|
||||
- **입력**:
|
||||
- 회의 ID
|
||||
- 공유 대상 (사용자 ID 배열)
|
||||
- 공유 권한 (읽기/댓글/편집)
|
||||
- 공유 방식 (이메일/링크)
|
||||
- 링크 설정 (유효기간, 비밀번호)
|
||||
- **출력**:
|
||||
- 공유 링크 URL
|
||||
- 이메일 발송 결과
|
||||
- **연동**: Meeting 서비스, Notification 서비스
|
||||
|
||||
#### 에러 처리
|
||||
- **공유 대상 미선택**: "공유할 대상을 선택해주세요"
|
||||
- **이메일 발송 실패**: "일부 참석자에게 이메일 발송에 실패했습니다" + 재시도 옵션
|
||||
- **링크 생성 실패**: "링크 생성에 실패했습니다. 다시 시도해주세요"
|
||||
|
||||
---
|
||||
|
||||
### 09-Todo관리
|
||||
### 08-Todo관리
|
||||
|
||||
#### 개요
|
||||
- **목적**: 할당된 Todo 목록 조회 및 진행 상황 관리
|
||||
@ -1282,7 +1174,7 @@ graph TD
|
||||
|
||||
---
|
||||
|
||||
### 10-회의록상세조회
|
||||
### 09-회의록상세조회
|
||||
|
||||
#### 개요
|
||||
- **목적**: 지난 회의록의 전체 내용 및 상세 정보 확인
|
||||
@ -1305,7 +1197,7 @@ graph TD
|
||||
- **헤더**
|
||||
- 뒤로가기 버튼
|
||||
- 회의 제목
|
||||
- 메뉴 버튼 (수정, 공유, 삭제)
|
||||
- 메뉴 버튼 (수정, 삭제)
|
||||
|
||||
- **기본 정보 카드**
|
||||
- 회의 일시
|
||||
@ -1462,7 +1354,7 @@ graph TD
|
||||
|
||||
---
|
||||
|
||||
### 11-회의록수정
|
||||
### 10-회의록수정
|
||||
|
||||
#### 개요
|
||||
- **목적**: 지난 회의록 조회 및 수정
|
||||
@ -1581,7 +1473,7 @@ graph TD
|
||||
|
||||
---
|
||||
|
||||
### 12-회의록목록조회
|
||||
### 11-회의록목록조회
|
||||
|
||||
#### 개요
|
||||
- **목적**: 회의록 목록 조회 및 필터링/정렬/검색 기능 제공
|
||||
@ -1589,13 +1481,12 @@ graph TD
|
||||
- **비즈니스 중요도**: 높음
|
||||
- **접근 경로**:
|
||||
- 대시보드 → "내 회의록" 전체 보기
|
||||
- 대시보드 → "공유받은 회의록" 전체 보기
|
||||
- 하단 네비게이션 → "회의록" 메뉴
|
||||
|
||||
#### 주요 기능
|
||||
1. **회의록 목록 조회** (참여/생성/공유받은 회의록)
|
||||
1. **회의록 목록 조회** (참여/생성한 회의록)
|
||||
2. **필터링 기능**:
|
||||
- 참여 유형: 공유받은 회의, 참석한 회의, 생성한 회의
|
||||
- 참여 유형: 참석한 회의, 생성한 회의
|
||||
- 상태: 전체, 작성중, 확정완료
|
||||
3. **정렬 기능**:
|
||||
- 최신 회의순 (회의 일시 기준, 최근 순)
|
||||
@ -1611,7 +1502,7 @@ graph TD
|
||||
**Mobile (320px~768px)**
|
||||
- **헤더** (Fixed, 상단)
|
||||
- 뒤로가기 버튼
|
||||
- "내 회의록" 타이틀 (또는 "공유받은 회의록")
|
||||
- "내 회의록" 타이틀
|
||||
- 검색 아이콘 (검색창 포커스)
|
||||
|
||||
- **필터 및 정렬** (상단, 스크롤 가능)
|
||||
@ -1625,7 +1516,6 @@ graph TD
|
||||
|
||||
- **참여 유형 필터** (탭 형식, 선택):
|
||||
- 전체 (기본 선택)
|
||||
- 공유받은 회의
|
||||
- 참석한 회의
|
||||
- 생성한 회의
|
||||
|
||||
@ -1789,7 +1679,7 @@ graph TD
|
||||
- **프로필** (사용자 프로필 및 설정)
|
||||
- 아이콘: 👤 (24px)
|
||||
- 텍스트: "프로필" (12px)
|
||||
- **사용 화면**: 02-대시보드, 09-Todo관리, 12-회의록목록조회
|
||||
- **사용 화면**: 02-대시보드, 08-Todo관리, 11-회의록목록조회
|
||||
|
||||
#### Desktop 좌측 사이드바 (768px+)
|
||||
- **위치**: Fixed, 좌측 (width: 240px)
|
||||
@ -1802,11 +1692,10 @@ graph TD
|
||||
- 대시보드
|
||||
- 내 회의록
|
||||
- Todo
|
||||
- 공유받은 회의록
|
||||
- **하단 영역**:
|
||||
- 사용자 정보 (아바타 + 이름)
|
||||
- 로그아웃
|
||||
- **사용 화면**: 02-대시보드, 09-Todo관리, 12-회의록목록조회
|
||||
- **사용 화면**: 02-대시보드, 08-Todo관리, 11-회의록목록조회
|
||||
|
||||
#### 상단 헤더 (공통)
|
||||
- **위치**: Sticky, 상단
|
||||
@ -2034,7 +1923,7 @@ graph TD
|
||||
| 1.0 | 2025-10-21 | 이미준 | 최초 작성 - 11개 화면 설계 완료 |
|
||||
| 1.1 | 2025-10-21 | 이미준 | AI 요약 및 참고자료 기능 추가<br>- 05-회의진행: AI 회의 내용 요약 자동 생성 및 참고자료 자동 연결 추가<br>- 10-회의록상세조회: 섹션별 AI 요약 표시 및 참고자료 영역 추가<br>- 11-회의록수정: AI 요약 수정 및 참고자료 편집 기능 추가<br>- 관련 유저스토리: UFR-AI-040 (관련 회의록 자동 연결) |
|
||||
| 1.1.1 | 2025-10-21 | 이미준 | 회의록 상세 화면 구조 개선 (프로토타입 기반)<br>- 10-회의록상세조회: 탭 기반 네비게이션 추가 (회의록/대시보드)<br>- 대시보드 탭 추가: 핵심내용, 결정사항, Todo 진행상황, 참고자료 섹션<br>- 참고자료 관련도 점수 표시 (백분율 + 색상 코딩)<br>- 참고자료 카테고리 탭 (관련 회의록/프로젝트 문서/이슈 트래커/위키 페이지)<br>- 참조: design-gappa/uiux/prototype 파일 (11-회의록대시보드.html, 05-회의진행.html) |
|
||||
| 1.1.2 | 2025-10-21 | 이미준 | 대시보드 및 회의록 목록 화면 개선 (사용자 피드백 반영)<br>- 02-대시보드: 예정된 회의 카드 추가, Todo 우선순위 정렬 개선 (지연→진행→미진행→완료, 최대 5개), 내 회의록 상태 배지 추가, 공유받은 회의록 섹션 개선<br>- 12-회의록목록조회: 신규 화면 추가 (필터링/정렬/검색 기능)<br> - 필터: 참여 유형(공유받은/참석한/생성한), 상태(전체/작성중/확정완료)<br> - 정렬: 최신 회의순/최신 업데이트순/제목 가나다순<br> - 검색: 제목/참석자/키워드 통합 검색<br> - 통계 정보 표시 (전체/작성중/확정완료 개수)<br>- 참조: design/uiux/prototype_fix 및 design-gappa/uiux/prototype 파일 |
|
||||
| 1.1.2 | 2025-10-21 | 이미준 | 대시보드 및 회의록 목록 화면 개선 (사용자 피드백 반영)<br>- 02-대시보드: 예정된 회의 카드 추가, Todo 우선순위 정렬 개선 (지연→진행→미진행→완료, 최대 5개), 내 회의록 상태 배지 추가<br>- 11-회의록목록조회: 신규 화면 추가 (필터링/정렬/검색 기능)<br> - 필터: 참여 유형(참석한/생성한), 상태(전체/작성중/확정완료)<br> - 정렬: 최신 회의순/최신 업데이트순/제목 가나다순<br> - 검색: 제목/참석자/키워드 통합 검색<br> - 통계 정보 표시 (전체/작성중/확정완료 개수)<br>- 참조: design/uiux/prototype_fix 및 design-gappa/uiux/prototype 파일 |
|
||||
| 1.2 | 2025-10-21 | 이미준 | 대시보드 진행중 회의 표시 기능 추가<br>- 02-대시보드: 예정된 회의 카드에 진행중 회의 포함<br> - 진행중 회의 우선 표시 (최상단)<br> - "진행중" 배지 (빨강/주황, 깜빡임 애니메이션)<br> - "참여하기" 버튼으로 즉시 회의 참여 가능<br> - 정렬: 진행중 회의 → 예정된 회의 (일시 순)<br>- 데이터 요구사항: 회의 상태 (ongoing) 추가, 진행중 회의 필터 조건 정의<br>- 에러 처리: 진행중 회의 참여 실패 시나리오 추가 (종료됨/권한없음/네트워크오류) |
|
||||
| 1.2.1 | 2025-10-21 | 이미준 | 대시보드 예정된 회의 역할 기반 접근 제어 추가<br>- 02-대시보드: 예정된 회의에 생성자/참석자별 차별화된 권한 적용<br> - **생성자 권한**: 회의 수정 가능 (크라운 아이콘 표시, "수정" 버튼)<br> - **참석자 권한**: 시작 10분 전부터 참여 가능 ("참여하기" 버튼 조건부 활성화)<br> - 실시간 타이머 표시 (참여 가능 시간 카운트다운, 1분 간격 갱신)<br>- UI 구성요소: 역할 표시 (크라운 아이콘), 액션 버튼 (역할 및 시간 기반 조건부 렌더링)<br>- 인터랙션: 생성자 수정 플로우, 참석자 시간 기반 참여 플로우, 타이머 자동 갱신<br>- 데이터 요구사항: 생성자 ID, 사용자 역할 (creator\|attendee), 참여 가능 시간 계산<br>- 에러 처리: 시간 제한 접근, 권한 제한 수정 시도, 회의 수정 실패 시나리오 추가 |
|
||||
| 1.2.2 | 2025-10-21 | 최유진 | 회의진행 화면 개선 및 스타일 가이드 작성<br>- 05-회의진행: 사용성 개선<br> - **참고자료 링크**: 새 탭(target="_blank")으로 열기 기능 추가 (녹음 중 페이지 이탈 방지)<br> - **참석자 추가 초대**: 회의 진행 중 참석자 추가 초대 기능 추가<br> - 초대 모달: 이메일 입력, 조직 내 사용자 검색, 권한 선택 (편집 가능/읽기 전용)<br> - 실시간 참석자 목록 업데이트 및 알림 발송 (이메일/앱 푸시)<br> - 권한 제어: 생성자는 모든 참석자 초대 가능, 일반 참석자는 회의 설정에 따라 결정<br>- design/uiux/style-guide.md: 신규 작성 (reference/sampleimg 샘플 이미지 기반)<br> - 민트 그린(#4DD5A7) 프라이머리 컬러 적용<br> - Mobile First 디자인 시스템 정의<br> - 15개 섹션: 컬러, 타이포그래피, 간격, 카드, 버튼, 배지, 아이콘, 네비게이션, 폼, 모달, 애니메이션, 접근성, 반응형 등 |
|
||||
@ -2044,6 +1933,8 @@ graph TD
|
||||
| 1.3.2 | 2025-10-21 | 도그냥 | 회의진행 화면 참석자 탭 개선 및 UI 일관성 강화<br>- **05-회의진행**: 참석자 탭 참석자 추가 기능 및 UI 정리<br> - **참석자 추가 폼 추가**: 이메일 입력 필드(form-control) + "초대" 버튼(btn btn-primary btn-sm)<br> - 이메일 유효성 검증: 정규식으로 형식 체크<br> - 빈 값 체크: "이메일 주소를 입력해주세요" 경고 토스트<br> - 잘못된 형식: "올바른 이메일 형식이 아닙니다" 오류 토스트<br> - 성공: "{email}에게 초대 링크가 전송되었습니다" 토스트 + 입력창 초기화<br> - **참석자 상태 표시 제거**: 발언 중/온라인 등 상태 아이콘 및 텍스트 모두 제거<br> - **참석자 수 동적 업데이트**: 4명으로 업데이트 (최유진 추가)<br> - **참고자료 영역 제거**: 회의개요 탭의 참고자료 섹션 삭제 (우측 관련회의록 탭으로 통합)<br>- **버튼 스타일 통일**: 모든 버튼에 .btn 기본 클래스 추가<br> - 편집 버튼 (4개 섹션): btn btn-ghost btn-sm<br> - AI 제안 적용 버튼 (3개): btn btn-primary btn-sm<br> - 수정 버튼 (3개): btn btn-ghost btn-sm<br> - 하단 일시정지/종료 버튼: btn btn-ghost, btn btn-error<br>- **검색창 스타일 통일**: 용어사전 검색창을 .input → .form-control 클래스로 변경<br>- 프로토타입 파일 수정: design/uiux/prototype/05-회의진행.html |
|
||||
| 1.3.3 | 2025-10-21 | 도그냥 | UI/UX 설계 문서 최적화 및 중복 제거<br>- **공통 UI 컴포넌트 섹션 신규 작성**: 반복 사용되는 UI 컴포넌트를 공통 섹션으로 분리<br> - **Mobile 하단 네비게이션**: 위치, 배경, 그림자, 3개 항목 (홈/회의록/Todo) 상세 스펙 정의<br> - **Desktop 좌측 사이드바**: 로고 영역, 메뉴 리스트, 사용자 정보 영역 상세 스펙 정의<br> - **상단 헤더**: Mobile/Desktop별 제목, 액션 버튼 배치 가이드<br>- **공통 에러 메시지 표준 섹션 신규 작성**: 반복 사용되는 에러 메시지를 표준화<br> - **네트워크 오류**: 자동 재시도 3회 (exponential backoff), 토스트 메시지, 재시도 버튼<br> - **데이터 로딩 실패**: 스켈레톤 UI 30초, 타임아웃 처리, 재시도 버튼<br> - **권한 오류**: 401/403 에러 처리, 명확한 안내 메시지<br> - **인증 오류**: 토큰 만료 자동 갱신, 로그인 리다이렉트<br> - **입력 검증 오류**: 실시간 인라인 검증, 포커스 이동<br> - **서버 오류**: 500 에러 에러 ID 제공, 고객센터 안내<br>- **중복 내용 참조 링크 교체**: 8개 화면에서 반복된 네비게이션/에러 메시지 설명을 공통 섹션 참조로 변경<br> - 01-로그인, 02-대시보드, 12-회의록목록조회 등<br> - 예상 파일 크기 감소: 1,500~2,200자 (약 8~10%)<br>- **목차 업데이트**: 공통 UI 컴포넌트, 공통 에러 메시지 표준 섹션 추가 |
|
||||
| 1.4 | 2025-10-22 | 이미준 | 프로토타입 기반 네비게이션 사양 업데이트<br>- **Mobile 하단 네비게이션**: 4개 메뉴 항목으로 복원 (홈/회의록/Todo/프로필)<br> - 프로필 메뉴 추가: 👤 아이콘, 사용자 정보 및 설정 접근<br> - 프로토타입 구현 기준 반영 (12-회의록목록조회.html 등)<br>- **일관성 개선**: 프로토타입과 UI/UX 설계서 간 네비게이션 사양 통일<br>- **스타일 가이드 동기화**: design/uiux/style-guide.md v1.2와 정합성 확보 |
|
||||
| 1.5 | 2025-10-23 | 강지수 | 대시보드 모바일 UI/UX 개선 (360px 최적화)<br>- **헤더 개선안 A 적용**: 간결한 인사 + 실질적 정보<br> - "안녕하세요 👋" (H3, Bold)<br> - "오늘 {N}건의 회의가 예정되어 있어요" (동적 업데이트)<br> - 2줄 구조 제거로 세로 공간 절약<br>- **통계 카드 개선안 A 적용**: 컴팩트 수평 배치<br> - 단일 카드 "📊 오늘의 현황" (H5, Semibold)<br> - 수평 배치: "📅 예정 {N}", "✅ 진행 {N}", "📈 완료 {N}%"<br> - 높이 ~80px (기존 대비 70% 감소)<br> - 반응형: 태블릿 이상에서 justify-content: flex-start<br>- **프로토타입 파일**: design/uiux/prototype/02-대시보드-개선.html 신규 생성<br>- **모바일 우선 반응형 설계**: 웹/태블릿 화면에서도 자연스러운 레이아웃 유지<br>- **참조**: design/uiux/ref_img/레이아웃 이상.png (개선 요구사항 이미지) |
|
||||
| 1.6 | 2025-10-23 | 강지수 | 회의록 공유 기능 전면 제거<br>- **제거 배경**: 회의 참가자가 아니면 대상자 선정 불가능, 기능 중복 및 논리적 모순 해결<br>- **유저스토리**: UFR-MEET-060 (회의록공유) 제거<br>- **UI/UX 설계서**:<br> - 08-회의록공유 화면 전체 제거<br> - 02-대시보드: "공유받은 회의록" 섹션 제거<br> - 09-회의록상세조회: 공유 버튼 제거 (메뉴: 수정/삭제만 유지)<br> - 11-회의록목록조회: 카테고리 필터 수정 (전체/참석한 회의/생성한 회의)<br> - Desktop 사이드바: "공유받은 회의록" 메뉴 제거<br>- **화면 번호 재정렬**: 08-Todo관리, 09-회의록상세조회, 10-회의록수정, 11-회의록목록조회<br>- **프로토타입 파일**: 08-회의록공유.html 삭제 예정<br>- **검토 문서**: design/uiux/crosscheck-report.md (상세 검토 의견 및 수정 계획) |
|
||||
|
||||
---
|
||||
|
||||
|
||||
185
design/uiux/공유하기 제거검토-report.md
Normal file
185
design/uiux/공유하기 제거검토-report.md
Normal file
@ -0,0 +1,185 @@
|
||||
# 회의록 공유 기능 제거 검토 의견서
|
||||
|
||||
**작성자**: 강지수 (Product Designer)
|
||||
**작성일**: 2025-10-23
|
||||
**문서 목적**: 회의록 공유 기능 제거에 대한 검토 의견 및 수정 계획
|
||||
|
||||
---
|
||||
|
||||
## 📋 요약
|
||||
|
||||
회의록 공유 기능은 **회의 참가자가 아닌 경우 대상자 선정이 불가능**하므로, 실제로는 필요하지 않은 기능입니다. 회의 참가자들은 이미 회의록에 접근할 수 있는 권한이 있으므로, 별도의 공유 기능이 중복됩니다.
|
||||
|
||||
**결론**: 회의록 공유 기능 전체 제거 권장
|
||||
|
||||
---
|
||||
|
||||
## 🔍 현재 상황 분석
|
||||
|
||||
### 문제점
|
||||
1. **논리적 모순**: 회의 참가자가 아니면 대상자를 선정할 수 없음
|
||||
2. **기능 중복**: 회의 참석자는 이미 회의록 접근 권한 보유
|
||||
3. **불필요한 복잡성**: 공유 관리 로직 및 UI가 시스템을 복잡하게 만듦
|
||||
|
||||
### 현재 접근 권한 구조
|
||||
- **회의 참가자**: 이미 회의록 접근 권한 있음 (조회/수정)
|
||||
- **회의 생성자**: 회의록 전체 관리 권한
|
||||
- **비참가자**: 회의록 접근 권한 없음 → 공유 기능으로도 추가 불가
|
||||
|
||||
---
|
||||
|
||||
## 🗂️ 영향 받는 문서 및 화면
|
||||
|
||||
### 1. 유저스토리 (design/userstory.md)
|
||||
|
||||
**제거 대상**:
|
||||
- **UFR-MEET-060: [회의록공유]** (라인 353-373)
|
||||
- 회의록 공유 설정
|
||||
- 공유 링크 생성
|
||||
- 공유 대상 및 권한 설정
|
||||
- 공유 링크 보안 (유효기간, 비밀번호)
|
||||
|
||||
### 2. UI/UX 설계서 (design/uiux/uiux.md)
|
||||
|
||||
**제거 대상**:
|
||||
|
||||
#### a. 02-대시보드
|
||||
- "공유받은 회의록" 섹션 (라인 310-320, 350-352)
|
||||
- 최근 공유받은 회의록 목록 (최대 3개)
|
||||
- 전체 보기 링크
|
||||
- 빈 상태 메시지
|
||||
|
||||
#### b. 08-회의록공유 (화면 전체)
|
||||
- 프로토타입 목록 8번 항목
|
||||
- 전체 화면 설계
|
||||
- 공유 설정 인터페이스
|
||||
|
||||
#### c. 10-회의록상세조회
|
||||
- 부가 기능 중 "회의록 공유 버튼" (라인 302)
|
||||
- 공유 설정 화면으로 이동하는 버튼
|
||||
|
||||
#### d. 12-회의록목록조회
|
||||
- 카테고리 필터 중 "공유받은 회의" 옵션 (라인 250)
|
||||
- 공유 관련 필터링 기능
|
||||
|
||||
### 3. 프로토타입 HTML 파일
|
||||
|
||||
**제거 대상**:
|
||||
- **08-회의록공유.html** - 전체 파일 삭제
|
||||
- **02-대시보드.html / 02-대시보드-개선.html** - 공유받은 회의록 섹션 제거
|
||||
- **10-회의록상세조회.html** - 공유 버튼 제거
|
||||
- **12-회의록목록조회.html** - 카테고리 필터 수정
|
||||
|
||||
---
|
||||
|
||||
## ✅ 수정 권장 사항
|
||||
|
||||
### 1. 개념 정리
|
||||
|
||||
**기존**: 공유 기능을 통한 회의록 배포
|
||||
**변경 후**: 회의 참가자 관리를 통한 자동 접근 권한 부여
|
||||
|
||||
### 2. 권한 관리 방식 변경
|
||||
|
||||
- 회의 예약 시 참석자 초대 (UFR-MEET-010)
|
||||
- 회의 진행 중 참석자 추가/제거 가능 (필요 시)
|
||||
- 모든 참석자는 자동으로 회의록 접근 권한 보유
|
||||
|
||||
### 3. 대시보드 섹션 재구성
|
||||
|
||||
**기존**:
|
||||
- 내 회의록
|
||||
- 공유받은 회의록 (제거)
|
||||
|
||||
**변경 후**:
|
||||
- **참석한 회의** (통합)
|
||||
- 내가 생성한 회의 + 초대받은 회의
|
||||
- 필터링: 전체 / 생성한 회의 / 참석한 회의
|
||||
- 상태 표시: 작성중 / 확정완료
|
||||
|
||||
### 4. 회의록 목록 카테고리 단순화
|
||||
|
||||
**기존**:
|
||||
```
|
||||
전체 / 공유받은 회의 / 참석한 회의 / 생성한 회의
|
||||
```
|
||||
|
||||
**변경 후**:
|
||||
```
|
||||
전체 / 참석한 회의 / 생성한 회의
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📊 수정 우선순위 및 작업 계획
|
||||
|
||||
| 우선순위 | 문서/파일 | 수정 내용 | 예상 시간 |
|
||||
|---------|----------|----------|----------|
|
||||
| 1️⃣ 높음 | **유저스토리** (userstory.md) | UFR-MEET-060 제거 | 10분 |
|
||||
| 1️⃣ 높음 | **UI/UX 설계서** (uiux.md) | 08-회의록공유 화면 제거 및 관련 섹션 수정 | 20분 |
|
||||
| 2️⃣ 중간 | **프로토타입 08-회의록공유.html** | 파일 삭제 | 1분 |
|
||||
| 2️⃣ 중간 | **프로토타입 02-대시보드** | 공유받은 회의록 섹션 제거 | 15분 |
|
||||
| 2️⃣ 중간 | **프로토타입 10-회의록상세조회** | 공유 버튼 제거 | 10분 |
|
||||
| 3️⃣ 낮음 | **프로토타입 12-회의록목록조회** | 카테고리 필터 수정 | 10분 |
|
||||
|
||||
**총 예상 시간**: 약 66분
|
||||
|
||||
---
|
||||
|
||||
## 📝 추가 고려사항
|
||||
|
||||
### 1. 알림 기능 유지
|
||||
|
||||
공유 기능은 제거하지만, **참석자 초대 알림**은 유지:
|
||||
- ✅ 회의 예약 시 참석자에게 이메일 알림 발송
|
||||
- ✅ 회의록 확정 시 참석자에게 완료 알림 발송
|
||||
- ✅ Todo 할당 시 담당자에게 알림 발송
|
||||
|
||||
### 2. 접근 권한 명확화
|
||||
|
||||
| 역할 | 권한 |
|
||||
|------|------|
|
||||
| **참석자** | 회의록 조회 + 댓글 + 수정 (실시간 협업) |
|
||||
| **생성자** | 회의록 전체 관리 (확정, 삭제 등) |
|
||||
| **비참가자** | 접근 불가 (공유 기능 없음) |
|
||||
|
||||
### 3. 회의록 검색 기능 강화
|
||||
|
||||
공유 기능 대신 **참석한 회의록 검색 기능** 강화 권장:
|
||||
- 제목, 내용, 참석자, 날짜로 검색
|
||||
- 태그/카테고리 필터링
|
||||
- 빠른 접근을 위한 북마크 기능 (선택적)
|
||||
|
||||
---
|
||||
|
||||
## 🎯 결론
|
||||
|
||||
### 회의록 공유 기능 제거가 타당한 이유
|
||||
|
||||
1. ✅ **논리적 모순 해결**: 회의 참가자가 아니면 대상자 선정 불가
|
||||
2. ✅ **기능 중복 제거**: 참석자는 이미 접근 권한 보유
|
||||
3. ✅ **UI/UX 단순화**: 불필요한 화면 및 버튼 제거로 사용자 경험 개선
|
||||
4. ✅ **개발 범위 축소**: 공유 관리 API 및 로직 제거로 개발 효율화
|
||||
|
||||
### 권장 사항
|
||||
|
||||
**즉시 수정**: 유저스토리 → UI/UX 설계서 → 프로토타입 순서로 수정 작업 진행
|
||||
|
||||
---
|
||||
|
||||
## 📌 작업 체크리스트
|
||||
|
||||
- [ ] 유저스토리 UFR-MEET-060 제거
|
||||
- [ ] UI/UX 설계서 08-회의록공유 화면 제거
|
||||
- [ ] UI/UX 설계서 02-대시보드 "공유받은 회의록" 섹션 제거
|
||||
- [ ] UI/UX 설계서 10-회의록상세조회 공유 버튼 제거
|
||||
- [ ] UI/UX 설계서 12-회의록목록조회 카테고리 필터 수정
|
||||
- [ ] 프로토타입 08-회의록공유.html 삭제
|
||||
- [ ] 프로토타입 02-대시보드.html 수정
|
||||
- [ ] 프로토타입 02-대시보드-개선.html 수정
|
||||
- [ ] 프로토타입 10-회의록상세조회.html 수정
|
||||
- [ ] 프로토타입 12-회의록목록조회.html 수정
|
||||
|
||||
---
|
||||
|
||||
**문서 종료**
|
||||
@ -349,28 +349,6 @@ UFR-MEET-055: [회의록수정] 회의록 작성자로서 | 나는, 검증이
|
||||
|
||||
- M/13
|
||||
|
||||
3) 회의록 공유
|
||||
UFR-MEET-060: [회의록공유] 회의록 작성자로서 | 나는, 회의 내용을 참석자들과 공유하기 위해 | 최종 회의록을 공유하고 싶다.
|
||||
- 시나리오: 회의록 공유
|
||||
최종 회의록이 확정된 상황에서 | 공유 버튼을 클릭하고 공유 대상과 권한을 설정하면 | 공유 링크가 생성되고 참석자 전원에게 알림이 발송된다.
|
||||
|
||||
[공유 설정]
|
||||
- 공유 대상: 참석자 전체 (기본) / 특정 참석자 선택
|
||||
- 공유 권한: 읽기 전용 / 댓글 가능 / 편집 가능
|
||||
- 공유 방식: 이메일 / 링크 복사
|
||||
|
||||
[처리 결과]
|
||||
- 공유 링크 생성 (고유 URL)
|
||||
- 참석자에게 이메일 알림 발송
|
||||
- 공유 시간 기록
|
||||
- 다음 회의 일정이 언급된 경우 캘린더에 자동 등록
|
||||
|
||||
[공유 링크 보안]
|
||||
- 링크 유효 기간 설정 (선택)
|
||||
- 비밀번호 설정 (선택)
|
||||
|
||||
- M/13
|
||||
|
||||
---
|
||||
|
||||
3. STT 서비스 (음성 인식 및 변환 - 기본 기능)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user