← 포트폴리오 목록

하루숙 사업장 운영 웹앱

본 요구사항(다중 계정 전환, 계정 간 데이터 격리, 셀프 온보딩, 베드24 계정 연결, 로그인 기기 관리, 역할별 권한 표)을 반영한 숙박업소 운영 웹앱 맞춤 구현한 프로젝트입니다.

프로젝트 납품 요약

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

서비스 타입Web
업종플랫폼
기술 스택
React 18ViteTypeScriptTailwind CSSCloudflare WorkersHonoCloudflare D1베드24 API
주요 기능
  • 운영 홈
  • 온보딩
  • 기기 관리
  • 권한 표

프로젝트 개요

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

본 요구사항(다중 계정 전환, 계정 간 데이터 격리, 셀프 온보딩, 베드24 계정 연결, 로그인 기기 관리, 역할별 권한 표)을 반영한 숙박업소 운영 웹앱 맞춤 구현한 프로젝트입니다. 첫 화면은 사업장 스위처와 오늘 체크인·체크아웃 요약으로 구성했습니다.

작업 범위

  • 운영 홈: 호스트가 사업장 스위처로 가입한 사업장을 바꾸고 오늘 체크인·체크아웃·점유 객실과 채널 예약을 한 화면에서 봅니다. 온보딩이 남은 사업장은 단계 체크리스트가 위에 나타납니다
  • 온보딩: 신규 호스트가 사업장 정보, 베드24 연결, 숙소 가져오기, 공동호스트 초대, 완료 5단계를 스스로 마칩니다. 베드24 API 키를 입력하면 계정명과 숙소 수가 확인됩니다
  • 기기 관리: 호스트가 로그인된 기기 목록에서 브라우저·위치·마지막 활동을 확인하고 특정 기기를 원격 로그아웃합니다. 새 기기 로그인 알림 설정과 알림 예시도 같은 화면에 있습니다
  • 권한 표: 대표가 역할별(대표·매니저·프런트·청소·읽기 전용) 조회·생성·수정·삭제 가능 범위를 표로 확인하고 수정합니다. 사람 추가는 역할과 숙소 쌍으로 배정합니다

주요 업무

  • 운영 홈 화면: 좌상단 사업장 스위처(이름·도시·숙소 수·검색), 오늘 요약 카드, 오늘 할 일 목록, 온보딩 N/5 체크리스트 카드를 설계합니다. 사업장을 바꾸면 모든 조회가 선택한 사업장 범위로 다시 계산됩니다
  • 온보딩 화면: 왼쪽 단계 목록과 오른쪽 폼의 5단계 위자드를 설계합니다. 가져오기 단계는 숙소별 성공·실패 결과 표를 보여 주고 실패 사유를 함께 표시합니다
  • 기기 관리 화면: 기기 표, 현재 세션 표시, 다른 모든 기기 로그아웃 확인 대화상자, 새 기기 알림 토글과 알림 예시 카드를 설계합니다. 알림 채널은 이메일로 가정합니다
  • 권한 표 화면: 역할 열과 기능 행의 권한 매트릭스, 역할 선택 시 열리는 기능 묶음 토글과 숙소별 배정 패널을 설계합니다. 같은 권한 정의를 슈퍼어드민 화면의 권한 검사 현황도 사용합니다
하루숙 사업장 운영 웹앱
요구사항 정의

프로젝트 핵심 과제

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

기존 코드에 테넌트 조건이 없는 쿼리가 남아 있을 경우를 대비해 쿼리 목록을 전수 점검하는 절차 설계

베드24 API 응답이 숙소마다 다른 형식일 때 일부 실패를 허용하며 가져오는 매핑 설계

새 기기 알림 발송 채널이 정해지지 않아 이메일을 가정하되 채널을 바꿀 수 있는 발송 인터페이스 설계

한 사람이 사업장마다 다른 역할을 갖는 경우의 권한 판정 규칙 설계

구현 내용

핵심 기능 상세

핵심 기능 1

운영 홈

호스트가 사업장 스위처로 가입한 사업장을 바꾸고 오늘 체크인·체크아웃·점유 객실과 채널 예약을 한 화면에서 봅니다. 온보딩이 남은 사업장은 단계 체크리스트가 위에 나타납니다.

  • 세션 토큰에 사업장 ID를 담고 Hono 미들웨어가 모든 D1 쿼리에 테넌트 조건을 주입하는 구조 설계
  • 사업장 전환 시 React 상태와 조회 캐시를 사업장 키로 분리해 이전 사업장 데이터가 남지 않도록 구현
  • 체크인·체크아웃 요약을 D1 집계 쿼리 한 번으로 만들어 홈 카드가 같은 숫자를 쓰도록 구성

계정 간 데이터 격리를 화면이 아니라 API 미들웨어와 쿼리 단계에서 강제해 어느 화면에서도 다른 사업장 데이터가 보이지 않도록 설계합니다.

