docs: UI 대폭 개선 및 개인화 시스템 준비 작업 문서화
- ActivityPanel 타임라인 재구성 - SkillsItemsPanel 레벨 기반 시스템 전환 - 개인화 설정 UI 구현 (체크박스, 키워드 관리) - 브리핑 시스템 분석 및 개선점 도출 - 목업 데이터로 백엔드 연동 준비
This commit is contained in:
happybell80
parent
e3fdc36f2d
commit
e5bf338974
235
troubleshooting/250825_happybell80_UI개선및개인화준비.md
Normal file
235
troubleshooting/250825_happybell80_UI개선및개인화준비.md
Normal file
@ -0,0 +1,235 @@
|
||||
# 프론트엔드 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 토큰 자동 갱신 미구현**
|
||||
|
||||
---
|
||||
|
||||
## 성과
|
||||
|
||||
### ✅ 완료된 작업
|
||||
|
||||
1. **UI 대폭 개선**
|
||||
- ActivityPanel: 타임라인 형태로 재구성
|
||||
- SkillsItemsPanel: 레벨 기반 시스템으로 전환
|
||||
- 전반적인 디자인 통일성 향상
|
||||
|
||||
2. **개인화 준비**
|
||||
- 작업별 설정 UI 구현
|
||||
- 키워드 관리 시스템
|
||||
- 로컬 스토리지 활용 (목업)
|
||||
|
||||
3. **시스템 분석**
|
||||
- 브리핑 시스템 전체 플로우 파악
|
||||
- 개선 필요사항 도출
|
||||
- 구현 우선순위 정리
|
||||
|
||||
### 📋 후속 작업 필요
|
||||
|
||||
1. **백엔드 API 구축**
|
||||
- user_preferences 테이블 생성
|
||||
- 키워드 기반 필터링 로직
|
||||
- 사용자별 설정 저장/조회 API
|
||||
|
||||
2. **서비스 연동**
|
||||
- skill-email DB 설정 수정
|
||||
- Gmail 토큰 자동 갱신
|
||||
- 사용자 목록 DB 연동
|
||||
|
||||
---
|
||||
|
||||
## 교훈
|
||||
|
||||
### 1. 개인화의 핵심
|
||||
- **사용자 맥락 이해**: 이전 대화, 관심사, 패턴
|
||||
- **동적 콘텐츠 큐레이션**: 키워드 기반 필터링
|
||||
- **피드백 루프**: 사용자 반응 수집 및 개선
|
||||
|
||||
### 2. UI/UX 설계 원칙
|
||||
- **점진적 공개**: 필요한 설정만 노출
|
||||
- **직관적 위치**: 관련 기능 근처에 설정 배치
|
||||
- **즉각적 피드백**: 로컬 스토리지로 빠른 반응
|
||||
|
||||
### 3. 시스템 통합
|
||||
- **프론트-백엔드 분리**: 목업으로 먼저 구현
|
||||
- **단계적 구현**: UI → API → DB 순서
|
||||
- **확장 가능한 구조**: 새로운 서비스 추가 용이
|
||||
|
||||
### 4. 기술적 선택
|
||||
- **React Hooks 활용**: useState, useEffect로 상태 관리
|
||||
- **타입스크립트**: 인터페이스로 데이터 구조 명확화
|
||||
- **로컬 스토리지**: 백엔드 없이도 동작하는 목업
|
||||
|
||||
---
|
||||
|
||||
## 다음 단계
|
||||
|
||||
1. **즉시 (서버 작업)**
|
||||
- skill-email DB 설정 변경
|
||||
- Gmail 토큰 갱신 크론잡 설정
|
||||
|
||||
2. **단기 (백엔드)**
|
||||
- user_preferences API 구현
|
||||
- 키워드 필터링 로직 개발
|
||||
|
||||
3. **중기 (통합)**
|
||||
- 프론트엔드-백엔드 연결
|
||||
- 실시간 동기화 구현
|
||||
|
||||
4. **장기 (고도화)**
|
||||
- ML 기반 패턴 학습
|
||||
- 자동 키워드 추천
|
||||
|
||||
---
|
||||
|
||||
**커밋 해시**: d893c51
|
||||
**Git 저장소**: https://git.ro-being.com/ivada_Ro-being/frontend-customer
|
||||
|
||||
---
|
||||
|
||||
**문서 끝**
|
||||
Loading…
x
Reference in New Issue
Block a user