사례

원데이 클래스 예약

프로젝트 시작10월 13일 오전 10:01바로 개발 시작

개발 내용

공방 원데이 클래스 예약 캘린더 웹서비스를 만들어줘.

- 클래스 소개 → 캘린더에서 회차 선택 → 정원 내 신청으로 이어지는 예약이야.
- 수강생: 클래스 목록/상세(사진·소개·소요시간·준비물·가격·정원),
  캘린더에서 개설 회차 선택(날짜별 잔여 자리·마감 표시), 신청(이름·연락처·인원) + 결제 또는 입금 안내,
  신청 조회/취소.
- 목록 화면: [클래스 목록 / 캘린더 보기] 전환 토글 + 분류 필터(전체·도자기·커피·향기·드로잉·플라워·라탄) + 검색.
  PC 에서는 한 줄에 토글 → 분류 필터 → 오른쪽 끝 검색 순서, 모바일에서는 토글을 위 줄에.
  분류 필터는 토글과 같은 모양·색으로 맞춰.
- 운영자(/admin, 로그인): 클래스 등록(이미지 업로드), 회차 개설(날짜·시간·정원·반복 개설),
  회차별 신청자 명단, 신청 확정/취소, 명단 CSV 다운로드.
- 데이터: classes(title, category, images[], description, duration, price, capacity, materials),
  sessions(class_id, date, time, capacity, applied),
  applications(session_id, name, phone, headcount, paid, status).
- 핵심은 캘린더 회차 + 정원 초과 방지 — 여러 명이 동시에 신청해도 정원을 넘지 않게.
- 강사 다중 관리·정기 수강권·후기·알림톡·대기 신청은 제외.
- 결제는 실제 PG 연동 없이 모의 결제(결제 버튼 → 승인 처리)로 구현해. 결제 모듈은 함수로 분리해 나중에 실제 PG로 교체할 수 있게 하고, 주문·결제 기록은 실제처럼 남겨.
- 관리자 데모 계정(예: admin / demo1234)을 시드하고, 로그인 화면에 데모 계정 안내를 표시해.
- 클래스 6개(분류마다 1개)와 이번 달 회차·신청 예시(일부 마감)를 더미로 채워 캘린더가 바로 시연되게. 월말에 처음 실행해도 다음 달 초 회차가 보이게. 예시 예약 번호는 추측할 수 없는 임의 값으로.
- 예시 사진은 외부 주소를 그대로 걸지 말고 내려받아 프로젝트 안(web/public)에 넣어 거기서 써 — 외부 주소가 끊기면 사진이 깨진다.
- 모바일 우선.

🧭 이렇게 이해했어요: 수강생 예약 흐름과 운영자 관리 화면, 동시 신청 정원 보호·모의 결제까지 포함돼 한 번에 만들기엔 큰 작업이에요. 데이터 구조와 단계별 순서를 계획으로 먼저 정리해 확인받은 뒤 만들게요.

확인이 필요해요 — 관리자 계정 admin / demo1234 는 시연용 데모 계정으로 시드하는 것으로 이해했어요. 다른 뜻이면 알려주세요.
미리 알려드려요 — 실제 PG 결제는 사업자 등록·PG사 계약·키 발급이 필요해 이번에는 모의 결제 함수로만 구현하고 나중에 교체할 수 있게 분리해요.

실행과정12개 작업

파일 읽기

파일 생성

record_decision

실행결과 · 3분 40초 소요

기획을 정리했습니다. 아직 화면은 만들지 않았습니다.

**어떤 서비스인가요**
- 이름은 **작은손 공방**(예시)입니다. 크림색 바탕에 체크무늬가 들어간 아늑한 분위기로, 휴대폰에서 먼저 보기 좋게 만듭니다.
- 손님은 수업을 둘러보고, 달력에서 날짜와 시간을 고른 뒤 이름·연락처·인원을 적어 신청합니다.
- **여러 사람이 동시에 신청해도 정원을 넘지 않습니다.** 마지막 한 자리에 두 사람이 동시에 신청하면 한 사람만 성공하고, 다른 사람에게는 "남은 자리가 부족해요"라고 바로 알려 줍니다.

**손님 화면**
- **첫 화면**: [클래스 목록 / 캘린더 보기] 전환 버튼, 분류(전체·도자기·커피·향기·드로잉·플라워·라탄), 검색창이 있습니다.
  - 컴퓨터에서는 이 세 가지가 한 줄에 놓이고, 휴대폰에서는 전환 버튼이 맨 윗줄에 옵니다.
  - 분류 버튼은 전환 버튼과 같은 모양·색입니다.
