← 포트폴리오 목록

청소 견적·인력 매칭 플랫폼

고객이 청소 견적을 요청하면 조건에 맞는 업체가 정원 안에서 참여하고, 같은 계정이 업체 모드와 작업자 모드로 바뀌어 구인 공고까지 이어지는 모바일 우선 반응형 웹을 설계합니다.

프로젝트 납품 요약

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

서비스 타입Web
업종플랫폼
기술 스택
ReactTypeScriptTailwind CSSNode.jsExpressPostgreSQLPrisma카카오싱크카카오 알림톡
주요 기능
  • 홈 — 오늘의 견적 요청과 모드 전환
  • 견적 요청 — 유형별 입력과 현장 사진
  • 견적 참여 — 정원 제어와 연락처 공개
  • 구인 — 공고·작업자 프로필·지원

프로젝트 개요

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

고객이 청소 견적을 요청하면 조건에 맞는 업체가 정원 안에서 참여하고, 같은 계정이 업체 모드와 작업자 모드로 바뀌어 구인 공고까지 이어지는 모바일 우선 반응형 웹을 설계합니다. 카카오싱크 간편가입과 카카오 알림톡 조건 발송, 연락처 공개 제어를 동작하는 화면으로 먼저 확인할 수 있도록 구성합니다.

작업 범위

  • 홈 — 오늘의 견적 요청과 모드 전환: 첫 화면에 내 지역으로 들어온 견적 요청이 청소 종류·면적·참여 자리와 함께 놓이고, 상단 모드 칩으로 고객·업체·작업자 화면을 오갑니다. 주 행동은 견적 요청하기 하나입니다
  • 견적 요청 — 유형별 입력과 현장 사진: 청소 종류를 고르면 유형에 맞는 추가 입력 칸이 열리고, 지역·면적·희망 일정·견적 방식을 적은 뒤 현장 사진을 여러 장 올려 순서를 바꿉니다. 마지막에 요청 내용을 확인하고 등록합니다
  • 견적 참여 — 정원 제어와 연락처 공개: 승인된 업체가 지역·청소 유형 조건으로 견적 목록을 걸러 상세를 열고 참여합니다. 참여 정원이 차면 마감되며, 고객 연락처는 참여한 업체에게만 풀립니다
  • 구인 — 공고·작업자 프로필·지원: 업체가 작업 장소·일시·모집 인원·보수를 적어 구인 공고를 올리고, 작업자는 지역 필터로 공고를 찾아 지원하거나 연락을 요청합니다. 공고에는 직업정보제공 표시사항이 함께 보입니다

주요 업무

  • 홈 — 오늘의 견적 요청과 모드 전환 화면: 한 계정에 복수 역할을 부여하는 권한 구조와 모드별 홈 구성을 설계합니다
  • 견적 요청 — 유형별 입력과 현장 사진 화면: 청소 유형별 추가 항목을 데이터로 관리하는 폼 스키마와 사진 압축·순서 저장을 설계합니다
  • 견적 참여 — 정원 제어와 연락처 공개 화면: 참여 정원을 동시 요청에서도 초과하지 않게 세는 트랜잭션과 연락처 공개 조건을 설계합니다
  • 구인 — 공고·작업자 프로필·지원 화면: 구인 공고 상태 전이와 작업자 프로필 매칭 조건을 설계합니다
청소 견적·인력 매칭 플랫폼
요구사항 정의

프로젝트 핵심 과제

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

한 계정이 고객·업체·작업자를 겸할 때 활동 이력과 알림이 섞이지 않

모드 단위 조회 기준을 정하는 설계가 필요합니다

업체가 동시에 참여를 누르는 상황에서 정원 초과와 중복 참여를 함께 막는 동시성 제어 설계가 필요합니다

카카오 알림톡 템플릿 심사와 발신프로필 승인이 외부 일정에 달려 있어

발송 계층을 발송사 교체가 가능한 구조로 분리합니다

청소 유형별로 다른 추가 입력 항목을 코드 수정 없이 늘릴 수 있는 데이터 구조 설계가 필요합니다

구인 공고의 허위 정보 관리와 직업정보제공 표시사항이 제도 개정에 따라 바뀔 수

확장 가능한 표시 구조 설계가 필요합니다

구현 내용

핵심 기능 상세

핵심 기능 1

홈 — 오늘의 견적 요청과 모드 전환

첫 화면에 내 지역으로 들어온 견적 요청이 청소 종류·면적·참여 자리와 함께 놓이고, 상단 모드 칩으로 고객·업체·작업자 화면을 오갑니다. 주 행동은 견적 요청하기 하나입니다.

  • 회원 하나에 고객·업체·작업자 역할을 다대다로 연결하고 현재 모드를 세션에 보관하는 구조 설계
  • 모드별 메뉴와 홈 데이터를 역할 권한 검사 미들웨어로 분리
  • 활동 이력은 계정 단위로 쌓고 화면에서는 모드 표시로 구분하는 조회 구조 구성

역할을 계정에 겹쳐 부여하되 화면과 권한은 모드 단위로 분리해, 한 사람이 업체 사장이면서 작업자인 경우도 활동 이력이 섞이지 않도록 설계합니다.

