TIL - 공통 컴포넌트 input에 커스텀 date 넣기

학습 내용

1. 커스텀 캘린더 구현

• dayjs 라이브러리를 활용한 날짜 조작 및 비교
• Swiper 라이브러리로 월 간 슬라이딩 기능 구현
• 현재 월 중심으로 전후 6개월씩, 총 13개월 데이터 생성

2. Input 컴포넌트 확장

• 기존 Input 컴포넌트에 'date' 타입 추가
• 선택된 날짜 표시 및 캘린더 팝업 기능 구현

3. 스타일링

• Tailwind CSS를 사용한 반응형 디자인
• 오늘 날짜, 선택된 날짜 등 특정 조건에 따른 스타일 적용

주요 코드 구현

MonthCalendar 컴포넌트

const MonthCalender = ({ selectedDate, onSelectDate, onChangeMonth }: MonthCalendarProps) => {
  const [months, setMonths] = useState<Date[]>([]);
  const [currentMonthIndex, setCurrentMonthIndex] = useState(6);

  const generateMonths = () => {
    const today = new Date();
    const monthsList: Date[] = [];
    for (let i = -6; i <= 6; i++) {
      const month = new Date(today.getFullYear(), today.getMonth() + i, 1);
      monthsList.push(month);
    }
    setMonths(monthsList);
  };

  // ... (기타 로직)

  return (
    <Swiper
      onSwiper={(swiper) => (swiperRef.current = swiper)}
      onSlideChange={(swiper) => setCurrentMonthIndex(swiper.activeIndex)}
      initialSlide={6}
      spaceBetween={50}
      slidesPerView={1}
    >
      {months.map((month, monthIndex) => (
        <SwiperSlide key={monthIndex}>
          {/* 월별 캘린더 렌더링 */}
        </SwiperSlide>
      ))}
    </Swiper>
  );
};

 

Input 컴포넌트 사용

<Input inputType="date" label="날짜 선택" value={selectDay} onChange={handleDateChange} />

 

날짜 셀 렌더링 및 스타일링

<div
  className={`aspect-square flex justify-center items-center cursor-pointer p-[6px]
    ${dayjs(date).isSame(selectedDate, 'day') ? 'bg-red-200' : ''}
    ${date.getMonth() !== month.getMonth() ? 'text-gray-400' : ''}
    ${isToday ? 'text-primary-100' : ''}`}
  onClick={() => onSelectDate(date)}
>
  <span className="text-center text-base font-semibold leading-6">
    {date.getDate()}
  </span>
</div>

 

느낀 점

이번 작업을 통해 재사용 가능한 커스텀 date picker를 구현하고, 공통 Input 컴포넌트와 통합하는 방법을 학습했습니다. 특히 팀원들이 쉽게 사용할 수 있는 공용 컴포넌트를 만드는 데 중점을 두었습니다.

최대한 사용자(팀원) 친화적인 인터페이스를 제공하기 위해 노력했으며, 이 과정에서 다음과 같은 점들을 고려했습니다:

1. 간단한 prop 구조로 쉬운 사용성 제공
2. 기존 Input 컴포넌트와의 일관성 유지
3. 커스터마이징 가능한 옵션 제공

또한 Tailwind CSS를 활용한 효율적인 스타일링 기법도 익힐 수 있었습니다.
이를 통해 디자인 시스템과의 일관성을 유지하면서도 빠르게 UI를 구현할 수 있었습니다.

앞으로도 팀의 생산성과 코드의 일관성을 높이는 방향으로 공용 컴포넌트를 개발해 나가겠습니다.