[FE] 시간 선택 Dropdown value 수정 (#340)

* test(useTimeRangeDropdown): 시작 시간을 선택했을 때 endTime이 1시간 이후로 선택되는지에 대한 테스트케이스 작성

* fix(useTimeRangeDropdown): '분'이 한자리 수일 때 앞에 0이 붙도록 수정

* test(useTimeRangeDropdown): 시작 시간 선택 시 끝 시간 자동 선택 테스트 케이스 추가

- 한 자리수의 시간일 때의 테스트케이스 경우 추가

* fix(useTimeRangeDropdown): '시간' 한 자리수 일 때, 앞에 '0'이 붙도록 수정

* test(useTimeRangeDropdown): 잘못된 테스트케이스 제거

* test(useTimeRangeDropdown): 테스트 케이스 설명 수정

- 들어가는 값을 이용해서 테스트 케이스 설명 수정

* refactor(useTimeRangeDropdown): 유틸함수 반환 문자열 + 대신 백틱(``)으로 수정

frontend/src/hooks/useTimeRangeDropdown/useTimeRangeDropdown.test.ts

@@ -12,18 +12,6 @@ describe('useTimeRangeDropdown', () => {
     expect(result.current.endTime.value).toBe(INITIAL_END_TIME);
   });
 
-  it('시작 시간(startTime)을 선택하면 끝 시간(endTime)은 시작 시간(startTime)의 1시간 이후로 설정된다.', () => {
-    const CHANGE_TIME = '01:00';
-    const CHANGE_TIME_AFTER_HOUR = '02:00';
-    const { result } = renderHook(() => useTimeRangeDropdown());
-
-    act(() => {
-      result.current.handleStartTimeChange(CHANGE_TIME);
-    });
-
-    expect(result.current.endTime.value).not.toBe(CHANGE_TIME_AFTER_HOUR);
-  });
-
   it('선택한 끝 시간(endTime)이 시작 시간(startTime)보다 빠르다면 선택한 시간값으로 변경되지 않는다.', () => {
     const CHANGE_START_TIME = '04:00';
     const CHANGE_END_TIME = '01:00';
@@ -55,4 +43,20 @@ describe('useTimeRangeDropdown', () => {
 
     expect(result.current.endTime.value).toBe(CHANGE_END_TIME);
   });
+
+  it.each([
+    ['18:00', '19:00'],
+    ['06:00', '07:00'],
+  ])(
+    '시작 시간(%s)을 선택하면, 끝 시간은 1시간 이후인 %s로 자동 설정된다.',
+    (startTime, endTime) => {
+      const { result } = renderHook(() => useTimeRangeDropdown());
+
+      act(() => {
+        result.current.handleStartTimeChange(startTime);
+      });
+
+      expect(result.current.endTime.value).toBe(endTime);
+    },
+  );
 });

frontend/src/hooks/useTimeRangeDropdown/useTimeRangeDropdown.utils.ts

@@ -48,9 +48,9 @@ export function isTimeSelectable(startTime: string, endTime: string) {
   return true;
 }
 
-// 현재 시간에서 1시간 더한 시간을 반화해주는 함수(@낙타)
+// 현재 시간에서 1시간 더한 시간을 반환해주는 함수(@낙타)
 export function addHoursToCurrentTime(currentTime: string, hours: number) {
   const [currentHours, currentMinutes] = currentTime.split(':').map(Number);
 
-  return currentHours + hours + ':' + currentMinutes;
+  return `${String(currentHours + hours).padStart(2, '0')}:${String(currentMinutes).padStart(2, '0')}`;
 }