← 포트폴리오 목록

하루숙 고객 관리 콘솔

운영 웹앱의 확장 데모로, 가입한 사업장을 관리하는 슈퍼어드민 콘솔을 구현합니다.

프로젝트 납품 요약

아래 프로젝트 개요와 핵심 기능에서 구현 화면을 확인할 수 있습니다.

서비스 타입Web
업종플랫폼
기술 스택
React 18ViteTypeScriptTailwind CSSCloudflare WorkersHonoCloudflare D1베드24 APIVitest
주요 기능
  • 고객 관리
  • 격리 시험 보고서
  • 권한 검사 현황
  • 알림·보안 설정

프로젝트 개요

범위: 개발, 디자인, 기획

운영 웹앱의 확장 데모로, 가입한 사업장을 관리하는 슈퍼어드민 콘솔을 구현합니다. 고객별 온보딩 단계, 계정 정지·재개, 데이터 격리 자동 시험 보고서, 권한 검사 일원화 현황, 알림·보안 설정을 포함하며 운영 웹앱과 같은 Hono·D1 구조를 사용합니다.

작업 범위

  • 고객 관리: 운영자가 가입 고객 목록에서 온보딩 단계, 상태, 베드24 연결 여부, 마지막 로그인을 확인합니다. 상세에서 정지·다시 열기와 활동 로그를 처리합니다
  • 격리 시험 보고서: 운영자가 사업장 쌍별 데이터 격리 자동 시험 결과를 확인합니다. 조회 라우트별 기대 0건과 실제 건수, 통과·실패와 실패 사유를 표로 봅니다
  • 권한 검사 현황: 운영자가 전체 API 라우트에 테넌트 스코프와 역할 검사 미들웨어가 적용됐는지 표로 확인합니다. 적용되지 않은 라우트는 경고로 표시됩니다
  • 알림·보안 설정: 운영자가 새 기기 로그인 알림의 발송 채널을 정하고 발송 로그를 확인합니다. 기본 채널은 이메일입니다

주요 업무

  • 고객 관리 화면: 고객 표(사업장명·숙소 수·온보딩 N/5·상태·베드24 연결·마지막 로그인·가입일), 상태·단계 필터와 검색, 고객 상세 화면의 정지·다시 열기 대화상자와 활동 로그를 설계합니다
  • 격리 시험 보고서 화면: 최근 실행 목록, 사업장 쌍×라우트 결과 표, 실패 건 상세, 보고서 내보내기 버튼을 설계합니다. 시험 스크립트는 한 사업장 토큰으로 다른 사업장 데이터를 조회해 0건인지 검증합니다
  • 권한 검사 현황 화면: 라우트 목록×적용 미들웨어(테넌트 스코프·역할 검사) 표, 미적용 라우트 경고 띠, 라우트별 필요 역할 열을 설계합니다
  • 알림·보안 설정 화면: 채널 선택(이메일 기본), 알림 문구 미리보기, 발송 로그 표(대상·시각·결과)를 설계합니다. 채널이 바뀌어도 발송 코드는 같은 인터페이스를 사용합니다
하루숙 고객 관리 콘솔
요구사항 정의

프로젝트 핵심 과제

프로젝트 진행 시 해결한 핵심 기술 과제입니다.

정지된 사업장의 이미 발급된 세션을 즉시 차단하는 미들웨어 검사 위치와 비용 설계

라우트가 늘어도 격리 시험이 누락되지 않

시험 대상 자동 생성 규칙 설계 필요

미들웨어 체인을 정적으로 읽을 때 조건부 적용 라우트를 구분하는 점검 방식 설계

알림 채널이 바뀌어도 발송 로그 형식이 유지되

어댑터 응답 규격 설계 필요

구현 내용

핵심 기능 상세

핵심 기능 1

고객 관리

운영자가 가입 고객 목록에서 온보딩 단계, 상태, 베드24 연결 여부, 마지막 로그인을 확인합니다. 상세에서 정지·다시 열기와 활동 로그를 처리합니다.

  • 고객 목록 API가 사업장 테이블과 온보딩 진행 테이블을 조인해 단계 필터를 서버에서 처리하는 구조 설계
  • 정지 상태를 세션 검사 미들웨어가 읽어 정지된 사업장의 요청을 즉시 거절하도록 구현
  • 정지·재개·설정 변경을 활동 로그 테이블에 사유와 함께 기록하는 감사 구조 설계

정지 처리가 로그인 화면이 아니라 API 미들웨어에서 적용되도록 설계해 이미 로그인한 세션도 바로 차단합니다.

