22557e7132
- 7-8월 초기 구축 문서 12개를 _archive/troubleshooting/2025_07-08_initial_setup/로 이동 - book/300_architecture/390_human_in_the_loop_intent_learning.md를 journey/research/intent_classification/로 이동 (개발 여정 문서) - 빈 폴더 제거 (journey/assets/*)
322 lines
7.9 KiB
Markdown
322 lines
7.9 KiB
Markdown
# 프론트엔드 UI 대폭 개선 및 개인화 시스템 준비
|
|
|
|
## 작성일: 2025-08-25
|
|
## 작성자: happybell80
|
|
## 관련 서비스: frontend-customer, rb8001, skill-email, skill-news
|
|
|
|
---
|
|
|
|
## 오후 3시 00분
|
|
|
|
### 작업 배경
|
|
|
|
**브리핑 시스템 분석**:
|
|
- rb8001이 매일 오전 9시 슬랙 DM으로 브리핑 전송
|
|
- 이메일 섹션 빈약 (Gmail 토큰 만료 문제)
|
|
- 모든 사용자에게 동일한 콘텐츠
|
|
- 개인화 부재
|
|
|
|
**개선 필요사항 도출**:
|
|
1. 사용자별 맞춤 콘텐츠
|
|
2. 관심 키워드 기반 필터링
|
|
3. 대화 히스토리 활용
|
|
4. 프론트엔드 설정 UI 필요
|
|
|
|
---
|
|
|
|
## 오후 3시 30분
|
|
|
|
### UI 대폭 개선 작업
|
|
|
|
#### 1. ActivityPanel 재구성
|
|
|
|
**파일**: `src/components/activity-panel.tsx`
|
|
|
|
**변경 전**:
|
|
- 단순 활동 목록
|
|
- 메모리/CPU 표시
|
|
- 빠른 액션 버튼
|
|
|
|
**변경 후**:
|
|
```typescript
|
|
// 새로운 구조
|
|
- 대화 기록 섹션 (세션별 카드)
|
|
- 수행한 작업 섹션 (슬랙 브리핑 등)
|
|
- 예정된 작업 섹션 (확장 가능한 설정 UI)
|
|
```
|
|
|
|
**시간 표시 헬퍼 함수 추가**:
|
|
```typescript
|
|
function getRelativeTime(date: Date): string {
|
|
if (diffMins < 1) return '방금 전';
|
|
if (diffMins < 60) return `${diffMins}분 전`;
|
|
if (diffHours < 24) return `${diffHours}시간 전`;
|
|
if (diffDays < 7) return `${diffDays}일 전`;
|
|
return date.toLocaleDateString('ko-KR');
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 오후 3시 45분
|
|
|
|
### 2. SkillsItemsPanel 전면 개편
|
|
|
|
**파일**: `src/components/skills-items-panel.tsx`
|
|
|
|
#### 스킬 탭 변경
|
|
- **진행도 바 제거**: 레벨 도달 시 활성화 방식으로 변경
|
|
- **레벨별 순서 배치**: Lv.1 ~ Lv.20
|
|
- **잠금 상태 시각화**: 흐리게 + 자물쇠 아이콘
|
|
|
|
#### 아이템 탭 재구성
|
|
**카테고리 분리**:
|
|
1. **권한 설정** (상단 강조)
|
|
- Gmail 연동: 빨강→주황 그라디언트
|
|
- Slack 연동: 보라→핑크 그라디언트
|
|
- Calendar 연동: 파랑→시안 그라디언트
|
|
|
|
2. **소모품** (3열 그리드)
|
|
- 경험치 부스터
|
|
- 스킬 포인트
|
|
- 에너지 충전
|
|
|
|
3. **장비** (리스트)
|
|
- 메모리 확장
|
|
- 프로세서 업그레이드
|
|
|
|
---
|
|
|
|
## 오후 4시 00분
|
|
|
|
### 3. 개인화 설정 UI 구현
|
|
|
|
**파일**: `src/components/activity-panel.tsx`
|
|
|
|
#### 예정된 작업 카드 확장 기능
|
|
|
|
**구현 내용**:
|
|
1. **클릭 시 설정 패널 펼쳐짐**
|
|
2. **체크박스 설정**:
|
|
```typescript
|
|
interface TaskSettings {
|
|
includeEmail: boolean;
|
|
includeNews: boolean;
|
|
includeCalendar: boolean;
|
|
includeSlack: boolean;
|
|
keywords: string[];
|
|
}
|
|
```
|
|
|
|
3. **키워드 관리**:
|
|
- 태그 형태 표시 (#AI #React #DevOps)
|
|
- 추가: 입력창 + 엔터 또는 + 버튼
|
|
- 삭제: X 버튼
|
|
|
|
4. **로컬 스토리지 저장**:
|
|
```typescript
|
|
localStorage.setItem('task_settings', JSON.stringify(settings));
|
|
```
|
|
|
|
#### 목업 데이터
|
|
- **일일 브리핑**: AI, 개발, React 키워드
|
|
- **주간 리포트**: 프로젝트, 성과, KPI 키워드
|
|
|
|
---
|
|
|
|
## 오후 4시 15분
|
|
|
|
### 브리핑 시스템 구현 확인
|
|
|
|
#### rb8001 크론 엔드포인트
|
|
**파일**: `rb8001/main.py:229`
|
|
```python
|
|
@app.post("/api/cron/daily-summary")
|
|
async def cron_daily_summary(request: Request):
|
|
# dm_skill.send_daily_summary_dm() 호출
|
|
```
|
|
|
|
#### DM 스킬
|
|
**파일**: `rb8001/app/skills/dm_skill.py:384`
|
|
- 사용자별 Gmail Primary 탭 이메일 5개 조회
|
|
- skill-news에서 뉴스 가져오기
|
|
- LLM 요약 생성
|
|
- Slack DM 전송
|
|
|
|
#### 문제점 확인
|
|
1. **하드코딩된 사용자 목록** (3명)
|
|
2. **skill-email DB 설정**: auth_db → main_db 변경 필요
|
|
3. ~~**Gmail 토큰 자동 갱신 미구현**~~ (✅ 2025-08-27 해결완료)
|
|
|
|
---
|
|
|
|
## 오후 8시 00분
|
|
|
|
### 4. 로그인 상태별 UI 분기 처리
|
|
|
|
**파일**: `src/pages/game-dashboard.tsx`
|
|
|
|
**구현 내용**:
|
|
1. **로그인 전 UI**:
|
|
- LoginPromptCard: "로그인이 필요합니다" 메시지
|
|
- LockedSkillsPanel: 잠긴 스킬 미리보기
|
|
- 로그인 버튼 제거 (헤더 버튼만 사용)
|
|
|
|
2. **로그인 후 UI**:
|
|
- 정상적인 ActivityPanel
|
|
- 정상적인 SkillsItemsPanel
|
|
|
|
---
|
|
|
|
## 오후 9시 00분
|
|
|
|
### 5. 체력 시스템 구현
|
|
|
|
**새 파일**: `src/contexts/health-context.tsx`
|
|
|
|
**주요 기능**:
|
|
1. **체력 관리**:
|
|
- 최대 체력: 100
|
|
- 채팅 응답시: -5 체력
|
|
- 자동 회복: 1분마다 +2
|
|
- 로컬 스토리지 저장
|
|
|
|
2. **체력 회복 아이템**:
|
|
```typescript
|
|
- 에너지 드링크: 체력 +20
|
|
- 에너지 충전: 체력 +50
|
|
- 클릭시 즉시 사용 및 수량 감소
|
|
```
|
|
|
|
3. **체력바 UI**:
|
|
- 위치: 입력창 바로 위 (황금비 38.2% 너비)
|
|
- 투명도 배경 (backdrop-blur)
|
|
- 색상: 빨강-핑크 그라디언트
|
|
|
|
---
|
|
|
|
## 오후 10시 00분
|
|
|
|
### 6. 브리핑 스케줄 개인화
|
|
|
|
**파일**: `src/components/activity-panel.tsx`
|
|
|
|
**추가된 설정**:
|
|
```typescript
|
|
interface TaskSettings {
|
|
// 기존 설정...
|
|
scheduleType: 'everyday' | 'weekdays' | 'weekends' | 'custom';
|
|
scheduleDays?: string[]; // ['월', '화', '수', '목', '금', '토', '일']
|
|
scheduleTime: string; // '09:00' 형식
|
|
}
|
|
```
|
|
|
|
**UI 개선**:
|
|
- 매일/평일/주말/사용자지정 선택
|
|
- 30분 단위 시간 설정 (00:00 ~ 23:30)
|
|
- 요일별 개별 선택 가능
|
|
|
|
---
|
|
|
|
## 성과
|
|
|
|
### ✅ 완료된 작업
|
|
|
|
1. **UI 대폭 개선**
|
|
- ActivityPanel: 타임라인 형태로 재구성
|
|
- SkillsItemsPanel: 레벨 기반 시스템으로 전환
|
|
- 전반적인 디자인 통일성 향상
|
|
- 로그인 상태별 UI 분기 처리
|
|
|
|
2. **개인화 시스템**
|
|
- 작업별 설정 UI 구현
|
|
- 키워드 관리 시스템
|
|
- 브리핑 스케줄 개인화 (시간/요일)
|
|
- 로컬 스토리지 활용 (목업)
|
|
|
|
3. **게임화 요소**
|
|
- 체력 시스템 구현
|
|
- 체력 회복 아이템 추가
|
|
- 체력바 UI (황금비 적용)
|
|
- 아이템 사용 인터랙션
|
|
|
|
4. **시스템 분석**
|
|
- 브리핑 시스템 전체 플로우 파악
|
|
- 개선 필요사항 도출
|
|
- 구현 우선순위 정리
|
|
|
|
### 📋 후속 작업 필요
|
|
|
|
1. **백엔드 API 구축**
|
|
- user_preference 테이블 생성
|
|
- 키워드 기반 필터링 로직
|
|
- 사용자별 설정 저장/조회 API
|
|
|
|
2. **서비스 연동**
|
|
- skill-email DB 설정 수정
|
|
- ~~Gmail 토큰 자동 갱신~~ (✅ 2025-08-27 해결완료)
|
|
- 사용자 목록 DB 연동
|
|
|
|
---
|
|
|
|
## 교훈
|
|
|
|
### 1. 개인화의 핵심
|
|
- **사용자 맥락 이해**: 이전 대화, 관심사, 패턴
|
|
- **동적 콘텐츠 큐레이션**: 키워드 기반 필터링
|
|
- **피드백 루프**: 사용자 반응 수집 및 개선
|
|
|
|
### 2. UI/UX 설계 원칙
|
|
- **점진적 공개**: 필요한 설정만 노출
|
|
- **직관적 위치**: 관련 기능 근처에 설정 배치
|
|
- **즉각적 피드백**: 로컬 스토리지로 빠른 반응
|
|
|
|
### 3. 시스템 통합
|
|
- **프론트-백엔드 분리**: 목업으로 먼저 구현
|
|
- **단계적 구현**: UI → API → DB 순서
|
|
- **확장 가능한 구조**: 새로운 서비스 추가 용이
|
|
|
|
### 4. 기술적 선택
|
|
- **React Hooks 활용**: useState, useEffect로 상태 관리
|
|
- **타입스크립트**: 인터페이스로 데이터 구조 명확화
|
|
- **로컬 스토리지**: 백엔드 없이도 동작하는 목업
|
|
|
|
---
|
|
|
|
## 다음 단계
|
|
|
|
1. **즉시 (서버 작업)**
|
|
- skill-email DB 설정 변경
|
|
- ~~Gmail 토큰 갱신 크론잡 설정~~ (필요없음 - 자동갱신 구현됨)
|
|
|
|
2. **단기 (백엔드)**
|
|
- user_preference API 구현
|
|
- 키워드 필터링 로직 개발
|
|
|
|
3. **중기 (통합)**
|
|
- 프론트엔드-백엔드 연결
|
|
- 실시간 동기화 구현
|
|
|
|
4. **장기 (고도화)**
|
|
- ML 기반 패턴 학습
|
|
- 자동 키워드 추천
|
|
|
|
---
|
|
|
|
---
|
|
|
|
## 최종 커밋 정보
|
|
|
|
**주요 커밋들**:
|
|
- d893c51: 초기 UI 개선 및 개인화 준비
|
|
- 660364e: 로그인 상태에 따른 UI 분기 처리
|
|
- 04f67b5: 체력 시스템 구현
|
|
- 50cacc8: 브리핑 스케줄 개인화 기능 추가
|
|
- 9e6361d: 체력바 위치 및 디자인 개선
|
|
- 5c74941: 로그인 필요 메시지 위치 변경
|
|
|
|
**Git 저장소**: https://git.ro-being.com/ivada_Ro-being/frontend-customer
|
|
|
|
---
|
|
|
|
**문서 끝** |