기존 레거시 백엔드를 유지하면서 React 관리자 시스템 새로 만들기

운영 중인 방탈출 카페의 예약 관리 시스템을 리뉴얼했다. 기존 Flask + MariaDB 백엔드는 그대로 유지하면서, 프론트엔드만 React로 새로 구축하는 작업이었다.

---

배경

기존 시스템은 Flask로 서버사이드 렌더링(Jinja2 템플릿)으로 만들어진 관리자 페이지였다. 기능은 다 있었지만 UX가 투박하고, 모바일에서 쓰기 불편했다. 백엔드 로직은 이미 잘 동작하고 있었기 때문에 굳이 다시 만들 필요가 없었다. 그래서 프론트엔드만 갈아끼우는 전략을 선택했다.

---

아키텍처

모바일/브라우저
    ↓ HTTPS
Firebase Hosting (React SPA)
    ↓ Firebase Functions (HTTPS → HTTP 프록시)
Flask API 서버 (로컬 네트워크)
    ↓
MariaDB

핵심은 Firebase Functions를 단순 프록시로만 사용하는 것이다. React 앱에서 직접 로컬 HTTP 서버를 호출할 수 없으니, Functions가 HTTPS 요청을 받아 내부 서버로 포워딩한다. Firestore 같은 Firebase 기능은 전혀 쓰지 않았다.

---

구현한 기능들

예약 관리 (4탭 구조)

시간표 탭이 핵심이다. 날짜별로 운영 슬롯을 한눈에 볼 수 있고, 60초마다 자동으로 새로고침된다. 슬롯마다 예약 상태, 입금 여부, SMS 발송 현황을 표시한다.

예약 상세에서 할 수 있는 것들:

• 입금액/메모 수정
• SMS 발송 (입금 확인 문자 / 미입금 독촉 문자)
• 입장 상태 토글 (미입장 ↔ 입장)
• 날짜/시간 변경
• 예약 정보 수정
• 취소 + 환불 정보 입력
• 완전 삭제

빠른 예약 추가 기능도 넣었다. 인원 수 버튼을 누르면 현금/카드 금액이 자동으로 계산된다. DB에 저장된 가격 기준(현금 총액)에서 카드는 인원당 1,000원을 더한다.

테마 / 운영시간 관리

테마 추가·수정·삭제, 공개/비공개 전환. 운영시간도 주중/주말 구분해서 최대 12개 시간 슬롯, 10개 인원별 가격을 설정할 수 있다.

전체 예약 / 취소 목록

검색, 페이지네이션, CSV 다운로드(엑셀 호환 BOM 포함).

---

삽질 기록

1. 상태 토글이 안 됨

입장 상태를 바꾸는 버튼을 눌러도 아무 변화가 없었다. 원인을 파고들어 보니:

• 프론트에서 현재 상태값(state)을 그대로 서버에 보냄
• 서버는 받은 값을 그대로 DB에 씀
• 결과적으로 아무것도 안 바뀜

해결책은 프론트에서 다음 상태를 계산해서 보내는 것이었다. 미입장 → 입장, 입장 → 미입장. 그리고 키 이름도 new_state로 명확하게 바꿨다.

const nextState = rev.state === '미입장' ? '입장' : '미입장';
await adminApi.updateState(rev.id, nextState);

2. SQL 따옴표 누락

헤어독(heredoc) 방식으로 파이썬 파일에 코드를 추가했는데, SQL 문자열의 따옴표가 날아갔다.

-- 잘못됨
UPDATE theme_rev SET other=취소 WHERE ...

-- 올바름
UPDATE theme_rev SET other='취소' WHERE ...

터미널에서 sed로 수정했다. heredoc 쓸 때 따옴표 이스케이프에 주의해야 한다.

3. 가격 계산 방향 착각

DB에 저장된 가격이 현금인지 카드인지 헷갈려서 처음에 반대로 구현했다. DB 가격 = 현금(사전입금) 총액이 맞다. 카드 = 현금 + 인원 × 1,000원.

---

파일 크기 관리

파일당 500줄 이하를 지키려다 보니 컴포넌트 분리를 강제하게 됐다. 예약 관련 UI가 커지면서 AdminReservations.tsx가 넘칠 것 같아 ReservationComponents.tsx로 폼 컴포넌트들을 분리했다. 결과적으로 구조가 더 깔끔해졌다.

---

마무리

레거시 시스템을 통째로 갈아엎지 않고도 UX를 크게 개선할 수 있다는 걸 다시 확인했다. Firebase Functions 프록시 패턴은 외부에서 접근할 수 없는 내부 서버를 웹에 안전하게 연결할 때 꽤 유용하다.

남은 과제는 실제 도메인 연결과 기존 시스템과의 완전한 교체. 기능 검증이 끝나면 전환할 예정이다.