XOrder

Stack

무엇으로 만들었나

새로운 걸 써보려고 고른 건 거의 없다. 대부분은 문제가 먼저 있었고, 그걸 감당할 수 있는 가장 익숙한 도구를 골랐다.

소스 파일
약 700개
코드
약 8만 줄
도메인 엔티티
34개
HTTP 엔드포인트
184개
스키마 마이그레이션
77단계
지원 언어
13개

생성물과 외부 패키지를 뺀 직접 작성 코드 기준.

Toolchain

계층별 구성

백엔드

주문·메뉴·매장 도메인과 실시간 신호의 출발점

  • Java 17언어
  • Spring Boot 3.3웹 · 데이터 · 시큐리티 · 검증
  • PostgreSQLJSONB를 실제로 쓰는 컬럼 여덟 곳
  • Flyway스키마의 단일 소유자 — 코드는 검증만
  • JWT무상태 인증, 액세스/리프레시 분리
  • MQTT (v5 클라이언트)상태 변경을 단말에 알리는 발행자

태블릿 앱

손님용·점원용 두 앱이 같은 기반을 공유한다

  • React Native 0.85새 렌더링 아키텍처 적용
  • Expo 56빌드와 업데이트 런타임
  • Zustand상태 관리
  • MMKV동기 읽기가 가능한 로컬 저장소
  • i18nextUI 문구 13개국어
  • Kotlin 포그라운드 서비스MQTT 수신을 네이티브로 — 앱이 내려가도 살아 있어야 해서

관리자 웹

점주와 운영자가 매장을 다루는 화면

  • Next.js 16App Router
  • React 19
  • TypeScript
  • Tailwind CSS 4
  • TanStack Query서버 상태
  • Zustand클라이언트 상태

인프라 · 배포

개인 NAS 위에서 개발 환경과 운영 환경을 나눠 돌린다

  • DockerAPI·웹·DB·브로커·스토리지 컨테이너
  • GitHub Actions빌드 후 이미지 푸시, SSH로 재기동
  • nginx정적 파일과 앱 번들 서빙
  • 자체 OTA 서버매니페스트 조립과 릴리스 제어

Surfaces

네 개의 표면

같은 기반 위에 올라가 있지만, 쓰는 사람이 달라서 만드는 방식도 달라졌다.

오더앱

React Native · 가로 고정

손님이 테이블에서 쓰는 태블릿

25
화면 구성 파일
13
지원 언어

마스터앱

React Native · 상단 탭 구조

점원이 매장에서 쓰는 태블릿

5
소리 + 실시간
알림

어드민 웹

Next.js · App Router

점주와 운영자가 브라우저에서

40
라우트
9
권한 롤

API 서버

Spring Boot · PostgreSQL

위 셋이 전부 여기로 붙는다

16
도메인
34
엔티티
184
엔드포인트
77
마이그레이션

Conventions

지키기로 한 것들

스키마는 마이그레이션이 소유한다. 코드가 테이블을 만들지 않고, 시작할 때 맞는지 확인만 한다.

마이그레이션 파일에는 무엇을 바꿨는지가 아니라 왜 바꿨는지를 적는다.

목록형 코드값은 서버가 갖고, 클라이언트는 모르는 값을 만나도 죽지 않는다.

시각은 어디서 보든 한국 시간으로 표시한다. 저장은 UTC로.

권한은 화면을 숨겨서가 아니라 서버에서 막는다.