개발 로그

plan정보구조(IA) · 화면 흐름 설계

페이지 구조(홈·서비스·요금·범위·프로세스·회사소개·상담)를 그려보고 모바일 우선으로 동선을 정리. 경쟁사(청연 등)도 훑으며 톤을 참고했다.

infra기술 스택 확정 · 프로젝트 셋업

Next.js(App Router)로 결정 — SEO와 속도. 사장님이 문구·가격을 자주 바꿀 게 보여서 콘텐츠를 코드에서 떼어내 config로 모으는 구조로 깔았다. 초반 토큰 잡는 데 시간이 걸렸지만 이후가 훨씬 편했다.

• └config-first 구조(단일 소스)
• └그린 디자인 토큰·타이포 정의

designfeat메인 페이지 1차 구축

히어로·강점·서비스 카드·청소 범위 미리보기·프로세스 티저. 스크롤 등장 효과는 라이브러리 대신 가벼운 자체 구현으로.

feat공통 컴포넌트 세트

헤더(드롭다운)·푸터·버튼·아이콘. 헤더 드롭다운의 hover/키보드 포커스 동작 잡는 데 은근 시간이 들었다.

feat서비스 상세 페이지군 (정적 생성)

정기/1회 청소, 집중 케어(동적 라우트), 청소 범위, 20단계 프로세스. generateStaticParams로 SSG 처리해 로딩·SEO 확보.

• └동적 라우트 + SSG

content실사업자 정보 수집·반영

사업자번호·송도 주소·연락처·인스타 연동. 자료를 사장님께 받는 데 하루이틀 텀이 있어 그동안 다른 페이지를 진행.

content상담 허브 페이지 (/contact)

상담 4단계·FAQ 구성, 전화·카톡 딥링크 연결.

content공식 요금표 데이터화

이미지로 받은 요금표를 표로 옮김. 평형 기준이 자료마다 살짝 달라 사장님께 두 번 확인했다.

content회사소개 + 전담 매니저 소개

회사 이야기와 매니저 그리드(상세 모달) 구성.

contentdesign인스타 릴스 갤러리 + 실제 자산

@wonscleaning 릴스를 사이트 안 모달에서 재생하도록. 한 영상은 라이선스 음원이라 임베드 재생이 막혀 ‘인스타에서 보기’로 우회 — 인스타 정책이라 어쩔 수 없었다.

• └임베드 모달 플레이어
• └음원 라이선스 영상 우회 처리

design히어로 영상/숏폼 2개 안 + 카톡 버튼

사장님이 고를 수 있게 히어로를 두 가지 안으로. 우하단 카톡 플로팅 버튼도 추가.

fixdesign접근성·SEO 점검 패스

단일 h1·랜드마크·포커스 트랩·reduced-motion 등 접근성 점검. 검색·공유 대비 JSON-LD와 OG 이미지도 넣었다.

• └WCAG 지향 a11y 점검
• └JSON-LD · 동적 OG(1200×630)

featinfra예약 접수 백엔드 + 첫 배포

Supabase 연동 예약 접수와 관리자 캘린더 초기본. Vercel 첫 배포 때 환경변수를 빠뜨려 빌드가 한 번 깨졌다 복구.

• └Supabase 연동
• └zod 검증 + 허니팟
• └Vercel 배포

plan1차 피드백 정리 · 범위 확정

‘정기청소 → 관리청소’ 리포지셔닝, 예약을 네이버 플레이스처럼 고도화. 바뀔 페이지를 전부 리스트업해 영향도를 봤다.

plan예약 UX 레퍼런스 리서치

네이버 플레이스·미용실 예약 앱들을 직접 써보며 흐름을 뜯어봤다. ‘즉시 확정’이냐 ‘요청→확정’이냐 고민하다, 매니저가 현장을 보고 수락하는 구조가 맞다고 판단.

• └네이버 플레이스 예약 UX 분석
• └요청→확정 모델 결정

copycontent가정집 ‘관리청소’ 리브랜딩

전 페이지 카피를 ‘입주청소가 아닌 시간제 관리청소’ 톤으로 교체. 정기 1~3주 주기·할인, 평형 6구간. config 구조 덕에 다수 페이지를 빠르게 반영했다.

content공간별 4종 재편 · 범위 명확화

베란다·세탁실 단독 상품을 빼고 내창/창틀을 추가. 제외 항목(이사·입주/프리미엄/고소작업 등)을 글로 못박아 분쟁 소지를 줄였다.

feat예약 DB 스키마 설계

