사례

원데이 클래스

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

개발 내용

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

- 클래스 소개 → 캘린더에서 회차 선택 → 정원 내 신청으로 이어지는 예약이야.
- 수강생: 클래스 목록/상세(사진·소개·소요시간·준비물·가격·정원),
  캘린더에서 개설 회차 선택(날짜별 잔여 자리·마감 표시), 신청(이름·연락처·인원) + 결제 또는 입금 안내,
  신청 조회/취소.
- 운영자(/admin, 로그인): 클래스 등록(이미지 업로드), 회차 개설(날짜·시간·정원·반복 개설),
  회차별 신청자 명단, 신청 확정/취소, 명단 CSV 다운로드.
- 데이터: classes(title, images[], description, duration, price, capacity),
  sessions(class_id, date, time, capacity, applied),
  applications(session_id, name, phone, headcount, paid, status).
- 핵심은 캘린더 회차 + 정원 초과 방지.
- 강사 다중 관리·정기 수강권·후기·알림톡·대기 신청은 제외.
- 결제는 실제 PG 연동 없이 모의 결제(결제 버튼 → 승인 처리)로 구현해. 결제 모듈은 함수로 분리해 나중에 실제 PG로 교체할 수 있게 하고, 주문·결제 기록은 실제처럼 남겨.
- 관리자 데모 계정(예: admin / demo1234)을 시드하고, 로그인 화면에 데모 계정 안내를 표시해.
- 클래스 4~6개와 이번 달 회차·신청 예시(일부 마감)를 더미로 채워 캘린더가 바로 시연되게.
- 아기자기하고 감성적인 공방 톤(따뜻한 색·손맛 나는 사진), 모바일 우선.

실행과정8개 작업

클래스·개설 회차·신청 정보를 중심으로, 주문과 결제 기록을 별도로 관리하겠습니다. 먼저 따뜻한 공방 분위기의 화면을 예시 데이터로 보여드린 뒤, 예약 정원 제한과 관리자 기능을 실제 저장 기능에 연결하겠습니다.

명령 실행

파일 수정

클래스 사진과 소개를 한눈에 보는 목록, 날짜별 잔여 자리를 확인하는 캘린더를 만들고 있습니다. 신청은 예약 번호로 다시 조회할 수 있게 하고, 결제 전후 상태도 명확히 표시하겠습니다.

파일 수정

⏸ 챗지피티 사용 한도가 찼습니다. 10월 4일 15:06 이후 다시 이용할 수 있어요 — glidev AI 로 전환해 계속할 수도 있습니다.

챗지피티 사용 한도로 멈췄던 직전 작업을 이어서 계속 진행해 주세요.

10월 4일 오후 04:22

실행과정58개 작업

이어서 진행하겠습니다. 현재 화면의 기본 구조와 예약·관리자 흐름을 작성한 상태입니다. 이제 모바일 화면을 다듬고, 실제 저장과 정원 초과 방지를 연결하겠습니다.

파일 수정

명령 실행

예시 데이터로 클래스 목록과 캘린더가 미리보기에 표시되는 것을 확인했습니다. 이제 같은 화면에 실제 데이터를 연결하고, 신청할 때 회차의 남은 자리를 서버에서 다시 확인해 초과 예약을 막겠습니다.

파일 수정

명령 실행

파일 수정

명령 실행

실제 신청·결제·취소와 관리자 기능을 연결했습니다. 정원은 신청 저장 과정에서 잠금 처리해 동시에 신청해도 초과되지 않도록 했고, 모의 결제는 주문·승인·환불 기록을 남기게 했습니다. 이제 서버 반영 후 실제 요청으로 확인하겠습니다.

앱 재시작

명령 실행

파일 수정

명령 실행

파일 수정

명령 실행

파일 수정

하위 작업

명령 실행

파일 수정

명령 실행

파일 수정

검토에서 예시 예약 번호가 추측 가능하고, 월말 첫 실행 시 새 회차가 부족할 수 있다는 점을 확인했습니다. 예시 번호를 임의 값으로 바꾸고 월말에는 다음 달 초 회차를 채우도록 고쳤습니다. 데이터베이스가 늦게 준비돼도 서버가 다시 연결하도록 수정했습니다.

명령 실행

앱 재시작

명령 실행

하위 작업

파일 수정

명령 실행

앱 재시작

명령 실행

예약→모의 결제→조회→취소 흐름이 정상 작동했고, 동시에 남은 자리보다 많이 신청했을 때 한 건만 접수되는 것도 확인했습니다. 관리자 로그인과 신청자 명단 다운로드도 점검했습니다. 마지막 검토 결과를 확인하고 마무리하겠습니다.

하위 작업

실행결과 · 15분 57초 소요

따뜻한 공방 분위기의 모바일 예약 서비스를 만들고, 클래스·회차·신청·주문·결제 기록을 연결했습니다. 예시 클래스 6개와 이번 달 회차로 바로 둘러볼 수 있으며, 정원 초과 방지·모의 결제·예약 조회/취소·신청자 명단 다운로드를 확인했습니다. 관리자는 `/admin`에서 `admin / demo1234`로 로그인할 수 있습니다.

✅ 파일 15개 수정 · 명령 36개 실행 · 앱 재시작

