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

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

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

@@ -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);

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