Time Picker 만들기

목표시간을 설정하는 Time Picker 만들기

👆

위와 같은 디자인의 타임 픽커를 만들기 위해 swiper라는 라이브러리를 찾았다.

---

Swiper 설치

npm i swiper

Swiper 적용

import { Swiper, SwiperSlide } from "swiper/react";

const TIME_HOURS = Array.from(Array(24).keys());
const TIME_MINUTES = Array(12)
  .fill(0)
  .map((num, i) => i * 5);

<Swiper
  className="h-[16.8rem]  px-[1.1rem]"
  direction={"vertical"}
  slidesPerView={3}
  mousewheel
  loopAdditionalSlides={5}
  slideToClickedSlide
  centeredSlides
  onSlideChange={(swiper) => setHours(swiper.realIndex)}
>
  {TIME_HOURS.map((hour) => (
    <SwiperSlide key={hour}>
      <div
        className={cls(
          "flex h-[5.6rem] cursor-pointer items-center",
          hours === hour
            ? "H2 text-primary-700"
            : "text-[2rem]  font-medium text-primary-500"
        )}
      >
        {(hour + "").padStart(2, "0")}
      </div>
    </SwiperSlide>
  ))}
</Swiper>

...

onSlideChange 를 통해서 현재 선택된 인덱스 값을 받아온 후 setter로 값을 저장하는 방식으로 구현하였다.

한가지 아쉬운점은 스크롤이 아닌 드래그로 작동하기 때문에 PC에서 사용하기에는 약간의 불편함이 있다.

scroll기능을 주었지만 선택이 자동적으로 수행되지 않아 실패하였는데 이 부분에 대해서 다시 한번 도전해볼 생각이다.

---

Swiper 기능

directiob : 슬라이드를 할 방향을 입력한다.

slidesPerview : 한 슬라이드에 보여줄 갯수

centerdSlides : 센터모드

autoplay : 자동 슬라이스

• delay : 시간 설정 (밀리세컨드)
• disableOnInteraction : 스와이프 후 자동 재생

loop : 슬라이드 반복 여부

loopAdditionalSlides : 슬라이드 반복 시 마지막 슬라이드에서 다음 슬라이드가 보여지지 않는 현상 수정

pagination : pager 여부

• el : 버튼을 담을 태그 설정
• clickable : 버튼 클릭 활성화 여부

navigation : 버튼

• nextEl : 버튼을 담을 태그 설정
• prevEl : 버튼을 담을 태그 설정

freeMode : 슬라이드 넘길 때 위치 고정 여부

autoHeight : 현재 활성 슬라이드높이 맞게 높이조정

a11y : 접근성 매개변수(접근성 관련 대체 텍스트 설정이 가능)

resistance : 슬라이드 터치 저항 여부

slideToClickedSlide : 해당 슬라이드 클릭시 슬라이드 위치로 이동

allowTouchMove : (false-스와이핑안됨)버튼으로만 슬라이드 조작이 가능

watchOverflow : 슬라이드가 1개 일 때 pager, button 숨김 여부 설정

slidesOffsetBefore : 슬라이드 시작 부분 여백