HomeScreen 구현 기능 요청

[sugoring]

HomeScreen.js에서 현재 날짜와 사용자가 선택한 날짜를 관리하고, Round.js에서 운행 회차 정보를 표시합니다.

TODO 목록

• [x] 현재 날짜 및 사용자가 선택한 날짜 상태 관리
• [x] 이전 및 다음 날짜로 이동 버튼 구현
• [x] 날짜에 따라 휴일 여부 표시
• [x] Round.js에서 현재 시각 및 운행 회차 정보 표시

[sugoring]

휴일 일정 3월: 1, 2, 3, 9, 10, 16, 17, 23, 24, 30, 31 4월: 6, 7, 10(총선), 13, 14, 20, 21, 27, 28 5월: 1, 4, 5, 6, 11, 12, 15, 18, 19, 25, 26 6월: 1, 2, 6, 8, 9, 14, 15, 16, 22, 23

회차 구분 1회차: 운영 예정[0:0 ~ 8:29] / 운영 중[8:30 ~ 8:53] 2회차: 운영 예정[8:54 ~ 9:29] / 운영 중[9:30 ~ 9:53] 3회차: 운영 예정[9:54 ~ 9:59] / 운영 중[10:00 ~ 10:23] 4회차: 운영 예정[10:24 ~ 11:29] / 운영 중[11:30 ~ 11:53] 5회차: 운영 예정[11:54] ~ [11:59] / 운영 중[12:00 ~ 12:23] 6회차: 운영 예정[12:24 ~ 12:59] / 운영 중[13:00 ~ 13:23] 7회차: 운영 예정[13:24 ~ 14:29] / 운영 중[14:30 ~ 14:53] 8회차: 운영 예정[14:54 ~ 13:59] / 운영 중16:00 ~ 16:23] 9회차: 운영 예정[14:24 ~ 16:29] / 운영 중[17:30 ~ 17:53] 10회차: 운영 예정[17:54 ~ 17:59] / 운영 중[18:00 ~ 18:23] 운영 종료[18:24 ~ 23:59]

[sugoring]

• HomeScreen.js: 메인 페이지, 현재 시각 표시. Holiday.js를 임포트하고, 현재 시각 상태를 넘겨줌.

• Holiday.js: 현재 날짜에 따른 휴일 여부를 표시. 이전 및 다음 날짜로 이동 버튼 존재(오늘 날짜로 되돌아오기 버튼 존재). Round.js를 임포트하고, 현재 시각 상태와 휴일 여부를 넘겨줌. 휴일 일정 3월: 1, 2, 3, 9, 10, 16, 17, 23, 24, 30, 31 4월: 6, 7, 10(총선), 13, 14, 20, 21, 27, 28 5월: 1, 4, 5, 6, 11, 12, 15, 18, 19, 25, 26 6월: 1, 2, 6, 8, 9, 14, 15, 16, 22, 23

• Round.js: 휴일이 아닌 경우, 현재 회차와 해당 회차의 운행 시간표를 표시. 이전 및 다음 회차로 이동 버튼 존재.

• 1회차: 운영 예정[0:0 ~ 8:29] / 운영 중[8:30 ~ 8:53] 2회차: 운영 예정[8:54 ~ 9:29] / 운영 중[9:30 ~ 9:53] 3회차: 운영 예정[9:54 ~ 9:59] / 운영 중[10:00 ~ 10:23] 4회차: 운영 예정[10:24 ~ 11:29] / 운영 중[11:30 ~ 11:53] 5회차: 운영 예정[11:54] ~ [11:59] / 운영 중[12:00 ~ 12:23] 6회차: 운영 예정[12:24 ~ 12:59] / 운영 중[13:00 ~ 13:23] 7회차: 운영 예정[13:24 ~ 14:29] / 운영 중[14:30 ~ 14:53] 8회차: 운영 예정[14:54 ~ 13:59] / 운영 중16:00 ~ 16:23] 9회차: 운영 예정[14:24 ~ 16:29] / 운영 중[17:30 ~ 17:53] 10회차: 운영 예정[17:54 ~ 17:59] / 운영 중[18:00 ~ 18:23] 운영 종료[18:24 ~ 23:59]

[sugoring]

[HomeScreen.js]

• 현재 날짜를 표시함.
• 이전 및 다음 날짜로 이동 버튼, 또한, 오늘 날짜로 돌아오는 버튼 (오늘 날자가 아닌 경우 표시함.)
  • 이전 및 다음 날짜로 이동 버튼을 클릭할 때마다, Round.js의 운행 회차 정보를 초기 값으로 변경함.
• 날짜에 따라 휴일 여부 isHoliday를 표시함.
• Round.js를 import하고, 휴일 여부 isHoliday 상태를 전달함.
• 휴일 아닌 일정
  • '2024-03': [4, 5, 6, 7, 8, 11, 12, 13, 14, 15, 18, 19, 20, 21, 22, 25, 26, 27, 28, 29]
  • '2024-04': [1, 2, 3, 4, 5, 8, 9, 11, 12, 15, 16, 17, 18, 19, 22, 23, 24, 25, 26, 29, 30]
  • '2024-05': [2, 3, 7, 8, 9, 10, 13, 14, 16, 17, 20, 21, 22, 23, 24, 27, 28, 29, 30, 31]
  • '2024-06': [3, 4, 5, 7, 10, 11, 12, 13, 17, 18, 19, 20, 21, 24]

---

[Round.js]

• 현재 시각을 표시함.
• 휴일 여부 확인: 부모 컴포넌트로부터 전달받은 휴일 여부 isHoliday 상태를 확인함.
  • 휴일인 경우: 초기 값: 아무것도 표시되지 않음.
  • 휴일이 아닌 경우:
  • 초기 값: 현재 시각과 비교하여 운행 회차 정보(몇 회차인지, 운행 예정인지, 운영 중인지)를 표시함.
  • 이전 및 다음 회차로 이동 버튼, 해당하는 운행 회차 정보(몇 회차인지, 운행 예정인지, 운영 중인지)로 변경함.
  • 현재 회차로 돌아오기 버튼 (현재 날자가 아닌 경우 표시함.)
• 운행 회차
  • 1회차: 운영 예정[0:0 ~ 8:29] / 운영 중[8:30 ~ 8:53]
  • 2회차: 운영 예정[8:54 ~ 9:29] / 운영 중[9:30 ~ 9:53]
  • 3회차: 운영 예정[9:54 ~ 9:59] / 운영 중[10:00 ~ 10:23]
  • 4회차: 운영 예정[10:24 ~ 11:29] / 운영 중[11:30 ~ 11:53]
  • 5회차: 운영 예정[11:54] ~ [11:59] / 운영 중[12:00 ~ 12:23]
  • 6회차: 운영 예정[12:24 ~ 12:59] / 운영 중[13:00 ~ 13:23]
  • 7회차: 운영 예정[13:24 ~ 14:29] / 운영 중[14:30 ~ 14:53]
  • 8회차: 운영 예정[14:54 ~ 13:59] / 운영 중16:00 ~ 16:23]
  • 9회차: 운영 예정[14:24 ~ 16:29] / 운영 중[17:30 ~ 17:53]
  • 10회차: 운영 예정[17:54 ~ 17:59] / 운영 중[18:00 ~ 18:23]
  • 운영 종료[18:24 ~ 23:59]