폴더 정리 (#2)

* style: Layout 컴포넌트 폴더 이동

* refactor: util splitTime 함수 사용

* refactor: 메인페이지 앨범 컴포넌트와 앨범 상세 페이지 컴포넌트 폴더 분리

client/src/Layout.tsx → client/src/app/router/Layout.tsx

@@ -1,5 +1,5 @@
 import { Outlet } from 'react-router-dom';
-import { Sidebar } from './widgets/sidebar/ui/Sidebar';
+import { Sidebar } from '../../widgets/sidebar/ui/Sidebar';
 
 export function Layout() {
   return (

client/src/app/router/routes.tsx

@@ -1,6 +1,6 @@
 import { MainPage } from '@/pages/MainPage';
 import { StreamingPage } from '@/pages/StreamingPage';
-import { Layout } from '@/Layout';
+import { Layout } from '@/app/router/Layout';
 import { AdminPage } from '@/pages/AdminPage';
 import { AdminLoginPage } from '@/pages/AdminLoginPage';
 import { ProtectedRoute } from '@/app/router/ProtectedRoute';

client/src/entities/albumCard/index.ts

@@ -0,0 +1 @@
+export { AlbumCard } from './ui/AlbumCard';

client/src/entities/albumCard/model/types.ts

@@ -0,0 +1,11 @@
+/**
+ * 메인 페이지 앨범 카드
+ */
+
+export interface AlbumCardData {
+  albumId: string;
+  albumName: string;
+  artist: string;
+  albumTags?: string;
+  jacketUrl: string;
+}

client/src/widgets/albums/ui/AlbumCard.tsx → client/src/entities/albumCard/ui/AlbumCard.tsx

@@ -1,12 +1,6 @@
-interface AlbumCard {
-  albumId: string;
-  albumName: string;
-  artist: string;
-  albumTags?: string;
-  jacketUrl: string;
-}
+import { AlbumCardData } from '../model/types';
 
-export function AlbumCard({ album }: { album: AlbumCard }) {
+export function AlbumCard({ album }: { album: AlbumCardData }) {
   const tagString = album.albumTags
     ? `#${album.albumTags.split(', ').join(' #')}`
     : '태그 없음';

client/src/entities/message/types.ts

@@ -1,3 +1,6 @@
+/**
+ * 채팅 메세지
+ */
 export interface MessageData {
   userName: string;
   message: string;

client/src/features/commentInput/ui/CommentInput.tsx

@@ -2,7 +2,7 @@ import { publicAPI } from '@/shared/api/publicAPI.ts';
 import React, { useCallback, useState } from 'react';
 import { Button } from '@/shared/ui/Button.tsx';
 import { useParams } from 'react-router-dom';
-import { CommentData } from '@/entities/comment/types';
+import { CommentData } from '@/entities/albumDetail/types';
 const MAX_COMMENT_LENGTH = 200;
 
 interface CommentInputProps {

client/src/main.tsx

@@ -3,7 +3,7 @@ import './index.css';
 import { App } from '@/App';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { BrowserRouter } from 'react-router-dom';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+// import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 const queryClient = new QueryClient({
   defaultOptions: {

client/src/pages/AlbumPage/ui/AlbumPage.tsx

@@ -5,7 +5,7 @@ import { useEffect, useState } from 'react';
 import { FastAverageColor } from 'fast-average-color';
 import { darken } from 'polished';
 import LogoAlbum from '@/assets/logo-album-cover.webp';
-import { AlbumDetailData, SongDetailData } from '@/entities/comment/types';
+import { AlbumDetailData, SongDetailData } from '@/entities/albumDetail/types';
 
 export function AlbumPage() {
   const { albumId } = useParams<{ albumId: string }>();

client/src/pages/MainPage/ui/MainPage.tsx

@@ -1,4 +1,4 @@
-import { AlbumList } from '@/widgets/albums';
+import { AlbumList } from '@/widgets/albumList';
 import { publicAPI } from '@/shared/api/publicAPI';
 import { useEffect, useState } from 'react';
 import { bannerData } from '@/entities/room/types';

client/src/widgets/albumList/index.ts

@@ -0,0 +1 @@
+export { AlbumList } from './ui/AlbumList';

client/src/widgets/albums/ui/AlbumList.tsx → client/src/widgets/albumList/ui/AlbumList.tsx

@@ -1,5 +1,5 @@
 import LogoAlbum from '@/assets/logo-album-cover.webp';
-import { AlbumCard } from './AlbumCard';
+import { AlbumCard } from '@/entities/albumCard';
 import { useEffect, useState } from 'react';
 import { EndedAlbumListResponse } from '@/entities/room/types';
 import { publicAPI } from '@/shared/api/publicAPI';

client/src/widgets/albums/index.ts

@@ -1,4 +1,3 @@
-export { AlbumList } from './ui/AlbumList';
 export { CommentList } from './ui/CommentList.tsx';
 export { Playlist } from './ui/Playlist';
 export { AlbumArtist } from './ui/AlbumArtist';

client/src/widgets/albums/ui/AlbumArtist.tsx

@@ -1,3 +1,4 @@
+import { splitTime } from '@/shared/util/timeUtils';
 interface AlbumArtistProps {
   artist: string;
   songLength: number;
@@ -9,10 +10,6 @@ export function AlbumArtist({
   songLength,
   totalDuration,
 }: AlbumArtistProps) {
-  const hour = Math.floor(Number(totalDuration) / 3600);
-  const minute = Math.floor((Number(totalDuration) % 3600) / 60);
-  const second = Math.floor(Number(totalDuration) % 60);
-
   return (
     <section
       className={
@@ -26,13 +23,7 @@ export function AlbumArtist({
       </p>
       <p className={'flex-shrink-0 flex-grow-0 whitespace-nowrap'}>
         <span className={'mx-2'}>•</span>
-        <span>
-          {(hour > 0 ? String(hour).padStart(2, '0') + '시간 ' : '') +
-            String(minute).padStart(2, '0') +
-            '분 ' +
-            String(second).padStart(2, '0') +
-            '초'}
-        </span>
+        <span>{splitTime(String(totalDuration))}</span>
       </p>
     </section>
   );

client/src/widgets/albums/ui/Comment.tsx

@@ -1,4 +1,4 @@
-import { CommentData } from '@/entities/comment/types';
+import { CommentData } from '@/entities/albumDetail/types';
 interface CommentProps {
   comment: CommentData;
   index: number;

client/src/widgets/albums/ui/Playlist.tsx

@@ -1,6 +1,6 @@
 import { TrackItem } from './TrackItem';
 import './Scrollbar.css';
-import { SongDetailData } from '@/entities/comment/types';
+import { SongDetailData } from '@/entities/albumDetail/types';
 export interface PlaylistComponentProps {
   playlist: SongDetailData[];
 }

client/src/widgets/albums/ui/TrackItem.tsx

@@ -1,4 +1,4 @@
-import { SongDetailData } from '@/entities/comment/types';
+import { SongDetailData } from '@/entities/albumDetail/types';
 import { splitTime } from '@/shared/util/timeUtils';
 interface TrackItemProps {
   trackData: SongDetailData;