예약 테이블에 매니저·슬롯·상태(요청·확정·완료·취소)를 얹었다. 처음부터 제일 걱정한 건 ‘같은 시간에 두 명이 잡으면?’이었다.

• └예약 데이터 모델
• └상태 흐름 설계

featfix더블부킹 — 동시성 디버깅 (제일 오래 걸림)

처음엔 신청 직전에 ‘이미 찼나?’ 확인하는 식으로 막았는데, 두 명이 같은 순간에 누르면 둘 다 통과하는 구멍을 발견. 결국 DB 차원에서 못박는 방식으로 다시 설계해 해결했다. 이번 작업에서 시간을 가장 많이 쓴 지점.

• └부분 유니크 인덱스로 원자적 차단(동시 요청 시 409)
• └경쟁 조건(race condition) 재현·해결

feat고객 예약 화면 + 가용성 API

매니저 → 날짜 → 1시간 슬롯 흐름. 예약 화면에 다른 고객 정보가 새지 않도록, ‘찬 시간대’만 내려주는 API를 따로 뒀다.

• └개인정보 비노출 가용성 API
• └허니팟 + 서버 검증

featfix권한(RLS) · 로그인 — 세션 삽질

매니저는 본인 것만, 대표는 전체. 코드로 거르다가 ‘이건 DB가 강제해야 안전하다’ 싶어 RLS로 다시 짰다. 매니저분들껜 이메일이 번거로울 듯해 a·b·c·d 아이디 로그인으로. SSR 세션 쿠키 처리에서 한참 헤맸다.

• └Supabase RLS 역할 격리
• └@supabase/ssr 세션 디버깅
• └아이디 로그인(이메일 합성)

featdesign매니저 · 대표 운영 대시보드

매니저(캘린더·휴무·요청 수락/거절·후기·고객 메모·비포애프터), 대표(매니저별 현황·전화예약·재배정). 무료 캘린더라 매니저별 열 분리가 안 돼서, 월 뷰 + 자체 4단 타임라인으로 타협했다. 매니저분들 연세를 생각해 글씨·버튼을 크게.

• └FullCalendar 한계 우회(자체 4단 타임라인)
• └비포/애프터 사진 업로드 파이프라인

contentfeat이용 규정 신설 + 촬영 영상 업로드

취소·환불·파손 보상 규정 페이지를 만들고, ‘피톤치드’ 표현을 전부 정리. 6/11 촬영분 편집본 4편을 올렸다.

fix영상 썸네일 깨짐 — 원인 추적

새로 올린 영상만 썸네일이 안 떠서 한참 봤더니, 이미지 컴포넌트가 폴백 없이 로컬 파일을 직접 부르는 구조였다. 인스타 공개 커버를 받아 같은 규칙으로 저장해 해결.

• └next/image 폴백 부재 디버깅
• └인스타 커버 이미지 수급

fix정합성 감사 — 숨은 버그 수정

대표 전화예약 폼의 기본값이 선택지와 안 맞아 칸이 비던 버그, 공간별 예상 매출이 0원으로 찍히던 계산 오류(서비스명에 ‘청소’가 들어가며 분기가 틀어짐)를 찾아 고쳤다. 후기·영상 설명의 ‘이사·입주’ 같은 비제공 서비스 문구도 정리.

• └폼 기본값-선택지 불일치 수정
• └매출 분기 로직 수정

copy카피 다이어트 (가독성)

구역별 청소 항목 설명, 프로세스 카드 설명, 스토리 문단이 길어 조잡했다. ‘애플처럼 핵심만’ 기준으로 덜어냈다. 정기 페이지 히어로 문구도 절반으로.

style정렬 통일

공간별·정책 페이지에서 좁게 떠 보이던 카드·추천 영역을 한 컬럼(880·900px)으로 맞췄다. 중복되던 ‘다른 공간별’ 섹션도 제거.

design메뉴 · UX 다듬기

회사소개를 ‘청소 영상’ 하위 메뉴로, 메인 영상 카드는 페이지 이동 없이 그 자리에서 재생되게, 후기 SNS는 당근 하나로 정리해 강조.

plan3차 작업 범위 정의

3차 범위를 두 축으로 구분 — ① 홈페이지 문구 폴리시(용어·표현 정비), ② 회원·예약·결제·정산을 포괄하는 운영 시스템. 문구 정리를 선행하고 시스템을 회원 → 예약 → 결제 → 정산 순으로 구축하는 일정을 수립.

copycontent홈페이지 문구 폴리시

