[FE] 퍼니리뷰 — 바텐더 추천 기능 UI·연동 #527

배경·목표

바텐더 추천 흐름을 사용자가 교정할 수 있도록 실제 시나리오 API와 캠페인을 연결한다. 기존 세 흐름은 유지하고 네 번째 ‘위스키 진짜로 추천해주세요’ 블록만 실제 API로 실행한다.

구현 범위

• 시나리오 ID를 받아 질문·선택지·후보 수를 Product API 응답으로 표시한다. 기본 연결은 시나리오 1이며 N개 시나리오를 처리하는 공통 API 계약을 사용한다.
• 가격·도수는 서버가 산정한 구간 선택지로 고른다. 사용자가 최솟값·최댓값을 직접 입력하지 않는다.
• ‘바로 추천받을래요’로 현재까지의 조건을 평가해 중간 종료한다. 과거 답변을 바꾸면 이후 답변을 폐기한다.
• 답변·불러온 페이지 수·스크롤은 캠페인·시나리오·계정별 Local Storage에 보관한다. 복귀 시 API를 다시 호출해 최신 데이터로 결과를 평가한다. 추천 목록 자체는 고정 저장하지 않는다.
• 비회원은 질문과 종료까지 진행하고 로그인 후 결과를 본다. 명시적으로 로그인하려고 넘긴 비회원 진행만 로그인 계정으로 이어받는다.
• bartender-note-type-d의 VIEW·START·FINISH·RESULT를 연결한다. START·FINISH·RESULT는 같은 진행의 페이징·상세 복귀·새로고침으로 중복 전송하지 않는다.
• 응답 대기 중 현재 선택지를 유지하고 중복 선택을 막는다. 버전 충돌·게시본 없음·연결 오류는 복구 화면으로 처리한다.

현재 상태

2026.10.24 기준 작업중 · 공유 프리뷰 검증 완료. PR #897은 Open이며 Product FE main 병합·일반 개발 배포·운영 배포는 수행하지 않았다. 이 PR은 현재 프리뷰 소유권을 유지한다.

• FE PR: feat: 바텐더 실제 추천 API와 캠페인 연결 bottle-note-frontend#897
• 현재 head: 269e48b84151b3ac0e0f2380856ae0ed71f3c0d9 — 최신 main 반영 후 단일 커밋으로 정리
• BE 의존성: [BE] 알코올 속성관리 API 확장 #532 — 개발 배포 완료
• 프리뷰 환경: https://preview.development.bottle-note.com/bartender-note

검증 근거

• 해당 head의 빌드·테스트 CI 성공. 프리뷰 이미지 빌드·서명·채널 승격: https://github.com/bottle-note/bottle-note-frontend/actions/runs/40086726969
• GitOps에 기록된 digest와 실행 Deployment 일치 및 rollout 완료 확인
• 실제 개발 API로 첫 질문 후보 50병→선택 후 17병, 가격 구간 선택지, 바로 추천받기, 새로고침 복귀 확인
• 회원 테스트에서 결과 20→40개, 상세 이동·복귀 후 40개 목록과 저장한 스크롤 위치(2858) 복원 확인
• 모바일 390×844에서 숫자 입력 없이 선택 가능하고 가로 넘침 없음
• VIEW·START·FINISH·RESULT의 200 응답과 실제 개발 DB 저장 확인. 회원 결과·상세 복귀 시 RESULT 중복 없음
• 사용자 실사용에서도 2026.10.24 20:26 KST 참여 이벤트 4종과 로그인 회원 연결이 저장됨

프리뷰 로그인·배포 설정

• 별도 인프라 PR #898은 main에 병합됨: fix: 프리뷰 빌드를 개발 환경파일 방식으로 통일 bottle-note-frontend#898
• 프리뷰도 공통 Dockerfile과 개발 SOPS 환경파일을 사용하고 프리뷰 origin·내부 API 주소만 덮어쓴다. 인증 SDK·설정 API를 새로 만들지 않았다.
• 실제 프리뷰 빌드 로그 5,194줄을 개발 비밀값 7개 및 원문·Base64·URL 인코딩·JSON escape 형태와 대조해 일치 0건을 확인했다. 이는 검사한 값·실행 범위의 증거이며 모든 향후 로그를 보증하지 않는다.
• 사용자 승인으로 Bottle Note-TEST의 JavaScript SDK 도메인 및 JavaScript·REST API 로그인 Redirect URI에 프리뷰 주소를 추가했고 기존 개발·운영 등록값 유지·저장을 확인했다. 이후 실사용의 Product 카카오 로그인 200 및 회원 RESULT 저장을 확인했다.

지표 해석·남은 범위

• 완료 방문자는 쿠키 기준이고 결과 조회 회원은 조회 기간의 distinct user_id다. 누적 검증 수치에는 QA 브라우저와 기존 QA 계정 2개의 기록이 포함된다.
• 완료 방문자 8개와 결과 조회 계정 3개는 다른 단위이므로 가입 계정 수와 비교하지 않는다.
• main 병합·일반 개발/운영 배포는 별도다. 기존 세 데모 흐름 교체, Admin 화면은 이 범위에 포함하지 않는다.