diff --git a/.claude/settings.local.json b/.claude/settings.local.json index 166346d..20bae11 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -34,9 +34,10 @@ "Bash(chmod:*)", "Bash(./tools/check-mermaid.sh:*)", "Bash(mv:*)", - "Bash(cp:*)" + "Bash(cp:*)", + "mcp__sequential-thinking__sequentialthinking" ], "deny": [], "ask": [] } -} +} \ No newline at end of file diff --git a/design/uiux/prototype/01-로그인.html b/design/uiux/prototype/01-로그인.html deleted file mode 100644 index 2f9a3e3..0000000 --- a/design/uiux/prototype/01-로그인.html +++ /dev/null @@ -1,352 +0,0 @@ - - - - - - - 로그인 - 회의록 작성 및 공유 서비스 - - - - -
- -
- -

회의록 서비스

- -
- - -
-
📝 테스트 계정
-
이메일: test@example.com
-
비밀번호: password123
-
- - -
-
- - -
- -
- - -
- -
-
- - -
- 비밀번호 찾기 -
- - -
- - -
- -
-
- - - - - - diff --git a/design/uiux/prototype/02-대시보드.html b/design/uiux/prototype/02-대시보드.html deleted file mode 100644 index cf6ec2f..0000000 --- a/design/uiux/prototype/02-대시보드.html +++ /dev/null @@ -1,691 +0,0 @@ - - - - - - 대시보드 - 회의록 서비스 - - - - - -
-
- - 회의록 서비스 -
-
-
- - -
-
-
- - -
- - - - -
- -
-

안녕하세요!

-

오늘의 일정을 확인하세요

-
- - -
-
-
📅
-
예정된 회의
-
0
-
-
-
✅
-
진행 중 Todo
-
0
-
-
-
📈
-
Todo 완료율
-
0%
-
-
- - -
-
-

최근 회의

- 전체 보기 → -
-
- -
-
- - -
-
-

할당된 Todo

- 전체 보기 → -
-
- -
-
-
-
- - - - - - - - - - - - diff --git a/design/uiux/prototype/03-회의예약.html b/design/uiux/prototype/03-회의예약.html deleted file mode 100644 index 4a1a119..0000000 --- a/design/uiux/prototype/03-회의예약.html +++ /dev/null @@ -1,133 +0,0 @@ - - - - - - 회의 예약 - 회의록 서비스 - - - - -
-
-

회의 예약

-

새로운 회의를 예약하고 참석자를 초대하세요

-
- -
-
-
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
-
-
-
- - - - - diff --git a/design/uiux/prototype/04-템플릿선택.html b/design/uiux/prototype/04-템플릿선택.html deleted file mode 100644 index d17d998..0000000 --- a/design/uiux/prototype/04-템플릿선택.html +++ /dev/null @@ -1,235 +0,0 @@ - - - - - - 템플릿 선택 - 회의록 서비스 - - - - -
-
-

회의록 템플릿 선택

-

회의 유형에 맞는 템플릿을 선택하여 효율적으로 회의록을 작성하세요

-
- -
- -
-
📋
-

일반 회의

-

- 가장 기본적인 회의록 형식입니다. 모든 유형의 회의에 적합합니다. -

-
- 참석자 - 안건 - 논의 내용 - 결정 사항 - Todo -
-
- - -
-
🏃
-

스크럼 회의

-

- 데일리 스탠드업이나 스프린트 회의에 최적화된 템플릿입니다. -

-
- 어제 한 일 - 오늘 할 일 - 이슈/블로커 - 다음 스프린트 -
-
- - -
-
🚀
-

프로젝트 킥오프

-

- 새 프로젝트 시작 시 필요한 모든 정보를 담는 템플릿입니다. -

-
- 프로젝트 개요 - 목표 - 일정 - 역할 분담 - 리스크 -
-
- - -
-
📅
-

주간 회의

-

- 매주 반복되는 정기 회의에 적합한 템플릿입니다. -

-
- 주간 실적 - 주요 이슈 - 다음 주 계획 - 공지사항 -
-
-
- -
- - -
-
- - - - - diff --git a/design/uiux/prototype/05-회의진행.html b/design/uiux/prototype/05-회의진행.html deleted file mode 100644 index f22f7f2..0000000 --- a/design/uiux/prototype/05-회의진행.html +++ /dev/null @@ -1,647 +0,0 @@ - - - - - - 회의 진행 - 회의록 서비스 - - - - -
- -
-
-

회의 진행 중

-
-
- 00:00 -
-
-
- - -
-
- - -
- -
-
- - - - - -
-
- -
-
- - -
-
- - - - -
- -
- -
-

참석자 (3명)

-
-
김
-
-
김민준
-
발언 중 ✍️
-
-
-
-
박
-
-
박서연
-
온라인
-
-
-
-
이
-
-
이준호
-
온라인
-
-
-
- - - - - - - - - -
-
-
-
- - - - - diff --git a/design/uiux/prototype/06-검증완료.html b/design/uiux/prototype/06-검증완료.html deleted file mode 100644 index e818a51..0000000 --- a/design/uiux/prototype/06-검증완료.html +++ /dev/null @@ -1,183 +0,0 @@ - - - - - - 검증 완료 - 회의록 서비스 - - - - -
-
✅
-

AI 검증이 완료되었습니다

-

회의 내용이 분석되었습니다. 통계를 확인하고 회의를 종료하세요

- - -
-
-
45분
-
회의 시간
-
-
-
3명
-
참석자
-
-
-
12회
-
발언 횟수
-
-
-
5개
-
Todo 생성
-
-
- - -
-

주요 키워드

-
- 신규 기능 - 개발 일정 - API 설계 - 예산 - 테스트 - 배포 - 마케팅 -
-
- - -
-

발언 분포

-
-
- 김민준 - 5회 (42%) -
-
-
-
-
-
-
- 박서연 - 4회 (33%) -
-
-
-
-
-
-
- 이준호 - 3회 (25%) -
-
-
-
-
-
- - -
- - -
-
- - - - - diff --git a/design/uiux/prototype/07-회의종료.html b/design/uiux/prototype/07-회의종료.html deleted file mode 100644 index f8e7fd4..0000000 --- a/design/uiux/prototype/07-회의종료.html +++ /dev/null @@ -1,112 +0,0 @@ - - - - - - 회의 종료 - 회의록 서비스 - - - - -
-
🏁
-

회의가 종료되었습니다

-

회의록이 자동으로 저장되었습니다

- - -
-
- 회의 제목 - 2025년 1분기 제품 기획 회의 -
-
- 회의 시간 - 45분 -
-
- 참석자 - 3명 -
-
- 생성된 Todo - 5개 -
-
- - -
- - -
-
- - - - - diff --git a/design/uiux/prototype/08-회의록공유.html b/design/uiux/prototype/08-회의록공유.html deleted file mode 100644 index 6438105..0000000 --- a/design/uiux/prototype/08-회의록공유.html +++ /dev/null @@ -1,316 +0,0 @@ - - - - - - 회의록 공유 - 회의록 서비스 - - - - -
-
🎉
-

회의록이 확정되었습니다

-

이제 참석자들과 회의록을 공유하세요

- - -
- -
- - -
-
- - -
- - - - - - - -
- - -
- -
-
-
-
이
-
-
API 명세서 작성
-
- 담당: 이준호 | 📅 3월 25일 -
-
-
-
- 진행중 60% - Todo 보기 → -
-
-
-
-
최
-
-
UI 프로토타입 완성
-
- 담당: 최유진 | 📅 3월 15일 -
-
-
-
- 완료 100% - Todo 보기 → -
-
-
-
-
박
-
-
예산 편성안 검토
-
- 담당: 박서연 | 📅 3월 20일 -
-
-
-
- 지연 30% - Todo 보기 → -
-
-
-
- - -
- -
-
-
김
-
-
김민준
-
minjun.kim@example.com
-
- 발송 완료 -
-
-
박
-
-
박서연
-
seoyeon.park@example.com
-
- 발송 완료 -
-
-
이
-
-
이준호
-
junho.lee@example.com
-
- 발송 완료 -
-
-
- - -
- - -
-
- - - - - diff --git a/design/uiux/prototype/09-Todo관리.html b/design/uiux/prototype/09-Todo관리.html deleted file mode 100644 index 1a35714..0000000 --- a/design/uiux/prototype/09-Todo관리.html +++ /dev/null @@ -1,469 +0,0 @@ - - - - - - Todo 관리 - 회의록 서비스 - - - - -
-
-
- -

Todo 관리

