Components - Schedule Selector

comment

  • 기본 구조: schedule-selector 클래스를 사용하여 시간대별 스케줄 선택 구성
  • 시간 라벨: 상단에 3시간 간격으로 시간 표시 (00:00, 03:00, 06:00, 09:00, 12:00, 15:00, 18:00, 21:00)
  • 요일 라벨: 왼쪽에 요일 표시 (월요일~일요일)
  • 그리드 셀: 24시간 x 7일 구성, 각 셀은 20px x 20px 크기
  • 상태: is-active 클래스로 활성화 상태 표시, 활성화 시 파란색(#1f5cf8), 비활성화 시 회색(#d6dbe1)
  • 매일 옵션: 하단에 매일 전체 시간대 선택 옵션 제공
  • 범례: 하단에 노출/노출안함 상태 표시
  • 드래그/클릭: 마우스 드래그 또는 클릭으로 셀 선택/해제 가능
  • 터치 지원: 모바일 기기에서 터치 드래그 및 탭으로 동작
  • 키보드 네비게이션: 화살표 키로 셀 간 이동, Enter/Space로 토글, Home/End로 행의 시작/끝 이동, Page Up/Down으로 열의 시작/끝 이동
  • JavaScript 초기화: 페이지 로드 시 initAllScheduleSelectors() 함수가 자동으로 호출되어 모든 schedule-selector 요소 초기화
schedule-selector - default

HTML 구조

<div class="schedule-selector">
  <div class="schedule-selector__time-labels">
    <span class="schedule-selector__time-label">00:00</span>
    <span class="schedule-selector__time-label">03:00</span>
    <!-- ... -->
  </div>

  <div class="schedule-selector-block schedule-selector-block--week">
    <div class="schedule-selector-block-labels">
      <div class="schedule-selector-block-label">월요일</div>
      <!-- ... -->
    </div>
    <div class="schedule-selector__grid">
      <div class="schedule-selector__cell" data-day="0" data-hour="0"></div>
      <div class="schedule-selector__cell" data-day="0" data-hour="1"></div>
      <!-- ... -->
    </div>
  </div>

  <div class="schedule-selector-block schedule-selector-block--daily">
    <div class="schedule-selector-block-labels">
      <div class="schedule-selector-block-label">매일</div>
    </div>
    <div class="schedule-selector__grid">
      <div class="schedule-selector__cell" data-hour="0"></div>
      <div class="schedule-selector__cell" data-hour="1"></div>
      <!-- ... -->
    </div>
  </div>

  <div class="schedule-selector__legend">
    <span class="schedule-selector__legend-indicator schedule-selector__legend-indicator--active">노출</span>
    <span class="schedule-selector__legend-indicator schedule-selector__legend-indicator--inactive">노출안함</span>
  </div>
</div>