DOCS/troubleshooting/250825_happybell80_UI개선및개인화준비.md

프론트엔드 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 표시
• 빠른 액션 버튼

변경 후:

// 새로운 구조
- 대화 기록 섹션 (세션별 카드)
- 수행한 작업 섹션 (슬랙 브리핑 등)
- 예정된 작업 섹션 (확장 가능한 설정 UI)

시간 표시 헬퍼 함수 추가:

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. 체크박스 설정:

   interface TaskSettings {
     includeEmail: boolean;
     includeNews: boolean;
     includeCalendar: boolean;
     includeSlack: boolean;
     keywords: string[];
   }
   

3. 키워드 관리:

   • 태그 형태 표시 (#AI #React #DevOps)
   • 추가: 입력창 + 엔터 또는 + 버튼
   • 삭제: X 버튼

4. 로컬 스토리지 저장:

   localStorage.setItem('task_settings', JSON.stringify(settings));
   

목업 데이터

• 일일 브리핑: AI, 개발, React 키워드
• 주간 리포트: 프로젝트, 성과, KPI 키워드

---

오후 4시 15분

브리핑 시스템 구현 확인

rb8001 크론 엔드포인트

파일: rb8001/main.py:229

@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. 체력 회복 아이템:

   - 에너지 드링크: 체력 +20
   - 에너지 충전: 체력 +50
   - 클릭시 즉시 사용 및 수량 감소
   

3. 체력바 UI:

   • 위치: 입력창 바로 위 (황금비 38.2% 너비)
   • 투명도 배경 (backdrop-blur)
   • 색상: 빨강-핑크 그라디언트

---

오후 10시 00분

6. 브리핑 스케줄 개인화

파일: src/components/activity-panel.tsx

추가된 설정:

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

---

문서 끝