Chọn địa chỉ
Nơi chọn một địa chỉ đã lưu hoặc tìm địa chỉ mới — phải thấy rõ không nghi ngờ địa chỉ nào đang được chọn.
Xem trước trực tiếp
Nguồn
<div class="dc-adr">
<header class="dc-adr__bar">
<button class="dc-adr__back" type="button">
<span aria-hidden="true">‹</span><span class="dc-sr">뒤로</span>
</button>
<h1 class="dc-adr__bartitle">배송지 선택</h1>
</header>
<div class="dc-adr__body">
<button class="dc-adr__search" type="button">
<span aria-hidden="true">⌕</span>
<span>새 주소 찾기</span>
</button>
<fieldset class="dc-adr__set">
<legend class="dc-adr__legend">저장한 배송지</legend>
<ul class="dc-adr__list">
<li class="dc-adr__item">
<label class="dc-adr__pick" for="dc-adr-sel1">
<input class="dc-adr__radio" id="dc-adr-sel1" type="radio" name="dc-adr-sel" checked />
<span class="dc-adr__info">
<span class="dc-adr__head">
<span class="dc-adr__name">집</span>
<span class="dc-adr__tag">기본 배송지</span>
</span>
<span class="dc-adr__who">김민수 · 010-1234-5678</span>
<span class="dc-adr__line">경기 평택시 중앙로 12, 301동 1402호 (17938)</span>
</span>
</label>
<button class="dc-adr__edit" type="button">수정<span class="dc-sr"> — 집 배송지</span></button>
</li>
<li class="dc-adr__item">
<label class="dc-adr__pick" for="dc-adr-sel2">
<input class="dc-adr__radio" id="dc-adr-sel2" type="radio" name="dc-adr-sel" />
<span class="dc-adr__info">
<span class="dc-adr__head">
<span class="dc-adr__name">회사</span>
</span>
<span class="dc-adr__who">김민수 · 010-1234-5678</span>
<span class="dc-adr__line">경기 평택시 산단로 45, 2공장 자재실 (17950)</span>
</span>
</label>
<button class="dc-adr__edit" type="button">수정<span class="dc-sr"> — 회사 배송지</span></button>
</li>
</ul>
</fieldset>
</div>
<div class="dc-adr__bottom">
<button class="dc-adr__go" type="button">이 주소로 받기</button>
</div>
</div>.dc-adr { display:flex; flex-direction:column; height:640px; overflow:hidden; background:var(--dc-bg); border:1px solid var(--dc-line); border-radius:var(--dc-r-md); font-family:var(--dc-font); }
.dc-adr__bar { flex:0 0 auto; display:flex; align-items:center; gap:var(--dc-1); padding:calc(var(--dc-safe-top) + var(--dc-2)) var(--dc-2) var(--dc-2); background:var(--dc-surface); border-bottom:1px solid var(--dc-line); }
.dc-adr__back { flex:0 0 auto; display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:var(--dc-r-full); background:transparent; color:var(--dc-text); font-size:22px; line-height:1; }
.dc-adr__back:active { background:var(--dc-sunken); }
.dc-adr__bartitle { margin:0; font-size:16px; font-weight:700; color:var(--dc-text); }
.dc-adr__body { flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:var(--dc-5); padding:var(--dc-4); }
.dc-adr__search { display:flex; align-items:center; justify-content:center; gap:var(--dc-2); width:100%; min-height:48px; border:1px dashed var(--dc-line-bold); border-radius:var(--dc-r-sm); background:var(--dc-surface); color:var(--dc-brand-text); font-family:inherit; font-size:15px; font-weight:700; }
.dc-adr__search:active { background:var(--dc-brand-soft); }
.dc-adr__set { min-width:0; margin:0; padding:0; border:0; }
.dc-adr__legend { padding:0; margin-bottom:var(--dc-2); font-size:13px; font-weight:700; color:var(--dc-text-sub); }
.dc-adr__list { display:flex; flex-direction:column; gap:var(--dc-2); margin:0; padding:0; list-style:none; }
.dc-adr__item { display:flex; align-items:stretch; border:1px solid var(--dc-line); border-radius:var(--dc-r-md); background:var(--dc-surface); overflow:hidden; }
.dc-adr__item:has(.dc-adr__radio:checked) { border-color:var(--dc-brand); box-shadow:inset 0 0 0 1px var(--dc-brand); }
.dc-adr__pick { flex:1 1 auto; min-width:0; display:flex; align-items:flex-start; gap:var(--dc-3); padding:var(--dc-4); }
.dc-adr__radio { flex:0 0 auto; width:20px; height:20px; margin-top:2px; accent-color:var(--dc-brand); }
.dc-adr__info { min-width:0; display:flex; flex-direction:column; gap:var(--dc-1); }
.dc-adr__head { display:flex; align-items:center; gap:var(--dc-2); }
.dc-adr__name { font-size:15px; font-weight:800; color:var(--dc-text); }
.dc-adr__tag { padding:2px var(--dc-2); border-radius:var(--dc-r-full); background:var(--dc-brand-soft); color:var(--dc-brand-text); font-size:11px; font-weight:700; }
.dc-adr__who { font-size:13px; color:var(--dc-text-sub); }
.dc-adr__line { font-size:13px; line-height:1.6; color:var(--dc-text); }
.dc-adr__edit { flex:0 0 auto; width:56px; min-height:44px; border:0; border-left:1px solid var(--dc-line); background:transparent; color:var(--dc-text-sub); font-family:inherit; font-size:13px; font-weight:700; }
.dc-adr__edit:active { background:var(--dc-sunken); }
.dc-adr__empty { display:flex; flex-direction:column; align-items:center; gap:var(--dc-3); padding:var(--dc-7) var(--dc-4); border:1px solid var(--dc-line); border-radius:var(--dc-r-md); background:var(--dc-surface); text-align:center; }
.dc-adr__emptyico { font-size:28px; }
.dc-adr__emptytxt { margin:0; font-size:14px; line-height:1.7; color:var(--dc-text-sub); }
.dc-adr__field { display:flex; flex-direction:column; gap:var(--dc-2); }
.dc-adr__label { font-size:13px; font-weight:700; color:var(--dc-text-sub); }
.dc-adr__input { width:100%; min-height:48px; padding:0 var(--dc-3); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); color:var(--dc-text); font-family:inherit; font-size:16px; }
.dc-adr__input:focus { outline:none; border-color:var(--dc-brand); box-shadow:0 0 0 3px var(--dc-brand-soft); }
.dc-adr__results { margin:0; padding:0; list-style:none; border:1px solid var(--dc-line); border-radius:var(--dc-r-md); background:var(--dc-surface); overflow:hidden; }
.dc-adr__result { display:flex; flex-direction:column; gap:var(--dc-1); width:100%; min-height:64px; padding:var(--dc-3) var(--dc-4); border:0; border-bottom:1px solid var(--dc-line); background:transparent; font-family:inherit; text-align:left; }
.dc-adr__results li:last-child .dc-adr__result { border-bottom:0; }
.dc-adr__result:active { background:var(--dc-sunken); }
.dc-adr__zip { font-family:var(--dc-mono); font-size:12px; font-weight:700; color:var(--dc-brand-text); }
.dc-adr__road { font-size:14px; line-height:1.5; color:var(--dc-text); }
.dc-adr__bottom { flex:0 0 auto; padding:var(--dc-3) var(--dc-4) calc(var(--dc-safe-bottom) + var(--dc-3)); background:var(--dc-surface); border-top:1px solid var(--dc-line); }
.dc-adr__go { width:100%; min-height:52px; border:0; border-radius:var(--dc-r-sm); background:var(--dc-brand); color:var(--dc-text-on); font-family:inherit; font-size:16px; font-weight:700; }
.dc-adr__go:active { background:var(--dc-brand-hi); }
.dc-adr__go[disabled] { background:var(--dc-sunken); color:var(--dc-text-mute); }Cách dùng
- Gom địa chỉ đã lưu thành nút radio để chỉ chọn được một — ô tích sẽ mang nghĩa gửi nhiều nơi
- Mỗi thẻ ghi đủ tên, người nhận, số điện thoại, đường và mã bưu chính; viết tắt là hàng đi sai nhà
- Đánh dấu địa chỉ mặc định bằng chip và để nó trên cùng danh sách
- Khi chưa lưu gì, hãy đặt nút tìm địa chỉ giữa màn hình thay vì một danh sách trống
Điểm cần lưu ý
- Đừng đặt nút Sửa bên trong label — với tay bấm Sửa sẽ đổi luôn lựa chọn
- Đừng chỉ dùng màu để báo đã chọn; vòng radio phải thật sự được tô
- Nút chữ ngắn như Sửa vẫn phải vượt 44px