홈 — 오늘의 견적 요청과 모드 전환
홈 — 오늘의 견적 요청과 모드 전환 실제 화면
핵심 기능 2

견적 요청 — 유형별 입력과 현장 사진

청소 종류를 고르면 유형에 맞는 추가 입력 칸이 열리고, 지역·면적·희망 일정·견적 방식을 적은 뒤 현장 사진을 여러 장 올려 순서를 바꿉니다. 마지막에 요청 내용을 확인하고 등록합니다.

  • 청소 유형별 추가 입력 항목을 스키마 테이블로 두고 폼을 동적으로 구성
  • 브라우저에서 사진을 압축한 뒤 업로드하고 순서 값을 함께 저장
  • 유입 링크 코드와 추천인을 견적 요청 레코드에 자동 기록

유형 추가가 코드 수정 없이 설정 데이터로 가능하도록 폼 스키마를 분리하고, 사진 압축으로 저장 용량을 줄이는 업로드 흐름을 설계합니다.

견적 요청 — 유형별 입력과 현장 사진
견적 요청 — 유형별 입력과 현장 사진 실제 화면
핵심 기능 3

견적 참여 — 정원 제어와 연락처 공개

승인된 업체가 지역·청소 유형 조건으로 견적 목록을 걸러 상세를 열고 참여합니다. 참여 정원이 차면 마감되며, 고객 연락처는 참여한 업체에게만 풀립니다.

  • 참여 처리와 정원 확인을 한 트랜잭션에서 조건부 갱신으로 묶어 동시 참여 시 초과 방지
  • 연락처 필드는 참여 레코드 존재 여부로만 응답에 포함하는 서버 측 마스킹
  • 참여 시 고객에게 카카오 알림톡을 보내는 이벤트 큐 구성

정원 차감과 참여 등록을 한 단위로 처리하고 연락처는 서버에서 가려 보내, 화면 조작으로는 정원과 공개 범위를 우회할 수 없도록 설계합니다.

견적 참여 — 정원 제어와 연락처 공개
견적 참여 — 정원 제어와 연락처 공개 실제 화면
핵심 기능 4

구인 — 공고·작업자 프로필·지원

업체가 작업 장소·일시·모집 인원·보수를 적어 구인 공고를 올리고, 작업자는 지역 필터로 공고를 찾아 지원하거나 연락을 요청합니다. 공고에는 직업정보제공 표시사항이 함께 보입니다.

  • 공고 작성·수정·마감을 상태 전이 규칙으로 관리하고 마감 후 지원을 차단
  • 작업자 프로필의 활동지역·가능 업무·가용 일정으로 조건 매칭 쿼리 구성
  • 조건에 맞는 작업자에게 카카오 알림톡을 보내는 발송 대상 선정 로직 설계

공고 조건과 작업자 프로필을 같은 지역·업무 코드 체계로 맞춰 알림 대상과 목록 필터가 같은 결과를 쓰도록 설계합니다.

구인 — 공고·작업자 프로필·지원
구인 — 공고·작업자 프로필·지원 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

카카오싱크 가입과 복수 역할 구조 구현 · 2026.10

카카오싱크 간편가입, 약관 동의 버전 관리, 고객·업체·작업자 역할 연결과 모드 전환 구현

STEP 2

견적 요청과 사진 업로드 구현 · 2026.10

유형별 추가 입력 폼 스키마, 사진 압축·순서 저장, 유입 링크 코드 기록 구현

STEP 3

견적 참여·정원 제어·알림톡 구현 · 2026.10

정원 차감 트랜잭션, 연락처 공개 제어, 조건 매칭 알림톡 발송 큐 구현

STEP 4

구인 공고·반응형 검수·문서 작성 · 2026.10

공고 상태 전이, 작업자 지원, 모바일 우선 반응형 점검과 API·DB 문서 초안 작성

개발 결과

참여 정원 동시성 제어 구조 설계참여 등록과 정원 확인을 한 트랜잭션으로 묶어 동시 참여에도 정원을 넘지 않는 구조를 설계
연락처 서버 측 마스킹 구현참여 레코드 유무로 응답 필드를 결정해 화면 조작으로 우회할 수 없는 연락처 공개 제어 구현
복수 역할 모드 전환 구조 구축한 계정에 역할을 겹쳐 부여하고 모드별 권한·메뉴·이력을 분리하는 구조를 구축
유형별 견적 폼 스키마 설계청소 유형별 추가 항목을 설정 데이터로 관리해 유형 추가 시 코드 수정 없이 폼이 바뀌도록 설계

기술적 주안점

  • 역할을 계정에 겹쳐 부여하되 화면과 권한은 모드 단위로 분리해, 한 사람이 업체 사장이면서 작업자인 경우도 활동 이력이 섞이지 않도록 설계합니다
  • 유형 추가가 코드 수정 없이 설정 데이터로 가능하도록 폼 스키마를 분리하고, 사진 압축으로 저장 용량을 줄이는 업로드 흐름을 설계합니다
  • 정원 차감과 참여 등록을 한 단위로 처리하고 연락처는 서버에서 가려 보내, 화면 조작으로는 정원과 공개 범위를 우회할 수 없도록 설계합니다

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

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

프로젝트 문의