게시글 수정을 할 때 마감시간이 설정되도록 구현 (#382)

* feat: (#370) 시작시간과 마감시간으로 몇일, 몇시간, 몇분을 반환하는 함수 구현

* feat: (#370) 선택된 시간 문자 반환하는 함수 구현 및 적용

frontend/__test__/calculateDeadlineTime.test.ts

@@ -0,0 +1,94 @@
+import { calculateDeadlineTime } from '@utils/post/calculateDeadlineTime';
+
+describe('calculateDeadlineTime 함수를 이용해서 시작시간과 마감시간으로 몇일, 몇시간, 몇분을 설정했는지 구한다.', () => {
+ test('시작 시간: 2023-07-12 12:40, 마감 시간: 2023-07-13 12:40 일 때 하루를 반환한다.', () => {
+ const createdAt = '2023-07-12 12:40';
+ const deadline = '2023-07-13 12:40';
+
+ const result = calculateDeadlineTime(createdAt, deadline);
+
+ expect(result).toEqual({
+ day: 1,
+ hour: 0,
+ minute: 0,
+ });
+ });
+
+ test('시작 시간: 2023-07-12 12:40, 마감 시간: 2023-07-13 18:40 일 때 1일 6시간을 반환한다.', () => {
+ const createdAt = '2023-07-12 12:40';
+ const deadline = '2023-07-13 18:40';
+
+ const result = calculateDeadlineTime(createdAt, deadline);
+
+ expect(result).toEqual({
+ day: 1,
+ hour: 6,
+ minute: 0,
+ });
+ });
+
+ test('시작 시간: 2023-07-12 12:40, 마감 시간: 2023-07-13 18:20 일 때 1일 5시간 40분을 반환한다.', () => {
+ const createdAt = '2023-07-12 12:40';
+ const deadline = '2023-07-13 18:20';
+
+ const result = calculateDeadlineTime(createdAt, deadline);
+
+ expect(result).toEqual({
+ day: 1,
+ hour: 5,
+ minute: 40,
+ });
+ });
+
+ test('시작 시간: 2023-07-12 12:40, 마감 시간: 2023-07-12 12:50 일 때 10분을 반환한다.', () => {
+ const createdAt = '2023-07-12 12:40';
+ const deadline = '2023-07-12 12:50';
+
+ const result = calculateDeadlineTime(createdAt, deadline);
+
+ expect(result).toEqual({
+ day: 0,
+ hour: 0,
+ minute: 10,
+ });
+ });
+
+ test('시작 시간: 2023-07-12 00:00, 마감 시간: 2023-07-14 23:59 일 때 2일 23시간 59분을 반환한다.', () => {
+ const createdAt = '2023-07-12 00:00';
+ const deadline = '2023-07-14 23:59';
+
+ const result = calculateDeadlineTime(createdAt, deadline);
+
+ expect(result).toEqual({
+ day: 2,
+ hour: 23,
+ 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,
+ });
+ });
+});

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);
+ });
+});

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<DeadlineOption | '사용자지정'>();
+ const [selectTimeOption, setSelectTimeOption] = useState<DeadlineOption | '사용자지정' | null>(
+ 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();
  };
 

frontend/src/utils/post/calculateDeadlineTime.ts

@@ -0,0 +1,32 @@
+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);
+
+ const timeDifference = Number(deadlineTimeNumber) - Number(createTimeNumber);
+
+ const minuteUnit = 60_000;
+ const hourUnit = minuteUnit * 60;
+ const dayUnit = hourUnit * 24;
+
+ const hourTimeInMilliseconds = timeDifference % dayUnit;
+ const minuteTimeInMilliseconds = hourTimeInMilliseconds % hourUnit;
+
+ const day = Math.floor(timeDifference / dayUnit);
+ const hour = Math.floor(hourTimeInMilliseconds / hourUnit);
+ const minute = Math.floor(minuteTimeInMilliseconds / minuteUnit);
+
+ return {
+ day,
+ hour,
+ minute,
+ };
+};

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 '사용자지정';
+};