Feat: 작가 음악 조회 페이지 구현

[nakyoung98]

📃 관련 이슈

Closes: #8

✨ 작업 내용

• 작가 음악 조회 페이지 (SongLayout) 구현
• 음악 목록 표시를 위한 DataTable 컴포넌트 구현
• 페이지네이션 기능 구현
• 새 곡 업로드를 위한 UploadMusicModal 구현
• 음악 관련 타입 및 DTO 정의
• 시간 변환 유틸 함수 구현

SongLayout 컴포넌트

[목표]

• [x] Section 컴포넌트를 사용하여 일관된 레이아웃 유지
• [x] DataTable 및 Pagination 사용하여 음악 목록 표시 및 관리
• [x] UploadMusicModal을 통해 새로운 음악 업로드 기능 연결

usePagination 훅

[목표]

• [x] 페이지네이션 로직을 재사용 가능한 훅으로 분리
• [x] 현재 페이지, 페이지 변경, 표시할 페이지 목록 등의 기능을 캡슐화하여 관리
• [x] 표시할 페이지 목록 반환을 통해 표시 로직 편의성 제공

   export const usePagination = (
     initPage: number,
     minPage: number = 1,
     maxPage?: number,
     visiblePageCount: 1 | 3 | 5 | 7 | 9 = 1,
   ) => {
     const [currentPage, setCurrentPage] = useState(initPage);
     // ... 
     return {
       minPage,
       maxPage,
       currentPage,
       onPageChange,
       getShowPageList,
     };
   };

UploadMusicModalContainer

[목표]

• [x] UploadMusicModal 비즈니스 로직 분리

• [x] useManageMultipleFile 훅을 사용하여 파일 관리 로직 재사용

  export default function UploadMusicModalContainer() {
   const { fileList: musicList, addFile: handleMusicChange, removeFile: handleMusicRemove } = useManageMultipleFile();
   // ...
   return (
     <UploadMusicModal
       musicList={musicList}
       onMusicChange={handleMusicChange}
       onMusicDelete={handleMusicDelete}
       onUpload={() => {
         console.log("upload", musicList);
       }}
     />
   );
  }

⚠️ 주의 사항

• API가 아직 구현되지 않아 목업 데이터를 사용 중
• 향후 실제 API 연동 시 수정이 필요할 수 있음

📸 스크린샷

➕ 추가 작업 사항

• API 연동 후 실제 데이터로 테스트 필요
• 음악 재생 기능 개선 (현재는 기본 audio 컨트롤 사용)

[github-actions[bot]]

올바른 PR 컨벤션

rebase에 대한 PR 컨벤션을 잘 준수하셨군요! 코드 작성하시느라 수고 많으셨습니다 :)