스포츠 레슨 서비스 반응형 홍보 사이트와 이벤트 페이지

방문자가 첫 화면에서 이번 주 레슨 시간표와 종목별 코치, 진행 중인 이벤트 배너를 한 흐름으로 봅니다. 종목 칩으로 시간표를 거르고 레슨 카드를 눌러 상세를 확인합니다.

• 레슨·코치 데이터를 JSON 스키마로 분리해 문구와 이미지 교체만으로 화면이 바뀌는 구조 설계
• 종목 칩과 시간표를 같은 상태로 연결해 필터 결과가 즉시 그려지도록 구현
• Tailwind 브레이크포인트 3단계로 시간표 그리드와 상단 메뉴를 반응형으로 구현

클라이언트가 제공할 문구·로고·이미지를 데이터 파일 교체만으로 반영하도록 구성해, 자료 수령 뒤 바로 화면에 올릴 수 있게 설계합니다.

방문자가 진행 중·예정·종료 이벤트를 카드 목록으로 보고 상태 칩으로 거릅니다. 카드를 누르면 같은 틀의 상세 화면으로 이동합니다.

• 이벤트 데이터 파일을 읽어 목록을 그리고 상태를 기간 값에서 계산하는 구조 설계
• 상태 칩과 목록을 같은 쿼리 파라미터로 연결해 새로고침 뒤에도 필터 유지
• 카드 그리드를 폭에 따라 1~3열로 전환

이벤트 항목을 데이터 파일에 한 건 추가하면 목록 카드가 자동으로 생기도록 구성해 후속 프로모션 재활용을 쉽게 합니다.

방문자가 이벤트 안내 문구와 이미지, 참여 방법, 유의사항을 확인하고 관련 레슨 화면으로 이동합니다. 같은 틀에 이벤트 데이터만 바뀌어 다른 이벤트도 같은 구조로 보입니다.

• 공통 템플릿 한 벌에 이벤트 데이터를 주입하는 구조로 이벤트별 화면을 생성
• 이벤트별 제목·설명·OG 이미지를 데이터에서 읽어 메타 태그를 구성
• 관련 링크와 참여 버튼의 이동 대상을 이벤트 데이터 필드로 분리

템플릿과 데이터를 분리해 새 이벤트를 데이터 파일 한 건과 이미지 한 장으로 추가하는 방식을 구현합니다.

방문자가 종목과 희망 시간을 고르고 이름과 연락처를 입력해 체험 레슨을 신청합니다. 연락처가 자동으로 포맷되고 접수 뒤 접수 번호가 안내됩니다.

• 신청 접수 API 1종을 Express 로 구현하고 서버에서 입력값을 다시 검증
• 전화번호 정규화와 하이픈 포맷을 화면과 서버가 같은 규칙으로 처리
• 접수 내용을 PostgreSQL 에 저장하고 운영 콘솔 목록과 같은 모델로 연결

신청 폼 오류를 입력 칸 단위로 표시하고 서버 검증 결과도 같은 위치에 보여 주어 모바일에서도 수정 지점을 바로 찾도록 구현합니다.