The Party 개선사항 2.

# The Party 개선사항 2. ~~## 1. 상단 메뉴 구조 및 동작 변경~~  **브랜치**: fix/header-and-policy-modal-updates --- ~~## 메인 비쥬얼 영역 Hero 섹션 변경 ~~ ![스크린샷 2025-12-26 153016](https://hackmd.io/_uploads/BJtc3ojQbl.png)  **브랜치**: fix/hero-section ---  ~~**예상 기간**: ~~ ~~**브랜치**: ~~ --- ~~## 하단 섹션 - 이번 달의 추천 모임~~ **요청 사항** - 현재 ‘어떤 만남을 원하시나요?’ 구조와 동일 / 이미지는 번갈아가며 배치 **확인 사항** - 피그마 확인 부탁드립니다. **예상 기간**: **브랜치**: fix/featured-parties-section 섹션 제목이랑 설명은 대표님께서 설정 부탁드립니다 현재는 애니메이션 제거 작업만 들어간 상태이고 관리자 페이지 기능 추가는 프론트 작업 마치고 들어가도록 하겠습니다 --- --> ~~## 파티 상세 페이지 접근 방식 수정~~ **확인 사항**  **브랜치**: fix/weekly-partiesitem-navigate --- ## 신청 → 결제 전환 구간 이슈 (크리티컬) ### 결제 버튼 클릭 이슈 **요구 사항** - 로딩 상태 처리 - 비활성화 처리 - 간헐적으로 클릭되지 않는 문제 해결 - 중복 클릭 방지 - 사이즈 별 테스트 - 에러 메시지 노출 **확인 사항** ![스크린샷 2025-12-26 160557](https://hackmd.io/_uploads/BJpZEho7-e.png) - 문제 발생하는 부분이 맞나요? **예상 기간**: **브랜치**: --- ~~## 얼리버드 종료 문구 수정~~  **브랜치**: fix/earlybird-banner 추가로 우선 쿠폰 입력 시 무조건 대문자로 입력되게 처리했습니다 확인 부탁드립니다 ---  --- ## 결제 페이지 쿠폰 적용 개선 **요청 사항** - 내 쿠폰 영역 추가 - 적용 가능한 쿠폰만 활성화 표시 - 적용 불가 쿠폰 사유 표시 - 적용된 쿠폰 표시 and 적용 취소 - 하단 기존 코드 입력 섹션 유지 (대소문자 무관하게 처리) **예상 기간**: **브랜치**: --- ## 이탈 방지 팝업 ### 1.결제 페이지 이탈 감지 **예상 기간**: **브랜치**: ### 2.비활성 사용자 감지 **예상 기간**: **브랜치**: --- ## 이탈 사용자 리마인더 알림 **예상 기간**: **브랜치**: --- # 1+1 동행자 정보 입력 시스템 분석 ## 문제 정의 **핵심 문제**: 1+1 구매 시 동행자 정보를 입력할 곳이 없음 - 구매자가 결제 후 "이게 끝인가?" 하는 불완전한 느낌 - 동행자 정보 수집이 수동(카톡 답장)으로 이루어짐 - 설문 미완료자에 대한 자동 알림 시스템 부재 --- ## 현재 시스템 분석 ### 1. 1+1 구매 흐름 ``` PaymentPage.tsx에서 participation_type = 'double' 선택 → 2인 가격으로 결제 (doubleEvent.regular/earlyBird) → party_participants에 1건 생성 → 구매자만 설문 진행 (동행자 정보 수집 없음) ``` ### 2. 현재 동행자 정보 수집 방식 `PartyReminderModal.tsx`에서 수동으로 알림톡 발송: ```typescript ...(sendTarget === 'double' ? { preparation1: '동행자 성함/생년월일/성별/전화번호 를 답장해주세요', preparation2: '동행자와 같이 오셔야 입장 가능하십니다.', } : {}), ``` **문제점**: - 관리자가 수동으로 발송해야 함 - 카톡 답장을 수동으로 확인/입력해야 함 - 누락 가능성 높음 ### 3. DB 스키마 (party_participants) ```sql -- 이미 게스트 필드 존재 guest_name VARCHAR guest_phone VARCHAR guest_gender VARCHAR is_guest BOOLEAN ``` → **동행자 정보 저장을 위한 스키마는 이미 준비됨** ### 4. 설문 시스템 (user_survey_responses) ```sql survey_stage: 'pre_payment' | 'post_payment' | 'completed' survey_responses: JSON[] ``` - `PartySurveyModal.tsx`: 약 1,533줄의 완성된 설문 모달 - `surveyMode`: pre_payment, post_payment, full 지원 --- ## 옵션 비교 분석 ### Option A: 동행자가 직접 등록 ``` 구매자 결제 완료 → 동행자에게 알림톡 발송 (전화번호 필요) → 동행자가 링크 클릭 → 동행자 회원가입/로그인 → 동행자 설문 완료 ``` | 장점 | 단점 | |------|------| | 동행자 본인 정보 정확성 | 동행자 전화번호를 먼저 받아야 함 | | 동행자도 회원으로 확보 | 동행자가 가입 안 할 수 있음 | | 각자 설문으로 정확한 매칭 | 구매자 입장에서 "끝"이 아님 | ### ~~Option B: 구매자가 동행자 정보 입력~~ ``` 구매자 결제 완료 → 본인 설문 완료 → "동행자 정보 입력" 단계 추가 → 동행자 기본 정보 입력 (이름, 전화번호, 성별, 생년월일) → 완료! (구매자 관점에서 명확한 종료) ``` | 장점 | 단점 | |------|------| | 구매자가 "완료" 느낌 확실히 받음 | 동행자 정보 정확성 다소 떨어질 수 있음 | | 추가 회원가입 불필요 | 동행자 회원 확보 불가 | | 즉시 정보 수집 완료 | 동행자 성향/취향 정보는 제한적 | | 기존 guest 필드 활용 가능 | - | --- ## 권장 구현 방안 ### Phase 1: 동행자 정보 입력 UI 추가 **위치**: 설문 완료 후 (participation_type === 'double'일 때만) ```tsx // PartySurveyModal.tsx 또는 새 CompanionInfoModal.tsx if (participationType === 'double' && surveyStage === 'completed') { return <CompanionInfoForm onComplete={handleCompanionComplete} />; } ``` **수집 필드**: - 동행자 성함 (필수) → `guest_name` - 동행자 전화번호 (필수) → `guest_phone` - 동행자 성별 (필수) → `guest_gender` - 동행자 생년월일 (선택) **저장 위치**: ```sql UPDATE party_participants SET guest_name = ?, guest_phone = ?, guest_gender = ?, is_guest = false WHERE id = ? AND participation_type = 'double'; ``` ### Phase 2: 설문 미완료자 자동 알림 **대상**: 결제 완료 + 설문 미완료자 **구현 방식**: 1. **Supabase Edge Function (Cron Job)** (구현 편한 방식으로 진행) ```typescript // supabase/functions/survey-reminder/index.ts // 매일 오전 10시 실행 // 결제 후 24시간 경과 + 설문 미완료자 조회 const incompleteSurveys = await supabase .from('party_participants') .select('*, profiles!inner(*)') .eq('status', 'confirmed') .is('survey_completed_at', null) .lt('payment_confirmed_at', dayjs().subtract(24, 'hours').toISOString()); // 알림톡 발송 for (const participant of incompleteSurveys) { await sendKakaoNotification({ phone: participant.profiles.phone, template: 'SURVEY_REMINDER', variables: { name: participant.profiles.name, partyName: participant.party.name, deadline: '파티 3일 전까지', warning: '미작성 시 참여가 취소될 수 있습니다.' } }); } ``` 2. **알림 단계** - D+1: 부드러운 리마인더 ("설문을 아직 작성하지 않으셨어요") - D+3: 경고 ("설문 미작성 시 참여가 취소될 수 있습니다") - D+5 (파티 3일 전): 최종 경고 ("오늘까지 미작성 시 자동 취소됩니다") 3. **DB 필드 추가** ```sql ALTER TABLE party_participants ADD COLUMN survey_completed_at TIMESTAMP, ADD COLUMN survey_reminder_sent_at TIMESTAMP, ADD COLUMN survey_reminder_count INTEGER DEFAULT 0; ``` --- ## 구현 우선순위 | 순위 | 기능 | 예상 공수 | 영향도 | |------|------|----------|--------| | 1 | 동행자 정보 입력 폼 추가 | 4h | 높음 | | 2 | 설문 완료 후 동행자 입력 연동 | 2h | 높음 | | 3 | 설문 미완료자 조회 API | 2h | 중간 | | 4 | 자동 알림 Edge Function | 4h | 중간 | | 5 | 알림 발송 이력 관리 | 2h | 낮음 | **총 예상 공수**: 약 14시간 (2일) --- ## 관련 파일 목록 ### 수정 필요 - `apps/web/src/components/booking/PartySurveyModal.tsx` - 동행자 입력 단계 추가 - `apps/web/src/pages/PaymentPage.tsx` - 결제 후 플로우 조정 ### 신규 생성 - `apps/web/src/components/booking/CompanionInfoForm.tsx` - 동행자 정보 입력 폼 - `supabase/functions/survey-reminder/index.ts` - 자동 알림 Edge Function ### DB 마이그레이션 - `survey_completed_at`, `survey_reminder_sent_at`, `survey_reminder_count` 컬럼 추가 --- ## 결론 **Option B (구매자가 동행자 정보 입력)** 권장 이유: 1. 구매자 UX 개선 - "완료" 느낌 명확 2. 기존 DB 스키마 활용 가능 (`guest_*` 필드) 3. 추가 회원가입 프로세스 불필요 4. 즉시 정보 수집 완료 **추가 기능**: 설문 미완료자 자동 알림 시스템으로 참여율 향상 유저가 1+1 결제 -> 결제 완료 -> 동행자 정보 입력 -> 동행자에게 알림톡 -> 동행자 회원가입 -> 동행자 계정으로 정보 입력 유저가 1+1 결제 -> 결제 완료 -> 동행자 정보 미입력 -> 결제 유저에게 알림톡 -> 취소 유저가 1+1 결제 -> 결제 완료 -> 동행자 정보 미입력 -> 결제 유저 알림톡 -> 동행자 정보 입력 -> 동행자에게 알림톡 발송 -> 동행자 회원가입 -> 동행자 계정으로 정보 입력. 설문 미완료자 알림톡 + 로그인시 설문 알림 모달 ## 정보 입력 유효성 검사가 없음.