[FE] feat: 주차권 설정에서 현재 시간보다 이전 시간으로 설정하는 것을 방지한다. (#189)

JNU-Parking-Ticket-Project · Mar 10, 2024 · a746fe4 · a746fe4
2 parents 0817081 + 0e8f185
commit a746fe4
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 15 deletions.
diff --git a/service-manager/src/__test__/date.test.ts b/service-manager/src/__test__/date.test.ts
@@ -0,0 +1,43 @@
+import { getFormalDateBy } from '../functions/date';
+
+describe('분 단위 bound 테스트', () => {
+  it('0분 일 때, 가장 빠른 30분으로 적용이 된다.', () => {
+    expect(getFormalDateBy(new Date('2023-04-21T12:00:00')).getTime()).toEqual(
+      new Date('2023-04-21T12:30:00').getTime(),
+    );
+  });
+  it('1분 일 때, 가장 빠른 30분으로 적용이 된다.', () => {
+    expect(getFormalDateBy(new Date('2023-04-21T12:01:00')).getTime()).toEqual(
+      new Date('2023-04-21T12:30:00').getTime(),
+    );
+  });
+  it('29분 일 때, 가장 빠른 30분으로 적용이 된다.', () => {
+    expect(getFormalDateBy(new Date('2023-04-21T12:29:59')).getTime()).toEqual(
+      new Date('2023-04-21T12:30:00').getTime(),
+    );
+  });
+  it('31분 일 때, 가장 빠른 정각으로 적용이 된다.', () => {
+    expect(getFormalDateBy(new Date('2023-04-21T12:31:00')).getTime()).toEqual(
+      new Date('2023-04-21T13:00:00').getTime(),
+    );
+  });
+  it('59분 일 때, 가장 빠른 정각으로 적용이 된다.', () => {
+    expect(getFormalDateBy(new Date('2023-04-21T12:59:59')).getTime()).toEqual(
+      new Date('2023-04-21T13:00:00').getTime(),
+    );
+  });
+});
+
+describe('년, 월 단위 bound 테스트', () => {
+  it('년,월,일의 경계 일때, 년, 월, 일이 제대로 넘어가는지', () => {
+    expect(getFormalDateBy(new Date('2023-12-31T23:59:00')).getTime()).toEqual(
+      new Date('2024-01-01T00:00:00').getTime(),
+    );
+  });
+
+  it('월, 일의 경계일 때, 월, 일이 제대로 넘어가는지', () => {
+    expect(getFormalDateBy(new Date('2023-11-30T23:59:00')).getTime()).toEqual(
+      new Date('2023-12-01T00:00:00').getTime(),
+    );
+  });
+});
diff --git a/service-manager/src/components/setting/SettingCreateTime.tsx b/service-manager/src/components/setting/SettingCreateTime.tsx
@@ -1,11 +1,13 @@
-import { useState } from 'react';
+import { Dispatch, useState } from 'react';
 import DatePicker, { registerLocale, setDefaultLocale } from 'react-datepicker';
 import { Button, InputText, Txt } from '@quokka/design-system';
 import { ko } from 'date-fns/locale';
 
 import 'react-datepicker/dist/react-datepicker.css';
 import './DateTime.css';
 import { useSectionTimeSettingCreate } from '../../hooks/react-query/useSectionTimeSetting';
+import { getFormalDateBy, isPastTime } from '../../functions/date';
+import { SetStateAction } from 'jotai';
 
 registerLocale('ko', ko);
 setDefaultLocale('ko');
@@ -49,22 +51,52 @@ const DateTimePicker = ({ date, setDate, title }: SettingTimeProps) => {
 
 export const SettingCreateTime = () => {
   const { createSettingTime } = useSectionTimeSettingCreate();
-  const [openDate, setOpenDate] = useState(() => new Date());
-  const [endDate, setEndDate] = useState(() => new Date());
+  const [openDate, setOpenDate] = useState(() => getFormalDateBy(new Date()));
+  const [endDate, setEndDate] = useState(() => getFormalDateBy(new Date()));
   const [title, setTitle] = useState('');
 
   const onSave = () => {
-    if (title === '') {
+    if (!title) {
       alert('제목을 입력해주세요');
       return;
     }
+
+    if (isPastTime(openDate)) {
+      alert('OPEN 시간을 현재 시간보다 이전 시간으로 설정할 수 없습니다.');
+      return;
+    }
+
+    if (isPastTime(endDate)) {
+      alert('CLOSE 시간을 현재 시간보다 이전 시간으로 설정할 수 없습니다.');
+      return;
+    }
+
     createSettingTime({
       startAt: openDate,
       endAt: endDate,
       title,
     });
   };
 
+  const onSetCreateTime =
+    (
+      predicate: (date: Date) => boolean,
+      errMsg: string,
+      setDate: Dispatch<SetStateAction<Date>>,
+      setDateType: 'open' | 'close',
+    ) =>
+    (date: Date | null) => {
+      if (!date) return;
+      if (predicate(date)) {
+        alert(errMsg);
+        return;
+      }
+      setDate(date);
+      if (setDateType === 'open' && date > endDate) {
+        setEndDate(date);
+      }
+    };
+
   return (
     <>
       <div className="py-4 w-full flex gap-2 justify-center items-center">
@@ -80,20 +112,22 @@ export const SettingCreateTime = () => {
       <div className="flex justify-around gap-8">
         <DateTimePicker
           date={openDate}
-          setDate={(date) => {
-            if (!date) return;
-            setOpenDate(date);
-            if (date > endDate) setEndDate(date);
-          }}
+          setDate={onSetCreateTime(
+            isPastTime,
+            '현재 시간보다 이전 시간으로 설정할 수 없습니다.',
+            setOpenDate,
+            'open',
+          )}
           title="Open"
         />
         <DateTimePicker
           date={endDate}
-          setDate={(date) => {
-            if (!date) return;
-            if (date < openDate) return;
-            setEndDate(date);
-          }}
+          setDate={onSetCreateTime(
+            isPastTime,
+            '현재 시간보다 이전 시간으로 설정할 수 없습니다.',
+            setEndDate,
+            'close',
+          )}
           title="Close"
         />
       </div>

diff --git a/service-manager/src/components/setting/SettingTime.tsx b/service-manager/src/components/setting/SettingTime.tsx
@@ -12,6 +12,7 @@ import {
   useSettingPublishMutateBy,
   useSettingPublishQueryBy,
 } from '../../hooks/react-query/useSetting';
+import { isPastTime } from '../../functions/date';
 
 registerLocale('ko', ko);
 setDefaultLocale('ko');
@@ -126,6 +127,10 @@ export const SettingTime = ({ eventId }: { eventId: string }) => {
           setDate={(date) => {
             if (event.eventStatus === 'CLOSED') return;
             if (!date) return;
+            if (isPastTime(date)) {
+              alert('현재 시간보다 이전 시간으로 설정할 수 없습니다.');
+              return;
+            }
             setOpenDate(date);
             if (date > endDate) setEndDate(date);
           }}
@@ -137,6 +142,10 @@ export const SettingTime = ({ eventId }: { eventId: string }) => {
             if (event.eventStatus === 'CLOSED') return;
             if (!date) return;
             if (date < openDate) return;
+            if (isPastTime(date)) {
+              alert('현재 시간보다 이전 시간으로 설정할 수 없습니다.');
+              return;
+            }
             setEndDate(date);
           }}
           title="Close"

diff --git a/service-manager/src/functions/date.ts b/service-manager/src/functions/date.ts
@@ -0,0 +1,23 @@
+export const getFormalDateBy = (time: Date) => {
+  const currentHour = time.getHours();
+  const currentMin = time.getMinutes();
+  const returnDate = new Date(time);
+  returnDate.setMilliseconds(0);
+  returnDate.setSeconds(0);
+
+  if (currentMin >= 0 && currentMin <= 30) {
+    const gap = 30 - currentMin;
+    return new Date(returnDate.getTime() + 60000 * gap);
+  }
+
+  if (currentMin >= 30 && currentMin < 60) {
+    const gap = 60 - currentMin;
+    return new Date(returnDate.getTime() + 60000 * gap);
+  }
+
+  return returnDate;
+};
+
+export const isPastTime = (date: Date) => {
+  return Date.now() > date.getTime();
+};
diff --git a/service-manager/vite.config.ts b/service-manager/vite.config.ts
@@ -29,6 +29,6 @@ export default defineConfig({
       dir: '../node_modules/.vitest',
     },
     environment: 'jsdom',
-    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    include: ['**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
   },
 });