히어로 카피를 ‘백 마디 설명보다 한 편의 영상’ 기조로 교체하고 중복 섹션을 정리. 강점 4종(2인 1조·정찰제·20단계 매뉴얼·배상보험)과 스토리·CTA 문구 정비. ‘매니저 → 팀/현장팀’ 전역 용어 통일. config 단일 소스 구조를 활용해 다수 페이지에 일괄 반영.

copycontent서비스·공간별·청소범위 문구 정리

화장실 표기를 ‘관리청소’로 통일하고 오해 소지가 있는 표현을 제거. 거실·방·주방·화장실 청소 범위 문구를 정밀화(주방 벽면 기름때 추가, 화장실 물때·곰팡이 범위 명시). 화장실 1회/정기 비교 섹션 도입.

copy회사소개·예약·이용규정 문구 정리

회사소개·예약·규정 전반의 ‘매니저 → 현장 팀’ 통일, ‘팀별 예약’ 명칭 적용. 이용규정에 당일 취소 기준과 위약금의 현장팀 지급 조항을 명확화.

contentinfra배상보험 기준 반영 — KB손해보험

배상보험을 KB손해보험 영업배상책임(1사고당 5,000만원) 기준으로 확정. 홈·이용규정·FAQ 전반에 동일 문구로 반영.

planfeat운영 시스템 데이터 모델 설계

회원·예약·결제·정기권·정산·후기·알림을 포괄하는 스키마를 일괄 설계. 결제·환불·노쇼·정산 컬럼을 선반영하여 후속 기능의 확장 비용을 최소화.

• └18개 테이블 · RLS 권한 규칙 일괄 설계
• └결제·환불·정산·노쇼 컬럼 선반영

feat회원가입·로그인 + 마이페이지

예약·결제 전 회원가입 필수화. 마이페이지에 예약현황·이용내역·결제·쿠폰·정기권·우리집정보 탭 구성. 입력된 주소·특이사항(출입방법·주차·반려동물)을 다음 예약에 자동 반영. 소셜 로그인은 UI·구조 완료, 각 사 검수 후 활성화.

• └@supabase/ssr 세션 · 고객/직원 경로 분리
• └우리집 정보 → 예약 자동완성

feat예약 엔진 v2 — 7단계 플로우

서비스 → 평수 → 주소 → 팀 → 캘린더 → 정보 → 결제 7단계로 재구성. 가능 시간은 ‘서비스 시간 + 30분(이동·정리)’ 기준으로 산출하고 영업 마감을 초과하는 시작 시각은 제외. 연속 시간대를 우선 노출하여 팀 동선을 최적화. 첫 이용 시 1회 청소 유도, 재이용 시 정기 전환 절감액을 자동 안내.

• └분 단위 슬롯 계산(서비스+버퍼)
• └첫이용/재이용 데이터 기반 자동 안내
• └쿠폰 적용 모의결제

feat정기권 + 변경·취소·환불·노쇼 정책

4회권(12주 사용) 구조. 25평 이상 주기 할인(매주 10%·격주 5%·3주 0%) 적용, 정기 선택 시 주기 옵션을 우선 제공. 변경 24시간 전 1회, 환불 24시간 전 100%·이내 50%·노쇼 30%, 정기는 첫 방문 후 환불 불가. 담당 팀 변경·기간 연장 지원. 위약금은 카드·세금 제외 후 현장팀 정산에 반영.

• └정기권 차감·연장 · 담당 팀 변경
• └시점별 환불·노쇼 정책 엔진

feat결제·할인 통합 관리

할인코드(서비스별 적용·고객당 한도·기간·회사/팀장 부담 구분) 생성·관리, 정기청소 중복할인 차단. 팀장 프로모션 코드 및 팀장 귀책 당일취소 시 보상 쿠폰(20%)을 팀장 정산에서 차감. 바우처는 정부사업 대비 구조만 선반영.

• └쿠폰: 적용범위·한도·부담주체
• └팀장 부담 할인 → 정산 차감

feat팀장 현장 시스템

현장 작업 화면 구축. 방문 상태(이동중·도착·작업시작·완료) 변경 시 고객 안내 발송 및 대표 실시간 모니터링. 완료 리포트(체크리스트·메모·전후 사진), 문제 보고, 본인 정산 조회, 관리자 공유 내부 메모. 현장 가독성을 위해 큰 글씨·버튼 적용.

• └방문 상태 → 고객 알림 연동
• └완료 리포트 · 본인 정산 조회

feat대표 운영 시스템 (ERP)

