[FE] 예매 결과 페이지(피드백 페이지) 구현

[ParkTjgus]

🧭 Summary

• 사용자가 대기열 및 예매 과정에서 각 단계별로 소요된 시간을 측정
• 예매 완료 후 결과 페이지에서 이를 확인

🔗 Linked Issue

• [FE] 결과 페이지 구현 #32

Closes: #32

🛠 개발 기능(작업 내용)

• 단계별 체류 시간 측정 기능
  • 대기열 페이지(/waiting-queue)와 좌석 예매 페이지(/reservations) 각각의 체류 시간을 측정
  • 예매 과정 중 새로고침으로 인해 대기열로 돌아갈 경우, 이전 체류 시간에 새로운 체류 시간이 누적되어 계산
  • 최종 측정된 시간은 결과 페이지(/result)의 '단계별 소요 시간' UI에 초 단위로 출력

🧩 주요 고민과 해결 방법

1. 페이지 이동 및 새로고침 시 상태 유지

• 문제: 여러 페이지에 걸쳐 진행되는 작업의 단계별 소요 시간을 어떻게 유지하고 계산할 것인가.

• 배경: 결과 페이지에서 단계별 소요 시간을 보여줘야 했다. 여기서 ‘소요 시간’은 각 페이지에 사용자가 머문 체류 시간으로 정의하였다. 문제는 사용자가 대기열 페이지나 좌석 예매 페이지에서 새로고침을 하는 경우였다. 실제 예매 플랫폼의 동작을 확인해 보니, 새로고침 시 예매 프로세스가 초기 단계(대기열)로 되돌아가는 방식을 취하고 있었다. 따라서 본 프로젝트에서도 예매 중 새로고침이 발생하더라도:

  • 예매 단계가 초기화되어야 한다.
  • 단, 이전에 측정된 시간은 누적되어 유지되어야 하며
  • 이를 위해 페이지 전환 및 새로고침 이후에도 데이터가 보존되어야 했다.

• 해결 과정: 데이터 유지 방안으로 다음 두 가지를 고려하였다.

1. Provider 패턴을 통한 전역 상태 관리

   • 각 단계의 체류 시간을 전역 상태로 관리
   • 최상위 layout에서 Provider를 감싸 페이지 간 상태 공유 가능
   • 단점: 브라우저 새로고침 또는 서버에 의한 강제 이동 시 React 애플리케이션이 초기화되며, 메모리에 저장된 모든 상태가 소실됨

2. sessionStorage를 이용한 데이터 저장
   * 기존 로직을 크게 변경하지 않고도
   * 새로고침 및 URL 이동 시에도 데이터 유지 가능
   * 단점: React state와 브라우저 저장소(sessionStorage)가 분리되어 관리되어 상태 관리가 다소 분산됨

• 최종 해결: React의 state는 새로고침 시 초기화된다는 한계를 고려하여, 브라우저 세션 동안 데이터가 유지되는 sessionStorage를 채택하였다. 이를 통해:

  • 사용자가 중간에 새로고침을 하더라도
  • 각 단계의 체류 시간을 누적하여
  • 결과 페이지에서 정확한 단계별 소요 시간을 계산할 수 있었다.

2. React Strict Mode에서의 버그

• 문제: 개발 환경에서 useEffect가 두 번씩 실행되면서, sessionStorage의 값을 읽어온 직후 정리(cleanup)해버려 시간이 0초로 표시되는 현상이 발생
• 해결: useRef를 '잠금 장치(guard)'로 활용하여, useEffect의 로직이 여러 번 호출되더라도 실제 내용은 단 한 번만 실행되도록 보장했습니다. 이를 통해 Strict Mode의 테스트 동작에 영향을 받지 않는 안정적인 코드를 작성했습니다.

🔍 리뷰 포인트

리뷰 시 어떤 부분에 집중해야 할지 명시해주세요.

• TanStack Query 사용 방식의 적절성
  현재 프로젝트에서 적용한 TanStack Query 사용 방법이 권장 패턴에 부합하는지, 더 나은 구조나 개선할 수 있는 부분이 있는지 검토 부탁드립니다.

---

📋 Code Review Priority Guideline

• 🚨 P1: Request Change
  • 필수 반영: 꼭 반영해주시고, 적극적으로 고려해주세요 (수용 혹은 토론).
• 💬 P2: Comment
  • 권장 반영: 웬만하면 반영해주세요.
• 👍 P3: Approve
  • 선택 반영: 반영해도 좋고 넘어가도 좋습니다. 그냥 사소한 의견입니다.