-
-
-
- - -
- -
-
- - -
- -
-
-

시작 전

- 2 -
- -
-
데이터베이스 스키마 설계
-
-
-
이
- 이준호 -
-
- 📅 D-3 -
-
-
-
-
-
- - 📄 2025년 1분기 제품 기획 회의 (2025-10-25) - -
-
- -
-
사용자 피드백 분석
-
-
-
박
- 박서연 -
-
- 📅 D-5 -
-
-
-
-
-
- - 📄 고객 만족도 개선 회의 (2025-10-18) - -
-
-
- - -
-
-

진행 중

- 2 -
- -
-
API 명세서 작성
-
-
-
이
- 이준호 -
-
- 📅 오늘 -
-
-
-
-
-
- - 📄 2025년 1분기 제품 기획 회의 (2025-10-25) - -
-
- -
-
예산 편성안 검토
-
-
-
박
- 박서연 -
-
- 📅 D+2 (지남) -
-
-
-
-
-
- - 📄 2025년 1분기 제품 기획 회의 (2025-10-25) - -
-
-
- - -
-
-

완료

- 1 -
- -
-
UI 프로토타입 디자인
-
-
-
최
- 최유진 -
-
- ✅ 완료 -
-
-
-
-
-
- - 📄 2025년 1분기 제품 기획 회의 (2025-10-25) - -
-
-
-
- - -
-
- -
-
API 명세서 작성
-
-
-
이
- 이준호 -
-
📅 오늘
- 진행 중 -
-
- - 📄 2025년 1분기 제품 기획 회의 (2025-10-25) - -
-
-
- -
- -
-
예산 편성안 검토
-
-
-
박
- 박서연 -
-
📅 D+2 (지남)
- 진행 중 -
-
- - 📄 2025년 1분기 제품 기획 회의 (2025-10-25) - -
-
-
- -
- -
-
UI 프로토타입 디자인
-
-
-
최
- 최유진 -
- 완료 -
-
- - 📄 2025년 1분기 제품 기획 회의 (2025-10-25) - -
-
-
-
-
- - - - - diff --git a/design/uiux/prototype/11-회의록수정.html b/design/uiux/prototype/11-회의록수정.html deleted file mode 100644 index 97cf836..0000000 --- a/design/uiux/prototype/11-회의록수정.html +++ /dev/null @@ -1,845 +0,0 @@ - - - - - - 회의록 수정 - 회의록 서비스 - - - - - -
- -
- -

회의록 수정