정산(VAT 제외 후 팀 70·회사 30·지급상태·회계용 엑셀), 고객 관리(이용·정기권·쿠폰·회차별 청소리포트), 결제·환불, 운영현황(매출·재방문율·취소율·지역별 매출·컴플레인), 할인코드·후기·자동메시지·공지·권한을 단일 화면에서 통합 관리. 정책값(정산율·할인율·변경기한 등)은 설정 화면에서 직접 변경 가능하도록 외부화.

• └정산 자동계산(70/30·VAT제외·부담주체 차감)
• └정책값 외부화(설정 화면)

featcontent후기 + 자동메시지 + 다국어 기반

내부 후기(완료 고객·예약 1건당 1회, 대표 공개/숨김/답글)와 외부후기 리워드(네이버·당근, 신청 → 대표 확인 → 쿠폰 지급, 중복 방지). 자동메시지를 시점별 템플릿으로 구성(예약완료·48시간 전·당일·완료·재이용 3/6/9주·정기권 잔여/만료, 실발송은 알림톡 승인 후). 다국어(KR/EN) 기반 구축 및 회원 언어 설정 연동.

• └외부후기 신청 → 확인 → 쿠폰(중복방지)
• └자동메시지 7시점 템플릿
• └KR/EN i18n

fix통합 검수 및 안정화

화면 단위 실행 검증으로 런타임 결함을 수정. 비동기 후처리(fire-and-forget) 방식 오류 7건, 가입 직후 권한 우회, 정기권 이중 차감, 정산 음수 산출, 쿠폰 동시성 결함 등 정적 빌드 단계에서 드러나지 않는 항목을 중심으로 해소.

• └fire-and-forget 비동기 처리 오류 7곳 수정
• └권한 우회·이중차감·음수정산 가드

stylefixUI 정제 및 접근 흐름 개선

히어로 숏폼 기본 적용 및 서브 문구·카드/CTA 간격 정리. 작업영상 카드 카테고리 라벨 정리. 헤더 폭·간격을 웹 표준에 맞춰 재정렬(저해상도 햄버거 전환), 신규 페이지 ‘NEW’ 표기. 비로그인 상태에서도 예약 플로우를 열람할 수 있도록 개선.

infra프로덕션 배포 + 작업 보고서

운영 시스템 전체를 프로덕션에 배포(모의결제 기준 실사용 가능). ‘요청 → 작업 전 → 작업 후 + 미완 항목 사유·완료 일정’을 정리한 작업 보고서를 작성.

• └Vercel 프로덕션 배포
• └라이브 스모크 검증

📄 3차 작업 보고서 (요청·Before·After) 열기 →

fix예약 차단 버그 — 연락처 검증 (긴급)

결제 직전에 영문 오류 코드가 뜨며 예약이 안 되던 문제. 원인은 연락처 형식 검사가 너무 엄격했고 실패 메시지가 개발자용 원문 그대로였던 것. 하이픈·공백·점 어떤 형식이든 숫자만 추려 판정하도록 바꾸고, 입력 단계에서 한글 안내가 먼저 뜨게 했다. 모든 예약 경로(1회·정기권·전화예약)에 공통 적용.

• └전화번호 정규화 공용 모듈
• └5개 API + 폼 인라인 검증 통일

fix정산 정정 — 쿠폰 부담 주체 분리 (중요)

회사가 준 할인 쿠폰인데 할인된 금액에 70%를 곱해 팀장 지급액까지 깎이고 있었다. 팀 몫을 ‘할인 전 정가’ 기준으로 다시 설계 — 회사부담 쿠폰은 회사 몫에서만 차감되고, 팀장부담 쿠폰은 할인액(부가세 제외분)만 팀 몫에서 한 번 차감된다. 이미 쌓인 미지급 정산도 ‘생성/갱신’ 한 번으로 새 기준으로 재계산되게 했다.

• └팀몫=정가 net 기준 재설계
• └미지급 건 소급 재계산
• └검산: 회사부담 1만 할인 → 팀 101,819원 보전

content내창/창틀 서비스 종료

‘서비스에서 삭제하려 합니다’ 확정에 따라 예약 옵션·상세 페이지·요금표·메뉴·홈 소개·후기 문구·창틀 영상·관리자 전화예약까지 전부 내렸다. 표준 프로세스는 17번을 빼고 19단계로 자동 정리(12번은 요청대로 유지). 과거 예약 데이터는 보존.

feat예약 흐름 개편 — 정기/1회성 먼저

서비스 6종 나열 대신 ‘① 정기/1회성 → ② 세부 항목’ 2단계로 재편. 화장실은 정기(회당 60,000원·45분·4회권)와 1회(80,000원)가 분리됐고, 첫 이용 고객이 정기를 누르면 이용 이력을 보고 즉시 1회성 권유 안내가 뜬다. 예약 페이지는 로그인 필수로 복원.

