DateRangePicker 재구성

[jklasd2001]

DateRangePicker 재구성

[Dave352]

목적

react-datepicker 라이브러리 의존성 제거

작업 스케줄

• DatePicker 컴포넌트 스타일 구현 시도
• DatePicker 컴포넌트 기능 구현 시도
• DateRangePicker 컴포넌트 스타일 구현 시도
• DateRangePicker 컴포넌트 기능 구현 시도
• 설계 구상
• 만들어진 DatePicker 컴포넌트를 이용해서 DateRangePicker 스타일 구현
• 만들어진 DatePicker 컴포넌트를 이용해서 DateRangePicker 기능 구현
• DatePicker 컴포넌트에 props를 전달받아 레인지 기능을 사용 할 수 있도록 구현

필요한 정보

• forwardRef 정의, 인자, 제네릭
• date-fns
• Omit

[Dave352]

📌 예시 코드

기본 타입

import { Fragment } from 'react'
import { Controller } from 'react-hook-form'

import { useTheme } from '@emotion/react'
import { useFormSearch } from '@musma/react-utils'
import { DateTime } from 'luxon'

import { DatePicker, SearchForm } from './components'

const Component = () => {
  const theme = useTheme()
  const { control, onSubmit, handleSubmit, getValues } = useFormSearch({
    useFormProps: {
      defaultValues: {
        date: DateTime.now().setZone('Asia/Seoul'),
      },
    },

    fetchAPI() {
      const { date } = getValues()
      console.log('date', date)
    },
  })

  return (
    <Fragment>
      <SearchForm onSubmit={handleSubmit(onSubmit)}>
          {/* DatePicker 기본 타입 */}
          <Controller
            name="date"
            control={control}
            render={({ field }) => {
              return <DatePicker label="기본 타입" {...field} />
            }}
          />
      </SearchForm>
    </Fragment>
  )
}

export default Component

레인지 타입 - default값이 필요한 경우

import { Fragment } from 'react'
import { Controller } from 'react-hook-form'

import { useTheme } from '@emotion/react'
import { useFormSearch } from '@musma/react-utils'
import { DateTime } from 'luxon'

import { DatePicker, SearchForm } from './components'

const Component = () => {
  const theme = useTheme()
  const { control, onSubmit, handleSubmit, getValues } = useFormSearch({
    useFormProps: {
      defaultValues: {
        date: [
          DateTime.now().setZone('Asia/Seoul'),
          DateTime.now().setZone('Asia/Seoul'),
        ],
      },
    },

    fetchAPI() {
      const { date } = getValues()
      console.log('date', date)
    },
  })

  return (
    <Fragment>
      <SearchForm onSubmit={handleSubmit(onSubmit)}>
          {/* DatePicker 레인지 타입 (defaultValue O) */}
            <Controller
              name="date"
              control={control}
              render={({ field: { value, ...rest } }) => {
                const [startDate, endDate] = value
                return (
                  <DatePicker
                    label="레인지 타입(디폴트 o)"
                    startDate={startDate}
                    endDate={endDate}
                    selectRange={true}
                    {...rest}
                  />
                )
              }}
            />
      </SearchForm>
    </Fragment>
  )
}

export default Component

레인지 타입 - default값이 필요하지 않은 경우

import { Fragment } from 'react'
import { Controller } from 'react-hook-form'

import { useTheme } from '@emotion/react'
import { useFormSearch } from '@musma/react-utils'
import { DateTime } from 'luxon'

import { DatePicker, SearchForm } from './components'

const Component = () => {
  const theme = useTheme()
  const { control, onSubmit, handleSubmit, getValues } = useFormSearch({
    useFormProps: {
      defaultValues: {
        date: [null, null]
      },
    },

    fetchAPI() {
      const { date } = getValues()
      console.log('date', date)
    },
  })

  return (
    <Fragment>
      <SearchForm onSubmit={handleSubmit(onSubmit)}>
          {/* DatePicker 레인지 타입 (defaultValue O) */}
            <Controller
              name="date"
              control={control}
              render={({ field: { value, ...rest } }) => {
                const [startDate, endDate] = value
                return (
                  <DatePicker
                    label="레인지 타입(디폴트 o)"
                    startDate={startDate}
                    endDate={endDate}
                    selectRange={true}
                    {...rest}
                  />
                )
              }}
            />
      </SearchForm>
    </Fragment>
  )
}

export default Component

영문 달력으로 변경

<DatePicker i18n="en" {...rest} />