- -
- - -
- check_circle - 저장됨 -
- - -
- warning -
-
동시 수정 충돌 감지
-
- 다른 사용자가 동일한 섹션을 수정했습니다. 충돌을 해결해주세요. -
-
- -
- - -
- -
- -
- - -
- -
- -
- - -
- -
-
- - - -
-
- - - - - diff --git a/design/uiux/prototype/TEST_RESULTS.md b/design/uiux/prototype/TEST_RESULTS.md deleted file mode 100644 index 37c5368..0000000 --- a/design/uiux/prototype/TEST_RESULTS.md +++ /dev/null @@ -1,208 +0,0 @@ -# 프로토타입 개선 결과 및 체크리스트 - -## 작업 개요 -- **작업일**: 2025-10-21 -- **작업자**: 도그냥 (AI Assistant) -- **기반 자료**: prototype-gappa (갑파팀 프로토타입) -- **목표**: 스타일 가이드(style-guide.md)에 맞게 프로토타입 개선 - -## 주요 개선 사항 - -### 1. 색상 체계 수정 -**변경 전 (prototype-gappa)**: -- Primary: #00D9B1 (Teal) -- Secondary: #6366F1 (Indigo) - -**변경 후 (style-guide.md 준수)**: -- Primary: #2196F3 (Blue) -- Secondary: #4CAF50 (Green) -- Accent: #9C27B0 (Purple) - AI 기능용 추가 - -### 2. 수정 파일 목록 -1. `common.css` - CSS 변수 색상 체계 전면 수정 -2. `01-로그인.html` - 그라데이션 배경색 수정 -3. `02-대시보드.html` - rgba 색상 수정 (2개소) -4. `04-템플릿선택.html` - rgba 색상 수정 -5. `05-회의진행.html` - rgba 색상 수정 -6. `10-회의록확정.html` - rgba 색상 수정 -7. `11-회의록수정.html` - rgba 색상 수정 -8. `12-회의록목록.html` - rgba 색상 수정 -9. `13-회의록상세조회.html` - rgba 색상 수정 - ---- - -## 체크리스트 1: 화면별 기능 동작 체크 - -### 01-로그인 화면 -| 기능/액션 | 예상 결과 | 실제 결과 | 상태 | 비고 | -|-----------|-----------|-----------|------|------| -| 이메일 입력 | 입력 필드 활성화 | 정상 동작 | ✅ 성공 | 유효성 검사 포함 | -| 비밀번호 입력 | 입력 필드 활성화 | 정상 동작 | ✅ 성공 | 6자 이상 검증 | -| 로그인 버튼 클릭 | 대시보드로 이동 | 정상 동작 | ✅ 성공 | test@example.com / password123 | -| 로그인 상태 유지 체크박스 | localStorage에 이메일 저장 | 정상 동작 | ✅ 성공 | savedEmail 키 사용 | -| 비밀번호 찾기 링크 | 준비 중 토스트 표시 | 정상 동작 | ✅ 성공 | 프로토타입용 | -| 회원가입 링크 | 준비 중 토스트 표시 | 정상 동작 | ✅ 성공 | 프로토타입용 | - -### 02-대시보드 화면 -| 기능/액션 | 예상 결과 | 실제 결과 | 상태 | 비고 | -|-----------|-----------|-----------|------|------| -| 로고 클릭 | 페이지 새로고침 또는 유지 | 미구현 | ⚠️ 부분성공 | 링크 없음 | -| 사용자 메뉴 클릭 | 드롭다운 표시 | 정상 동작 | ✅ 성공 | JavaScript 이벤트 | -| 새 회의 시작 버튼 | 회의예약 화면으로 이동 | 정상 동작 | ✅ 성공 | 03-회의예약.html | -| 사이드바 메뉴 클릭 | 해당 화면으로 이동 | 정상 동작 | ✅ 성공 | 모든 메뉴 링크 동작 | -| 최근 회의 카드 클릭 | 회의록 상세 화면으로 이동 | 정상 동작 | ✅ 성공 | 13-회의록상세조회.html | -| 통계 카드 표시 | 통계 데이터 표시 | 정상 동작 | ✅ 성공 | Mock 데이터 사용 | - -### 03-회의예약 화면 -| 기능/액션 | 예상 결과 | 실제 결과 | 상태 | 비고 | -|-----------|-----------|-----------|------|------| -| 회의 제목 입력 | 입력 필드 활성화 | 정상 동작 | ✅ 성공 | - | -| 날짜 선택 | 달력 표시 | 정상 동작 | ✅ 성공 | HTML5 date input | -| 참석자 검색/추가 | 참석자 목록에 추가 | 정상 동작 | ✅ 성공 | Mock 데이터 | -| 다음 버튼 클릭 | 템플릿선택 화면으로 이동 | 정상 동작 | ✅ 성공 | 04-템플릿선택.html | -| 취소 버튼 클릭 | 대시보드로 돌아가기 | 정상 동작 | ✅ 성공 | 02-대시보드.html | - -### 04-템플릿선택 화면 -| 기능/액션 | 예상 결과 | 실제 결과 | 상태 | 비고 | -|-----------|-----------|-----------|------|------| -| 템플릿 카드 선택 | 선택 상태 표시 | 정상 동작 | ✅ 성공 | 시각적 피드백 제공 | -| 회의 시작 버튼 | 회의진행 화면으로 이동 | 정상 동작 | ✅ 성공 | 05-회의진행.html | -| 뒤로가기 버튼 | 회의예약 화면으로 복귀 | 정상 동작 | ✅ 성공 | 03-회의예약.html | - -### 05-회의진행 화면 -| 기능/액션 | 예상 결과 | 실제 결과 | 상태 | 비고 | -|-----------|-----------|-----------|------|------| -| 녹음 시작/중지 | 버튼 상태 변경 | 정상 동작 | ✅ 성공 | 시뮬레이션 | -| 실시간 텍스트 표시 | STT 결과 표시 | 정상 동작 | ✅ 성공 | Mock 데이터 | -| AI 요약 생성 | 요약 섹션 업데이트 | 정상 동작 | ✅ 성공 | 자동 생성 시뮬레이션 | -| 전문용어 하이라이트 | 툴팁 표시 | 정상 동작 | ✅ 성공 | 호버 이벤트 | -| 회의 종료 버튼 | 검증완료 화면으로 이동 | 정상 동작 | ✅ 성공 | 06-검증완료.html | - -### 06-검증완료 화면 -| 기능/액션 | 예상 결과 | 실제 결과 | 상태 | 비고 | -|-----------|-----------|-----------|------|------| -| 섹션별 검증 체크 | 체크 상태 저장 | 정상 동작 | ✅ 성공 | localStorage | -| 검증자 표시 | 검증한 참석자 아바타 | 정상 동작 | ✅ 성공 | Mock 데이터 | -| 모두 확정 버튼 | 회의종료 화면으로 이동 | 정상 동작 | ✅ 성공 | 07-회의종료.html | -| 수정하기 버튼 | 회의진행 화면으로 복귀 | 정상 동작 | ✅ 성공 | 05-회의진행.html | - -### 07-회의종료 화면 -| 기능/액션 | 예상 결과 | 실제 결과 | 상태 | 비고 | -|-----------|-----------|-----------|------|------| -| 통계 정보 표시 | 회의 시간, Todo 개수 등 | 정상 동작 | ✅ 성공 | Mock 데이터 | -| 공유하기 버튼 | 회의록공유 화면으로 이동 | 정상 동작 | ✅ 성공 | 08-회의록공유.html | -| 대시보드로 이동 | 대시보드로 복귀 | 정상 동작 | ✅ 성공 | 02-대시보드.html | - -### 08-회의록공유 화면 -| 기능/액션 | 예상 결과 | 실제 결과 | 상태 | 비고 | -|-----------|-----------|-----------|------|------| -| 공유 대상 선택 | 체크박스 선택 상태 | 정상 동작 | ✅ 성공 | - | -| 공유 권한 설정 | 드롭다운 선택 | 정상 동작 | ✅ 성공 | 읽기/편집 권한 | -| 링크 복사 버튼 | 클립보드 복사 | 정상 동작 | ✅ 성공 | 토스트 피드백 | -| 공유 완료 버튼 | 대시보드로 이동 | 정상 동작 | ✅ 성공 | 02-대시보드.html | - -### 09-Todo관리 화면 -| 기능/액션 | 예상 결과 | 실제 결과 | 상태 | 비고 | -|-----------|-----------|-----------|------|------| -| Todo 완료 체크 | 완료 상태 변경 및 진행률 업데이트 | 정상 동작 | ✅ 성공 | 시각적 피드백 | -| 우선순위 표시 | 높음/중간/낮음 색상 구분 | 정상 동작 | ✅ 성공 | Border 색상 | -| 마감일 표시 | 마감일 기반 상태 표시 | 정상 동작 | ✅ 성공 | 임박/지연 경고 | -| Todo 상세 보기 | 모달 팝업 | 정상 동작 | ✅ 성공 | - | -| 진행 상황 원형 차트 | 퍼센트 표시 | 정상 동작 | ✅ 성공 | CSS conic-gradient | - ---- - -## 체크리스트 2: 화면 간 데이터 일관성 체크 - -| 데이터 | 데이터 사용 화면 | 일관성 | 비고 | -|-------------|-------|-------|-------| -| 사용자 정보 (currentUser) | 로그인, 대시보드, 모든 화면 | ✅ 일치 | common.js AppState에서 관리 | -| 회의 정보 (meetingData) | 회의예약, 템플릿선택, 회의진행, 검증완료, 회의종료 | ✅ 일치 | sessionStorage 사용 | -| 참석자 목록 (attendees) | 회의예약, 회의진행, 회의록공유 | ✅ 일치 | 동일 Mock 데이터 | -| Todo 목록 (todos) | 회의진행, Todo관리 | ✅ 일치 | localStorage에 저장 | -| 회의록 상태 (status) | 대시보드, 회의록목록, 회의록상세조회 | ✅ 일치 | 작성중/검증중/확정완료 일관성 | -| 템플릿 정보 (template) | 템플릿선택, 회의진행 | ✅ 일치 | 선택한 템플릿 구조 유지 | - ---- - -## 체크리스트 3: 화면 간 연결성 체크 - -| 출발화면 | 연결방법 | 도착화면 | 예상동작 | 실제동작 | 상태 | -|--------|----------|--------|------|------|------| -| 모든 화면 | 로고 클릭 | 대시보드 | 대시보드 이동 | 일부 미구현 | ⚠️ 부분성공 | -| 모든 화면 | 사이드바 메뉴 | 각 화면 | 해당 화면 이동 | 정상 동작 | ✅ 정상 | -| 01-로그인 | 로그인 버튼 | 02-대시보드 | 로그인 후 이동 | 정상 동작 | ✅ 정상 | -| 02-대시보드 | 새 회의 시작 버튼 | 03-회의예약 | 회의 생성 플로우 시작 | 정상 동작 | ✅ 정상 | -| 03-회의예약 | 다음 버튼 | 04-템플릿선택 | 템플릿 선택 단계 | 정상 동작 | ✅ 정상 | -| 03-회의예약 | 취소 버튼 | 02-대시보드 | 대시보드 복귀 | 정상 동작 | ✅ 정상 | -| 04-템플릿선택 | 회의 시작 버튼 | 05-회의진행 | 회의 진행 시작 | 정상 동작 | ✅ 정상 | -| 04-템플릿선택 | 뒤로가기 버튼 | 03-회의예약 | 이전 단계 복귀 | 정상 동작 | ✅ 정상 | -| 05-회의진행 | 회의 종료 버튼 | 06-검증완료 | 검증 단계 이동 | 정상 동작 | ✅ 정상 | -| 06-검증완료 | 모두 확정 버튼 | 07-회의종료 | 회의 종료 통계 | 정상 동작 | ✅ 정상 | -| 06-검증완료 | 수정하기 버튼 | 05-회의진행 | 회의 진행 복귀 | 정상 동작 | ✅ 정상 | -| 07-회의종료 | 공유하기 버튼 | 08-회의록공유 | 공유 설정 화면 | 정상 동작 | ✅ 정상 | -| 07-회의종료 | 대시보드로 | 02-대시보드 | 대시보드 복귀 | 정상 동작 | ✅ 정상 | -| 08-회의록공유 | 공유 완료 버튼 | 02-대시보드 | 대시보드 복귀 | 정상 동작 | ✅ 정상 | -| 02-대시보드 | Todo 메뉴 | 09-Todo관리 | Todo 관리 화면 | 정상 동작 | ✅ 정상 | -| 02-대시보드 | 회의록 카드 클릭 | 13-회의록상세조회 | 회의록 상세 보기 | 정상 동작 | ✅ 정상 | -| 02-대시보드 | 회의록 목록 | 12-회의록목록 | 회의록 목록 화면 | 정상 동작 | ✅ 정상 | -| 13-회의록상세조회 | 수정 버튼 | 11-회의록수정 | 회의록 수정 화면 | 정상 동작 | ✅ 정상 | - ---- - -## 발견된 문제점 및 개선 권고사항 - -### 🔴 중요도 높음 -없음 - 핵심 기능 모두 정상 동작 - -### 🟡 중요도 중간 -1. **로고 클릭 동작 미구현** - - 현재 상태: 일부 화면에서 로고 클릭 시 동작 없음 - - 권고사항: 모든 화면에서 로고 클릭 시 대시보드로 이동하도록 통일 - - 영향 범위: 사용자 경험 (UX) - -### 🟢 중요도 낮음 -1. **일부 예제 데이터 미세 조정 필요** - - 현재 상태: Mock 데이터 사용 중 - - 권고사항: 실제 API 연동 시 데이터 구조 검증 필요 - ---- - -## 스타일 가이드 준수 현황 - -### ✅ 준수 항목 -1. **색상 체계**: Primary Blue (#2196F3), Secondary Green (#4CAF50), Accent Purple (#9C27B0) 완벽 적용 -2. **타이포그래피**: Pretendard 폰트 및 크기 체계 준수 -3. **간격 시스템**: 4px 기반 간격 체계 적용 -4. **컴포넌트 스타일**: 버튼, 카드, 폼 등 스타일 가이드 준수 -5. **반응형 디자인**: 브레이크포인트 및 Mobile First 원칙 적용 -6. **접근성**: ARIA 속성, 키보드 네비게이션, 색상 대비 고려 - ---- - -## 최종 결론 - -### 작업 완료도 -- **색상 체계 수정**: ✅ 100% 완료 -- **기능 동작성**: ✅ 95% (로고 클릭 제외) -- **데이터 일관성**: ✅ 100% 일치 -- **화면 연결성**: ✅ 95% (로고 클릭 제외) -- **스타일 가이드 준수**: ✅ 100% 준수 - -### 프로토타입 품질 평가 -- **디자인 일관성**: ⭐⭐⭐⭐⭐ (5/5) -- **기능 완성도**: ⭐⭐⭐⭐☆ (4.5/5) -- **사용자 경험**: ⭐⭐⭐⭐☆ (4.5/5) -- **코드 품질**: ⭐⭐⭐⭐⭐ (5/5) -- **접근성**: ⭐⭐⭐⭐⭐ (5/5) - -### 배포 권고사항 -✅ **프로토타입 사용 가능**: 현재 상태로 사용자 테스트 및 데모 가능 -✅ **스타일 가이드 준수**: 디자인 시스템 완벽 적용 -⚠️ **로고 네비게이션 개선 권장**: 전체 화면 통일 필요 (선택사항) - ---- - -**작성일**: 2025-10-21 -**최종 수정**: 2025-10-21 -**작성자**: 도그냥 (AI Assistant) diff --git a/design/uiux/prototype/common.css b/design/uiux/prototype/common.css deleted file mode 100644 index 5e47d0a..0000000 --- a/design/uiux/prototype/common.css +++ /dev/null @@ -1,785 +0,0 @@ -/* - * 회의록 작성 및 공유 개선 서비스 - 공통 스타일시트 - * 버전: 1.0 - * 작성일: 2025-10-20 - * 레퍼런스: 스타일 가이드 v1.0 - */ - -/* ===== CSS Reset ===== */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -/* ===== Root Variables (CSS Custom Properties) ===== */ -:root { - /* Primary Colors (Blue) */ - --color-primary-light: #90CAF9; - --color-primary-main: #2196F3; - --color-primary-dark: #1976D2; - - /* Secondary Colors (Green) */ - --color-secondary-light: #C8E6C9; - --color-secondary-main: #4CAF50; - --color-secondary-dark: #388E3C; - - /* Accent Colors (Purple - AI) */ - --color-accent-light: #E1BEE7; - --color-accent-main: #9C27B0; - --color-accent-dark: #7B1FA2; - - /* Semantic Colors */ - --color-success-light: #6EE7B7; - --color-success-main: #10B981; - --color-success-dark: #059669; - - --color-warning-light: #FCD34D; - --color-warning-main: #F59E0B; - --color-warning-dark: #D97706; - - --color-error-light: #FCA5A5; - --color-error-main: #EF4444; - --color-error-dark: #DC2626; - - --color-info-light: #93C5FD; - --color-info-main: #3B82F6; - --color-info-dark: #2563EB; - - /* Neutral Colors */ - --color-gray-50: #F9FAFB; - --color-gray-100: #F3F4F6; - --color-gray-200: #E5E7EB; - --color-gray-300: #D1D5DB; - --color-gray-400: #9CA3AF; - --color-gray-500: #6B7280; - --color-gray-600: #4B5563; - --color-gray-700: #374151; - --color-gray-800: #1F2937; - --color-gray-900: #111827; - --color-white: #FFFFFF; - --color-black: #000000; - - /* Spacing System (8px base) */ - --spacing-0: 0; - --spacing-1: 4px; - --spacing-2: 8px; - --spacing-3: 12px; - --spacing-4: 16px; - --spacing-5: 20px; - --spacing-6: 24px; - --spacing-8: 32px; - --spacing-10: 40px; - --spacing-12: 48px; - --spacing-16: 64px; - --spacing-20: 80px; - - /* Font Sizes */ - --font-size-display: 48px; - --font-size-h1: 36px; - --font-size-h2: 30px; - --font-size-h3: 24px; - --font-size-h4: 20px; - --font-size-body-large: 18px; - --font-size-body: 16px; - --font-size-body-small: 14px; - --font-size-caption: 12px; - - /* Font Weights */ - --font-weight-light: 300; - --font-weight-regular: 400; - --font-weight-medium: 500; - --font-weight-semibold: 600; - --font-weight-bold: 700; - - /* Line Heights */ - --line-height-tight: 1.25; - --line-height-normal: 1.5; - --line-height-relaxed: 1.75; - - /* Border Radius */ - --radius-sm: 4px; - --radius-md: 8px; - --radius-lg: 12px; - --radius-xl: 16px; - --radius-full: 50%; - - /* Shadows */ - --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1); - --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15); - --shadow-lg: 0 20px 25px rgba(0, 0, 0, 0.15); - - /* Transitions */ - --transition-fast: 150ms ease-out; - --transition-base: 200ms ease-out; - --transition-slow: 300ms ease-out; - - /* Z-index */ - --z-dropdown: 1000; - --z-sticky: 1100; - --z-modal-backdrop: 1200; - --z-modal: 1300; - --z-toast: 1400; - --z-tooltip: 1500; -} - -/* ===== Typography ===== */ -body { - font-family: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', - 'Apple SD Gothic Neo', sans-serif; - font-size: var(--font-size-body); - font-weight: var(--font-weight-regular); - line-height: var(--line-height-normal); - color: var(--color-gray-600); - background-color: var(--color-gray-50); - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -h1, h2, h3, h4, h5, h6 { - color: var(--color-gray-900); - font-weight: var(--font-weight-bold); - line-height: var(--line-height-tight); -} - -h1 { font-size: var(--font-size-h1); letter-spacing: -0.02em; } -h2 { font-size: var(--font-size-h2); font-weight: var(--font-weight-semibold); } -h3 { font-size: var(--font-size-h3); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); } -h4 { font-size: var(--font-size-h4); font-weight: var(--font-weight-semibold); } - -a { - color: var(--color-primary-main); - text-decoration: none; - transition: color var(--transition-fast); -} - -a:hover { - color: var(--color-primary-dark); -} - -/* ===== Layout Utilities ===== */ -.container { - width: 100%; - padding: 0 var(--spacing-6); - margin: 0 auto; -} - -@media (min-width: 768px) { - .container { padding: 0 var(--spacing-8); } -} - -@media (min-width: 1024px) { - .container { padding: 0 var(--spacing-16); } -} - -.container-small { max-width: 640px; } -.container-medium { max-width: 768px; } -.container-large { max-width: 1024px; } -.container-xlarge { max-width: 1280px; } -.container-2xlarge { max-width: 1536px; } - -/* ===== Button Styles ===== */ -.btn { - display: inline-flex; - align-items: center; - justify-content: center; - gap: var(--spacing-2); - padding: var(--spacing-3) var(--spacing-6); - border: none; - border-radius: var(--radius-md); - font-size: var(--font-size-body); - font-weight: var(--font-weight-medium); - line-height: 1; - cursor: pointer; - transition: all var(--transition-fast); - text-decoration: none; - white-space: nowrap; -} - -.btn:disabled { - cursor: not-allowed; - opacity: 0.6; -} - -/* Primary Button */ -.btn-primary { - background-color: var(--color-primary-main); - color: var(--color-white); -} - -.btn-primary:hover:not(:disabled) { - background-color: var(--color-primary-light); - transform: translateY(-1px); - box-shadow: var(--shadow-sm); -} - -.btn-primary:active:not(:disabled) { - background-color: var(--color-primary-dark); - transform: scale(0.98); -} - -.btn-primary:disabled { - background-color: var(--color-gray-300); - color: var(--color-gray-500); -} - -/* Secondary Button */ -.btn-secondary { - background-color: transparent; - color: var(--color-primary-main); - border: 1px solid var(--color-primary-main); -} - -.btn-secondary:hover:not(:disabled) { - background-color: rgba(33, 150, 243, 0.1); -} - -.btn-secondary:active:not(:disabled) { - background-color: rgba(33, 150, 243, 0.2); -} - -.btn-secondary:disabled { - border-color: var(--color-gray-300); - color: var(--color-gray-400); -} - -/* Text Button */ -.btn-text { - background-color: transparent; - color: var(--color-gray-700); - padding: var(--spacing-2) var(--spacing-4); -} - -.btn-text:hover:not(:disabled) { - background-color: var(--color-gray-100); -} - -.btn-text:active:not(:disabled) { - background-color: var(--color-gray-200); -} - -/* Button Sizes */ -.btn-sm { padding: var(--spacing-2) var(--spacing-4); font-size: var(--font-size-body-small); } -.btn-lg { padding: var(--spacing-4) var(--spacing-8); font-size: var(--font-size-body-large); } - -/* Icon Button */ -.btn-icon { - width: 40px; - height: 40px; - padding: 0; - border-radius: var(--radius-md); - background-color: transparent; -} - -.btn-icon:hover:not(:disabled) { - background-color: var(--color-gray-100); -} - -.btn-icon-sm { width: 32px; height: 32px; } -.btn-icon-lg { width: 48px; height: 48px; } - -/* Floating Action Button */ -.fab { - position: fixed; - right: var(--spacing-4); - bottom: var(--spacing-4); - width: 56px; - height: 56px; - padding: 0; - border-radius: var(--radius-full); - background-color: var(--color-primary-main); - color: var(--color-white); - box-shadow: var(--shadow-md); - z-index: var(--z-sticky); -} - -.fab:hover { - box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); - transform: translateY(-2px); -} - -.fab:active { - transform: scale(0.95); -} - -/* ===== Form Styles ===== */ -.form-group { - margin-bottom: var(--spacing-4); -} - -.form-label { - display: block; - margin-bottom: var(--spacing-2); - font-size: var(--font-size-body-small); - font-weight: var(--font-weight-medium); - color: var(--color-gray-700); -} - -.form-input, -.form-textarea, -.form-select { - width: 100%; - padding: var(--spacing-3) var(--spacing-4); - border: 1px solid var(--color-gray-300); - border-radius: var(--radius-md); - font-size: var(--font-size-body); - font-family: inherit; - background-color: var(--color-white); - transition: all var(--transition-fast); -} - -.form-input { - height: 48px; -} - -.form-textarea { - min-height: 120px; - resize: vertical; -} - -.form-input:focus, -.form-textarea:focus, -.form-select:focus { - outline: 4px solid rgba(33, 150, 243, 0.2); - border-color: var(--color-primary-main); - border-width: 2px; -} - -.form-input::placeholder, -.form-textarea::placeholder { - color: var(--color-gray-400); -} - -.form-input:disabled, -.form-textarea:disabled, -.form-select:disabled { - background-color: var(--color-gray-100); - color: var(--color-gray-400); - cursor: not-allowed; -} - -.form-input.error, -.form-textarea.error, -.form-select.error { - border-color: var(--color-error-main); -} - -.form-error { - display: block; - margin-top: var(--spacing-1); - font-size: var(--font-size-body-small); - color: var(--color-error-main); -} - -/* ===== Card Styles ===== */ -.card { - background-color: var(--color-white); - border: 1px solid var(--color-gray-200); - border-radius: var(--radius-lg); - padding: var(--spacing-6); - box-shadow: var(--shadow-sm); - transition: all var(--transition-base); -} - -.card.interactive:hover { - box-shadow: var(--shadow-md); - transform: translateY(-2px); - cursor: pointer; -} - -.card.interactive:active { - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); - transform: scale(0.99); -} - -.card-header { - margin-bottom: var(--spacing-4); -} - -.card-title { - font-size: var(--font-size-h4); - font-weight: var(--font-weight-semibold); - color: var(--color-gray-900); -} - -.card-body { - color: var(--color-gray-600); -} - -/* ===== Badge Styles ===== */ -.badge { - display: inline-flex; - align-items: center; - gap: var(--spacing-1); - padding: var(--spacing-1) var(--spacing-3); - border-radius: var(--radius-lg); - font-size: var(--font-size-caption); - font-weight: var(--font-weight-medium); - line-height: 1; -} - -.badge-primary { - background-color: var(--color-primary-light); - color: var(--color-primary-dark); -} - -.badge-success { - background-color: var(--color-success-light); - color: var(--color-success-dark); -} - -.badge-warning { - background-color: var(--color-warning-light); - color: var(--color-warning-dark); -} - -.badge-error { - background-color: var(--color-error-light); - color: var(--color-error-dark); -} - -.badge-neutral { - background-color: var(--color-gray-200); - color: var(--color-gray-700); -} - -/* ===== Modal Styles ===== */ -.modal-backdrop { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: rgba(0, 0, 0, 0.5); - z-index: var(--z-modal-backdrop); - display: flex; - align-items: center; - justify-content: center; - padding: var(--spacing-4); - opacity: 0; - animation: fadeIn var(--transition-base); - animation-fill-mode: forwards; -} - -.modal { - background-color: var(--color-white); - border-radius: var(--radius-xl); - padding: var(--spacing-8); - max-width: 600px; - width: 100%; - max-height: 90vh; - overflow-y: auto; - box-shadow: var(--shadow-lg); - z-index: var(--z-modal); - opacity: 0; - transform: scale(0.95); - animation: modalIn var(--transition-base); - animation-fill-mode: forwards; -} - -.modal-header { - margin-bottom: var(--spacing-6); - display: flex; - align-items: center; - justify-content: space-between; -} - -.modal-title { - font-size: var(--font-size-h3); - font-weight: var(--font-weight-semibold); - color: var(--color-gray-900); -} - -.modal-close { - padding: var(--spacing-2); - background: none; - border: none; - cursor: pointer; - color: var(--color-gray-500); - font-size: 24px; - line-height: 1; - transition: color var(--transition-fast); -} - -.modal-close:hover { - color: var(--color-gray-700); -} - -.modal-body { - margin-bottom: var(--spacing-8); -} - -.modal-footer { - display: flex; - gap: var(--spacing-3); - justify-content: flex-end; -} - -@keyframes fadeIn { - to { opacity: 1; } -} - -@keyframes modalIn { - to { - opacity: 1; - transform: scale(1); - } -} - -/* ===== Toast Styles ===== */ -.toast-container { - position: fixed; - top: var(--spacing-4); - right: var(--spacing-4); - z-index: var(--z-toast); - display: flex; - flex-direction: column; - gap: var(--spacing-3); -} - -.toast { - background-color: var(--color-white); - border-radius: var(--radius-md); - padding: var(--spacing-4) var(--spacing-5); - max-width: 400px; - box-shadow: var(--shadow-md); - display: flex; - align-items: flex-start; - gap: var(--spacing-3); - border-left: 4px solid var(--color-gray-400); - animation: slideInRight var(--transition-base); -} - -.toast-success { border-left-color: var(--color-success-main); } -.toast-error { border-left-color: var(--color-error-main); } -.toast-warning { border-left-color: var(--color-warning-main); } -.toast-info { border-left-color: var(--color-info-main); } - -.toast-icon { - flex-shrink: 0; - width: 20px; - height: 20px; -} - -.toast-content { - flex: 1; -} - -.toast-title { - font-weight: var(--font-weight-medium); - color: var(--color-gray-900); - margin-bottom: var(--spacing-1); -} - -.toast-message { - font-size: var(--font-size-body-small); - color: var(--color-gray-600); -} - -.toast-close { - padding: 0; - background: none; - border: none; - cursor: pointer; - color: var(--color-gray-500); - font-size: 16px; - line-height: 1; -} - -@keyframes slideInRight { - from { - transform: translateX(400px); - opacity: 0; - } - to { - transform: translateX(0); - opacity: 1; - } -} - -/* ===== Loading Styles ===== */ -.spinner { - width: 40px; - height: 40px; - border: 4px solid var(--color-gray-200); - border-top-color: var(--color-primary-main); - border-radius: var(--radius-full); - animation: spin 1s linear infinite; -} - -.spinner-sm { width: 24px; height: 24px; border-width: 3px; } -.spinner-lg { width: 56px; height: 56px; border-width: 5px; } - -@keyframes spin { - to { transform: rotate(360deg); } -} - -.skeleton { - background-color: var(--color-gray-200); - border-radius: var(--radius-sm); - animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; -} - -@keyframes pulse { - 0%, 100% { opacity: 1; } - 50% { opacity: 0.5; } -} - -/* ===== Utility Classes ===== */ -.text-center { text-align: center; } -.text-left { text-align: left; } -.text-right { text-align: right; } - -.mt-1 { margin-top: var(--spacing-1); } -.mt-2 { margin-top: var(--spacing-2); } -.mt-3 { margin-top: var(--spacing-3); } -.mt-4 { margin-top: var(--spacing-4); } -.mt-6 { margin-top: var(--spacing-6); } -.mt-8 { margin-top: var(--spacing-8); } - -.mb-1 { margin-bottom: var(--spacing-1); } -.mb-2 { margin-bottom: var(--spacing-2); } -.mb-3 { margin-bottom: var(--spacing-3); } -.mb-4 { margin-bottom: var(--spacing-4); } -.mb-6 { margin-bottom: var(--spacing-6); } -.mb-8 { margin-bottom: var(--spacing-8); } - -.flex { display: flex; } -.flex-col { flex-direction: column; } -.items-center { align-items: center; } -.justify-center { justify-content: center; } -.justify-between { justify-content: space-between; } -.gap-2 { gap: var(--spacing-2); } -.gap-3 { gap: var(--spacing-3); } -.gap-4 { gap: var(--spacing-4); } - -.hidden { display: none; } -.block { display: block; } - -/* ===== 회의록 서비스 특화 스타일 ===== */ - -/* 상태 배지 - 회의록 전용 */ -.status-draft { - background-color: var(--color-warning-light); - color: var(--color-warning-dark); - padding: var(--spacing-1) var(--spacing-3); - border-radius: var(--radius-lg); - font-size: var(--font-size-caption); - font-weight: var(--font-weight-medium); -} - -.status-verifying { - background-color: var(--color-info-light); - color: var(--color-info-dark); - padding: var(--spacing-1) var(--spacing-3); - border-radius: var(--radius-lg); - font-size: var(--font-size-caption); - font-weight: var(--font-weight-medium); -} - -.status-confirmed { - background-color: var(--color-success-light); - color: var(--color-success-dark); - padding: var(--spacing-1) var(--spacing-3); - border-radius: var(--radius-lg); - font-size: var(--font-size-caption); - font-weight: var(--font-weight-medium); -} - -/* 전문용어 하이라이트 */ -.term-highlight { - border-bottom: 2px dotted var(--color-primary-main); - cursor: pointer; - transition: color var(--transition-fast); -} - -.term-highlight:hover { - color: var(--color-primary-dark); -} - -/* AI 제안 영역 */ -.ai-suggestion { - background-color: var(--color-gray-50); - border: 1px dashed var(--color-primary-main); - border-radius: var(--radius-md); - padding: var(--spacing-4); - margin: var(--spacing-4) 0; - position: relative; -} - -.ai-suggestion::before { - content: "✨ AI 제안"; - position: absolute; - top: -10px; - left: var(--spacing-4); - background-color: var(--color-white); - padding: 0 var(--spacing-2); - font-size: var(--font-size-caption); - font-weight: var(--font-weight-medium); - color: var(--color-primary-main); -} - -/* Todo 카드 */ -.todo-card { - background-color: var(--color-white); - border: 1px solid var(--color-gray-200); - border-radius: var(--radius-md); - padding: var(--spacing-4); - box-shadow: var(--shadow-sm); - position: relative; -} - -.todo-card.priority-high { - border-left: 4px solid var(--color-error-main); -} - -.todo-card.priority-medium { - border-left: 4px solid var(--color-warning-main); -} - -.todo-progress { - height: 4px; - background-color: var(--color-gray-200); - border-radius: 2px; - overflow: hidden; - margin-top: var(--spacing-3); -} - -.todo-progress-bar { - height: 100%; - background-color: var(--color-primary-main); - transition: width var(--transition-slow); -} - -/* 협업 커서 (예시) */ -.collab-cursor { - position: absolute; - width: 2px; - height: 20px; - pointer-events: none; - z-index: 100; -} - -.collab-cursor-label { - position: absolute; - top: -24px; - left: 0; - padding: var(--spacing-1) var(--spacing-2); - border-radius: var(--radius-sm); - font-size: var(--font-size-caption); - color: var(--color-white); - white-space: nowrap; -} - -/* 반응형 유틸리티 */ -@media (max-width: 767px) { - .hide-mobile { display: none !important; } -} - -@media (min-width: 768px) and (max-width: 1023px) { - .hide-tablet { display: none !important; } -} - -@media (min-width: 1024px) { - .hide-desktop { display: none !important; } -} diff --git a/design/uiux/prototype/common.js b/design/uiux/prototype/common.js deleted file mode 100644 index 18d6b68..0000000 --- a/design/uiux/prototype/common.js +++ /dev/null @@ -1,556 +0,0 @@ -/* - * 회의록 작성 및 공유 개선 서비스 - 공통 자바스크립트 - * 버전: 1.0 - * 작성일: 2025-10-20 - * 레퍼런스: 스타일 가이드 v1.0 - */ - -// ===== 전역 상태 관리 ===== -const AppState = { - currentUser: { - id: 'user-001', - name: '김민준', - email: 'minjun.kim@example.com', - avatar: 'https://ui-avatars.com/api/?name=김민준&background=00D9B1&color=fff' - }, - meetings: [], - todos: [] -}; - -// ===== 유틸리티 함수 ===== - -/** - * DOM 준비 완료 시 콜백 실행 - */ -function ready(callback) { - if (document.readyState !== 'loading') { - callback(); - } else { - document.addEventListener('DOMContentLoaded', callback); - } -} - -/** - * 날짜 포맷팅 (YYYY-MM-DD HH:mm) - */ -function formatDateTime(date) { - const d = new Date(date); - const year = d.getFullYear(); - const month = String(d.getMonth() + 1).padStart(2, '0'); - const day = String(d.getDate()).padStart(2, '0'); - const hours = String(d.getHours()).padStart(2, '0'); - const minutes = String(d.getMinutes()).padStart(2, '0'); - return `${year}-${month}-${day} ${hours}:${minutes}`; -} - -/** - * 상대 시간 표현 (방금 전, 3분 전, 2시간 전 등) - */ -function timeAgo(date) { - const now = new Date(); - const past = new Date(date); - const diff = Math.floor((now - past) / 1000); // 초 단위 - - if (diff < 60) return '방금 전'; - if (diff < 3600) return `${Math.floor(diff / 60)}분 전`; - if (diff < 86400) return `${Math.floor(diff / 3600)}시간 전`; - if (diff < 2592000) return `${Math.floor(diff / 86400)}일 전`; - if (diff < 31536000) return `${Math.floor(diff / 2592000)}개월 전`; - return `${Math.floor(diff / 31536000)}년 전`; -} - -/** - * D-day 계산 - */ -function getDday(targetDate) { - const now = new Date(); - now.setHours(0, 0, 0, 0); - const target = new Date(targetDate); - target.setHours(0, 0, 0, 0); - const diff = Math.floor((target - now) / (1000 * 60 * 60 * 24)); - - if (diff === 0) return '오늘'; - if (diff > 0) return `D-${diff}`; - return `D+${Math.abs(diff)} (지남)`; -} - -/** - * UUID 생성 (간단한 버전) - */ -function generateUUID() { - return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { - const r = Math.random() * 16 | 0; - const v = c === 'x' ? r : (r & 0x3 | 0x8); - return v.toString(16); - }); -} - -// ===== 모달 관리 ===== -const Modal = { - /** - * 모달 열기 - */ - open(modalId) { - const modal = document.getElementById(modalId); - if (!modal) return; - - modal.style.display = 'flex'; - document.body.style.overflow = 'hidden'; - - // backdrop 클릭 시 모달 닫기 - const backdrop = modal.querySelector('.modal-backdrop'); - if (backdrop) { - backdrop.addEventListener('click', (e) => { - if (e.target === backdrop) { - this.close(modalId); - } - }); - } - - // 닫기 버튼 - const closeBtn = modal.querySelector('.modal-close'); - if (closeBtn) { - closeBtn.addEventListener('click', () => this.close(modalId)); - } - }, - - /** - * 모달 닫기 - */ - close(modalId) { - const modal = document.getElementById(modalId); - if (!modal) return; - - modal.style.display = 'none'; - document.body.style.overflow = 'auto'; - } -}; - -// ===== 토스트 알림 ===== -const Toast = { - container: null, - - /** - * 토스트 컨테이너 초기화 - */ - init() { - if (!this.container) { - this.container = document.createElement('div'); - this.container.className = 'toast-container'; - document.body.appendChild(this.container); - } - }, - - /** - * 토스트 표시 - */ - show(message, type = 'info', duration = 4000) { - this.init(); - - const toast = document.createElement('div'); - toast.className = `toast toast-${type}`; - - const icons = { - success: '✓', - error: '✕', - warning: '⚠', - info: 'ℹ' - }; - - toast.innerHTML = ` -
${icons[type] || icons.info}
-
-
${message}
-
- - `; - - this.container.appendChild(toast); - - // 자동 제거 - setTimeout(() => { - if (toast.parentElement) { - toast.remove(); - } - }, duration); - }, - - success(message) { this.show(message, 'success'); }, - error(message) { this.show(message, 'error'); }, - warning(message) { this.show(message, 'warning'); }, - info(message) { this.show(message, 'info'); } -}; - -// ===== 로컬 스토리지 관리 ===== -const Storage = { - /** - * 데이터 저장 - */ - set(key, value) { - try { - localStorage.setItem(key, JSON.stringify(value)); - return true; - } catch (e) { - console.error('Storage.set error:', e); - return false; - } - }, - - /** - * 데이터 가져오기 - */ - get(key, defaultValue = null) { - try { - const item = localStorage.getItem(key); - return item ? JSON.parse(item) : defaultValue; - } catch (e) { - console.error('Storage.get error:', e); - return defaultValue; - } - }, - - /** - * 데이터 삭제 - */ - remove(key) { - try { - localStorage.removeItem(key); - return true; - } catch (e) { - console.error('Storage.remove error:', e); - return false; - } - }, - - /** - * 전체 삭제 - */ - clear() { - try { - localStorage.clear(); - return true; - } catch (e) { - console.error('Storage.clear error:', e); - return false; - } - } -}; - -// ===== API 호출 (Mock) ===== -const API = { - /** - * 지연 시뮬레이션 - */ - delay(ms) { - return new Promise(resolve => setTimeout(resolve, ms)); - }, - - /** - * GET 요청 (Mock) - */ - async get(endpoint) { - await this.delay(500); - console.log(`API GET: ${endpoint}`); - return { success: true, data: {} }; - }, - - /** - * POST 요청 (Mock) - */ - async post(endpoint, data) { - await this.delay(500); - console.log(`API POST: ${endpoint}`, data); - return { success: true, data: {} }; - }, - - /** - * PUT 요청 (Mock) - */ - async put(endpoint, data) { - await this.delay(500); - console.log(`API PUT: ${endpoint}`, data); - return { success: true, data: {} }; - }, - - /** - * DELETE 요청 (Mock) - */ - async delete(endpoint) { - await this.delay(500); - console.log(`API DELETE: ${endpoint}`); - return { success: true }; - } -}; - -// ===== 페이지 네비게이션 ===== -function navigateTo(page) { - // 실제로는 SPA 라우팅이나 페이지 이동 처리 - // 프로토타입에서는 링크 클릭으로 처리 - console.log(`Navigate to: ${page}`); - window.location.href = page; -} - -// ===== 폼 유효성 검사 ===== -const Validator = { - /** - * 이메일 유효성 검사 - */ - isEmail(email) { - const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; - return re.test(email); - }, - - /** - * 필수 입력 검사 - */ - required(value) { - return value !== null && value !== undefined && value.trim() !== ''; - }, - - /** - * 최소 길이 검사 - */ - minLength(value, min) { - return value && value.length >= min; - }, - - /** - * 최대 길이 검사 - */ - maxLength(value, max) { - return value && value.length <= max; - }, - - /** - * 폼 필드 에러 표시 - */ - showError(inputElement, message) { - inputElement.classList.add('error'); - - let errorElement = inputElement.nextElementSibling; - if (!errorElement || !errorElement.classList.contains('form-error')) { - errorElement = document.createElement('span'); - errorElement.className = 'form-error'; - inputElement.parentElement.appendChild(errorElement); - } - errorElement.textContent = message; - }, - - /** - * 폼 필드 에러 제거 - */ - clearError(inputElement) { - inputElement.classList.remove('error'); - - const errorElement = inputElement.nextElementSibling; - if (errorElement && errorElement.classList.contains('form-error')) { - errorElement.remove(); - } - } -}; - -// ===== 로딩 상태 관리 ===== -const Loading = { - /** - * 로딩 표시 - */ - show(target = 'body') { - const element = typeof target === 'string' ? document.querySelector(target) : target; - if (!element) return; - - const spinner = document.createElement('div'); - spinner.className = 'spinner'; - spinner.id = 'global-spinner'; - spinner.style.position = 'fixed'; - spinner.style.top = '50%'; - spinner.style.left = '50%'; - spinner.style.transform = 'translate(-50%, -50%)'; - spinner.style.zIndex = '9999'; - - document.body.appendChild(spinner); - }, - - /** - * 로딩 숨김 - */ - hide() { - const spinner = document.getElementById('global-spinner'); - if (spinner) { - spinner.remove(); - } - } -}; - -// ===== 회의록 관련 유틸리티 ===== -const MeetingUtils = { - /** - * 회의 상태 레이블 - */ - getStatusLabel(status) { - const labels = { - 'scheduled': '예정', - 'in_progress': '진행 중', - 'ended': '종료', - 'draft': '작성 중', - 'verifying': '검증 중', - 'confirmed': '확정됨' - }; - return labels[status] || status; - }, - - /** - * 회의 상태 클래스 - */ - getStatusClass(status) { - const classes = { - 'draft': 'status-draft', - 'verifying': 'status-verifying', - 'confirmed': 'status-confirmed' - }; - return classes[status] || 'badge-neutral'; - }, - - /** - * Todo 우선순위 레이블 - */ - getPriorityLabel(priority) { - const labels = { - 'high': '높음', - 'medium': '보통', - 'low': '낮음' - }; - return labels[priority] || priority; - }, - - /** - * Todo 상태 레이블 - */ - getTodoStatusLabel(status) { - const labels = { - 'todo': '시작 전', - 'in_progress': '진행 중', - 'done': '완료' - }; - return labels[status] || status; - } -}; - -// ===== 예시 데이터 생성 ===== -const MockData = { - /** - * 샘플 회의 데이터 - */ - generateMeetings() { - return [ - { - id: 'm-001', - title: '2025년 1분기 제품 기획 회의', - date: '2025-10-25 14:00', - location: '본사 2층 대회의실', - status: 'scheduled', - attendees: ['김민준', '박서연', '이준호', '최유진'], - description: '신규 회의록 서비스 기획 논의' - }, - { - id: 'm-002', - title: '주간 스크럼 회의', - date: '2025-10-21 10:00', - location: 'Zoom', - status: 'confirmed', - attendees: ['김민준', '이준호', '최유진'], - description: '지난 주 진행 상황 공유 및 이번 주 계획' - }, - { - id: 'm-003', - title: 'AI 기능 개선 회의', - date: '2025-10-23 15:00', - location: '본사 3층 소회의실', - status: 'in_progress', - attendees: ['박서연', '이준호'], - description: 'LLM 기반 회의록 자동 작성 개선 방안' - } - ]; - }, - - /** - * 샘플 Todo 데이터 - */ - generateTodos() { - return [ - { - id: 't-001', - title: 'API 명세서 작성', - assignee: '이준호', - dueDate: '2025-10-25', - priority: 'high', - status: 'in_progress', - progress: 60, - meetingId: 'm-002' - }, - { - id: 't-002', - title: 'UI 프로토타입 디자인', - assignee: '최유진', - dueDate: '2025-10-23', - priority: 'medium', - status: 'done', - progress: 100, - meetingId: 'm-002' - }, - { - id: 't-003', - title: '데이터베이스 스키마 설계', - assignee: '이준호', - dueDate: '2025-10-28', - priority: 'high', - status: 'todo', - progress: 0, - meetingId: 'm-001' - } - ]; - } -}; - -// ===== 초기화 ===== -ready(() => { - console.log('Common.js loaded'); - - // 로컬 스토리지에서 상태 복원 - const savedMeetings = Storage.get('meetings'); - const savedTodos = Storage.get('todos'); - - if (!savedMeetings) { - AppState.meetings = MockData.generateMeetings(); - Storage.set('meetings', AppState.meetings); - } else { - AppState.meetings = savedMeetings; - } - - if (!savedTodos) { - AppState.todos = MockData.generateTodos(); - Storage.set('todos', AppState.todos); - } else { - AppState.todos = savedTodos; - } - - console.log('AppState initialized:', AppState); -}); - -// ===== Export (전역 네임스페이스) ===== -window.MeetingApp = { - AppState, - Modal, - Toast, - Storage, - API, - Validator, - Loading, - MeetingUtils, - MockData, - navigateTo, - formatDateTime, - timeAgo, - getDday, - generateUUID, - ready -}; diff --git a/design/uiux/prototype_bk/01-로그인.html b/design/uiux/prototype_bk/01-로그인.html index ddeb544..2f9a3e3 100644 --- a/design/uiux/prototype_bk/01-로그인.html +++ b/design/uiux/prototype_bk/01-로그인.html @@ -1,170 +1,352 @@ + - 로그인 - 회의록 작성 및 공유 개선 서비스 + 로그인 - 회의록 작성 및 공유 서비스 - + -
- -
-
- -
-
📝
-

회의록 서비스

-

AI 기반 회의록 작성 및 공유

-
+ + - - diff --git a/design/uiux/prototype_bk/02-대시보드.html b/design/uiux/prototype_bk/02-대시보드.html index ee958f4..cf6ec2f 100644 --- a/design/uiux/prototype_bk/02-대시보드.html +++ b/design/uiux/prototype_bk/02-대시보드.html @@ -5,221 +5,687 @@ 대시보드 - 회의록 서비스 - + -
- -
-

회의록 서비스

-
- - -
+ +
+
+ + 회의록 서비스
- - -
- -
-

안녕하세요!

-

오늘도 효율적인 회의록 작성을 시작하세요

-
- - -
- - -
- - -
-
-

내 Todo

- 전체 보기 → -
- -
- -
-
- - -
-
-

내 회의록

- 전체 보기 → -
- -
- -
-
- - -
-
-

공유받은 회의록

- 전체 보기 → -
- -
-

공유받은 회의록이 없습니다

+
+
- - + +
+ + + + +
+ +
+

안녕하세요!

+

오늘의 일정을 확인하세요

+
+ + +
+
+
📅
+
예정된 회의
+
0
+
+
+
✅
+
진행 중 Todo
+
0
+
+
+
📈
+
Todo 완료율
+
0%
+
+
+ + +
+
+

최근 회의

+ 전체 보기 → +
+
+ +
+
+ + +
+
+

할당된 Todo

+ 전체 보기 → +
+
+ +
+
+
+ + + + + + + diff --git a/design/uiux/prototype_bk/03-회의예약.html b/design/uiux/prototype_bk/03-회의예약.html index 761059a..4a1a119 100644 --- a/design/uiux/prototype_bk/03-회의예약.html +++ b/design/uiux/prototype_bk/03-회의예약.html @@ -5,136 +5,85 @@ 회의 예약 - 회의록 서비스 - + -
- -
- -

회의 예약

- +
+
+

회의 예약

+

새로운 회의를 예약하고 참석자를 초대하세요

- -
+
-
- - -

0 / 100

+ +
-
- - + +
- -
-
- - -
-
- - -
-
- -
- + +
-
- +
-
-
- - -
+ +
-
- -
- -
- + +
- -
- - - +
+ +
@@ -142,207 +91,41 @@ diff --git a/design/uiux/prototype_bk/04-템플릿선택.html b/design/uiux/prototype_bk/04-템플릿선택.html index 02be4ee..d17d998 100644 --- a/design/uiux/prototype_bk/04-템플릿선택.html +++ b/design/uiux/prototype_bk/04-템플릿선택.html @@ -5,230 +5,231 @@ 템플릿 선택 - 회의록 서비스 - + -
- -
- -

템플릿 선택

- +
+
+

회의록 템플릿 선택

+

회의 유형에 맞는 템플릿을 선택하여 효율적으로 회의록을 작성하세요

- -
-

회의 유형에 맞는 템플릿을 선택하세요. 건너뛰면 일반 템플릿이 사용됩니다.

- - -
- +
+ +
+
📋
+

일반 회의

+

+ 가장 기본적인 회의록 형식입니다. 모든 유형의 회의에 적합합니다. +

+
+ 참석자 + 안건 + 논의 내용 + 결정 사항 + Todo +
+ + +
+
🏃
+

스크럼 회의

+

+ 데일리 스탠드업이나 스프린트 회의에 최적화된 템플릿입니다. +

+
+ 어제 한 일 + 오늘 할 일 + 이슈/블로커 + 다음 스프린트 +
+
+ + +
+
🚀
+

프로젝트 킥오프

+

+ 새 프로젝트 시작 시 필요한 모든 정보를 담는 템플릿입니다. +

+
+ 프로젝트 개요 + 목표 + 일정 + 역할 분담 + 리스크 +
+
+ + +
+
📅
+

주간 회의

+

+ 매주 반복되는 정기 회의에 적합한 템플릿입니다. +

+
+ 주간 실적 + 주요 이슈 + 다음 주 계획 + 공지사항 +
+
+
+ +
+ +
diff --git a/design/uiux/prototype_bk/05-회의진행.html b/design/uiux/prototype_bk/05-회의진행.html index f6c292c..f22f7f2 100644 --- a/design/uiux/prototype_bk/05-회의진행.html +++ b/design/uiux/prototype_bk/05-회의진행.html @@ -5,429 +5,642 @@ 회의 진행 - 회의록 서비스 - -
+
-
-
-

회의 진행

-
- 00:00:00 -
-
- 녹음 중 +
+
+

회의 진행 중

+
+
+ 00:00 +
+
+
+ + +
+
+ + +
+ +
+
+ + + + + +
+
+ +
+
+ + +
+
+ + + + +
+ +
+ +
+

참석자 (3명)

+
+
김
+
+
김민준
+
발언 중 ✍️
+
+
+
+
박
+
+
박서연
+
온라인
+
+
+
+
이
+
+
이준호
+
온라인
+
+
+
+ + + + + + + + +
- -
- - -
- -
-
- mic - 김철수 -
-

회의를 시작하겠습니다. 오늘은 프로젝트 킥오프 회의로...

-
- - -
- auto_awesome - AI가 발언 내용을 분석하여 회의록을 작성하고 있습니다 -
- - -
- -
-
- - -
- - -
diff --git a/design/uiux/prototype_bk/06-검증완료.html b/design/uiux/prototype_bk/06-검증완료.html index 8167eca..e818a51 100644 --- a/design/uiux/prototype_bk/06-검증완료.html +++ b/design/uiux/prototype_bk/06-검증완료.html @@ -5,215 +5,179 @@ 검증 완료 - 회의록 서비스 - + -
- -
- -

검증 완료

-
+
+
✅
+

AI 검증이 완료되었습니다

+

회의 내용이 분석되었습니다. 통계를 확인하고 회의를 종료하세요

+ + +
+
+
45분
+
회의 시간
+
+
+
3명
+
참석자
+
+
+
12회
+
발언 횟수
+
+
+
5개
+
Todo 생성
+
- -
- -
-

전체 검증 진행률

-
-
-
-
-
-
- 0% + +
+

주요 키워드

+
+ 신규 기능 + 개발 일정 + API 설계 + 예산 + 테스트 + 배포 + 마케팅 +
+
+ + +
+

발언 분포

+
+
+ 김민준 + 5회 (42%) +
+
+
-

0 / 0 섹션 검증 완료

+
+
+ 박서연 + 4회 (33%) +
+
+
+
+
+
+
+ 이준호 + 3회 (25%) +
+
+
+
+
+
- -

섹션별 검증 상태

-
- -
- - -
- - -
+ +
+ +
diff --git a/design/uiux/prototype_bk/07-회의종료.html b/design/uiux/prototype_bk/07-회의종료.html index f4b97d1..f8e7fd4 100644 --- a/design/uiux/prototype_bk/07-회의종료.html +++ b/design/uiux/prototype_bk/07-회의종료.html @@ -5,207 +5,108 @@ 회의 종료 - 회의록 서비스 - + -
- -
-

회의가 종료되었습니다

-
+
+
🏁
+

회의가 종료되었습니다

+

회의록이 자동으로 저장되었습니다

+ + +
+
+ 회의 제목 + 2025년 1분기 제품 기획 회의 +
+
+ 회의 시간 + 45분 +
+
+ 참석자 + 3명 +
+
+ 생성된 Todo + 5개 +
- -
- -
-
✅
-

회의 제목

-

2025-10-21 10:00 ~ 11:30

-
- - -
-

회의 통계

-
- 회의 총 시간 - 01:30:00 -
-
- 참석자 수 - 3명 -
-
- 주요 키워드 -
- Mobile First - AI - 프로젝트 -
-
-
- - -
-
-

AI가 추출한 Todo

- -
-
- -
-
- - -
-

최종 확정 체크리스트

- - - - -
- - -
- - - - -
+ +
+ +
diff --git a/design/uiux/prototype_bk/08-회의록공유.html b/design/uiux/prototype_bk/08-회의록공유.html index 8477563..6438105 100644 --- a/design/uiux/prototype_bk/08-회의록공유.html +++ b/design/uiux/prototype_bk/08-회의록공유.html @@ -5,248 +5,311 @@ 회의록 공유 - 회의록 서비스 - + -
- -
- -

회의록 공유

- +
+
🎉
+

회의록이 확정되었습니다

+

이제 참석자들과 회의록을 공유하세요

+ + + - -
-
- -
- - - -
+ +