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/*)
168 lines
4.8 KiB
Markdown
168 lines
4.8 KiB
Markdown
# 프론트엔드 개선 - 랜딩 페이지 및 맞춤 인사말
|
|
|
|
작성일: 2025년 8월 16일
|
|
작성자: happybell80
|
|
|
|
## 오전 11시 00분
|
|
|
|
### 문제 1: user_id 전달 실패로 인한 메모리 공유 문제
|
|
|
|
#### 증상
|
|
- 모든 사용자의 ChromaDB 컬렉션이 `rb10508_test_default_episodic`으로 생성
|
|
- 다른 사용자(김종태)의 대화 내용이 섞여서 나타남
|
|
|
|
#### 원인 분석
|
|
1. 프론트엔드: `localStorage.getItem('token')` vs `localStorage.setItem('auth_token')` 키 불일치
|
|
2. JWT에서 username 추출 실패 → 'default'로 폴백
|
|
3. 백엔드: user_id를 username으로 변환하지 않고 "default" 처리
|
|
|
|
#### 해결
|
|
- `chat-interface.tsx:284`: token 키를 'auth_token'으로 통일
|
|
- `auth-context.tsx:45`: username을 ID로 사용하도록 수정
|
|
|
|
---
|
|
|
|
## 오전 11시 20분
|
|
|
|
### 개선 1: 새로운 랜딩 페이지 구현
|
|
|
|
#### 구현 내용
|
|
- **라우팅 변경**:
|
|
- `/` → 랜딩 페이지 (NEW)
|
|
- `/chat` → 대시보드 (기존 `/`)
|
|
- `/game` → 채팅 인터페이스 (유지)
|
|
|
|
- **랜딩 페이지 구성**:
|
|
1. Hero Section: 프로젝트 소개 및 CTA
|
|
2. Philosophy Section: 기억/감정/윤리 철학
|
|
3. Features Section: 스탯 시스템 및 스킬 시각화
|
|
4. Architecture Section: 기술 스택 소개
|
|
5. CTA Section: 시작하기 버튼
|
|
|
|
- **기술 스택**:
|
|
- Framer Motion: 애니메이션
|
|
- React Intersection Observer: 스크롤 애니메이션
|
|
- Tailwind CSS: 스타일링
|
|
|
|
---
|
|
|
|
## 오전 11시 30분
|
|
|
|
### 개선 2: 사용자별 맞춤 인사말
|
|
|
|
#### 백엔드 API 추가
|
|
- `/api/user/{user_id}/history` 엔드포인트
|
|
- 사용자 대화 이력 조회
|
|
- 시간대별 인사말 제공
|
|
|
|
#### 프론트엔드 구현
|
|
**비로그인 사용자**:
|
|
- "안녕하세요! 저는 로빙입니다."
|
|
- "로그인하시면 대화 내용을 기억하고 함께 성장할 수 있어요."
|
|
|
|
**신규 로그인 사용자**:
|
|
- "[시간대 인사] [사용자명]님! 처음 만나뵙게 되어 반갑습니다."
|
|
- "저는 로빙입니다. 함께 대화하며 성장하는 디지털 동료예요."
|
|
|
|
**기존 사용자**:
|
|
- "[시간대 인사] [사용자명]님! 다시 만나서 반가워요."
|
|
- "지난번 우리가 이야기했던 내용이 기억나네요: [마지막 대화]"
|
|
- "총 N번의 대화를 나눴네요."
|
|
|
|
---
|
|
|
|
## 오전 11시 35분
|
|
|
|
### 문제 2: OAuth 로그인 후 리다이렉트 문제
|
|
|
|
#### 증상
|
|
- 로컬(localhost:5175)에서 구글 OAuth 로그인
|
|
- 인증 후 프로덕션(ro-being.com)으로 리다이렉트
|
|
|
|
#### 원인
|
|
- OAuth redirect_uri가 프로덕션 URL로 고정
|
|
|
|
#### 해결 방안
|
|
1. auth-server에서 localhost 허용 설정
|
|
2. 개발용 OAuth 앱 별도 생성
|
|
3. **현재 선택**: 로그인 기능은 서버에서만 테스트
|
|
|
|
---
|
|
|
|
## 오전 11시 40분
|
|
|
|
### 배포 확인 및 문서 업데이트
|
|
|
|
#### 확인 사항
|
|
- Gitea Actions 자동 배포 설정 정상
|
|
- package.json 의존성 확인 완료
|
|
- 빌드 테스트 성공
|
|
|
|
#### 커밋 내역
|
|
1. **frontend-customer**: 랜딩 페이지 및 맞춤 인사말 구현
|
|
2. **rb10508_micro**: 사용자 히스토리 API 추가
|
|
|
|
---
|
|
|
|
---
|
|
|
|
## 오전 11시 55분
|
|
|
|
### 개선 3: Dashboard 페이지 및 관련 컴포넌트 제거
|
|
|
|
#### 배경
|
|
- Dashboard 페이지가 더 이상 필요하지 않음
|
|
- 랜딩 페이지와 게임 스타일 채팅만 유지
|
|
|
|
#### 삭제 전 의존성 확인
|
|
```bash
|
|
# import 체크
|
|
grep -r "dashboard" src/ --include="*.tsx"
|
|
grep -r "CharacterDashboard\|ManagementDashboard" src/
|
|
```
|
|
|
|
#### 삭제된 파일
|
|
1. `src/pages/dashboard.tsx` - Dashboard 페이지
|
|
2. `src/components/character-dashboard.tsx` - 캐릭터 대시보드
|
|
3. `src/components/character-dashboard.css` - 스타일시트
|
|
4. `src/components/management-dashboard.tsx` - 관리 대시보드
|
|
5. `src/components/game-character-card.tsx` - 미사용 컴포넌트
|
|
|
|
#### 라우팅 변경
|
|
- `/chat` 경로 완전 제거
|
|
- App.tsx에서 Dashboard import 제거
|
|
|
|
#### 최종 라우팅 구조
|
|
- `/` - 랜딩 페이지
|
|
- `/game` - 게임 스타일 채팅
|
|
- `/game001` - 게임 DOS
|
|
- `/ir` - IR 프레젠테이션
|
|
|
|
---
|
|
|
|
## 교훈
|
|
|
|
### 1. 토큰 키 네이밍 일관성
|
|
- localStorage 키는 프로젝트 전체에서 통일 필요
|
|
- 'token' vs 'auth_token' 같은 혼란 방지
|
|
|
|
### 2. 사용자 식별자 명확화
|
|
- user_id vs username 구분 필요
|
|
- JWT 페이로드 구조 표준화 중요
|
|
|
|
### 3. 로컬 개발 환경의 한계
|
|
- OAuth는 실제 도메인 필요
|
|
- 로컬 테스트용 mock 인증 고려
|
|
|
|
### 4. 사용자 경험 개선
|
|
- 기술적 메시지("시스템 초기화") 제거
|
|
- 맞춤형 인사말로 개인화된 경험 제공
|
|
|
|
### 5. 랜딩 페이지의 중요성
|
|
- 프로젝트 철학과 비전 전달
|
|
- 명확한 CTA로 사용자 유도
|
|
|
|
### 6. 의존성 확인 후 삭제
|
|
- 컴포넌트 삭제 전 반드시 import 체크
|
|
- grep으로 사용처 확인 후 안전하게 제거
|
|
- 라우팅 변경 시 전체 영향도 파악 |