diff --git a/frontend/__test__/calculateDeadlineTime.test.ts b/frontend/__test__/calculateDeadlineTime.test.ts index c1e7074ac..f7f4b29c7 100644 --- a/frontend/__test__/calculateDeadlineTime.test.ts +++ b/frontend/__test__/calculateDeadlineTime.test.ts @@ -65,4 +65,30 @@ describe('calculateDeadlineTime 함수를 이용해서 시작시간과 마감시 minute: 59, }); }); + + test('시작 시간이 undefined, 마감 시간: 2023-07-14 23:59 일 때 0일 0시간 0분을 반환한다.', () => { + const createdAt = undefined; + const deadline = '2023-07-14 23:59'; + + const result = calculateDeadlineTime(createdAt, deadline); + + expect(result).toEqual({ + day: 0, + hour: 0, + minute: 0, + }); + }); + + test('시작 시간이 2023-07-14 23:59, 마감 시간: undefined 일 때 0일 0시간 0분을 반환한다.', () => { + const createdAt = '2023-07-14 23:59'; + const deadline = undefined; + + const result = calculateDeadlineTime(createdAt, deadline); + + expect(result).toEqual({ + day: 0, + hour: 0, + minute: 0, + }); + }); }); diff --git a/frontend/__test__/getSelectedTimeOption.test.ts b/frontend/__test__/getSelectedTimeOption.test.ts new file mode 100644 index 000000000..7324c2ebc --- /dev/null +++ b/frontend/__test__/getSelectedTimeOption.test.ts @@ -0,0 +1,99 @@ +import { getSelectedTimeOption } from '@utils/post/getSelectedTimeOption'; + +describe('getSelectedTimeOption 함수에서 day, hour, minute 객체를 입력받아 "10분" | "30분" | "1시간" | "6시간" | "1일" | "사용자 지정" | null 을 반환한다.', () => { + test('10분 객체를 입력했을 때 10분을 반환한다.', () => { + const time = { + day: 0, + hour: 0, + minute: 10, + }; + + const result = getSelectedTimeOption(time); + + expect(result).toBe('10분'); + }); + + test('30분 객체를 입력했을 때 30분을 반환한다.', () => { + const time = { + day: 0, + hour: 0, + minute: 30, + }; + + const result = getSelectedTimeOption(time); + + expect(result).toBe('30분'); + }); + + test('1시간 객체를 입력했을 때 1시간을 반환한다.', () => { + const time = { + day: 0, + hour: 1, + minute: 0, + }; + + const result = getSelectedTimeOption(time); + + expect(result).toBe('1시간'); + }); + + test('6시간 객체를 입력했을 때 6시간을 반환한다.', () => { + const time = { + day: 0, + hour: 6, + minute: 0, + }; + + const result = getSelectedTimeOption(time); + + expect(result).toBe('6시간'); + }); + + test('1일 객체를 입력했을 때 1일을 반환한다.', () => { + const time = { + day: 1, + hour: 0, + minute: 0, + }; + + const result = getSelectedTimeOption(time); + + expect(result).toBe('1일'); + }); + + test('2일 객체를 입력했을 때 사용자지정을 반환한다.', () => { + const time = { + day: 2, + hour: 0, + minute: 0, + }; + + const result = getSelectedTimeOption(time); + + expect(result).toBe('사용자지정'); + }); + + test('3분 객체를 입력했을 때 사용자지정을 반환한다.', () => { + const time = { + day: 0, + hour: 0, + minute: 3, + }; + + const result = getSelectedTimeOption(time); + + expect(result).toBe('사용자지정'); + }); + + test('0일 0시간 0분 객체를 입력했을 때 null을 반환한다.', () => { + const time = { + day: 0, + hour: 0, + minute: 0, + }; + + const result = getSelectedTimeOption(time); + + expect(result).toBe(null); + }); +}); diff --git a/frontend/src/components/PostForm/index.tsx b/frontend/src/components/PostForm/index.tsx index 48dcc858b..e102cd398 100644 --- a/frontend/src/components/PostForm/index.tsx +++ b/frontend/src/components/PostForm/index.tsx @@ -24,9 +24,11 @@ import WritingVoteOptionList from '@components/optionList/WritingVoteOptionList' import { PATH } from '@constants/path'; import { CATEGORY_COUNT_LIMIT, POST_CONTENT, POST_TITLE } from '@constants/post'; +import { calculateDeadlineTime } from '@utils/post/calculateDeadlineTime'; import { checkWriter } from '@utils/post/checkWriter'; import { addTimeToDate, formatTimeWithOption } from '@utils/post/formatTime'; import { getDeadlineTime } from '@utils/post/getDeadlineTime'; +import { getSelectedTimeOption } from '@utils/post/getSelectedTimeOption'; import { checkIrreplaceableTime } from '@utils/time'; import CategoryWrapper from './CategoryWrapper'; @@ -56,13 +58,11 @@ export default function PostForm({ data, mutate }: PostFormProps) { const writingOptionHook = useWritingOption(voteInfo?.options); const contentImageHook = useContentImage(imageUrl); const { isToastOpen, openToast, toastMessage } = useToast(); - const [selectTimeOption, setSelectTimeOption] = useState(); + const [selectTimeOption, setSelectTimeOption] = useState( + getSelectedTimeOption(calculateDeadlineTime(createTime, deadline)) + ); const { isOpen, openComponent, closeComponent } = useToggle(); - const [time, setTime] = useState({ - day: 0, - hour: 0, - minute: 0, - }); + const [time, setTime] = useState(calculateDeadlineTime(createTime, deadline)); const baseTime = createTime ? new Date(createTime) : new Date(); const closeModal = () => { if (data && checkIrreplaceableTime(time, data.createTime)) { @@ -73,10 +73,10 @@ export default function PostForm({ data, mutate }: PostFormProps) { minute: 0, }; setTime(updatedTime); - setSelectTimeOption(undefined); + setSelectTimeOption(null); } - setSelectTimeOption(Object.values(time).every(time => time === 0) ? undefined : '사용자지정'); + setSelectTimeOption(Object.values(time).every(time => time === 0) ? null : '사용자지정'); closeComponent(); }; diff --git a/frontend/src/utils/post/calculateDeadlineTime.ts b/frontend/src/utils/post/calculateDeadlineTime.ts index 072ecb462..ed82ae35f 100644 --- a/frontend/src/utils/post/calculateDeadlineTime.ts +++ b/frontend/src/utils/post/calculateDeadlineTime.ts @@ -1,4 +1,12 @@ -export const calculateDeadlineTime = (createdAt: string, deadLine: string) => { +export const calculateDeadlineTime = (createdAt?: string, deadLine?: string) => { + if (!createdAt || !deadLine) { + return { + day: 0, + hour: 0, + minute: 0, + }; + } + const createTimeNumber = new Date(createdAt); const deadlineTimeNumber = new Date(deadLine); diff --git a/frontend/src/utils/post/getSelectedTimeOption.ts b/frontend/src/utils/post/getSelectedTimeOption.ts new file mode 100644 index 000000000..6729b144c --- /dev/null +++ b/frontend/src/utils/post/getSelectedTimeOption.ts @@ -0,0 +1,20 @@ +import { DeadlineOption } from '@components/PostForm/constants'; + +export const getSelectedTimeOption = ({ + day, + hour, + minute, +}: { + day: number; + hour: number; + minute: number; +}): DeadlineOption | '사용자지정' | null => { + if (day === 0 && hour === 0 && minute === 0) return null; + if (day === 0 && hour === 0 && minute === 10) return '10분'; + if (day === 0 && hour === 0 && minute === 30) return '30분'; + if (day === 0 && hour === 1 && minute === 0) return '1시간'; + if (day === 0 && hour === 6 && minute === 0) return '6시간'; + if (day === 1 && hour === 0 && minute === 0) return '1일'; + + return '사용자지정'; +};