운영 백오피스 — 객실·패키지·판매채널 관리

문제

화면 구현은 끝났지만 전부 목업 데이터로 동작했고, 로그인·토큰·인증 헤더가 아예 없었다. 연동을 시작하자 백엔드가 낙관적 잠금(수정 시각 대조)을 필수로 바꾸면서 객실 수정·비노출·판매중지·재개 같은 쓰기 경로가 전부 400으로 깨졌다. 여러 운영자가 같은 데이터를 동시에 고치는 화면이라, 충돌과 일부 실패를 사용자가 이해할 수 있게 보여줘야 했다.

해결

• 인증·토큰 저장 → BFF 프록시·라우트가드 → 화면 연동 순서로 선행 관계를 고정 (인증 없이는 대부분의 호출이 불가능하므로)
• 배포 후 프록시가 빈 500을 내던 원인을, 먼저 사유가 담긴 오류 응답으로 바꿔 드러낸 뒤 nginx를 거치며 붙는 hop-by-hop 헤더(Connection 등)로 특정해 전달 전 제거. 로컬에는 그 헤더가 없어 재현되지 않던 건이었다
• 잠금 기준값을 요청 타입의 필수 필드로 지정해, 호출처에서 빠뜨리면 컴파일 단계에서 막히게 함
• 쓰기 응답은 마이크로초, 조회 응답은 초 단위라 응답값을 그대로 다음 요청에 쓰면 두 번째 저장이 곧바로 충돌하던 정밀도 불일치를 발견 → 임시로 쓰기 후 재조회, 백엔드가 정밀도를 맞춘 뒤 재조회 제거
• 일괄 수정은 1건 충돌로 전체가 막히지 않도록 부분 성공을 허용하고, 실패 대상·사유를 결과 팝업으로 표시 (기획 확인 후 반영)
• 공통 모달의 z-index를 마운트 순번(전역 카운터)이 아닌 현재 열린 깊이로 매기도록 변경(useSyncExternalStore) — 닫힌 모달도 번호를 소모해 드롭다운을 덮던 문제 해소
• 화면 조건문에만 있던 시설 권한을 서버의 권한 거부 응답 처리·진입 차단과 맞춤. 단 화면 게이트는 UX 방어선이고, 보안 경계는 서버 검증이라는 점을 분명히 기록

효과

• 테스트 시트 512케이스 중 441건 화면 테스트 수행, 발견 30건 반영·재검증
• 같은 기준값으로 동시 요청 3건을 보내 판매채널 저장이 모두 성공·병합되던 잠금 결함을 재현·보고 → 백엔드 수정 후 "1건 성공 + 2건 충돌"로 재검증 (원인 수정은 백엔드 담당)
• 백오피스 LNB 2depth 메뉴 미렌더를 Figma 원본과 대조해 2depth 그룹에 label 자리가 없던 설계 공백으로 특정, dev 서버 HMR 차단을 Next.js 허용 Origin 설정 누락으로 규명