From c2e972e76af2280e23afd51296ca0bebfc1581b1 Mon Sep 17 00:00:00 2001 From: Kang Chaeryeon Date: Thu, 9 Jan 2025 22:09:19 +0900 Subject: [PATCH] =?UTF-8?q?=ED=8F=B4=EB=8D=94=20=EC=A0=95=EB=A6=AC=20(#2)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * style: Layout 컴포넌트 폴더 이동 * refactor: util splitTime 함수 사용 * refactor: 메인페이지 앨범 컴포넌트와 앨범 상세 페이지 컴포넌트 폴더 분리 --- client/src/{ => app/router}/Layout.tsx | 2 +- client/src/app/router/routes.tsx | 2 +- client/src/entities/albumCard/index.ts | 1 + client/src/entities/albumCard/model/types.ts | 11 +++++++++++ .../albums => entities/albumCard}/ui/AlbumCard.tsx | 10 ++-------- .../src/entities/{comment => albumDetail}/types.ts | 0 client/src/entities/message/types.ts | 3 +++ .../src/features/commentInput/ui/CommentInput.tsx | 2 +- client/src/main.tsx | 2 +- client/src/pages/AlbumPage/ui/AlbumPage.tsx | 2 +- client/src/pages/MainPage/ui/MainPage.tsx | 2 +- client/src/widgets/albumList/index.ts | 1 + .../widgets/{albums => albumList}/ui/AlbumList.tsx | 2 +- client/src/widgets/albums/index.ts | 1 - client/src/widgets/albums/ui/AlbumArtist.tsx | 13 ++----------- client/src/widgets/albums/ui/Comment.tsx | 2 +- client/src/widgets/albums/ui/Playlist.tsx | 2 +- client/src/widgets/albums/ui/TrackItem.tsx | 2 +- 18 files changed, 30 insertions(+), 30 deletions(-) rename client/src/{ => app/router}/Layout.tsx (78%) create mode 100644 client/src/entities/albumCard/index.ts create mode 100644 client/src/entities/albumCard/model/types.ts rename client/src/{widgets/albums => entities/albumCard}/ui/AlbumCard.tsx (77%) rename client/src/entities/{comment => albumDetail}/types.ts (100%) create mode 100644 client/src/widgets/albumList/index.ts rename client/src/widgets/{albums => albumList}/ui/AlbumList.tsx (96%) diff --git a/client/src/Layout.tsx b/client/src/app/router/Layout.tsx similarity index 78% rename from client/src/Layout.tsx rename to client/src/app/router/Layout.tsx index 39d34c8..1114597 100644 --- a/client/src/Layout.tsx +++ b/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 ( diff --git a/client/src/app/router/routes.tsx b/client/src/app/router/routes.tsx index 074000c..2bbbb4f 100644 --- a/client/src/app/router/routes.tsx +++ b/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'; diff --git a/client/src/entities/albumCard/index.ts b/client/src/entities/albumCard/index.ts new file mode 100644 index 0000000..a3a31ab --- /dev/null +++ b/client/src/entities/albumCard/index.ts @@ -0,0 +1 @@ +export { AlbumCard } from './ui/AlbumCard'; diff --git a/client/src/entities/albumCard/model/types.ts b/client/src/entities/albumCard/model/types.ts new file mode 100644 index 0000000..4bc4541 --- /dev/null +++ b/client/src/entities/albumCard/model/types.ts @@ -0,0 +1,11 @@ +/** + * 메인 페이지 앨범 카드 + */ + +export interface AlbumCardData { + albumId: string; + albumName: string; + artist: string; + albumTags?: string; + jacketUrl: string; +} diff --git a/client/src/widgets/albums/ui/AlbumCard.tsx b/client/src/entities/albumCard/ui/AlbumCard.tsx similarity index 77% rename from client/src/widgets/albums/ui/AlbumCard.tsx rename to client/src/entities/albumCard/ui/AlbumCard.tsx index d61544c..070ed02 100644 --- a/client/src/widgets/albums/ui/AlbumCard.tsx +++ b/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(' #')}` : '태그 없음'; diff --git a/client/src/entities/comment/types.ts b/client/src/entities/albumDetail/types.ts similarity index 100% rename from client/src/entities/comment/types.ts rename to client/src/entities/albumDetail/types.ts diff --git a/client/src/entities/message/types.ts b/client/src/entities/message/types.ts index 1c72094..edc076b 100644 --- a/client/src/entities/message/types.ts +++ b/client/src/entities/message/types.ts @@ -1,3 +1,6 @@ +/** + * 채팅 메세지 + */ export interface MessageData { userName: string; message: string; diff --git a/client/src/features/commentInput/ui/CommentInput.tsx b/client/src/features/commentInput/ui/CommentInput.tsx index d7c4d99..9e15273 100644 --- a/client/src/features/commentInput/ui/CommentInput.tsx +++ b/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 { diff --git a/client/src/main.tsx b/client/src/main.tsx index 4c295af..f8fd6c1 100644 --- a/client/src/main.tsx +++ b/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: { diff --git a/client/src/pages/AlbumPage/ui/AlbumPage.tsx b/client/src/pages/AlbumPage/ui/AlbumPage.tsx index 58f826a..26de888 100644 --- a/client/src/pages/AlbumPage/ui/AlbumPage.tsx +++ b/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 }>(); diff --git a/client/src/pages/MainPage/ui/MainPage.tsx b/client/src/pages/MainPage/ui/MainPage.tsx index 6e55e73..5d512ab 100644 --- a/client/src/pages/MainPage/ui/MainPage.tsx +++ b/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'; diff --git a/client/src/widgets/albumList/index.ts b/client/src/widgets/albumList/index.ts new file mode 100644 index 0000000..466c23d --- /dev/null +++ b/client/src/widgets/albumList/index.ts @@ -0,0 +1 @@ +export { AlbumList } from './ui/AlbumList'; diff --git a/client/src/widgets/albums/ui/AlbumList.tsx b/client/src/widgets/albumList/ui/AlbumList.tsx similarity index 96% rename from client/src/widgets/albums/ui/AlbumList.tsx rename to client/src/widgets/albumList/ui/AlbumList.tsx index 4e2047c..4c5be10 100644 --- a/client/src/widgets/albums/ui/AlbumList.tsx +++ b/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'; diff --git a/client/src/widgets/albums/index.ts b/client/src/widgets/albums/index.ts index 90c72b0..9b025a5 100644 --- a/client/src/widgets/albums/index.ts +++ b/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'; diff --git a/client/src/widgets/albums/ui/AlbumArtist.tsx b/client/src/widgets/albums/ui/AlbumArtist.tsx index c601580..ef3460e 100644 --- a/client/src/widgets/albums/ui/AlbumArtist.tsx +++ b/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 (

• - - {(hour > 0 ? String(hour).padStart(2, '0') + '시간 ' : '') + - String(minute).padStart(2, '0') + - '분 ' + - String(second).padStart(2, '0') + - '초'} - + {splitTime(String(totalDuration))}

); diff --git a/client/src/widgets/albums/ui/Comment.tsx b/client/src/widgets/albums/ui/Comment.tsx index 502527c..be288a0 100644 --- a/client/src/widgets/albums/ui/Comment.tsx +++ b/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; diff --git a/client/src/widgets/albums/ui/Playlist.tsx b/client/src/widgets/albums/ui/Playlist.tsx index ce1ee06..b3b7db6 100644 --- a/client/src/widgets/albums/ui/Playlist.tsx +++ b/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[]; } diff --git a/client/src/widgets/albums/ui/TrackItem.tsx b/client/src/widgets/albums/ui/TrackItem.tsx index f649b5e..d3a3241 100644 --- a/client/src/widgets/albums/ui/TrackItem.tsx +++ b/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;