발레 스튜디오 수업 예약·결제 홈페이지

첫 화면에서 연습실 사진·영상 위에 오늘 남은 수업 시간표와 잔여 좌석을 보여 주고, 수업 예약 버튼 한 개로 예약 흐름에 들어갑니다. 히어로 영상·사진 영역, 오늘 시간표 카드, 반응형 레이아웃.

• 반응형 히어로 영역에 영상과 대체 사진을 함께 두어 모바일 데이터 환경에서는 사진으로 대체하는 구조를 설계
• 오늘 수업 목록을 수업 테이블 조회 API로 불러오고 잔여 좌석을 실시간으로 표시하는 구조를 구현
• 이미지는 크기별 파일을 두고 srcset으로 내려 주는 방식을 적용

연습실 영상과 오늘 수업 시간표를 한 화면에 올려 첫 방문자가 바로 예약으로 이어지게 구성합니다.

요일별 수업을 고르고 시간대·수강생 정보를 입력해 예약을 신청합니다. 정원이 찬 수업은 대기 신청으로 바뀝니다. 수업·시간대 선택, 예약 정보 입력, 정원 검사, 예약 상태 관리.

• 수업·회차·예약 테이블을 정규화하고 좌석 수 검사를 트랜잭션으로 묶어 중복 예약을 막는 구조 설계
• 예약 상태(신청·결제대기·확정·취소)를 상태 전이 표로 관리하는 서버 로직 구현
• Prisma 마이그레이션으로 수업 스키마를 버전 관리하는 구성 적용

정원 검사와 예약 저장을 한 트랜잭션으로 처리해 같은 좌석에 두 건이 들어오지 않는 구조를 구현합니다.

예약 확정 단계에서 결제 수단을 고르고 결제 요청, 승인 결과, 실패 안내까지 한 화면 흐름으로 처리합니다. PG 표준 API 결제 요청·승인·취소, 결제 결과 웹훅 수신.

• 네이버페이·카카오페이 결제 승인 API를 결제 어댑터로 감싸 수단별 차이를 서버 한 곳에 모으는 구조 설계
• 결제 결과 웹훅의 서명을 검증하고 중복 수신을 멱등 키로 걸러 주문 상태를 한 번만 바꾸는 로직 구현
• 승인 직전 금액을 서버 기준으로 다시 계산해 화면 조작 값과 대조하는 검증 적용

결제 수단이 달라도 승인·취소·웹훅이 같은 주문 상태 전이로 모이는 결제 계층을 구현합니다.

학원 소식과 수업 이야기를 카드 목록으로 보고, 글을 눌러 본문과 관련 수업 예약 링크를 확인합니다. 게시글 목록 조회, 상세 조회, 카테고리 필터.

• 게시글·카테고리 테이블과 페이지 단위 조회 API 설계
• 본문을 마크다운으로 저장하고 서버에서 안전하게 변환해 내려 주는 구조 구현
• 글 상세 주소에 슬러그를 쓰는 라우팅 구성

목록과 상세가 같은 게시글 API를 공유하고 관련 수업 링크로 예약에 이어지는 구조를 구현합니다.