콘텐츠로 이동

[WORKSOUT] 라플 응모 화면 (Bottom Sheet)

Screen ID Screen Title Screen Path
RAF-APPLY-01 라플 응모 (Bottom Sheet) Raffle Apply

라플 상세 화면에서 “응모하기” 클릭 시 나타나는 Bottom Sheet. 상품 정보/SNS 계정, 사이즈, 배송지, 예치금, 결제수단, 총 결제 금액 입력 영역으로 구성된다.


항목 기준
상품 정보 영문명(Bold) + 한글명, 라플 상세 API 응답값 재사용
SNS 계정 노출 조건 isInstagramRaffle = true인 경우에만 표시
입력 형식 @ 고정 + 아이디만 입력
유효성 검사 소문자 영어, 숫자, ., _만 허용 / 최대 30자 / 공백 불가
플레이스홀더 “SNS계정을 입력해주세요”
항목 기준
데이터 출처 GET /v1/raffle/products/{raffleProductId}sizes 배열
선택 방식 + 버튼 클릭 시 사이즈 목록 Bottom Sheet로 전환
선택 규칙 1개만 선택 가능, 필수 입력
기본 플레이스홀더 “사이즈를 선택해주세요”
항목 기준
기본 상태 최근 배송지 기본 노출, 없으면 “등록된 배송지가 없습니다”
표시 형식 (한국) 1줄: 배송지명 / 2줄: 배송 주소 + 상세 주소
표시 형식 (일본) 1줄: 배송지명 (우편번호) / 2줄: 배송 주소 + 상세 주소
등록 제한 최대 5개
주소 검색 한국: DaumPostMobile / 일본: japanpost
관리 기능 선택 / 추가 / 수정 / 삭제

배송 요청사항 옵션: 배송전에 미리 연락 바랍니다 / 부재시 경비실에 맡겨 주세요 / 부재시 전화 주시거나 문자 남겨주세요 / 직접입력

주문을 한번이라도 했다면 배송지는 등록된 정보가 자동 입력된다.

예치금 영역 (한국만 사용, 일본 추후 예정)

섹션 제목: “예치금 영역 (한국만 사용, 일본 추후 예정)”
항목 기준
기본 상태 보유 예치금 {금액}원 표시
입력 방식 + 버튼 클릭 시 입력 필드 노출
전체 사용 보유금 > 상품 금액이면 상품 금액까지만 / 보유금 ≤ 상품 금액이면 전액 사용
부족 금액 남은 금액은 선택한 결제수단으로 결제
데이터 GET /v1/users/infoownMoney

결제수단 영역 (한국만 사용, 일본 수기결제)

섹션 제목: “결제수단 영역 (한국만 사용, 일본 수기결제)”
항목 기준
기본 상태 최근 사용 카드 기본 표시, 없으면 “등록된 카드가 없습니다”
표시 정보 카드사명 / 신용·체크 구분 / 마스킹 번호 ****-1234 / (최근사용) 라벨
관리 기능 카드 추가 (개수 제한 없음) / 카드 삭제 / 목록 스크롤
필수 여부 필수 입력

카드 등록 입력값: 카드번호, 생년월일(또는 사업자등록번호), 유효기간 6자리, 비밀번호 카드 등록 오류 메시지: “이미 등록된 결제 수단 입니다.” / “카드 번호를 다시 확인해주세요” / “생년 월일을 다시 확인해주세요” / 그 외 PortOne 에러 메시지 그대로 노출

결제수단은 한번 등록하면 다음부터 자동으로 등록되어 있다. 당첨 시 등록한 결제수단으로 일시불로 결제된다.

총 결제 금액 / 응모하기 버튼 / Bottom Sheet 상태 관리

섹션 제목: “총 결제 금액 / 응모하기 버튼 / Bottom Sheet 상태 관리”

총 결제 금액 표시 항목

항목 비고
상품 금액 항상 표시
예치금 사용 한국에서만 표시
배송비 항상 표시
총 결제 금액 항상 표시
상세 보기 클릭 시 “당첨 시 결제정보” 팝업

응모하기 버튼 필수 입력값

항목 조건
사이즈 항상 필수
배송지 항상 필수
결제수단 한국만 필수
Instagram 계정 isInstagramRaffle = true일 때만 필수

미입력 시: 해당 영역에 경고 배지 표시 + 토스트 메시지