고객 관리
고객 관리 실제 화면
핵심 기능 2

격리 시험 보고서

운영자가 사업장 쌍별 데이터 격리 자동 시험 결과를 확인합니다. 조회 라우트별 기대 0건과 실제 건수, 통과·실패와 실패 사유를 표로 봅니다.

  • Vitest 스크립트가 사업장 A 토큰으로 B 데이터 조회를 시도해 0건을 확인하는 테넌트 쌍 시험 구조 설계
  • 라우트 목록에서 시험 대상을 자동으로 만들어 새 라우트가 시험에서 빠지지 않도록 구현
  • 시험 결과를 D1에 저장하고 실패 시 라우트와 사유가 보고서에 남도록 구성

격리 시험 대상을 라우트 정의에서 자동 생성해 새 기능이 추가돼도 시험이 함께 늘어나도록 설계합니다.

격리 시험 보고서
격리 시험 보고서 실제 화면
핵심 기능 3

권한 검사 현황

운영자가 전체 API 라우트에 테넌트 스코프와 역할 검사 미들웨어가 적용됐는지 표로 확인합니다. 적용되지 않은 라우트는 경고로 표시됩니다.

  • Hono 라우트 정의에서 미들웨어 체인을 읽어 적용 여부를 표로 만드는 점검 스크립트 설계
  • 미적용 라우트가 있으면 시험 보고서와 같은 화면에서 경고하도록 구현
  • 필요 역할 정의를 권한 표와 같은 소스에서 읽어 두 화면이 어긋나지 않도록 구성

권한 검사를 미들웨어 한 곳으로 일원화한 결과를 라우트 단위로 점검할 수 있게 설계합니다.

권한 검사 현황
권한 검사 현황 실제 화면
핵심 기능 4

알림·보안 설정

운영자가 새 기기 로그인 알림의 발송 채널을 정하고 발송 로그를 확인합니다. 기본 채널은 이메일입니다.

  • 발송 채널을 어댑터 인터페이스로 분리해 이메일 외 채널을 추가해도 호출부가 바뀌지 않도록 설계
  • 발송 결과를 D1 로그 테이블에 저장하고 실패 건 재시도 버튼을 연결하는 구조 구현
  • 새 기기 판정 기준을 설정 테이블로 분리해 화면에서 바꿀 수 있도록 구성

채널이 정해지지 않은 요구를 발송 어댑터 구조로 풀어 이메일로 시작하고 이후 교체할 수 있도록 설계합니다.

알림·보안 설정
알림·보안 설정 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

슈퍼어드민 권한 모델 설계 · 2026.11

운영자 역할 정의와 고객 상태(활성·정지·온보딩 중) 전이 규칙 설계

STEP 2

고객 관리 API와 활동 로그 개발 · 2026.11

고객 목록·정지·재개 API와 감사 로그 테이블 구현

STEP 3

격리 시험 스크립트와 보고서 개발 · 2026.11

Vitest 사업장 쌍 시험, 결과 저장, 보고서 화면 구현

STEP 4

권한 점검·알림 설정 화면 개발 · 2026.11

라우트 미들웨어 점검 표와 알림 채널 설정 React 화면 구현

개발 결과

고객 상태 전이와 감사 로그 설계활성·정지·온보딩 상태 전이를 미들웨어에서 강제하고 모든 변경을 사유와 함께 로그로 남기는 구조를 설계합니다.
라우트 기반 격리 자동 시험 구축라우트 정의에서 시험 대상을 자동 생성하고 사업장 쌍마다 0건을 검증하는 Vitest 시험 구조를 구축합니다.
권한 검사 적용 현황 점검기 구현Hono 미들웨어 체인을 읽어 미적용 라우트를 찾아내는 점검 스크립트와 현황 표를 구현합니다.
알림 발송 어댑터 구조 설계이메일을 기본으로 하고 채널을 교체할 수 있는 발송 인터페이스와 결과 로그 테이블을 설계합니다.

기술적 주안점

  • 정지 처리가 로그인 화면이 아니라 API 미들웨어에서 적용되도록 설계해 이미 로그인한 세션도 바로 차단합니다
  • 격리 시험 대상을 라우트 정의에서 자동 생성해 새 기능이 추가돼도 시험이 함께 늘어나도록 설계합니다
  • 권한 검사를 미들웨어 한 곳으로 일원화한 결과를 라우트 단위로 점검할 수 있게 설계합니다

유사한 프로젝트를 기획하고 계신가요?

필요한 기능과 일정을 알려주시면 개발 범위를 함께 정리하겠습니다.

프로젝트 문의