User Flows - Team-likelion-3rd-Project/likelion-devops-7th-3rd-team01 GitHub Wiki

상태: 1주차 초안 / API 경로는 API Specification 페이지 기준입니다.

1. 비로그인으로 둘러보기

홈 -> 분야 카드의 "더 보기" 또는 이슈 제목 클릭 -> 분야 페이지 (제목을 누르면 요약·출처·원문 링크가 펼쳐짐)

• 전제 조건: 로그인 불필요. 접속하면 비로그인 상태로 홈이 열린다.
• 홈에서 이슈 제목을 누르면 분야 페이지로 이동하며 그 이슈가 펼쳐진 상태로 열린다. 홈에는 펼치기가 없다.
• 예외 흐름: 요약 갱신에 실패하면 직전 요약을 그대로 보여 주고, generatedAt이 1시간 넘게 지났으면 안내 문구를 띄운다. 아직 요약이 없는 분야는 빈 결과 화면, 서버 오류는 실패 화면을 보여 준다.

2. 질문하기

하단 입력창 -> 질문 입력 후 Enter -> 질문 결과 화면 (처리 중 표시 -> 답과 출처 링크)

• 전제 조건: 로그인 상태. 질문은 전송 즉시 접수·기록된다.
• 화면이 2초마다 결과를 확인하고, 60초가 넘으면 서버가 실패로 처리한다.
• 예외 흐름: 비로그인이면 흐름 3으로 이동. 빈 질문·500자 초과는 입력 오류 안내. 하루 10회(실패한 질문은 제외)를 넘기면 횟수 초과 안내. 뉴스와 무관한 질문은 거절 안내, AI 오류·시간 초과는 실패 안내.

3. 로그인·가입

로그인이 필요한 동작 (질문 전송, 마이페이지, 질문 저장) -> 로그인 팝업에서 로그인 또는 가입 -> 하려던 동작 이어서 진행

• 전제 조건: 비로그인 상태. 입력창에 글자를 쓰는 것까지는 로그인 없이 가능하다. 팝업이 떠도 쓰던 질문은 유지된다.
• 로그인 후 헤더 버튼이 로그아웃으로 바뀐다. 앱 시작 시 로그인 여부를 확인해 헤더를 그린다.
• 예외 흐름: 이메일·비밀번호 불일치, 이미 가입된 이메일, 입력 형식 오류는 팝업 안에서 안내. 토큰이 만료되면(24시간) 같은 팝업이 뜬다.

4. 질문 저장

질문 결과 화면 -> 별 버튼 누름 -> 저장한 질문 목록에 추가 (다시 누르면 해제)

• 전제 조건: 로그인 상태.
• 예외 흐름: 비로그인이면 흐름 3으로 이동. 저장 실패 시 별 상태를 되돌리고 안내한다.

5. 처리 중에 다른 화면으로 이동

질문 결과 (처리 중) -> 홈·분야 페이지 등 다른 화면으로 이동 -> 마이페이지 질문 기록에서 이어서 확인

• 전제 조건: 로그인 상태. 질문은 전송 즉시 기록되어 있으므로 화면을 떠나도 사라지지 않는다.
• 예외 흐름: 처리가 실패하면 질문 기록에서 실패 상태로 보인다.

6. 마이페이지

마이페이지 -> 탭 전환 (질문 기록 / 저장한 질문 / 저장한 기사(후보)) -> 항목 클릭 시 질문 결과, 삭제 버튼으로 기록 삭제

• 전제 조건: 로그인 상태. 목록은 최신순이다.
• 질문 기록을 삭제하면 저장한 질문에서도 함께 사라진다.
• 저장한 기사는 후보 기능으로, 일정에 여유가 있을 때만 구현한다.
• 예외 흐름: 목록이 비어 있으면 빈 결과 화면, 비로그인이면 흐름 3으로 이동.

화면 목록