이미지 깨지는데 수정해줘

[선택한 화면 요소] 사용자가 미리보기에서 직접 지정한 요소입니다. 이 요소를 대상으로 작업해 주세요.
- CSS 선택자: #root > main > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1)
- HTML:
```html
<div class="photo-shade"></div>
```

10월 4일 오후 04:42

실행과정51개 작업

선택하신 메인 사진 영역부터 확인하겠습니다. 사진 주소가 유효한지 살펴보고, 외부 주소가 끊겨도 화면에 이미지가 보이도록 수정하겠습니다.

명령 실행

웹 검색

명령 실행

파일 수정

명령 실행

웹 검색

명령 실행

실행결과 · 4분 27초 소요

깨진 메인 사진 주소를 정상 이미지로 바꿨습니다. 클래스 사진도 프로젝트 안에 저장해 외부 이미지 주소가 끊겨도 보이도록 했고, 미리보기에서 사진 6개가 모두 열리는 것을 확인했습니다.

✅ 파일 2개 수정 · 명령 37개 실행

pc모드일때
[클래스 목록 / 캘린더 보기] 토글 위치가
[전체, 도자기, ..., 라탄] 필터의 왼쪽으로 이동시켜줘

10월 5일 오전 04:32

실행과정12개 작업

코드 검색

파일 읽기

PC 화면에서 보기 토글을 필터 왼쪽으로 옮기겠습니다. 토글을 `filter-row` 안으로 이동하고, 검색창은 오른쪽에 고정하도록 조정합니다.

파일 수정

파일 읽기

파일 수정

로그 확인

실행결과 · 52초 소요

PC 모드에서 "클래스 목록 / 캘린더 보기" 토글을 카테고리 필터 왼쪽으로 옮겼습니다. 검색창은 오른쪽에 고정되고, 모바일에서는 기존처럼 토글이 위쪽에 표시됩니다.

실행과정16개 작업

로그 확인

명령 실행

로그 확인

명령 실행

실행결과 · 2분 32초 소요

원인을 찾아 해결했습니다.

**원인**: 이 컨테이너가 `WS_DEV_SERVER=off`(레퍼런스 모드)로 시작되어 프리뷰용 Vite 개발 서버(:5173)가 꺼져 있었습니다. 미리보기 주소는 traefik이 :5173으로 보내는데 서버가 없어 연결이 거부되면서 HTTP 502가 났습니다. 소스는 이미 수정돼 있었지만 개발 서버가 없어 화면에 반영되지 못한 상태였습니다.

**조치**: 플랫폼의 HMR 제어 스크립트(`/hmr.sh start`)로 Vite 개발 서버를 다시 켰고, :5173이 내가 방금 수정한 내용(토글 위치 이동)을 정상 서빙하는 것과 헬스체크 통과를 확인했습니다. 이제 미리보기가 정상 표시됩니다.

✅ 파일 5개 수정 · 명령 14개 실행

678원 사용

[전체, 도자기, ..., 라탄] 필터의 색상을 [클래스 목록 / 캘린더 보기] 의 색상으로 맞춰줘

10월 5일 오전 04:47

🧭 이렇게 이해했어요: 카테고리 필터 칩의 색상을 보기 토글과 같은 색으로 맞춥니다. 선택된 칩은 토글의 선택 색, 나머지 칩은 비선택 색을 씁니다.

확인이 필요해요 — 선택된 필터는 토글의 선택 색으로, 나머지 필터는 토글의 비선택 색으로 맞추는 것으로 이해했어요. 다른 뜻이면 알려주세요.

실행과정6개 작업

필터 칩과 보기 토글의 현재 색상 스타일을 확인하겠습니다.

코드 검색

파일 읽기

토글과 필터의 현재 색을 확인했습니다.

- **보기 토글**: 선택 = 배경 `#746d5e` / 글자 `#fff`, 비선택 = 배경 `#fff` / 글자 `#8d887f`, 테두리 `#e5dfd6`
- **필터 칩**: 선택 = 배경 `#ae6c51`, 비선택 = 글자 `#776e64`, 테두리 `#e8e2d9`

필터 칩의 색상을 토글과 동일한 값으로 바꾸겠습니다.

파일 수정

파일 읽기

파일 수정

명령 실행

실행결과 · 40초 소요

필터 칩 색상을 보기 토글과 동일하게 맞췄습니다.

- **선택된 필터**: 배경 `#746d5e` / 글자·테두리 흰색·`#746d5e` (토글 선택 상태와 동일)
- **비선택 필터**: 배경 흰색 / 글자·아이콘 `#8d887f` / 테두리 `#e5dfd6` (토글 비선택 상태와 동일)

레이아웃·크기·클릭 동작은 그대로 두고 색상만 통일했습니다. 미리보기(5173) 정상 응답 확인했습니다.

실행과정1개 작업

로그 확인

실행결과 · 48초 소요

로그에 오류 없이 HMR로 style.css가 정상 반영된 것을 확인했습니다. 필터 칩 색상 변경 작업이 완료됐습니다.

✅ 파일 1개 수정 · 명령 1개 실행

518.1원 사용

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

project-399ab9.glidev.ai

↗