시간표 다음 단계 계획

목표

현재 검증된 model 계층 위에 실제 시간표 페이지를 올립니다. 우선 API 응답 -> 상태 관리 -> 화면 렌더링 흐름을 만들고, 이후 Figma에 맞는 스타일 디테일을 다듬습니다.

진행 순서

1. API 호출 계층을 추가합니다.

• src/features/timetable/model/types.ts의 응답 타입을 재사용해 fetchTimetable()을 만듭니다.
• 성공 응답과 404 응답을 그대로 반환하거나, 필요한 경우 한 곳에서 에러를 정리합니다.
• 테스트 포인트: 정상 응답 파싱, 404 응답 처리, 예상치 못한 실패 처리.

1. 페이지 상태를 관리하는 훅 또는 컨테이너를 만듭니다.

• 예: useTimetable() 또는 TimetablePage 내부 상태 관리.
• 로딩, 성공, 빈 상태, 에러 상태를 구분합니다.
• toTimetableViewModel()을 여기서 호출해 UI가 항상 ViewModel만 받도록 정리합니다.
• 테스트 포인트: 초기 로딩, 성공 시 렌더링 데이터 준비, 404 시 빈 상태 분기.

1. 시간표 그리드 컴포넌트를 만듭니다.

• 월~금 헤더와 시간 라벨을 렌더링합니다.
• displayStartHour, displayEndHour를 사용해 시간 축을 만듭니다.
• 테스트 포인트: 요일 헤더 표시, 9시부터 시작, 가장 늦게 끝나는 시각까지 표시.

1. 수업 블록 렌더링을 붙입니다.

• src/features/timetable/model/view-model.ts의 blocks를 사용해 위치와 높이를 계산합니다.
• topOffsetMinutes, durationMinutes, weekIndex를 기반으로 절대 위치 또는 grid 레이아웃을 적용합니다.