화면	주소	로그인	설명
공통 헤더	모든 화면	-	가운데 서비스 이름(누르면 홈), 오른쪽 마이페이지·로그인(로그인 후 로그아웃)
공통 하단 입력창	모든 화면	글쓰기 불필요, 전송 필요	Enter 전송, Shift+Enter 줄바꿈
홈	/	불필요	분야 카드 6장, 카드마다 이슈 제목 3개와 "더 보기"
분야 페이지	/category/{분야코드} (?open={이슈ID})	불필요	이슈 목록, 제목을 누르면 펼침, 분야 이동 버튼 줄
질문 결과	/questions/{id}	필요	내 질문, 처리 중 표시, 답과 출처, 저장(별) 버튼
마이페이지	/mypage	필요	질문 기록 / 저장한 질문 / 저장한 기사(후보) 탭
로그인·가입 팝업	팝업	-	로그인과 가입 전환

모든 화면은 로딩, 성공, 빈 결과, 실패 4상태를 가진다. 분야는 정치, 경제, 사회, 생활/문화, IT/과학, 스포츠 6개로 고정이다.

화면 ↔ API 매핑표

로그인 필요 API가 401(UNAUTHORIZED)을 주면 로그인 팝업을 띄운다. 모든 요청은 credentials: 'include'로 호출한다.

화면	동작	API	화면에서 쓰는 응답·오류
앱 시작(헤더)	로그인 여부 확인	GET /api/auth/me	200 닉네임 표시 / 401 비로그인
로그인 팝업	가입	POST /api/auth/signup	201 가입 즉시 로그인 / 400 VALIDATION_ERROR / 409 DUPLICATE_EMAIL
로그인 팝업	로그인	POST /api/auth/login	200 / 401 INVALID_CREDENTIALS
헤더	로그아웃	POST /api/auth/logout	204
홈	분야 카드 6장	GET /api/news/home	categories[].issues[], mock(샘플 띠), generatedAt
분야 페이지	이슈 목록·펼치기	GET /api/news/categories/{category}	issues[](요약, sources[]), mock / 404 NOT_FOUND
하단 입력창	질문 전송	POST /api/questions	202 questionId / 400 VALIDATION_ERROR / 429 RATE_LIMIT_EXCEEDED
질문 결과	상태·답 확인 (2초 폴링)	GET /api/questions/{id}	status, answer, sources[], saved / 404 NOT_FOUND
질문 결과	저장 / 해제	PUT / DELETE /api/questions/{id}/saved	204
마이페이지	질문 기록 목록	GET /api/mypage/questions?page=0	questions[], hasNext
마이페이지	질문 삭제	DELETE /api/questions/{id}	204
마이페이지	저장한 질문 목록	GET /api/mypage/saved-questions?page=0	질문 기록과 같은 형식
마이페이지 (후보)	기사 저장·목록·삭제	/api/mypage/saved-articles	후보 기능

질문 상태별 화면: PENDING·PROCESSING 처리 중 / COMPLETED 답과 근거 기사 / REJECTED 거절 안내 / FAILED 실패 안내.

결정 사항

• 화면은 정적 프론트로 분리한다. React SPA를 빌드한 정적 파일을 따로 배포한다.
• 온프렘: Nginx가 화면을 서빙하고 /api/*를 백엔드로 프록시한다(같은 출처, CORS 불필요).
• AWS: 화면은 app.{도메인} → CloudFront + S3, API는 api.{도메인} → ALB. 같은 사이트(같은 상위 도메인)이고 CORS로 화면 주소만 허용하며 credentials를 허용한다(API 명세 공통 규칙).
• 환경별 API 주소: api.js에서 온프렘은 /api, AWS는 https://api.{도메인}으로 나눈다.
• SPA용 index.html 대체 설정은 화면 배포(Nginx, CloudFront)에만 적용한다. CloudFront가 화면 파일만 다루므로 API의 404 응답을 덮어쓸 걱정이 없다.
• 분야 페이지의 이슈는 분야당 최대 5개이고, 홈에는 그중 1~3번째 제목만 보여 준다.
• 갱신 지연 안내: 응답에 별도 값이 없고, generatedAt이 1시간 넘게 지났으면 "뉴스 갱신이 지연되고 있어요" 안내를 띄운다(홈, 분야 페이지 공통).
• 하루 질문 10회 제한은 거절(REJECTED)된 질문은 포함하고 실패(FAILED)한 질문은 제외한다.