From 233e13d167d88140317a878ee96ec2efda8117c0 Mon Sep 17 00:00:00 2001 From: happybell80 Date: Sat, 16 Aug 2025 11:44:31 +0900 Subject: [PATCH] =?UTF-8?q?docs:=20=ED=94=84=EB=A1=A0=ED=8A=B8=EC=97=94?= =?UTF-8?q?=EB=93=9C=20=EA=B0=9C=EC=84=A0=20=ED=8A=B8=EB=9F=AC=EB=B8=94?= =?UTF-8?q?=EC=8A=88=ED=8C=85=20=EB=AC=B8=EC=84=9C=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...50816_happybell80_프론트엔드개선.md | 127 ++++++++++++++++++ 1 file changed, 127 insertions(+) create mode 100644 troubleshooting/250816_happybell80_프론트엔드개선.md diff --git a/troubleshooting/250816_happybell80_프론트엔드개선.md b/troubleshooting/250816_happybell80_프론트엔드개선.md new file mode 100644 index 0000000..7a34c2b --- /dev/null +++ b/troubleshooting/250816_happybell80_프론트엔드개선.md @@ -0,0 +1,127 @@ +# 프론트엔드 개선 - 랜딩 페이지 및 맞춤 인사말 + +작성일: 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 추가 + +--- + +## 교훈 + +### 1. 토큰 키 네이밍 일관성 +- localStorage 키는 프로젝트 전체에서 통일 필요 +- 'token' vs 'auth_token' 같은 혼란 방지 + +### 2. 사용자 식별자 명확화 +- user_id vs username 구분 필요 +- JWT 페이로드 구조 표준화 중요 + +### 3. 로컬 개발 환경의 한계 +- OAuth는 실제 도메인 필요 +- 로컬 테스트용 mock 인증 고려 + +### 4. 사용자 경험 개선 +- 기술적 메시지("시스템 초기화") 제거 +- 맞춤형 인사말로 개인화된 경험 제공 + +### 5. 랜딩 페이지의 중요성 +- 프로젝트 철학과 비전 전달 +- 명확한 CTA로 사용자 유도 \ No newline at end of file