• └정기권 엔진 일반화(집 전체+화장실)
• └첫이용 DB 판별 → 즉시 안내

feat추가시간 요금 — 표기 + 최종 금액 반영

+30/+60분이 시간만 늘리고 돈은 안 받던 걸 발견(문서엔 완료로 적혀 있었는데 실제 코드는 아니었다). 버튼에 +40,000/+80,000원을 표기하고 결제 화면에 ‘추가시간’ 줄을 만들어 합산. 단가는 요금표 구간과 같은 30분당 4만원, 관리자 설정에서 변경 가능.

• └extra_30min_price 설정값
• └쿠폰도 추가시간 포함 금액 기준

copystyle메인페이지 다이어트 + 요금표 강조

영상 티저·연수구 배너·표준 프로세스·상담 4단계·안심보증 다섯 섹션을 삭제해 홈을 절반으로 줄였다. 요금표엔 인기 태그를 4곳으로 늘리고, 작아서 안 읽히던 별표(※) 안내를 초록 강조 박스로 승격 — 요금표·공간별·환불·파손보상 공통. 냉장고는 45분·‘1대 기준’ 명시.

featcontent지역 3개 구 확장 + 주소 4단계 + 근무시간

연수구 15개 동에 남동구 8개·미추홀구 7개 동을 추가하고, 주소 입력을 ‘지역구 → 행정동 → 주소 → 상세주소’ 순서로 바꿨다(예약·우리집정보·전화예약 공통). 근무 가능 시간도 08:30~19:00, 30분 간격으로 조정 — 작업이 긴 예약은 마감을 넘는 시각이 자동으로 빠진다.

• └3개 구 30개 동 데이터화
• └가용시간 날짜 하루 밀림(시간대) 버그도 함께 수정

feat팀장 화면 — 메뉴 권한 · 시간 변경 · 쿠폰 개선

계정 역할에 따라 메뉴가 갈리게 했다(대표=전체, 팀장=팀장 메뉴만, 고객=관리자 메뉴 숨김). 팀장이 본인 예약을 빈 시간대로 옮기는 ‘시간 변경’을 현장작업에 추가 — 겹침은 서버가 이중 확인. 고객 결제 화면엔 ‘내 쿠폰 클릭 적용’, 관리자엔 쿠폰 삭제/비활성화가 생겼다.

• └역할 조회 API → 메뉴 필터
• └스케줄 이동(겹침 재검증)
• └쿠폰 이력 보존형 삭제

featinfra영상 관리 신설 — 대표가 직접 업로드

‘앞으로 영상을 직접 올릴 수 있냐’는 질문에 답으로 만든 화면. 촬영한 mp4를 올리거나 인스타 릴스를 연결하면 홈 히어로와 청소영상 페이지에 바로 반영된다. 순서·노출·삭제도 화면에서. 영상 파일은 서버를 거치지 않고 저장소로 직행하는 방식이라 용량 제한 걱정이 없다. 기존 8편은 미리 등록해 뒀다.

• └서명 업로드 URL(대용량 직행)
• └DB 우선 + 기존 목록 폴백

fix전 역할 실테스트 — 돈이 오가는 흐름까지

배포 후 고객·팀장·대표 세 계정으로 실제 예약을 만들어 끝까지 돌렸다. 예약 생성(쿠폰·추가시간 합산 90,000원)→변경→2차 변경 차단→취소 100% 환불, 정기권 구매→전액 환불 취소, 팀장 시간 이동→고객 화면 동기화, 정산 재계산까지 전부 통과. 변경 모달이 추가시간을 빼고 시간을 보여주던 것 하나를 찾아 바로 고쳤다.

• └3역할 엔드투엔드 시나리오
• └발견 1건 즉시 수정·배포

feat계좌이체 입금 안내 — PG 승인 전 미납 방어

카드 결제가 열리기 전까지 입금을 어떻게 받을지 논의 끝에, 접수 완료 화면에서 입금 계좌와 금액을 안내하고 입금 확인 후 대표가 연락하는 방식으로 확정(승인 단계는 이탈 우려로 뺌). 계좌번호는 대표가 시스템 설정에서 직접 입력·수정하고, PG가 열리면 스위치 하나로 안내가 사라진다.

• └완료 화면 입금 박스(계좌·금액·복사)
• └설정 기반(계좌 입력·ON/OFF) — 개발 없이 운영