Podly 플로우

• 앱 실행
  • 프론트: 초기 UI 렌더링
• 소셜 로그인 버튼 클릭
  • 프론트: 소셜 로그인 SDK 초기화, 로그인 요청
• 소셜 제공자 인증
  • 프론트: 소셜 제공자 페이지로 리다이렉트
• 앱 복귀, 백엔드로 인증 코드 전송
  • 프론트: 인증 코드 백엔드로 전송
  • 백엔드: 인증 코드 수신, 소셜 제공자에 토큰 요청
• 백엔드에서 token 발급
  • 백엔드: access/refresh 토큰 생성
  • 프론트: 토큰 수신
• 프론트엔드에서 token 저장
  • 프론트: HttpOnly 쿠키에 토큰 저장
• 사용자 정보 조회 (/api/users/me)
  • 프론트: GET 요청 전송
  • 백엔드: 사용자 정보 조회 및 응답
• 관심사 설정:
  • 프론트: 관심사 목록 표시(/api/user_preference/, 선택 UI 제공
  • 백엔드: 관심사 목록 제공, 선택 정보 저장
• 메인 화면 진입:
  • 프론트: 맞춤 콘텐츠 및 ‘Generate’ 버튼 표시
  • 백엔드: 맞춤 콘텐츠 데이터 제공
• ‘Generate’ 버튼 클릭
  • 프론트: 팟캐스트 생성 요청 전송
• 백엔드 요청 시작:
  • 백엔드: 사용자 관심사 조회, 뉴스 크롤링, 스크립트 생성, 채팅방 생성
• 프론트엔드로 생성된 스크립트 전송
  • 백엔드: 스크립트 전송
  • 프론트: 스크립트 수신 및 표시
• 팟캐스트 생성 시작
  • 백엔드: 팟캐스트 생성 프로세스 시작
• 생성 진행상황 실시간 업데이트
  • 백엔드: 웹소켓으로 진행상황 전송
  • 프론트: 진행상황 실시간 표시
• 팟캐스트 생성 완료 및 결과 전송
  • 백엔드: 최종 팟캐스트 데이터 전송
  • 프론트: 팟캐스트 재생 UI 표시