1. UI컴포넌트 개발

개발 대상 : Modal , Toast , Dropdown , Field , Input

• 대부분의 컴포넌트는 Headless UI 방식으로 설계하여 스타일과 로직을 분리하고 재사용성을 고려합니다.
• 컴파운드 컴포넌트가 필요한 경우에는 Context API를 활용하여 하위 컴포넌트 간 상태를 공유합니다.
• 추가 : Embla Carousel 기반 슬라이더 컴포넌트 구현

테스트 전략

• UI 확인은 Storybook을 통해 시각적으로 구성하고, 다양한 prop 조합을 테스트합니다.
• 동작 검증은 Vitest + React Testing Library를 사용하여 기능 테스트를 수행합니다.

예시)

• Modal Storybook: 열림/닫힘 상태, 다양한 콘텐츠 렌더링 Vitest : ESC 키 입력 시 닫힘, 닫기 버튼 클릭 시 닫힘 등 인터랙션 테스트
• Toast Storybook: 성공/실패/경고 등 다양한 타입의 렌더링 확인 Vitest : 일정 시간 후 자동 닫힘, 수동 닫힘 등의 동작 테스트

2. 페이지 제작

필요한 페이지 목록

• 로그인
• 회원가입
• 메인페이지
• 마이페이지
• 내 시간표 페이지