> For the complete documentation index, see [llms.txt](https://guide.hypercape.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://guide.hypercape.com/brand-guide/form-events/undefined-12.md).
# 응모자가 보는 공개 폼 페이지
## Part 12 · 응모자가 보는 공개 폼 페이지
응모자가 실제로 보는 화면을 운영자도 알아두면 운영 중 발생하는 문의에 정확하게 대응할 수 있습니다.
### 12-1. 공개 URL
https\://\[브랜드 도메인]/form-events/\[이벤트ID]
이 URL은 두 곳에서 빠르게 복사할 수 있습니다.
* 폼 이벤트 목록 한 행의 ⋯ 메뉴 > **링크 복사** (Live 상태일 때만 노출)
* 이벤트 상세 페이지 헤더의 🔗 **신청 링크 복사** 아이콘
### 12-2. 페이지의 5가지 상태
응모자가 URL로 접속하면 캠페인 상태와 응모 진행에 따라 **5가지 다른 화면**을 보게 됩니다.
| 상태 | 노출 시점 | 응모자가 보는 것 |
| --------------- | ---------------------- | ------------------------------- |
| **로딩** | 페이지 진입 직후 | 가운데 회전하는 로더 |
| **이벤트 없음 (에러)** | 잘못된 URL 또는 삭제된 이벤트 | "이벤트를 찾을 수 없습니다" 카드 |
| **종료됨 / 준비중** | 캠페인이 마감됐거나 시작 전 | 정보 카드 + 노랑 안내 박스 (응모 폼 없음) |
| **응모 가능** | 응모 기간 안 + 운영자가 종료하지 않음 | 정보 카드 + 동적 응모 폼 + \[참가 신청하기] 버튼 |
| **응모 완료** | 응모 제출 성공 후 | 초록 체크 + 티켓 페이지 링크 |
### 12-3. 이벤트 없음 (에러) 화면
| 표시 | 내용 |
| ----- | ----------------------------- |
| 카드 제목 | "이벤트를 찾을 수 없습니다" |
| 부제 | "요청하신 이벤트가 존재하지 않거나 종료되었습니다." |
URL이 잘못되었거나 이벤트가 삭제됐을 때 이 화면이 노출됩니다.
### 12-4. 종료됨 / 준비중 화면
응모 기간이 지났거나(종료됨) 아직 시작 전(준비중)이면 응모 폼 대신 안내가 표시됩니다.
| 영역 | 내용 |
| -------- | ------------------------------------------------------- |
| 대표 이미지 | productImageUrl이 등록되어 있으면 4:3 비율로 노출 |
| 제목 + 배지 | 이벤트 제목 + 회색 배지 (**종료됨** 또는 **준비중**) |
| 설명 | HTML 설명 |
| 노랑 안내 박스 | "이 이벤트는 종료되었습니다." 또는 "이 이벤트는 아직 시작되지 않았습니다." + 신청 기간 표시 |
### 12-5. 응모 가능 화면 — 응모자가 보는 본 화면
응모 기간이 활성일 때 보이는 화면입니다. 위에서 아래로 다음 영역이 차례대로 노출됩니다.
#### 12-5-1. 이벤트 정보 카드
| 영역 | 내용 |
| ----------- | ---------------------------------------------------------- |
| 대표 이미지 | productImageUrl 4:3 비율 |
| 제목 + 배지 | 이벤트 제목 + 초록 **🎁 신청 가능** 배지 |
| 설명 | HTML 설명 (운영자가 캠페인 설명 탭에서 작성한 본문) |
| 📅 신청 기간 박스 | 회색 박스에 시작일 \~ 종료일 |
| 콘텐츠 요구 안내 | (콘텐츠 요구 On 캠페인만) "※ 선정 시 경품 수령 후 콘텐츠(리뷰, 후기 등)를 제출해야 합니다." |
#### 12-5-2. 응모 폼 — 3개 카드 구조
응모자가 입력하는 폼은 **3개 카드**로 분리되어 있습니다.
**A. 연락처 정보**
| 필드 | 필수 | 플레이스홀더 |
| -------- | ---- | ----------------------------- |
| **이름** | ✅ | "홍길동" |
| **이메일** | ✅ | "" — 형식 검증 |
| **전화번호** | (선택) | "010-0000-0000" |
**B. 배송 주소**
| 필드 | 필수 | 플레이스홀더 |
| ----------------- | ---- | ------------------------------------------------ |
| **전체 주소 (직접 입력)** | (선택) | "도로명 주소나 지번 주소를 입력해주세요..." (자유 텍스트, 통합 주소를 한 칸에) |
| **주소** (line1) | ✅ | "도로명 주소" |
| **상세 주소** (line2) | (선택) | "아파트, 동/호수 등" |
| **도시** | ✅ | "서울시" |
| **시/도** | (선택) | "경기도" |
| **우편번호** | ✅ | "12345" |
| **국가** | ✅ | 드롭다운 ("국가 선택") — 2자리 ISO 코드 |
**C. 추가 정보**
브랜드가 폼 빌더(Part 4)로 만든 **커스텀 필드**가 여기에 노출됩니다. 폼 빌더에 추가한 필드가 0개면 이 카드 자체가 숨겨집니다.
조건부 표시(Part 4-6)가 설정된 필드는 다른 답변에 따라 보였다 숨겨졌다 합니다.
#### 12-5-3. 제출 버튼
폼 맨 아래에 큰 버튼이 있습니다.
> **참가 신청하기**
(전체 너비, 큰 사이즈. 처리 중에는 로더로 변함)
### 12-6. 응모 실패 시 메시지 (토스트)
폼 제출 시 검증·서버 응답에 따라 **빨간 토스트**로 다음 메시지가 표시됩니다.
| 사유 | 메시지 |
| ------- | -------------------------------------- |
| 중복 이메일 | "이미 동일 이메일로 신청이 접수되었습니다. 이메일을 확인해주세요." |
| 신청 기간 외 | "현재 신청 가능한 기간이 아닙니다." |
| 유효성 실패 | "입력값을 확인해주세요." |
| 기타 오류 | "일시적 오류가 발생했습니다. 잠시 후 다시 시도해주세요." |
> 💡 **응모자 문의 시** "이미 동일 이메일로 접수됐다"는 메시지를 받았다면 신청자 탭에서 검색해 본인 응모 내역을 안내하세요.
### 12-7. 응모 완료 화면 — 티켓 페이지 안내
응모 제출이 성공하면 화면이 전환되며 다음이 표시됩니다.
| 영역 | 내용 |
| ---------------- | ----------------------------------------------------- |
| 초록 체크 아이콘 | ✅ CheckCircle2 (큰 원형) |
| 제목 | "**신청 완료!**" |
| 안내문 | "신청이 정상적으로 접수되었습니다. 아래 링크로 선정 여부와 배송 현황을 확인할 수 있습니다." |
| **티켓 페이지 링크** 박스 | 회색 박스에 URL + **📋 복사** 버튼 + **\[🔗 티켓 페이지 열기]** 큰 버튼 |
| 하단 안내 | "이 링크를 저장해두세요. 선정 여부와 배송 현황을 확인할 때 필요합니다." |
| 토스트 | "신청 완료! / 신청이 정상적으로 접수되었습니다." |
### 12-8. 티켓 페이지의 의미
응모자는 **로그인하지 않고도** 본인 응모 상태를 확인할 수 있어야 합니다. 이를 위해 응모 후 응모자별 고유 **티켓 URL**(ticketUrl)이 발급됩니다.
| 특성 | 설명 |
| ------------ | ------------------------------------------------------------- |
| **발급 시점** | 응모 직후 (응모 완료 화면 + 자동 발송 메일에 포함) |
| **인증 방식** | URL 자체가 토큰 — **링크를 가진 사람은 누구든 접근 가능**하므로 응모자가 외부에 공유하지 않도록 안내 |
| **확인 가능 정보** | 본인 응모 상태(대기중·선정·미선정), 콘텐츠 제출 영역, 배송 현황 |
| **용도** | 응모자가 본인 한정으로 볼 수 있는 운영자 신청자 탭의 거울 |
### 12-9. 응모 후 백엔드 흐름 (참고)
응모자 화면 뒤에서 시스템이 다음을 처리합니다.
1. 폼 양식 + 필수 필드 + 형식(이메일·국가 코드) 검증
2. 같은 이메일 중복 응모 차단
3. 신청 기간 외 응모 차단
4. 응모 데이터 저장 + **티켓 URL 생성**
5. **신청 안내** 메일 자동 발송 (Part 10-2 참고)
6. 운영자 화면(신청자 탭)에 즉시 노출
이후 운영자가 선정/미선정/콘텐츠 요청 등을 처리하면 그에 맞는 메일이 자동으로 응모자에게 발송됩니다 — 자세한 내용은 Part 10 참고.