docs: Gmail 아이템 UI 고급화 및 상태 영구 저장 트러블슈팅
- Gmail 아이템/스킬 시스템 UI 구현 - rb10508_micro 레벨 시스템 활성화 - Gmail 아이템 상태 영구 저장 문제 해결 - robeing-monitor API 연동 완료 - 교훈: UI와 DB 상태 동기화, OAuth 플로우 통합 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
happybell80
parent
6cff846ae3
commit
27edb9b0de
199
troubleshooting/250820_happybell80_Gmail아이템UI고급화및상태영구저장.md
Normal file
199
troubleshooting/250820_happybell80_Gmail아이템UI고급화및상태영구저장.md
Normal file
@ -0,0 +1,199 @@
|
||||
# Gmail 아이템 UI 고급화 및 상태 영구 저장
|
||||
|
||||
## 작성일: 2025-08-20
|
||||
## 작성자: happybell80
|
||||
## 관련 서비스: frontend-customer, rb10508_micro, robeing-monitor
|
||||
|
||||
---
|
||||
|
||||
## 오후 3시 30분
|
||||
|
||||
### Gmail 아이템/스킬 시스템 UI 구현
|
||||
|
||||
#### 요구사항
|
||||
- 인벤토리 열기 버튼 제거, Gmail 아이템 직접 표시
|
||||
- 레벨별 권한 시스템 (Lv.5 읽기, Lv.7 보내기, Lv.11 추적)
|
||||
- 스킬 트리 UI (게임 느낌)
|
||||
- 레벨 미달 시 잠금 표시
|
||||
|
||||
#### 구현 내용
|
||||
|
||||
1. **skills-items-panel.tsx 전면 개편**
|
||||
- Gmail 스킬 3개 추가 (읽기, 보내기, 추적)
|
||||
- 레벨별 잠금/해금 시각화
|
||||
- 호버 시 툴팁으로 설명 표시
|
||||
|
||||
2. **아이템 탭 개선**
|
||||
```typescript
|
||||
// Gmail 아이템 상태
|
||||
- locked: 회색 + 자물쇠 아이콘 (레벨 5 미만)
|
||||
- available: 파란색 + "활성화" 버튼
|
||||
- equipped: 초록색 + 체크 아이콘 + 애니메이션
|
||||
```
|
||||
|
||||
3. **레벨별 권한 표시**
|
||||
- 체크박스 형태로 권한 표시
|
||||
- 레벨 도달 시 체크 아이콘
|
||||
- 미달 시 경고 아이콘
|
||||
|
||||
---
|
||||
|
||||
## 오후 3시 50분
|
||||
|
||||
### rb10508_micro 레벨 시스템 활성화
|
||||
|
||||
#### 문제 상황
|
||||
- `/api/stats/{robing_id}` 엔드포인트가 비활성화 상태
|
||||
- 빈 객체만 반환하여 프론트엔드에서 레벨 확인 불가
|
||||
|
||||
#### 해결 방법
|
||||
|
||||
1. **endpoints.py 수정**
|
||||
```python
|
||||
@router.get("/stats/{robing_id}")
|
||||
async def get_stats(robing_id: str):
|
||||
# PostgreSQL 직접 연결
|
||||
conn = await asyncpg.connect(...)
|
||||
|
||||
# robing_stats 테이블 조회
|
||||
query = """
|
||||
SELECT level, experience, stat_points,
|
||||
memory, compute, empathy, leadership, ethics
|
||||
FROM robing_stats
|
||||
WHERE robeing_id = $1
|
||||
"""
|
||||
row = await conn.fetchrow(query, robing_id)
|
||||
```
|
||||
|
||||
2. **DB 레벨 설정**
|
||||
- rb10508_micro: 레벨 20으로 설정
|
||||
- 모든 Gmail 스킬 해금 상태
|
||||
|
||||
---
|
||||
|
||||
## 오후 4시 00분
|
||||
|
||||
### Gmail 아이템 상태 영구 저장 문제
|
||||
|
||||
#### 문제 상황
|
||||
- Gmail 아이템 "활성화" 클릭 → 임시로 equipped 상태
|
||||
- 새로고침 시 → available로 초기화
|
||||
- 원인: React state에만 저장, DB 미연동
|
||||
|
||||
#### 원인 분석
|
||||
|
||||
1. **임시 처리 코드**
|
||||
```typescript
|
||||
// 기존: 테스트용 임시 코드
|
||||
setTimeout(() => {
|
||||
setGmailStatus('equipped');
|
||||
toast({...});
|
||||
}, 2000);
|
||||
```
|
||||
|
||||
2. **DB 구조는 준비됨**
|
||||
- gmail_tokens 테이블: is_equipped, equipped_to 컬럼 존재
|
||||
- robeing-monitor 서비스: API 구현 완료 (포트 9024)
|
||||
|
||||
#### 해결 방법
|
||||
|
||||
1. **robeing-monitor API 연동**
|
||||
```typescript
|
||||
// 상태 조회
|
||||
const response = await fetch('/api/items/gmail', {
|
||||
headers: { 'X-User-Id': userId }
|
||||
});
|
||||
|
||||
// 장착 처리
|
||||
const equipResponse = await fetch(`/api/items/gmail/${userId}/equip`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ robeing_id: 'rb10508_micro' })
|
||||
});
|
||||
```
|
||||
|
||||
2. **OAuth 플로우 통합**
|
||||
- Gmail 토큰 확인
|
||||
- 없으면 OAuth 페이지로 리다이렉트
|
||||
- 있으면 바로 장착 진행
|
||||
|
||||
3. **상태 동기화**
|
||||
- 마운트 시 DB 상태 조회
|
||||
- 장착/해제 시 DB 업데이트
|
||||
- 새로고침해도 상태 유지
|
||||
|
||||
---
|
||||
|
||||
## 오후 4시 10분
|
||||
|
||||
### 최종 구현 완료
|
||||
|
||||
#### 구현된 기능
|
||||
|
||||
1. **상태 영구 저장**
|
||||
- DB에 is_equipped 상태 저장
|
||||
- 새로고침해도 상태 유지
|
||||
- robeing-monitor API와 완전 연동
|
||||
|
||||
2. **사용자 경험 개선**
|
||||
- 로딩 상태 표시 ("처리 중...")
|
||||
- 에러 처리 및 토스트 메시지
|
||||
- 장착/해제 버튼 동적 표시
|
||||
|
||||
3. **작동 흐름**
|
||||
```
|
||||
페이지 로드
|
||||
↓
|
||||
레벨 정보 조회 (rb10508_micro)
|
||||
↓
|
||||
Gmail 아이템 상태 조회 (robeing-monitor)
|
||||
↓
|
||||
UI 상태 동기화
|
||||
|
||||
활성화 클릭
|
||||
↓
|
||||
Gmail 토큰 확인
|
||||
↓
|
||||
[토큰 있음] → 장착 API 호출 → DB 저장
|
||||
[토큰 없음] → OAuth 페이지로 리다이렉트
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 교훈
|
||||
|
||||
### 1. UI 상태와 DB 상태 동기화 필수
|
||||
- 프론트엔드 state는 임시 저장소
|
||||
- 영구 저장은 반드시 백엔드 DB 연동
|
||||
- 마운트 시 DB 상태 조회 필수
|
||||
|
||||
### 2. 레벨 시스템 설계 중요성
|
||||
- 레벨별 권한 명확히 정의
|
||||
- UI에서 시각적으로 구분
|
||||
- 사용자에게 명확한 피드백
|
||||
|
||||
### 3. OAuth 플로우 통합
|
||||
- 토큰 유무 확인 먼저
|
||||
- 없으면 OAuth 진행
|
||||
- 있으면 바로 기능 사용
|
||||
|
||||
### 4. API 설계 일관성
|
||||
- RESTful 패턴 준수
|
||||
- 헤더 기반 인증 (X-User-Id)
|
||||
- 명확한 에러 메시지
|
||||
|
||||
### 5. 단계별 구현의 중요성
|
||||
- UI 먼저 구현 → API 연동 → 상태 관리
|
||||
- 각 단계별 테스트
|
||||
- 점진적 개선
|
||||
|
||||
---
|
||||
|
||||
## 관련 커밋
|
||||
- frontend-customer: `1071ec2` - Gmail 아이템/스킬 시스템 구현
|
||||
- frontend-customer: `b189024` - 레벨 20 반영 및 API 연동
|
||||
- frontend-customer: `9f5c7e8` - Gmail 아이템 상태 영구 저장 구현
|
||||
- rb10508_micro: (stats API 활성화)
|
||||
|
||||
---
|
||||
|
||||
**문서 끝**
|
||||
Loading…
x
Reference in New Issue
Block a user