Cafe24 Self-mall · UI Component

구매 바텀시트

구매하기·선물하기를 누르면 올라오는 옵션 선택 시트. skin13(시트)·skin14(현재) 두 버전을 상태별로 기록 — 나중에 바꿔도 비교 가능하게.

← 모듈 포탈
최종 방향

열기 전 = skin14 상단 → 누르면 = skin13 시트

상단(소비자가·배송·구매바)은 skin14 그대로, 구매/선물 누르면 skin13 카드 시트가 올라옴.
skin14 상단
① 열기 전 · skin14 상단소비자가/판매가 · 배송 · 특징 · 선물하기 | 구매하기 바
→구매/선물 클릭
skin13 시트
② 열면 · skin13 시트옵션·본품·추가구성 카드
채택 · skin13 시트

옵션 있든 없든 동일한 카드 (3상태)

상품의 옵션 구성에 따라 시트가 자동으로 맞춰짐 — 어느 경우든 깨지지 않음. (캡처 클릭 = 원본 크게)
옵션 다중
옵션 다중 831병/1+1/2+1 옵션이 전부 카드로. 누르면 골드 + 스텝퍼. 추가구성 2열.
옵션 단일
옵션 단일 48옵션 1개 자동 선택 카드 + 추가구성 2열 그리드.
옵션 없음
옵션 없음 27본품 카드 + 추가구성 카드. (드롭다운으로 안 떨어짐)

🎴 카드

  • 옵션·본품·추가구성 카드 통일 (흰박스 · 보더 #ece8e2 · radius 10 · 미세 shadow)
  • 추가구성 = 2열 그리드, 선택 시 카드 통째 골드 #D9BC82 + 크림 #fdf8ee
  • 스텝퍼는 선택 시만 노출 · 라벨 Quantity / Additional + 필수↔추가 구분선

⚙️ 동작

  • PC 옵션카드(.ij-opt-tags) 시트에서 재사용 — 절대가격·스텝퍼·주문연동 검증됨
  • 단일옵션 자동선택 · 옵션명 ⭐ 제거 · iOS 배경 스크롤 잠금 · TOTAL 좌측
  • 옵션 없는 상품도 본품 카드 (no-option 견고화)
기록용 · skin14 현재

skin14 (현재 상태 · 드롭다운형)

최종은 skin13 시트로 갈 예정이지만, skin14 현재 모습·동작을 기록 (나중에 바꿀 수도 있어서).
skin14 상단
상단 · 열기 전 29CM소비자가/판매가 · 배송 · 특징 버튼 · 선물|구매 바
시트 선택 전
시트 · 선택 전「선택」 + 「추가구성상품」 드롭다운. 0개면 가격·추가 접힘.
시트 가격할인
시트 · 선택 후 (가격)상품금액 / 할인금액 / 총결제금액 3줄 (29CM식).
선물하기 → 로그인
선물하기 · 현재클릭 → 시트 안 거치고 로그인 직행(회원전용). 「시트 먼저」 구현은 미정.
코드 위치 — detail.html 안 · HTML <div id="ij-bs"> · CSS @media(max-width:767px) · JS ijInitBottomSheet/initOptionTags/initAddProductChips.
보존 — G:\내 드라이브\claude-backups\bottomsheet-skins\ (skin13 완성본 + skin14 + captures + 바텀시트_정리.md)
⚠️ 미해결 — ① 카드 "낙관적": 누르면 추가 성공 확인 없이 선택됨 표시 → 품절이면 카드만 선택된 듯 보이고 합계 안 더해짐 (주문행 확인 + 실패 시 되돌림 + 품절 비활성 필요). ② 선물하기 = 시트 먼저 열지 여부 구현 미정.