입주민 커뮤니티 홈페이지·골프 잔여티 예약
요구사항(공개 마을 홈페이지, 승인제 입주민 회원, 커뮤니티 게시판, 골프 잔여티 조회와 중복 없는 예약 신청)을 직접 반영한 프로젝트입니다.
프로젝트 개요
요구사항(공개 마을 홈페이지, 승인제 입주민 회원, 커뮤니티 게시판, 골프 잔여티 조회와 중복 없는 예약 신청)을 직접 반영한 프로젝트입니다. 사진 중심 첫 화면에서 오늘의 잔여티를 바로 확인하고 예약까지 이어지는 흐름을 React와 Node.js 기반으로 설계·구현합니다.
작업 범위
- 마을 홈: 단지 전경 사진 히어로와 함께 이번 주 골프 잔여티, 마을 소식, 오늘의 일정을 첫 화면에서 한눈에 확인할 수 있습니다
- 잔여티 예약: 월 달력에서 날짜를 고르면 시간대별 티타임이 예약 가능·예약 완료·마감 상태로 표시되고, 바로 예약 신청까지 진행할 수 있습니다
- 커뮤니티: 자유게시판·입주민 공지·생활정보 공유 세 가지 게시판에서 글 작성, 댓글, 검색을 할 수 있습니다
- 내 예약: 내가 신청한 티타임을 예정·지난 예약으로 나누어 보고, 예약 취소와 알림 수신 상태를 확인할 수 있습니다
주요 업무
- 마을 홈 화면: 비회원은 공개 영역(소개·갤러리·시설·위치)만, 승인 입주민은 잔여티 요약 영역까지 보도록 접근 권한을 구분하여 구현합니다
- 잔여티 예약 화면: 트랜잭션과 고유 제약으로 같은 티타임의 중복 예약을 차단하고, 예약 직후 해당 슬롯 상태를 즉시 갱신하는 구조로 구현합니다
- 커뮤니티 화면: 게시판별 접근 권한과 댓글 구조, 제목·내용 통합 검색을 서버 쿼리로 구현합니다
- 내 예약 화면: 취소 시 해당 슬롯을 즉시 예약 가능 상태로 되돌리고, 예약 완료·취소 알림 발송 이력을 함께 보여주는 구조로 설계합니다
프로젝트 핵심 과제
여러 입주민이 인기 시간대를 동시에 신청할 때 중복 확정을 막는 동시성 제어 설계
골프장 예약 시스템 연동 없이 수동 등록되는 잔여티 데이터의 최신성을 화면에서 안내하는 방식 설계
승인 전 방문자와 승인 입주민의 접근 범위를 공개 홈페이지 안에서 자연스럽게 나누는 화면 흐름 설계
알림톡 템플릿 심사 일정을 고려해 이메일 우선 발송 후 알림톡으로 확장하는 채널 구조 설계
핵심 기능 상세
마을 홈
단지 전경 사진 히어로와 함께 이번 주 골프 잔여티, 마을 소식, 오늘의 일정을 첫 화면에서 한눈에 확인할 수 있습니다.
- React Router 기반 라우트 가드로 비회원 공개 영역과 승인 회원 전용 영역 분리
- 이미지 지연 로딩과 srcset 반응형 이미지로 사진 갤러리 구성
- 메타 태그·구조화 데이터 템플릿으로 검색엔진 기본 최적화(SEO) 구조 설계
공개 홈페이지와 회원 전용 서비스를 하나의 SPA 안에서 권한별로 나누어 보여주는 구조를 구현합니다.
잔여티 예약
월 달력에서 날짜를 고르면 시간대별 티타임이 예약 가능·예약 완료·마감 상태로 표시되고, 바로 예약 신청까지 진행할 수 있습니다.
- PostgreSQL 고유 제약과 Prisma 트랜잭션으로 동일 티타임 동시 신청 충돌 방지
- React Query 낙관적 업데이트로 예약 직후 슬롯 상태 즉시 반영
- 날짜·시간·팀 수 단위 슬롯 모델링과 상태 전이(가능→완료→마감) 설계
두 입주민이 같은 시간대를 동시에 신청해도 한 건만 확정되도록 처리하는 예약 확정 로직을 구현합니다.
커뮤니티
자유게시판·입주민 공지·생활정보 공유 세 가지 게시판에서 글 작성, 댓글, 검색을 할 수 있습니다. 게시판별 접근 권한과 댓글 구조, 제목·내용 통합 검색을 서버 쿼리로 구현합니다.
- 게시판 테이블과 권한 필드를 분리한 다중 게시판 데이터 모델 설계
- PostgreSQL 전문 검색(tsvector) 기반 제목·본문 통합 검색
- 커서 기반 페이지네이션과 댓글 트리 렌더링 컴포넌트 구현
게시판을 관리자가 추가해도 코드 수정 없이 목록·글쓰기·검색이 동작하는 범용 게시판 구조를 구현합니다.
내 예약
내가 신청한 티타임을 예정·지난 예약으로 나누어 보고, 예약 취소와 알림 수신 상태를 확인할 수 있습니다.
- master-detail 레이아웃으로 예약 목록과 상세 정보 인라인 표시
- 취소 확인 대화상자와 되돌리기 토스트를 결합한 안전한 취소 흐름
- 이메일·알림톡 선택형 알림 채널 설정을 회원 프로필에 저장
예약 취소와 슬롯 복구, 알림 발송을 하나의 트랜잭션 흐름으로 묶어 상태 불일치를 막는 구조를 설계합니다.
프로젝트 진행 단계
단지 서비스 요건 정리 및 데이터 모델 설계 · 2026.11
공개·회원 영역 구분, 티타임 슬롯·예약·게시판 ERD 설계, Prisma 스키마 정의
회원 승인·권한 및 게시판 API 개발 · 2026.11
승인제 가입, JWT 인증, 게시판·댓글·검색 REST API 구현
잔여티 예약 엔진 구현 · 2026.11
슬롯 상태 전이, 중복 예약 차단 트랜잭션, 취소·복구 로직 구현
반응형 화면 및 알림 연동 · 2026.11
PC·태블릿·모바일 반응형 화면, 이메일·알림톡 발송 인터페이스 구현
개발 결과
기술적 주안점
- 공개 홈페이지와 회원 전용 서비스를 하나의 SPA 안에서 권한별로 나누어 보여주는 구조를 구현합니다
- 두 입주민이 같은 시간대를 동시에 신청해도 한 건만 확정되도록 처리하는 예약 확정 로직을 구현합니다
- 게시판을 관리자가 추가해도 코드 수정 없이 목록·글쓰기·검색이 동작하는 범용 게시판 구조를 구현합니다