- **수업 자세히 보기**: 사진, 소개, 소요시간, 준비물, 가격, 정원을 보여 줍니다. 달력에는 날짜마다 "남은 3자리", "마감", "지난 수업"이 표시됩니다.
- **결제 방법은 두 가지**입니다.
  - 카드 결제: 실제로 돈이 나가지 않는 연습용 결제입니다. 나중에 실제 결제 서비스로 바꿀 수 있게 만들어 둡니다.
  - 계좌 입금: 신청하면 입금할 계좌가 안내되고, 공방에서 입금을 확인하면 "확정"으로 바뀝니다.
- 신청이 끝나면 남이 짐작할 수 없는 **예약번호**를 받습니다. 예약번호와 연락처로 신청을 조회할 수 있고, **수업 시작 전까지** 직접 취소할 수 있습니다. 취소하면 그 자리는 다시 신청할 수 있게 됩니다.

**운영자 화면**
- 체험용 계정(아이디 `admin` / 비밀번호 `demo1234`)이 로그인 화면에 안내되어 있습니다.
- 할 수 있는 일:
  - 수업 등록(사진 올리기 포함)
  - 일정 열기(매주 반복 가능)
  - 신청자 명단 보기와 확정·취소
  - 명단을 엑셀 파일로 내려받기

**처음부터 들어 있는 것**
- 분야별 수업 6개, 이번 달부터 다음 달 중순까지의 일정, 일부 마감된 예시 신청이 들어 있어 달력을 바로 시연할 수 있습니다.
- 예시 사진은 서비스 안에 저장해 둡니다. 바깥 사이트가 사라져도 사진이 깨지지 않습니다.

**만드는 순서**
1. 예시 데이터로 손님 화면을 먼저 보여 드립니다. 이때 화면 위에 "예시 데이터로 보이는 화면이에요" 안내가 붙습니다.
2. 신청이 실제로 저장되게 연결하고, 정원 보호와 연습용 결제 기록을 넣습니다.
3. 운영자 화면을 만듭니다. 분량이 커서 운영자 화면은 이어지는 작업에서 마무리될 수 있습니다.

**이번에 넣지 않는 것**
- 요청에서 빼 달라고 하신 것: 강사 여러 명 관리, 정기 수강권, 후기, 알림톡, 대기 신청, 실제 카드 결제 연결
- 제가 범위를 줄인 것: 입금 기한이 지나면 자동으로 취소하는 기능(운영자가 직접 취소합니다), 수업·일정 수정과 삭제(요청에는 등록·일정 열기만 있었습니다)

작성한 문서:
- 
- 

✅ 파일 2개 수정

3,443.4원 사용

개발 시작10월 13일 오전 10:10자동 시작

계획 문서를 확인하는 동안 응답이 없어 계획대로 개발을 자동으로 시작했습니다.

실행과정18개 작업

파일 읽기

파일 목록

파일 읽기

계획

명령 실행

🖼 이미지 분석: web/public/images/classes/pottery-1.jpg

🖼 이미지 분석: web/public/images/classes/coffee-1.jpg

실행과정5개 작업

이미지 분석

명령 실행

🖼 이미지 분석: web/public/images/classes/pottery-1.jpg

🖼 이미지 분석: web/public/images/classes/coffee-1.jpg

실행과정73개 작업

이미지 분석

명령 실행

사진 12장 준비 완료했습니다(수업별 키워드에 맞는 이미지, Wikimedia Commons에서 내려받음). 이제 데이터 상수와 mock 모듈을 만들겠습니다.

파일 생성

파일 수정

파일 생성

계획

이제 수강생 화면을 만들겠습니다. 먼저 라우터와 공용 컴포넌트부터 작성합니다.

파일 생성

파일 수정

파일 생성

파일 수정

파일 생성

파일 수정

로그 확인

② 수강생 화면 5개 구현 완료했습니다. 이제 Go 쪽 DB 스키마와 시드를 만듭니다.

계획

파일 생성

파일 수정

앱 재시작

로그 확인

파일 생성

계획

파일 생성

파일 수정

앱 재시작

로그 확인

명령 실행

API 응답에서 DATE/TIME 필드가 time.Time으로 직렬화되어 화면 형식과 달라졌습니다. 수정합니다.

파일 수정

앱 재시작

명령 실행

정원 보호·조회·취소(환불)·좌석 복구가 모두 정상 동작합니다. 이제 화면을 실제 API로 교체합니다.

계획

파일 수정

로그 확인

코드 검색

파일 생성

계획

