3.6 KiB
3.6 KiB
프론트엔드 개선 - 랜딩 페이지 및 맞춤 인사말
작성일: 2025년 8월 16일 작성자: happybell80
오전 11시 00분
문제 1: user_id 전달 실패로 인한 메모리 공유 문제
증상
- 모든 사용자의 ChromaDB 컬렉션이
rb10508_test_default_episodic으로 생성 - 다른 사용자(김종태)의 대화 내용이 섞여서 나타남
원인 분석
- 프론트엔드:
localStorage.getItem('token')vslocalStorage.setItem('auth_token')키 불일치 - JWT에서 username 추출 실패 → 'default'로 폴백
- 백엔드: user_id를 username으로 변환하지 않고 "default" 처리
해결
chat-interface.tsx:284: token 키를 'auth_token'으로 통일auth-context.tsx:45: username을 ID로 사용하도록 수정
오전 11시 20분
개선 1: 새로운 랜딩 페이지 구현
구현 내용
-
라우팅 변경:
/→ 랜딩 페이지 (NEW)/chat→ 대시보드 (기존/)/game→ 채팅 인터페이스 (유지)
-
랜딩 페이지 구성:
- Hero Section: 프로젝트 소개 및 CTA
- Philosophy Section: 기억/감정/윤리 철학
- Features Section: 스탯 시스템 및 스킬 시각화
- Architecture Section: 기술 스택 소개
- 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로 고정
해결 방안
- auth-server에서 localhost 허용 설정
- 개발용 OAuth 앱 별도 생성
- 현재 선택: 로그인 기능은 서버에서만 테스트
오전 11시 40분
배포 확인 및 문서 업데이트
확인 사항
- Gitea Actions 자동 배포 설정 정상
- package.json 의존성 확인 완료
- 빌드 테스트 성공
커밋 내역
- frontend-customer: 랜딩 페이지 및 맞춤 인사말 구현
- rb10508_micro: 사용자 히스토리 API 추가
교훈
1. 토큰 키 네이밍 일관성
- localStorage 키는 프로젝트 전체에서 통일 필요
- 'token' vs 'auth_token' 같은 혼란 방지
2. 사용자 식별자 명확화
- user_id vs username 구분 필요
- JWT 페이로드 구조 표준화 중요
3. 로컬 개발 환경의 한계
- OAuth는 실제 도메인 필요
- 로컬 테스트용 mock 인증 고려
4. 사용자 경험 개선
- 기술적 메시지("시스템 초기화") 제거
- 맞춤형 인사말로 개인화된 경험 제공
5. 랜딩 페이지의 중요성
- 프로젝트 철학과 비전 전달
- 명확한 CTA로 사용자 유도