Fix InputDatePicker afterAllDate 탭 포커스 오류

thebbodek · Oct 4, 2024 · ce37cbb · ce37cbb
1 parent 0dcf8b6
commit ce37cbb
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 14 deletions.
diff --git a/src/core/components/Calendar/DatePickerCalendar/DatePickerCalendar.stories.tsx b/src/core/components/Calendar/DatePickerCalendar/DatePickerCalendar.stories.tsx
@@ -50,7 +50,7 @@ export const PeriodDatesPicker = () => {
  return (
  <div className={'w-[500px] rounded-3xl border py-6'}>
  <DatePickerCalendar
- label={['사용일']}
+ label={['사용일', '종료일']}
  variants={DATE_PICKER_TYPE['PERIOD']}
  cutoffDate='2024-01-23'
  periodDates={periodDates}

diff --git a/src/core/components/Calendar/DatePickerCalendar/index.tsx b/src/core/components/Calendar/DatePickerCalendar/index.tsx
@@ -176,7 +176,6 @@ const DatePickerCalendar = ({
  newPeriodDates.endDate = '';
  operations.setPeriodDates({ ...newPeriodDates });
  operations.setCalendarPeriodDates({ startDate: '', endDate: '' });
- onDateClick(models.periodDates, true);
  }
  }, [afterAllDate]);
 

diff --git a/src/core/components/Input/InputDatePicker/DatePicker.tsx b/src/core/components/Input/InputDatePicker/DatePicker.tsx
@@ -28,21 +28,23 @@ const DatePicker = ({
  dateLabel,
  hasDatePickerTitle = true,
  temporaryDates,
+ afterAllDate,
 }: DatePickerProps) => {
  const id = useId();
  const [periodDates, setPeriodDates] = useState<PeriodDates>({
  startDate: '',
  endDate: '',
  });
- const [tabSelected, setTabSelected] = useState('selectedDate');
- const [isAfterAllDate, setIsAfterAllDate] = useState(false);
+ const [tabSelected, setTabSelected] = useState(
+ afterAllDate ? 'afterAllDate' : 'selectedDate',
+ );
  const tabData = [
  { key: 'selectedDate', label: '선택한 기간만 적용' },
  { key: 'afterAllDate', label: '선택일부터 모든 날짜 적용' },
  ];
 
  const handleClose = () => {
- close(periodDates, isAfterAllDate);
+ close(periodDates, tabSelected === 'afterAllDate');
  };
 
  useEffect(() => {
@@ -63,7 +65,7 @@ const DatePicker = ({
  />
  ));
 
- const onDateClick = (periodDates: PeriodDates, afterAllDate?: boolean) => {
+ const onDateClick = (periodDates: PeriodDates) => {
  setPeriodDates(
  !isFixStartDate
  ? periodDates!
@@ -72,7 +74,6 @@ const DatePicker = ({
  endDate: periodDates['endDate'],
  },
  );
- setIsAfterAllDate(afterAllDate !== undefined && afterAllDate);
  };
 
  return (
@@ -98,7 +99,7 @@ const DatePicker = ({
  {useTab && (
  <GeneralTab
  items={tabItems}
- className='mt-3 !rounded-xl !p-1.5 md:mt-4 md:p-2 [&_li]:rounded-lg [&_span]:p-1.5 [&_span]:text-body-02-bold md:[&_span]:p-2 md:[&_span]:text-body-01-bold'
+ className='mt-3 !rounded-xl !p-1.5 md:mt-4 md:p-2 [&_span]:!rounded-lg [&_span]:p-1.5 [&_span]:text-body-02-bold md:[&_span]:p-2 md:[&_span]:text-body-01-bold'
  />
  )}
  </header>

diff --git a/src/core/components/Input/InputDatePicker/InputDatePicker.stories.tsx b/src/core/components/Input/InputDatePicker/InputDatePicker.stories.tsx
@@ -19,12 +19,20 @@ export default meta;
 
 const DefaultLayout = () => {
  const overlay = useOverlay();
- const [myDates, setMyDates] = useState({
- startDate: '',
- endDate: '',
+ const [myDates, setMyDates] = useState<{
+ startDate: string;
+ endDate: string | null;
+ }>({
+ startDate: '2024-10-04',
+ endDate: null,
  });
- const getDate = (periodDates: PeriodDates, isAfterAllDate?: boolean) =>
+ const getDate = (periodDates: PeriodDates, isAfterAllDate?: boolean) => {
+ setMyDates({
+ startDate: periodDates.startDate,
+ endDate: isAfterAllDate ? null : periodDates.endDate,
+ });
  console.log(periodDates, isAfterAllDate);
+ };
 
  const onDatesClick = () =>
  setMyDates({ startDate: '22222', endDate: '1111' });
@@ -45,11 +53,16 @@ const DefaultLayout = () => {
  variants='single'
  overlay={overlay}
  getPeriodDates={getDate}
- externalDates={myDates}
+ externalDates={{
+ startDate: myDates.startDate,
+ endDate: myDates.endDate || '',
+ }}
  label='날짜 선택'
  initialDate='2024-02-05'
- required
+ afterAllDate={myDates.endDate === null}
  dateLabel={['복구일']}
+ useTab
+ required
  />
  <Button
  type='submit'

diff --git a/src/core/components/Input/InputDatePicker/index.tsx b/src/core/components/Input/InputDatePicker/index.tsx
@@ -71,6 +71,7 @@ const InputDatePicker = ({
  useHoliday={useHoliday}
  disabledDates={disabledDates}
  closeButtonText={closeButtonText}
+ afterAllDate={afterAllDate}
  />
  ));
  });