로그 확인

🔎 완료 검토: 반려 — 교정 지시

실행결과 · 17분 26초 소요

빌드 1(수강생 흐름 전체)을 완료했습니다. 실제 DB·API·정원 보호·모의 결제까지 연결되어 있어, 지금 화면의 예약은 **실제로 저장됩니다** (임시 데이터 단계는 지났습니다).

## 완료한 것
- **첫 화면** — 깅엄 띠 + [클래스 목록/캘린더 보기] 토글, 분류 필터 7개(토글과 같은 모양), 검색(300ms 디바운스). PC 한 줄/모바일 3줄 배치.
- **캘린더** — 날짜별 신청 가능 수·마감·지난 수업 표시, 날짜 누르면 회차 목록. 분류·검색이 목록/캘린더 모두에 적용.
- **상세 → 신청 → 완료** — 사진 갤러리, 소요시간·정원·가격·준비물, 회차 달력·시간 선택, 하단 고정 신청 바.
- **신청** — 이름·연락처·인원 스테퍼·카드(모의 결제 패널)/계좌 입금. 예약번호(추측 불가 임의값) 발급, 완료 화면에서 복사.
- **조회·취소** — 예약번호+연락처로 조회, 수업 시작 전 취소(카드분은 모의 환불, 좌석 반환).
- **백엔드** — classes/sessions/applications/orders/payments/admins 테이블, 시드(클래스 6개·회차 78개·신청 364개·관리자 admin/demo1234), 결제 모듈은 `payment.go`의 `paymentProvider` 인터페이스로 분리.

## 검증한 것
- 남은 1자리 회차에 2건을 **동시** 신청 → 한 건은 성공, 한 건은 `409 남은 자리가 부족해요`로 정확히 차단.
- 취소 후 그 자리가 남은 자리로 복구되는 것, 주문·결제(승인/환불) 기록이 남는 것 확인.

## 남은 것 (빌드 2)
운영자 화면 `/admin`(로그인, 클래스 등록·이미지 업로드, 회차 반복 개설, 명단·확정·취소, CSV 내려받기)이 남아 있습니다. 이어서 진행할까요?

실행과정31개 작업

명령 실행

파일 읽기

명령 실행

파일 수정

Now the card image fallback (③). Let me update the class card in HomePage and the CSS.

파일 수정

파일 읽기

파일 수정

앱 재시작

파일 수정

앱 재시작

파일 읽기

파일 수정

앱 재시작

명령 실행

로그 확인

🖼 이미지 분석: web/public/images/classes/candle-1.jpg

실행과정1개 작업

이미지 분석

🔎 완료 검토: 합격

실행결과 · 20분 46초 소요

검토 지적 3가지를 모두 처리했습니다.

## 수정 내용
1. **사진 파일 검증** — 12장 모두 0바이트·HTML 응답이 아닌 정상 JPEG(FFD8FF 시작/FFD9 종료)임을 확인했습니다. candle-1.jpg(132KB)는 이전에 Wikimedia에서 내려받은 정상 캔들 사진이고, `describe_image`로 "여러 양초" 사진임을 재확인했습니다.

2. **이미지 경로 불일치 수정** — 분류 키는 `scent`, 사진 키는 `candle`인데 시드·mock 둘 다 `scent-1.jpg`로 잘못 저장하고 있었습니다.
   - ``에 `photoKey` 필드를 추가해 향기 클래스는 `candle-*.jpg`를 쓰게 했습니다.
   - ``도 동일하게 `photoKey`로 수정했습니다.
   - **DB에 이미 시드된 잘못된 값**은 시작 시 `fixCandleImages()`가 `category='scent'` 행을 `candle-*.jpg`로 바로잡도록 했고, API 응답에서 `['/images/classes/candle-1.jpg', ...]`로 정상 확인했습니다.

3. **카드 이미지 대체 배경** — 카드 썸네일에 `aspect-ratio: 4/3` + `object-fit: cover`를 적용하고, `onError` 시 이미지를 숨기고 같은 크기의 장미색 배경 + 꽃 아이콘 대체 표시를 넣었습니다(상세 페이지 갤러리에도 동일 적용). 6개 카드 사진이 모두 `200`으로 정상 로드되는 것까지 확인했습니다.

개발 서버 로그에 오류 없고, 재시작도 정상 완료되었습니다.

✅ 파일 67개 수정 · 명령 18개 실행 · 앱 재시작

4,305.1원 사용

이 프로젝트는 AI 에이전트와의 대화만으로 만들어졌습니다

project-e63954.glidev.ai

↗