codejaka
builder
포트폴리오
위젯 관리
새 프로젝트
위젯 수정
미리보기
새로고침
렌더 결과는
이미지
로 표시됩니다. 저장 시 동일 이미지가 위젯 목록 썸네일로도 등록됩니다.
기본 정보
위젯 이름
*
구성 위치
Header
Body
Footer
카테고리
헤더
히어로
일반
본문 컨텐츠
공통
상태표시
단계표시
탭메뉴
아이콘
카드
리뷰
가격표
팀
CTA
갤러리
클라이언트
FAQ
댓글
프로필
오시는길
예약
푸터
간단 설명
프리미엄 라인 예약 위젯: 캘린더와 예약 현황 요약 카드를 상단에, 하단에 사진형 사이트 카드 3종을 그리드로 배치.
HTML 컨텐츠
<div class="container content-space-1"><div class="text-center mb-7"><span class="text-cap text-primary">{{badge_text}}</span><h2>{{title}}</h2><p class="w-md-75 mx-md-auto">{{subtitle}}</p></div><div class="row mb-7 align-items-stretch"><div class="col-lg-7 mb-5 mb-lg-0"><div class="card card-bordered shadow-sm h-100"><div class="card-header bg-soft-primary border-0"><div class="d-flex justify-content-between align-items-center"><button type="button" class="btn btn-sm btn-link text-dark p-1"><i class="bi-chevron-left fs-4"></i></button><h5 class="mb-0">{{year_month}}</h5><button type="button" class="btn btn-sm btn-link text-dark p-1"><i class="bi-chevron-right fs-4"></i></button></div></div><div class="card-body"><table class="table table-borderless text-center mb-0 align-middle ures-cal-table" style="table-layout:fixed;width:100%"><thead class="border-bottom"><tr><th class="text-danger fw-medium small p-1">일</th><th class="fw-medium small p-1">월</th><th class="fw-medium small p-1">화</th><th class="fw-medium small p-1">수</th><th class="fw-medium small p-1">목</th><th class="fw-medium small p-1">금</th><th class="text-primary fw-medium small p-1">토</th></tr></thead><tbody><tr><td class="p-1"><span class="text-muted">29</span></td><td class="p-1"><span class="text-muted">30</span></td><td class="p-1"><span class="text-muted">31</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-success text-success fw-medium" style="width:1.75rem;height:1.75rem">1</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-success text-success fw-medium" style="width:1.75rem;height:1.75rem">2</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-success text-success fw-medium" style="width:1.75rem;height:1.75rem">3</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-warning text-warning fw-medium" style="width:1.75rem;height:1.75rem">4</span></td></tr><tr><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-danger text-danger fw-medium" style="width:1.75rem;height:1.75rem">5</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-success text-success fw-medium" style="width:1.75rem;height:1.75rem">6</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-success text-success fw-medium" style="width:1.75rem;height:1.75rem">7</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-success text-success fw-medium" style="width:1.75rem;height:1.75rem">8</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-success text-success fw-medium" style="width:1.75rem;height:1.75rem">9</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-warning text-warning fw-medium" style="width:1.75rem;height:1.75rem">10</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-danger text-danger fw-medium" style="width:1.75rem;height:1.75rem">11</span></td></tr><tr><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-danger text-danger fw-medium" style="width:1.75rem;height:1.75rem">12</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-success text-success fw-medium" style="width:1.75rem;height:1.75rem">13</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-success text-success fw-medium" style="width:1.75rem;height:1.75rem">14</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-success text-success fw-medium" style="width:1.75rem;height:1.75rem">15</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-warning text-warning fw-medium" style="width:1.75rem;height:1.75rem">16</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-warning text-warning fw-medium" style="width:1.75rem;height:1.75rem">17</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-danger text-danger fw-medium" style="width:1.75rem;height:1.75rem">18</span></td></tr><tr><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-danger text-danger fw-medium" style="width:1.75rem;height:1.75rem">19</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-primary text-white fw-bold shadow-sm fw-medium" style="width:1.75rem;height:1.75rem">20</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-success text-success fw-medium" style="width:1.75rem;height:1.75rem">21</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-success text-success fw-medium" style="width:1.75rem;height:1.75rem">22</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-success text-success fw-medium" style="width:1.75rem;height:1.75rem">23</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-warning text-warning fw-medium" style="width:1.75rem;height:1.75rem">24</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-danger text-danger fw-medium" style="width:1.75rem;height:1.75rem">25</span></td></tr><tr><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-danger text-danger fw-medium" style="width:1.75rem;height:1.75rem">26</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-success text-success fw-medium" style="width:1.75rem;height:1.75rem">27</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-success text-success fw-medium" style="width:1.75rem;height:1.75rem">28</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-success text-success fw-medium" style="width:1.75rem;height:1.75rem">29</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-success text-success fw-medium" style="width:1.75rem;height:1.75rem">30</span></td><td class="p-1"><span class="text-muted">1</span></td><td class="p-1"><span class="text-muted">2</span></td></tr></tbody></table><div class="d-flex flex-wrap justify-content-center gap-3 mt-3 small fw-medium text-dark"><span class="d-inline-flex align-items-center"><span class="d-inline-block rounded-circle bg-success me-2" style="width:0.65rem;height:0.65rem"></span>예약 가능</span><span class="d-inline-flex align-items-center"><span class="d-inline-block rounded-circle bg-warning me-2" style="width:0.65rem;height:0.65rem"></span>잔여 적음</span><span class="d-inline-flex align-items-center"><span class="d-inline-block rounded-circle bg-danger me-2" style="width:0.65rem;height:0.65rem"></span>예약 마감</span></div></div></div></div><div class="col-lg-5"><div class="card card-bordered bg-soft-dark border-0 h-100"><div class="card-body"><span class="text-cap text-primary">Booking Status</span><h4 class="mb-4">{{summary_title}}</h4><ul class="list-unstyled list-py-2 mb-4"><li class="d-flex"><div class="flex-shrink-0"><i class="bi-calendar-event-fill fs-4 text-primary"></i></div><div class="flex-grow-1 ms-3"><strong class="d-block">선택된 기간</strong><span class="text-body">{{selected_range}}</span></div></li><li class="d-flex"><div class="flex-shrink-0"><i class="bi-clock-fill fs-4 text-primary"></i></div><div class="flex-grow-1 ms-3"><strong class="d-block">당일 예약</strong><span class="text-body">{{same_day_notice}}</span></div></li><li class="d-flex"><div class="flex-shrink-0"><i class="bi-shield-check fs-4 text-primary"></i></div><div class="flex-grow-1 ms-3"><strong class="d-block">예약 가능 기간</strong><span class="text-body">{{booking_window}}</span></div></li></ul><div class="d-grid"><a class="btn btn-primary" href="{{primary_cta_link}}"><i class="bi-search me-2"></i>{{primary_cta_label}}</a></div></div></div></div></div><div class="d-flex align-items-baseline justify-content-between mb-4"><h4 class="mb-0">{{site_list_title}}</h4><a class="link link-pointer" href="{{view_all_link}}">전체 사이트 보기</a></div><div class="row"><div class="col-md-6 col-lg-4 mb-4"> <div class="card card-bordered shadow-sm h-100"> <div class="position-relative"> <img class="card-img-top" src="{{site1_image}}" alt="" style="height:200px;object-fit:cover"> <span class="badge bg-soft-success text-success position-absolute top-0 end-0 m-3"><i class="bi-circle-fill me-1" style="font-size:0.5rem"></i>예약 가능</span> </div> <div class="card-body"> <h5 class="mb-2">{{site1_name}}</h5> <ul class="list-inline small text-body mb-3"> <li class="list-inline-item me-3"><i class="bi-aspect-ratio me-1"></i>{{site1_size}}</li> <li class="list-inline-item"><i class="bi-people me-1"></i>{{site1_capacity}}</li> </ul> <p class="small text-body mb-3">{{site1_desc}}</p> <div class="d-flex justify-content-between align-items-center"> <div><span class="text-primary fw-bold fs-5">{{site1_price}}</span><span class="small text-body ms-1">/ 1박</span></div> <a class="btn btn-primary btn-sm" href="{{site1_link}}">선택하기 <i class="bi-chevron-right ms-1"></i></a> </div> </div> </div></div><div class="col-md-6 col-lg-4 mb-4"> <div class="card card-bordered shadow-sm h-100"> <div class="position-relative"> <img class="card-img-top" src="{{site2_image}}" alt="" style="height:200px;object-fit:cover"> <span class="badge bg-soft-success text-success position-absolute top-0 end-0 m-3"><i class="bi-circle-fill me-1" style="font-size:0.5rem"></i>예약 가능</span> </div> <div class="card-body"> <h5 class="mb-2">{{site2_name}}</h5> <ul class="list-inline small text-body mb-3"> <li class="list-inline-item me-3"><i class="bi-aspect-ratio me-1"></i>{{site2_size}}</li> <li class="list-inline-item"><i class="bi-people me-1"></i>{{site2_capacity}}</li> </ul> <p class="small text-body mb-3">{{site2_desc}}</p> <div class="d-flex justify-content-between align-items-center"> <div><span class="text-primary fw-bold fs-5">{{site2_price}}</span><span class="small text-body ms-1">/ 1박</span></div> <a class="btn btn-primary btn-sm" href="{{site2_link}}">선택하기 <i class="bi-chevron-right ms-1"></i></a> </div> </div> </div></div><div class="col-md-6 col-lg-4 mb-4"> <div class="card card-bordered shadow-sm h-100"> <div class="position-relative"> <img class="card-img-top" src="{{site3_image}}" alt="" style="height:200px;object-fit:cover"> <span class="badge bg-soft-success text-success position-absolute top-0 end-0 m-3"><i class="bi-circle-fill me-1" style="font-size:0.5rem"></i>예약 가능</span> </div> <div class="card-body"> <h5 class="mb-2">{{site3_name}}</h5> <ul class="list-inline small text-body mb-3"> <li class="list-inline-item me-3"><i class="bi-aspect-ratio me-1"></i>{{site3_size}}</li> <li class="list-inline-item"><i class="bi-people me-1"></i>{{site3_capacity}}</li> </ul> <p class="small text-body mb-3">{{site3_desc}}</p> <div class="d-flex justify-content-between align-items-center"> <div><span class="text-primary fw-bold fs-5">{{site3_price}}</span><span class="small text-body ms-1">/ 1박</span></div> <a class="btn btn-primary btn-sm" href="{{site3_link}}">선택하기 <i class="bi-chevron-right ms-1"></i></a> </div> </div> </div></div></div></div>
변수 플레이스홀더:
{{변수명}}
편집 가능 변수
변수 추가
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
삭제
저장