FrontEnd

• TypeScript + React
  • Next.js (SSR): 서버에서 미리 화면을 만들어 보내는 구조. 검색 엔진 최적화(SEO)와 초기 로딩 속도가 중요한 서비스에 적합
  • React (CSR): 사용자와의 실시간 상호작용이 빈번한 서비스에 적합. 단 SEO(검색 노출)에 약함
  • 예매 페이지가 메인 페이지이므로 로딩 속도보다는 반응성을 최우선으로 해야한다고 판단. 또한, Next.js 서버를 돌리려면 Docker에서 Node.js 컨테이너가 하나 더 필요. 트래픽이 몰릴 경우 프론트엔드 서버가 터질 위험 존재
• Styled Component
  • Styled Component: Javascript 파일 내에서 CSS 작성 가능. styling 코드를 컴포넌트에서 분리할 수 있어 가독성이 뛰어남
  • TailwindCSS: 빠르게 적용 가능. 미리 정의된 클래스를 사용하여 러닝커브가 존재하지만 일관된 디자인을 제공하여 팀 프로젝트에서 효과적으로 예상. 반응형 디자인 구현이 쉬움
  • 이전에는 계속 TailwindCSS를 사용하였고 TailwindCSS의 가독성 문제가 불편하게 느껴져 Styled Component를 선택. 핵심 기능 구현에 중요한 사항이 아니므로 변경되어도 상관 없음
• Vite
• Zustand

BackEnd

• TypeScript + NestJS
  • Opinionated Framework이므로 코드 충돌 최소화 및 일관된 구조 유지 가능

DB

• PosrtgreSQL
  • MySQL(RDBMS)
  • PosrtgreSQL(ORDBMS)
  • PostgreSQL은 JSONB 타입이나 Array 타입을 제공하여 좌석 옵션 구축에 쉬움. MySQL로 좌석 속성을 넣으려면 별도 테이블을 만들어 조인하거나 컬럼을 계속 추가해야 함

그 외

• Infra: Docker + Nginx
  • 팀원 간 개발 환경 통일
  • 프론트엔드 정적 파일 서빙
• 통신 프로토콜: 기본적으로 REST API
  • 다수의 사용자가 사용할 예정이기 때문에 Websocket은 지양
  • 각 클라이언트마다 connection 생성 → 과부하 가능성 O
• Redis
  • 대기열 처리 및 좌석 선점에 사용

시스템 아키텍처 설계

graph TD
    %% 스타일 정의
    classDef client fill:#E3F2FD,stroke:#2196F3,stroke-width:2px,color:black;
    classDef gateway fill:#E8F5E9,stroke:#4CAF50,stroke-width:2px,color:black;
    classDef module fill:#FFF3E0,stroke:#FF9800,stroke-width:2px,color:black;
    classDef storage fill:#F3E5F5,stroke:#9C27B0,stroke-width:2px,color:black;

    %% 1. 클라이언트 계층
    subgraph ClientLayer ["User & Client"]
        Client["💻 Web Client<br/>(React + Vite)"]:::client
        User(("User")) --> Client
    end

    %% 2. API 게이트웨이 & 백엔드 (NestJS Monolith)
    subgraph BackendLayer ["Backend Server (NestJS)"]
        Gateway["🛡️ API Gateway / Guard<br/>(Auth, Rate Limit, Queue Token Check)"]:::gateway
        
        %% 모듈들 (서비스 로직)
        subgraph Services ["Application Modules"]
            QueueSvc["⏳ Queue Module<br/>(대기열 관리)"]:::module
            ReservationSvc["🎫 Reservation Module<br/>(좌석 선점 = 예매 확정)"]:::module
            AgentSvc["Agent Module<br/>(가상 봇 관)"]:::module
            
        end
    end

    %% 3. 데이터 계층
    subgraph DataLayer ["Persistence & Cache"]
        Redis[("Redis<br/>In-Memory")]:::storage
        DB[("PostgreSQL<br/>Disk DB")]:::storage
    end

    %% 연결 관계
    Client -- "HTTPS" --> Gateway
    
    Gateway --> QueueSvc
    Gateway --> ReservationSvc

    %% 대기열 로직
    QueueSvc -- "대기열 등록/순번확인" --> Redis

    %% 예약 로직 (결제 없이 즉시 확정)
    ReservationSvc -- "1. 좌석 선점 (SETNX)" --> Redis
    ReservationSvc -- "2. 예매 내역 저장 (Insert)" --> DB

    %% 봇 로직
    AgentSvc -- "가상 예매 시도" --> Redis

    %% 데이터 흐름 주석
    linkStyle default stroke-width:2px,fill:none,stroke:333;

• 좌석 예매에서의 DB 사용
  • PostgreSQL 에서는 좌석 정보를 저장
    • "1관 A열 1번 좌석은 스크린에서 5미터 떨어져 있고, 가격은 15,000원이며, 휠체어석이다.”
  • Redis에서는 좌석 ID만 저장
    • 이 ID의 좌석이 선점되었는지만 관리

기능 설계

보안 문자

서버에서 생성한 보안 문자를 토대로 이미지를 만들어 클라이언트에 반환. 보안 문자 검증은 서버에서 진행