Bottom Sheet 상태 관리

  • + 버튼 클릭 시 새 Bottom Sheet가 열리는 것이 아니라 현재 내용이 전환됨
  • 전환 시 이전 단계로 돌아가기 기능 필요
  • Bottom Sheet 닫으면 모든 입력값 초기화 (다시 열어도 이전 입력 유지 안 됨)

응모 정보 입력 (응모(라플) 정책.md 3.3.2)

섹션 제목: “응모 정보 입력 (응모(라플) 정책.md 3.3.2)”
  • 응모하기 클릭 시 사이즈, 배송지, 예치금 정보, 결제 수단, 총 결제 금액이 적힌 바텀시트가 나타난다.
  • 주문을 한번이라도 했다면 배송지는 등록된 정보가 자동 입력된다.
  • 사이즈, 배송지, 결제수단은 필수 입력값이다.
  • 결제수단도 등록하면 다음부터는 자동으로 등록되어 있다.
  • 당첨 시 등록한 결제수단으로 일시불로 결제된다.
  • 라플 상품은 적립금 적립 및 사용, 쿠폰 사용이 불가하다.
상황 메시지
결제 수단 검증 실패 “결제 수단을 다시 확인해주세요”
응모 시간 종료 “응모 기간이 종료되었습니다”
  • 백오피스에서 인스타그램 필수 라플을 체크해두면:
    • 계정 > SNS 계정 정보에 입력한 계정이 있으면 자동으로 등록된다.
    • 없으면 바텀시트에서 SNS 계정 정보 입력란에 입력할 수 있다.

입력/노출이 안 될 때 체크리스트

섹션 제목: “입력/노출이 안 될 때 체크리스트”

STEP 1. 필수 입력 데이터 확인

확인 항목 확인 위치 정상 기준
sizes 라플 상품 상세 API 1개 이상
배송지 목록 배송지 조회 API 선택 가능한 주소 존재
카드 목록 자동결제 조회 API 1개 이상 또는 빈 상태 문구
ownMoney 사용자 정보 API 숫자 값 존재
instagramUserId 사용자 정보 API 기존 값 있으면 자동 표시

STEP 2. 조건부 노출 확인

  • isInstagramRaffle = true 여부 확인
  • 배송지 5개 제한 걸리지 않았는지 확인
  • 최근 사용 카드 정렬이 정상인지 확인

STEP 3. 외부 연동 확인

  • DaumPostMobile 로딩 정상 여부 확인
  • PortOne 카드 등록 연동 정상 여부 확인
  • japanpost 로딩 정상 여부 확인 (일본)

목적 API 활용 값
Instagram 라플 여부 GET /v1/raffle/products?page=0&size=5 isInstagramRaffle
사용자 정보 GET /v1/users/info ownMoney, instagramUserId

엔드포인트: GET /v1/raffle/products/{raffleProductId} — 사이즈 선택 + 버튼 클릭 시. 활용 필드: sizes 배열 (sizes.name 표시, sizes.id 저장)

목적 API
배송지 조회 GET /v1/users/addresses
배송지 추가 PUT /v1/users/address
배송지 수정 PUT /v1/users/address/{addressId}

엔드포인트: PUT /v1/users/instagram — 요청 데이터: { "instagramUserId": "string" }. 성공 시 별도 메시지 없이 계정 정보 업데이트.

목적 API
카드 조회 GET /v1/users/auto-pay
카드 등록 POST /v1/users/auto-pay
카드 삭제 DELETE /v1/users/auto-pay
증상 예상 원인 1차 조치
SNS 계정 입력칸 안 보임 isInstagramRaffle = false 또는 API 실패 라플 상품 조회 API 확인
사이즈 목록 비어 있음 sizes 데이터 없음 상품 상세 응답 확인
배송지 추가 안 됨 5개 초과 / 저장 실패 등록 개수 및 저장 API 확인
카드 등록 실패 입력값 오류 / PortOne 오류 원문 메시지 확인 후 안내
응모하기 버튼 비활성 필수 항목 미입력 경고 배지 표시 영역 확인
값 입력 후 다시 열면 초기화됨 정상 정책 사용자 안내

항목 내용

버전 날짜 변경 내용
v1.0 2026-07-30 최초 작성 (라플 화면 마스터.md “라플 응모 화면(Bottom Sheet)” + 응모(라플) 정책.md 3.3.1~3.3.4 병합 이전)