junsobi

고마워 토토 베트남

날짜와 시간, 인원을 골라 이용 일정을 예약하는 베트남 모바일 서비스입니다.

Mon Jun 01 2026

React
TypeScript
TanStack Query
React Hook Form
Zod
Mobile Web
고마워 토토 베트남에서 프로그램을 고르고 예약을 마치는 흐름
고마워 토토 베트남 프로그램 상세 화면
고마워 토토 베트남 예약 날짜와 시간 선택 화면
고마워 토토 베트남 예약 인원과 남은 좌석 확인 화면
고마워 토토 베트남 예약 완료 화면

프로젝트 요약

기간
2026.06–현재
소속과 역할
WALDLUST · Frontend developer
담당 범위
사용자 예약 웹과 운영 화면에서 좌석 재확인, 홀드 타이머, 확정·취소 상태를 구현했습니다.
배경과 과제
여러 진입 경로에서 비회원이 예약을 진행하는 동안 좌석 가능 상태가 달라질 수 있어 사용자 화면과 운영 화면이 같은 상태를 봐야 했습니다.

설계와 구현

  • 날짜·시간·인원 선택 뒤와 최종 확정 직전에 남은 좌석을 다시 확인했습니다.
  • 홀드 타이머가 끝나면 임시 확보 상태를 해제하고 사용자가 다시 선택하도록 안내했습니다.
  • 운영 화면의 프로그램·회차·상태 관리와 권한 범위를 분리했습니다.

적용 결과

  • 예약 가능 시간과 남은 좌석을 사용자 선택 흐름에 연결했습니다.
  • 임시 확보, 확정, 취소 상태를 모바일 웹과 운영 화면에서 함께 다뤘습니다.
  • 운영자가 프로그램·회차·상태를 권한 범위 안에서 관리할 수 있게 했습니다.

관련 링크

고마워 토토 베트남은 모바일에서 날짜와 시간, 인원을 선택해 이용 일정을 잡는 서비스입니다. 저는 사용자 예약 웹과 운영 화면을 맡아, 선택 시점마다 달라질 수 있는 좌석 상태를 한 흐름으로 연결했습니다.

모바일 예약 흐름

사용자는 날짜와 시간, 인원을 고른 뒤 가능한 회차를 확인합니다. 선택 직후와 최종 확정 직전에 남은 좌석을 다시 조회해 오래된 화면 상태로 진행하지 않게 했습니다. QR을 비롯한 여러 진입 경로와 비회원 세션에서도 선택 내용이 끊기지 않도록 정리했습니다.

홀드 타이머와 상태 전이

선택한 좌석은 정해진 시간 동안 임시로 확보합니다. 타이머가 끝나면 확보 상태를 풀고 다시 선택할 수 있는 경로를 보여 줍니다. 확정과 취소 뒤에는 목록과 상세가 같은 상태를 보도록 query invalidation 범위를 나눴습니다.

운영 화면과 권한

운영 화면에서는 프로그램, 회차, 상태를 관리합니다. 조회와 변경 권한을 역할에 맞춰 구분했고, 사용자가 보는 가능 상태와 운영자가 바꾼 상태가 어긋나지 않도록 같은 규칙으로 검증했습니다.