프로젝트 전체 코드를 관심사 분리 원칙에 따라 리팩토링해줘.
[원칙]
1. 타입 정의 분리
- 컴포넌트 Props 타입과 스타일 Props 타입: 각 컴포넌트 파일 내부에 정의
- 스토어 타입: 각 스토어 파일 내부에 정의
- 공유되는 타입 (여러 곳에서 사용): types 폴더에 정의
2. 데이터베이스/API 호출 분리
- 컴포넌트나 스토어에서 직접 supabase 클라이언트를 호출하는 코드는 모두 service 폴더로 이동
- 컴포넌트는 서비스 함수를 호출하도록 변경
- 실시간 구독(Realtime) 등 특수한 경우는 예외로 컴포넌트에서 직접 사용 가능
3. 관심사 분리
- 컴포넌트: UI 렌더링 및 사용자 인터랙션 처리만 담당
- 서비스: 데이터베이스 및 외부 API 통신 담당
- 스토어: 상태 관리만 담당
[작업 순서]
1. 프로젝트 전체에서 supabase 직접 호출 위치 파악
2. 각 기능별로 적절한 서비스 파일 생성 (service/{도메인}/{기능}.ts)
3. 컴포넌트/스토어에서 서비스 함수 호출로 변경
4. 공유 타입이 있다면 types 폴더로 이동
5. 린터 에러 확인 및 수정