운영 홈
운영 홈 실제 화면
핵심 기능 2

온보딩

신규 호스트가 사업장 정보, 베드24 연결, 숙소 가져오기, 공동호스트 초대, 완료 5단계를 스스로 마칩니다. 베드24 API 키를 입력하면 계정명과 숙소 수가 확인됩니다.

  • 베드24 API 키를 Workers 시크릿 암호화 저장소에 보관하고 검증 호출 결과만 D1에 기록하는 구조 설계
  • 숙소 가져오기를 숙소 단위로 나눠 일부 실패해도 성공 건은 등록되는 부분 성공 처리 구현
  • 온보딩 진행 단계를 D1에 저장해 중간에 나가도 마지막 단계에서 이어 하도록 구성

기존 베드24 연동 로직을 계정별 토큰으로 호출하도록 감싸 가입 고객이 자신의 베드24 계정을 직접 연결하는 흐름을 설계합니다.

온보딩
온보딩 실제 화면
핵심 기능 3

기기 관리

호스트가 로그인된 기기 목록에서 브라우저·위치·마지막 활동을 확인하고 특정 기기를 원격 로그아웃합니다. 새 기기 로그인 알림 설정과 알림 예시도 같은 화면에 있습니다.

  • 세션을 D1 세션 테이블에 기기 지문과 함께 저장하고 로그아웃 시 해당 행을 폐기하는 구조 설계
  • 요청마다 세션 유효성을 확인하는 Hono 미들웨어로 원격 로그아웃이 즉시 적용되도록 구현
  • 처음 보는 기기 지문이 로그인하면 알림 큐에 이메일 발송 작업을 등록하는 흐름 설계

세션 폐기를 토큰 만료에 기대지 않고 서버 세션 테이블에서 즉시 처리해 원격 로그아웃이 바로 적용되도록 설계합니다.

기기 관리
기기 관리 실제 화면
핵심 기능 4

권한 표

대표가 역할별(대표·매니저·프런트·청소·읽기 전용) 조회·생성·수정·삭제 가능 범위를 표로 확인하고 수정합니다. 사람 추가는 역할과 숙소 쌍으로 배정합니다.

  • 역할별 권한 정의를 D1 한 곳에 두고 Hono 권한 미들웨어가 라우트마다 같은 함수로 검사하는 구조 설계
  • 역할과 숙소 배정을 별도 테이블로 분리해 한 사람이 숙소마다 다른 역할을 갖도록 구현
  • 권한 표 화면과 API 검사가 같은 정의를 읽어 화면과 서버 결과가 어긋나지 않도록 구성

흩어진 권한 검사 로직을 미들웨어 한 곳으로 모아 새 라우트가 추가돼도 같은 검사를 거치도록 설계합니다.

권한 표
권한 표 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

테넌트 구조와 데이터 스키마 설계 · 2026.11

사업장·사용자·역할 테이블과 D1 쿼리 테넌트 조건 규칙 정의

STEP 2

권한 미들웨어와 세션 API 개발 · 2026.11

Hono 권한 검사 미들웨어, 세션 폐기 API, 새 기기 알림 흐름 구현

STEP 3

베드24 연결과 숙소 가져오기 구현 · 2026.11

계정별 API 키 검증과 숙소 단위 부분 성공 가져오기 구현

STEP 4

온보딩·운영 홈 화면 개발 · 2026.11

사업장 스위처, 5단계 위자드, 권한 표 React 화면 구현

개발 결과

사업장 단위 데이터 격리 구조 설계세션의 사업장 ID를 미들웨어가 모든 D1 쿼리에 주입하는 구조를 설계하고 화면별 조회 경로를 같은 규칙으로 묶습니다.
5단계 셀프 온보딩 위자드 구현사업장 정보부터 베드24 연결, 숙소 가져오기, 공동호스트 초대까지 이어하기가 가능한 단계 저장 구조를 구현합니다.
서버 세션 기반 원격 로그아웃 설계세션 테이블에서 행을 폐기해 원격 로그아웃이 즉시 적용되는 구조와 새 기기 이메일 알림 큐를 설계합니다.
역할×숙소 권한 판정 규칙 구축한 사람이 숙소마다 다른 역할을 갖는 경우를 별도 배정 테이블로 풀고 권한 표와 API가 같은 정의를 읽도록 구축합니다.

기술적 주안점

  • 계정 간 데이터 격리를 화면이 아니라 API 미들웨어와 쿼리 단계에서 강제해 어느 화면에서도 다른 사업장 데이터가 보이지 않도록 설계합니다
  • 기존 베드24 연동 로직을 계정별 토큰으로 호출하도록 감싸 가입 고객이 자신의 베드24 계정을 직접 연결하는 흐름을 설계합니다
  • 세션 폐기를 토큰 만료에 기대지 않고 서버 세션 테이블에서 즉시 처리해 원격 로그아웃이 바로 적용되도록 설계합니다

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

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

프로젝트 문의