(#246) 운동기록페이지 운동시간(시작시간, 종료시간)UI 리팩토링

[ldg-96]

관련 이슈

(#246)

📝작업 내용

운동기록페이지 운동시간(시작시간, 종료시간)UI 리팩토링

• 기존의 dateTimePicker 컴포넌트 제거 후 새로운 timeField 컴포넌트 생성
• 연,월,일 선택 시 기존의 달력 컴포넌트를 재사용하기 위하여 exerciseCalendar 컴포넌트의 Props로 showStamps를 추가
  • 해당값이 false인경우 사용자의 데이터를 불러오지 않고 달력만 표시해주며 날짜를 선택 할 수 있도록 함

참고 UI

[SimYunSup]

1. 이름을 toLocalISOString보다는 Korean String으로 바꾸는게 좋아보입니다.
2. date-fns에 이러한 기능이 있는지 아닌지 한 번 찾아보세요.

[ldg-96]

export const toKoreanISOString = (date: Date) => {
  return format(date, "yyyy-MM-dd'T'HH:mm:ss")
}

export const formatExerciseDetailTime = (dateString: string) => {
  if (!dateString) return ''
  const date = parseISO(dateString)
  return format(date, 'yy.MM.dd HH:mm')
}

toKoreanISOString 함수에서 data-fns의 format을 이용하여 오프셋 정보를 제거하여 DB에 저장되고, formatExerciseDetailTime 함수에서 다시 표시할때 parseISO함수를 사용함으로써 다시 로컬시간대로 변경이 됩니다.

참고 : https://date-fns.org/v4.1.0/docs/parseISO

cd07886

[SimYunSup]

1. 이 컴포넌트 하나가 너무 많은 역할을 담당하고 있습니다. 불필요한 추상화가 있었는지 다시 생각해보세요.
2. MonthView가 만약 간단하게 DatePicker라는 담당을 하고 있다고 하면, 이 컴포넌트는 역할이 무엇인가요?
3. 다른 부분에서 적용되는 이야기지만, 시간 복잡도 최적화가 필요하지 않다면 .forEach와 .map을 섞어서 사용한다던가. 아니면 while, for 문까지 섞어서 사용하는 것(이 부분은 다른 곳에서 보입니다)은 일관성에 좋지 않습니다.

[ldg-96]

MonthViewWithData컴포넌트에서 조건부 로직, 데이터 소싱 결정, 상태관리 및 URL파라미터값 파싱, 데이터 가공, 캐싱로직을 하고있어 윤섭님의 말처럼 너무 많은 역할을 담당하고 있다고 생각합니다. 데이터를 페칭하고 캐싱하는 로직을 따로 훅으로 빼서 MonthViewWithData는 단순히 특정 날짜 범위의 데이터를 가져와서 UI에 전달해주는 어댑터 역할만 수행하도록 변경하였습니다.

추가로 memberId는 상위컴포넌트에서 내려받도록 변경하였습니다.

ExerciseCalendar

• 전체 달력의 흐름을 제어하고 전역상태를 주입합니다.

MonthViewWithData

• 순수 UI에 데이터를 넣어주는 어댑터 역할을 합니다.

useExerciseCalendarData

• isOthers 에 따라 API를 분기처리하고, SWR캐싱을하고, 데이터를 가공합니다.

MonthView

• 데이터가 주입되면 그리기만 하는 순수한 UI컴포넌트 입니다.

3번으로 지적해주신 내용도 추후 코드에서는 일관성 있게 작성하도록 하겠습니다. MonthView컴포넌트에서는 data-fns 라이브러리를 활용하여 날짜배열을 만들도록 변경해보았습니다.

dc0dff2

[SimYunSup]

useExerciseCalendarData로 훅으로 분리했다면, MonthViewWithData의 존재 이유를 모르겠습니다.

[ldg-96]

MonthView를 순수 UI 컴포넌트로 남기고 MonthViewWithData의 관심사를 추가할지,
아니면 MonthViewWithData를 제거하고 MonthView에서 데이터를 불러오는 로직을 작성하여 단순화 할지 고민하였습니다.

현재 시점에선 MonthViewWithData를 둘만큼 복잡한 로직이 없고 ExerciseCalendar가 이미 컨테이너 역할도 하고있습니다. 따라서 컴포넌트 구조가 단순하고 직관적이도록 MonthViewWithData를 제거하고 MonthView에 관련 로직을 삽입하였습니다.

8f3a086