From caeb50ff9b3b54eb7165d26c8b373362db3156a1 Mon Sep 17 00:00:00 2001 From: yabo0812 Date: Tue, 21 Oct 2025 14:53:25 +0900 Subject: [PATCH] =?UTF-8?q?UI/UX=20=EC=84=A4=EA=B3=84=EC=84=9C=20=EB=8C=80?= =?UTF-8?q?=EC=8B=9C=EB=B3=B4=EB=93=9C=20=EB=B0=8F=20=ED=9A=8C=EC=9D=98?= =?UTF-8?q?=EB=A1=9D=20=EB=AA=A9=EB=A1=9D=20=ED=99=94=EB=A9=B4=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A0=20(v1.3)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit **대시보드 화면 개선 (02-대시보드)** - 예정된/초대받은 회의 목록 카드 추가 - 회의 제목, 일시, 참석자 수, D-day 배지 표시 - 최대 3개 표시, 전체 보기 링크 - Todo 우선순위 정렬 개선 - 정렬 순서: 지연중 → 진행중 → 미진행 → 완료 - 최대 5개 표시 - 통계 요약: 진행 중 개수, 마감 임박 개수 - 내 회의록 섹션 개선 - 상태 배지 추가 (작성중/확정완료) - 최종 수정 시간 표시 (상대 시간) - 최대 3개 표시 - 공유받은 회의록 섹션 개선 - 공유자 정보 표시 (아바타 + 이름) - 공유 일시 표시 - 최대 3개 표시 - Desktop: 통계 그리드 추가 (예정된 회의, 진행 중 Todo, Todo 완료율) - 데이터 요구사항 상세화 - 예정된 회의, Todo 우선순위, 회의록 상태, 공유 정보 - 서비스 연동: Meeting, Todo, Share 서비스 **회의록 목록 화면 추가 (12-회의록목록조회)** - 신규 화면 설계 완료 - 필터링 기능 - 참여 유형: 전체/공유받은/참석한/생성한 - 상태: 전체/작성중/확정완료 - 필터 조합 가능 - 정렬 기능 - 최신 회의순 (meetingDate DESC) - 최신 업데이트순 (updatedAt DESC) - 제목 가나다순 (title ASC) - 검색 기능 - 통합 검색: 제목/참석자/키워드 - 실시간 검색 (debounce 300ms) - 검색어 지우기 버튼 - 통계 정보 표시 - 3컬럼 카드: 전체/작성중/확정완료 개수 - 필터/검색 적용 시 실시간 갱신 - 회의록 목록 - 제목, 일시, 참석자 수, 상태 배지, 최종 수정 시간 - 조회 전용 표시 (편집 불가 회의록) - 클릭 시 회의록 상세 화면 이동 - 빈 상태 처리 - 검색 결과 없음, 필터링 결과 없음, 전체 회의록 없음 - 에러 처리 - 데이터 로딩 실패, 검색 실패, 네트워크 오류, 권한 없음 **프로토타입 화면 목록 업데이트** - 12번 화면 추가: 회의록목록조회 **참조 프로토타입** - design/uiux/prototype_fix/02-대시보드.html - design/uiux/prototype_fix/12-회의록목록조회.html - design-gappa/uiux/prototype/02-대시보드.html 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- design/uiux/uiux.md | 398 ++++++++++++++++++++++++++++++++++++++------ 1 file changed, 349 insertions(+), 49 deletions(-) diff --git a/design/uiux/uiux.md b/design/uiux/uiux.md index 148198c..3c538a9 100644 --- a/design/uiux/uiux.md +++ b/design/uiux/uiux.md @@ -4,7 +4,7 @@ - **작성일**: 2025-10-21 - **최종 수정일**: 2025-10-21 - **작성자**: 이미준 (서비스 기획자) -- **버전**: 1.2 +- **버전**: 1.3 - **설계 철학**: Mobile First Design --- @@ -87,6 +87,7 @@ | 09 | Todo관리 | UFR-TODO-010, UFR-TODO-030 | 높음 | Todo 목록 및 진행 관리 | | 10 | 회의록상세조회 | UFR-MEET-045 | 중간 | 회의록 상세 보기 | | 11 | 회의록수정 | UFR-MEET-055 | 중간 | 지난 회의록 수정 | +| 12 | 회의록목록조회 | UFR-MEET-030, UFR-MEET-045 | 높음 | 회의록 목록 필터링/정렬/검색 | --- @@ -208,89 +209,200 @@ graph TD #### 개요 - **목적**: 주요 기능 접근 허브, 최근 활동 및 Todo 요약 제공 -- **관련 유저스토리**: 여러 유저스토리의 진입점 +- **관련 유저스토리**: 여러 유저스토리의 진입점, UFR-MEET-030 (회의록 조회), UFR-TODO-010 (Todo 조회) - **비즈니스 중요도**: 필수 - **접근 경로**: 로그인 후 메인 화면 #### 주요 기능 -1. 빠른 회의 시작 -2. 내 회의록 목록 (최근 5개) -3. 내 Todo 요약 (진행 중/마감 임박) -4. 최근 공유받은 회의록 -5. 전역 검색 +1. 빠른 회의 시작 및 예약 +2. **예정된/초대받은 회의 목록** (upcoming meetings) +3. **내 Todo 우선순위별 표시** (지연중 → 진행중 → 미진행 → 완료, 최대 5개) +4. **내 회의록** (참여자/생성자로 등록된 최근 3개, 상태 포함) +5. **공유받은 회의록** (최근 공유받은 순 3개) +6. 전역 검색 #### UI 구성요소 **Mobile (320px~768px)** -- **헤더** - - 서비스 로고 +- **헤더** (Fixed, 상단) + - 서비스 로고 및 타이틀 ("회의록 서비스") - 검색 아이콘 - 프로필 아이콘 (메뉴) -- **메인 콘텐츠** (스크롤) - - **빠른 액션** - - "새 회의 시작" 버튼 (Primary, 눈에 잘 띄는 위치) - - "회의 예약" 버튼 (Secondary) +- **메인 콘텐츠** (스크롤, padding-bottom: 80px) + - **환영 메시지** + - "안녕하세요, {사용자명}님!" (H3) + - 부제: "오늘도 효율적인 회의록 작성을 시작하세요" (Body-sm, 회색) - - **내 Todo** 카드 - - 진행 중 Todo 개수 배지 - - 마감 임박 Todo 최대 3개 표시 - - "전체 보기" 링크 + - **빠른 액션** (가로 배치) + - "새 회의 시작" 버튼 (Primary, 아이콘: play_circle, flex: 1) + - "회의 예약" 버튼 (Secondary, 아이콘: calendar_today) - - **내 회의록** 카드 - - 최근 회의록 5개 리스트 - - 각 항목: 제목, 날짜, 상태 배지 - - "전체 보기" 링크 + - **예정된 회의** 카드 (신규) + - 헤더: "예정된 회의" (H4) + "전체 보기 →" 링크 + - 예정된/초대받은 회의 리스트 (최대 3개) + - 각 항목: + - 회의 제목 (H5) + - 회의 일시 (아이콘: calendar_today) + - 참석자 수 (아이콘: people) + - D-day 배지 (긴급도에 따라 색상 구분) + - 빈 상태: "예정된 회의가 없습니다" - - **공유받은 회의록** 카드 - - 최근 공유받은 회의록 3개 - - "전체 보기" 링크 + - **내 Todo** 카드 (개선) + - 헤더: "내 Todo" (H4) + "전체 보기 →" 링크 (Todo 관리 화면으로 이동) + - **통계 요약 영역**: + - 진행 중 개수 배지 + - 마감 임박 개수 (아이콘: schedule, 경고색) + - **Todo 리스트** (우선순위 순, 최대 5개): + 1. 지연 중 (기한 지남, 빨간색) + 2. 진행 중 (상태: in_progress) + 3. 기한이 남은 미진행 (상태: not_started) + 4. 완료 (상태: done, 회색 처리) + - 각 Todo 항목: + - 제목 (Medium weight) + - 메타정보: 담당자, 마감일 + - D-day (색상: 지남-빨강, 오늘-경고, 여유-회색) + - 우선순위 배지 (high-빨강, medium-노랑, low-회색) + - 빈 상태: "할당된 Todo가 없습니다" -- **하단 네비게이션** (Fixed) - - 홈, 회의록, Todo, 프로필 + - **내 회의록** 카드 (개선) + - 헤더: "내 회의록" (H4) + "전체 보기 →" 링크 (회의록 목록 화면으로 이동) + - **최근 회의록 리스트** (최대 3개): + - 필터: 내가 참여자 또는 생성자로 등록된 회의록 + - 정렬: 최근 생성 순 (createdAt 기준) + - 각 항목: + - 회의 제목 (H5) + - 회의 일시 (날짜 + 시간) + - 참석자 수 + - **상태 배지**: + - "작성중" (draft, 노란색 배지) + - "확정완료" (confirmed, 초록색 배지) + - 최종 수정 시간 (상대 시간: "1시간 전", "어제" 등) + - 클릭 시: 회의록 상세 화면으로 이동 + - 빈 상태: "작성한 회의록이 없습니다. 첫 회의를 시작해보세요!" + + - **공유받은 회의록** 카드 (개선) + - 헤더: "공유받은 회의록" (H4) + "전체 보기 →" 링크 (회의록 목록 화면으로 이동) + - **최근 공유받은 회의록 리스트** (최대 3개): + - 정렬: 최근 공유받은 순 + - 각 항목: + - 회의 제목 (H5) + - 공유자 정보 (아바타 + 이름) + - 공유 일시 (상대 시간) + - 상태 배지 + - 클릭 시: 회의록 상세 화면으로 이동 (읽기 전용) + - 빈 상태: "공유받은 회의록이 없습니다" + +- **하단 네비게이션** (Fixed, 하단) + - 홈 (active), 회의록, Todo, 프로필 + - 각 항목: Material Icon + 레이블 **Tablet/Desktop (768px+)** -- **사이드바** (좌측, Fixed) +- **사이드바** (좌측, Fixed, 240px) - 서비스 로고 - - 메인 메뉴 - - 대시보드 - - 내 회의록 - - Todo - - 공유받은 회의록 - - 프로필 정보 + - 메인 메뉴 (세로 배치) + - 대시보드 (active, 강조 표시) + - 회의 목록 + - Todo 관리 + - 설정 + - 하단: 프로필 요약 - **메인 콘텐츠** (Grid Layout) - - 좌측 컬럼 (2/3) + - **상단 영역**: + - 환영 메시지 - 빠른 액션 (가로 배치) - - 내 회의록 리스트 - - 우측 컬럼 (1/3) - - 내 Todo 위젯 - - 공유받은 회의록 위젯 + + - **통계 그리드** (3컬럼, auto-fit): + - 예정된 회의 (아이콘: 📅, Primary 색상) + - 진행 중 Todo (아이콘: ✅, Warning 색상) + - Todo 완료율 (아이콘: 📈, Success 색상) + + - **2컬럼 그리드**: + - 좌측 컬럼 (2/3 너비) + - 예정된 회의 섹션 + - 내 회의록 섹션 + - 우측 컬럼 (1/3 너비) + - 내 Todo 위젯 + - 공유받은 회의록 위젯 #### 인터랙션 1. **빠른 액션** - - "새 회의 시작": 템플릿선택 화면으로 이동 (모달 또는 전체 화면) - - "회의 예약": 회의예약 화면으로 이동 + - "새 회의 시작" 클릭 → 템플릿선택 화면으로 이동 (페이드 전환) + - "회의 예약" 클릭 → 회의예약 화면으로 이동 2. **카드 인터랙션** - - 카드 클릭: 해당 상세 화면으로 이동 - - 스와이프(모바일): 빠른 액션 (삭제, 공유 등) + - 회의록 항목 클릭 → 회의록 상세 화면으로 이동 + - Todo 항목 클릭 → Todo 관리 화면으로 이동 + - "전체 보기" 링크 클릭 → 해당 목록 화면으로 이동 + - 호버 효과: 카드 그림자 증가, 약간 상승 (transform: translateY(-2px)) 3. **검색** - 검색 아이콘 클릭: 전체 화면 검색 인터페이스 표시 - 실시간 자동완성 및 최근 검색어 제공 #### 데이터 요구사항 -- **입력**: 사용자 ID +- **입력**: + - 사용자 ID (현재 로그인 사용자) + - 현재 날짜/시간 (예정된 회의 필터링용) + - **출력**: - - 내 회의록 목록 (최근 5개) - - 내 Todo 목록 (진행 중, 마감 임박) - - 공유받은 회의록 목록 (최근 3개) -- **연동**: Meeting 서비스, Todo 서비스 + - **예정된 회의**: + - 회의 ID, 제목, 일시, 참석자 목록, D-day + - 필터: 회의 일시 >= 현재 시간, 사용자가 참석자 또는 생성자 + - 정렬: 회의 일시 순 (가까운 순) + - 최대 3개 + + - **내 Todo**: + - Todo ID, 제목, 담당자, 마감일, 상태, 우선순위 + - 필터: 담당자 = 현재 사용자 + - 정렬: + 1. 지연중 (마감일 < 현재 날짜, 상태 != done) + 2. 진행중 (상태 = in_progress) + 3. 미진행 (상태 = not_started, 마감일 >= 현재 날짜) + 4. 완료 (상태 = done) + - 최대 5개 + + - **내 회의록**: + - 회의 ID, 제목, 일시, 참석자 수, 상태, 생성일시, 수정일시 + - 필터: 사용자가 참여자 또는 생성자 + - 정렬: 생성일시 (최근 순) + - 최대 3개 + + - **공유받은 회의록**: + - 회의 ID, 제목, 공유자 정보, 공유 일시, 상태 + - 필터: 공유 대상 = 현재 사용자 + - 정렬: 공유 일시 (최근 순) + - 최대 3개 + + - **통계 데이터** (Desktop): + - 예정된 회의 수 + - 진행 중 Todo 수 + - Todo 완료율 (완료 / 전체 × 100) + +- **연동**: + - Meeting 서비스 (회의 정보, 회의록 정보) + - Todo 서비스 (Todo 목록) + - Share 서비스 (공유 정보) #### 에러 처리 -- **데이터 로딩 실패**: 해당 카드에 "일시적으로 데이터를 불러올 수 없습니다." 표시, 새로고침 버튼 제공 -- **빈 상태**: "아직 작성한 회의록이 없습니다. 첫 회의를 시작해보세요!" +- **데이터 로딩 실패**: + - 해당 카드에 "일시적으로 데이터를 불러올 수 없습니다." 표시 + - "다시 시도" 버튼 제공 (새로고침 아이콘) + - 로그 기록 및 에러 추적 + +- **부분 데이터 로딩 실패**: + - 실패한 섹션만 에러 표시, 나머지 섹션은 정상 표시 + - 사용자 경험 최소 방해 + +- **빈 상태** (각 섹션별): + - 예정된 회의: "예정된 회의가 없습니다" + - Todo: "할당된 Todo가 없습니다" + - 내 회의록: "작성한 회의록이 없습니다. 첫 회의를 시작해보세요!" + - 공유받은 회의록: "공유받은 회의록이 없습니다" + +- **네트워크 오류**: + - "네트워크 연결을 확인해주세요." 토스트 메시지 + - 자동 재시도 (최대 3회, exponential backoff) --- @@ -1199,6 +1311,193 @@ graph TD --- +### 12-회의록목록조회 + +#### 개요 +- **목적**: 회의록 목록 조회 및 필터링/정렬/검색 기능 제공 +- **관련 유저스토리**: UFR-MEET-030 (회의록 조회), UFR-MEET-045 (회의록 상세 조회) +- **비즈니스 중요도**: 높음 +- **접근 경로**: + - 대시보드 → "내 회의록" 전체 보기 + - 대시보드 → "공유받은 회의록" 전체 보기 + - 하단 네비게이션 → "회의록" 메뉴 + +#### 주요 기능 +1. **회의록 목록 조회** (참여/생성/공유받은 회의록) +2. **필터링 기능**: + - 참여 유형: 공유받은 회의, 참석한 회의, 생성한 회의 + - 상태: 전체, 작성중, 확정완료 +3. **정렬 기능**: + - 최신 회의순 (회의 일시 기준, 최근 순) + - 최신 업데이트순 (수정 일시 기준, 최근 순) + - 제목 가나다순 (오름차순) +4. **검색 기능**: + - 제목, 참석자, 키워드로 통합 검색 + - 실시간 검색 결과 업데이트 +5. 회의록 상세 조회 (항목 클릭 시) + +#### UI 구성요소 + +**Mobile (320px~768px)** +- **헤더** (Fixed, 상단) + - 뒤로가기 버튼 + - "내 회의록" 타이틀 (또는 "공유받은 회의록") + - 검색 아이콘 (검색창 포커스) + +- **필터 및 정렬** (상단, 스크롤 가능) + - **필터 행 1** (2컬럼 그리드): + - 상태 필터 (Select) + - 옵션: 전체, 작성중, 확정완료 + - 기본값: 전체 + - 정렬 (Select) + - 옵션: 최신순, 회의일시순, 제목순 + - 기본값: 최신순 + + - **참여 유형 필터** (탭 형식, 선택): + - 전체 (기본 선택) + - 공유받은 회의 + - 참석한 회의 + - 생성한 회의 + +- **검색 영역** + - 검색 입력 필드 + - Placeholder: "회의 제목, 참석자, 키워드 검색" + - 실시간 검색 (입력 시 즉시 필터링) + +- **통계 정보** (카드, 선택) + - 3컬럼 그리드: + - 전체: {count}개 + - 작성중: {count}개 + - 확정완료: {count}개 + - 구분선으로 시각적 분리 + +- **회의록 목록** (스크롤 가능) + - 각 회의록 항목 (meeting-item): + - **좌측 영역**: + - 회의 제목 (H5, 볼드) + - 메타정보 (Caption, 회색): + - 회의 일시 (날짜 + 시간) · 참석자 수 + - 최종 수정 시간 (Caption, 회색): + - 상대 시간 표시 ("1시간 전", "어제", "3일 전") + - **우측 영역**: + - 상태 배지: + - "확정완료" (초록색 배지) + - "작성중" (노란색 배지) + - 조회 권한 표시 (조회 전용인 경우): + - "조회 전용" (Caption, 회색) + - 빈 상태: + - 검색 결과 없음: "검색 결과가 없습니다" + - 회의록 없음: "회의록이 없습니다" + +- **하단 네비게이션** (Fixed, 하단) + - 홈, 회의록 (active), Todo, 프로필 + +**Tablet/Desktop (768px+)** +- **사이드바** (좌측, Fixed, 240px) + - 메인 메뉴 + - 회의록 목록 (active) + +- **메인 콘텐츠** (중앙) + - 필터 및 정렬 (상단, 가로 배치) + - 참여 유형 필터 (탭 또는 버튼 그룹) + - 검색 영역 + - 통계 정보 (3컬럼 카드) + - 회의록 목록 (Grid 또는 List Layout) + - 각 카드: 호버 시 그림자 증가, 약간 상승 + +#### 인터랙션 + +1. **필터링** + - 상태 필터 변경 → 즉시 목록 재렌더링 + - 참여 유형 탭 선택 → 해당 유형 회의록만 표시 + - 필터 조합 가능 (상태 + 참여 유형) + +2. **정렬** + - 정렬 옵션 선택 → 즉시 목록 재정렬 + - 정렬 기준: + - 최신순: `updatedAt DESC` + - 회의일시순: `meetingDate DESC` + - 제목순: `title ASC` (한글 가나다순) + +3. **검색** + - 검색 아이콘 클릭 → 검색 입력 필드에 포커스 + - 텍스트 입력 → 실시간 검색 (debounce 300ms) + - 검색 범위: + - 회의 제목 (부분 일치) + - 참석자 이름 (부분 일치) + - 키워드 (태그, 내용에서 추출된 키워드) + - 검색어 지우기: X 버튼 (검색어 입력 시 표시) + +4. **회의록 조회** + - 회의록 항목 클릭 → 회의록 상세 화면으로 이동 + - 전달 데이터: 회의록 ID + - 조회 전용 회의록: 읽기 모드로 표시 + +5. **통계 업데이트** + - 필터/검색 적용 시 → 통계 자동 갱신 + - 전체, 작성중, 확정완료 개수 실시간 반영 + +6. **빈 상태 처리** + - 검색 결과 없음: "검색 결과가 없습니다" 메시지 + - 필터링 결과 없음: 필터 조건에 맞는 회의록 없음 안내 + - 회의록 없음: "회의록이 없습니다" + 회의 시작 유도 메시지 + +#### 데이터 요구사항 + +- **입력**: + - 사용자 ID (현재 로그인 사용자) + - 필터 조건: + - 참여 유형: `all` | `shared` | `attended` | `created` + - 상태: `all` | `draft` | `confirmed` + - 정렬 기준: `recent` | `date` | `title` + - 검색어 (선택) + +- **출력**: + - 회의록 목록: + - 회의 ID + - 제목 + - 회의 일시 + - 참석자 목록 (또는 참석자 수) + - 상태 (`draft` | `confirmed`) + - 생성자 ID + - 생성일시 (`createdAt`) + - 수정일시 (`updatedAt`) + - 조회 권한 (편집 가능 여부) + - 통계: + - 전체 개수 + - 작성중 개수 + - 확정완료 개수 + +- **연동**: + - Meeting 서비스 (회의록 목록 조회 API) + - Share 서비스 (공유 정보 조회) + +#### 에러 처리 + +- **데이터 로딩 실패**: + - "회의록을 불러오는 중 오류가 발생했습니다." 메시지 + - "다시 시도" 버튼 제공 + +- **검색 실패**: + - "검색 중 오류가 발생했습니다." 토스트 메시지 + - 기존 목록 유지 + +- **네트워크 오류**: + - "네트워크 연결을 확인해주세요." 토스트 메시지 + - 자동 재시도 (최대 3회, exponential backoff) + +- **권한 없음**: + - 접근 권한 없는 회의록 클릭 시: + - "접근 권한이 없습니다" 토스트 메시지 + - 목록으로 복귀 + +- **빈 상태**: + - 검색 결과 없음: "검색 결과가 없습니다" + - 필터링 결과 없음: "조건에 맞는 회의록이 없습니다" + - 전체 회의록 없음: "회의록이 없습니다. 첫 회의를 시작해보세요!" + 회의 시작 버튼 + +--- + ## 화면 간 전환 및 네비게이션 ### 네비게이션 구조 @@ -1388,6 +1687,7 @@ graph TD | 1.0 | 2025-10-21 | 이미준 | 최초 작성 - 11개 화면 설계 완료 | | 1.1 | 2025-10-21 | 이미준 | AI 요약 및 참고자료 기능 추가
- 05-회의진행: AI 회의 내용 요약 자동 생성 및 참고자료 자동 연결 추가
- 10-회의록상세조회: 섹션별 AI 요약 표시 및 참고자료 영역 추가
- 11-회의록수정: AI 요약 수정 및 참고자료 편집 기능 추가
- 관련 유저스토리: UFR-AI-040 (관련 회의록 자동 연결) | | 1.2 | 2025-10-21 | 이미준 | 회의록 상세 화면 구조 개선 (프로토타입 기반)
- 10-회의록상세조회: 탭 기반 네비게이션 추가 (회의록/대시보드/타임라인)
- 대시보드 탭 추가: 핵심내용, 결정사항, Todo 진행상황, 참고자료 섹션
- 참고자료 관련도 점수 표시 (백분율 + 색상 코딩)
- 참고자료 카테고리 탭 (관련 회의록/프로젝트 문서/이슈 트래커/위키 페이지)
- 참조: design-gappa/uiux/prototype 파일 (11-회의록대시보드.html, 05-회의진행.html) | +| 1.3 | 2025-10-21 | 이미준 | 대시보드 및 회의록 목록 화면 개선 (사용자 피드백 반영)
- 02-대시보드: 예정된 회의 카드 추가, Todo 우선순위 정렬 개선 (지연→진행→미진행→완료, 최대 5개), 내 회의록 상태 배지 추가, 공유받은 회의록 섹션 개선
- 12-회의록목록조회: 신규 화면 추가 (필터링/정렬/검색 기능)
- 필터: 참여 유형(공유받은/참석한/생성한), 상태(전체/작성중/확정완료)
- 정렬: 최신 회의순/최신 업데이트순/제목 가나다순
- 검색: 제목/참석자/키워드 통합 검색
- 통계 정보 표시 (전체/작성중/확정완료 개수)
- 참조: design/uiux/prototype_fix 및 design-gappa/uiux/prototype 파일 | ---