[MZO-60] 플레이리스트 마크업 작업 #41
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,18 @@ | ||
| 'use client'; | ||
|
|
||
| import AppPortal from '@/components/app-portal'; | ||
| import ToastProvider from '@/components/toast/ToastProvider'; | ||
|
|
||
| export default function Template({ children }: { children: React.ReactNode }) { | ||
| return ( | ||
| <> | ||
| {children} | ||
| <AppPortal.Provider portalName="player-portal" /> | ||
| <AppPortal.Provider portalName="emoji-picker-portal" /> | ||
| <AppPortal.Provider portalName="modal-portal" /> | ||
| <AppPortal.Provider portalName="toast-portal"> | ||
| <ToastProvider /> | ||
| </AppPortal.Provider> | ||
| </> | ||
| ); | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| 'use client'; | ||
|
|
||
| import Image from 'next/image'; | ||
| import React from 'react'; | ||
|
|
||
| import CloseIcon from '@/assets/icons/close.svg'; | ||
| import Menu from '@/assets/icons/menu.svg'; | ||
| import AppPortal from '@/components/app-portal'; | ||
| import BottomMusicPlayer from '@/components/bottom-player'; | ||
| import Header from '@/components/header/Header'; | ||
| import { usePlaylist } from '@/components/playlist/hooks/usePlaylist'; | ||
|
|
||
| // FIX: 현재 임시 데이터로 해놓은 상태. 추후 변경 필요 | ||
| const PLAYLIST = [ | ||
| { | ||
| id: 1, | ||
| url: 'https://via.placeholder.com/50', | ||
| title: 'Hype Boys', | ||
| artist: 'NewJeans', | ||
| }, | ||
| { | ||
| id: 2, | ||
| url: 'https://via.placeholder.com/50', | ||
| title: '예뻤어 (여름날 우리 X 김민석 (멜로망스))', | ||
| artist: '김민석 (멜로망스) 예뻤어 (여름날 우리 X 김민석 (멜로망스))2023', | ||
| }, | ||
| { | ||
| id: 3, | ||
| url: 'https://via.placeholder.com/50', | ||
| title: 'Super Shy', | ||
| artist: 'NewJeans', | ||
| }, | ||
| { | ||
| id: 4, | ||
| url: 'https://via.placeholder.com/50', | ||
| title: 'Cool With You', | ||
| artist: 'NewJeans', | ||
| }, | ||
| { | ||
| id: 5, | ||
| url: 'https://via.placeholder.com/50', | ||
| title: 'Hype Boys', | ||
| artist: 'NewJeans', | ||
| }, | ||
| { | ||
| id: 6, | ||
| url: 'https://via.placeholder.com/50', | ||
| title: '예뻤어 (여름날 우리 X 김민석 (멜로망스))', | ||
| artist: '김민석 (멜로망스) 예뻤어 (여름날 우리 X 김민석 (멜로망스))2023', | ||
| }, | ||
| { | ||
| id: 7, | ||
| url: 'https://via.placeholder.com/50', | ||
| title: 'Super Shy', | ||
| artist: 'NewJeans', | ||
| }, | ||
| { | ||
| id: 8, | ||
| url: 'https://via.placeholder.com/50', | ||
| title: 'Cool With You', | ||
| artist: 'NewJeans', | ||
| }, | ||
| ]; | ||
|
|
||
| const Playlist = () => { | ||
| const { closePlaylist } = usePlaylist(); | ||
| return ( | ||
| <> | ||
| <AppPortal.Wrapper portalName="modal-portal"> | ||
| <div className="flex flex-col h-screen bg-black"> | ||
| <Header | ||
| headerLeft={<h1>Play List</h1>} | ||
| headerRight={ | ||
| <button type="button" onClick={closePlaylist}> | ||
| <CloseIcon className="h-[24px] w-[24px] text-white" /> | ||
| </button> | ||
| } | ||
| /> | ||
| <ul className="overflow-auto"> | ||
| {PLAYLIST.map((item) => ( | ||
| <li | ||
| key={item.id} | ||
| className="flex items-center gap-[24px] px-5 py-4 hover:bg-gray-900" | ||
| > | ||
| <Image | ||
| className="rounded-full" | ||
| src={item.url} | ||
| alt={item.title} | ||
| width="50" | ||
| height="50" | ||
| /> | ||
| <div className="flex flex-col flex-1 mr-auto overflow-hidden whitespace-nowrap"> | ||
| <span className="overflow-hidden text-ellipsis text-subtitle1"> | ||
| {item.title} | ||
| </span> | ||
| <span className="overflow-hidden text-ellipsis text-body3"> | ||
| {item.artist} | ||
| </span> | ||
| </div> | ||
| <div className="flex gap-2"> | ||
| <CloseIcon className="h-[20px] w-[20px] cursor-pointer text-gray-700 hover:text-white" /> | ||
| <Menu className="h-[20px] w-[20px] cursor-pointer text-gray-700 hover:text-white" /> | ||
| </div> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </div> | ||
| </AppPortal.Wrapper> | ||
| <AppPortal.Wrapper portalName="modal-portal"> | ||
| <BottomMusicPlayer /> | ||
| </AppPortal.Wrapper> | ||
|
Comment on lines
+109
to
+111
There was a problem hiding this comment. 사실 하단 플레이어의 경우 template으로 빼던가 해야할 것 같습니다. 우선 폴더구조가 명확히 잡혀있지 않아 임시로 플레이리스트에 같이 작성해두었습니다. There was a problem hiding this comment. 각 페이지 마다 계속 해당 컴포넌트를 삽입하기 보다는 template으로 분리하는 게 좋아 보이네요. 가능하다면 그렇게 작업하는 것이 좋아 보입니다. 요구사항이 점점 늘어날수록 변수도 많아지네요. There was a problem hiding this comment. 맞습니다 아마 나중에 폴더구조가 잡히면 수정하지 않을까 싶어요. 그런데 고민인 부분은, 여기서 Playlist.tsx 페이지가 아닌 컴포넌트로 만들어서 따로 layout을 사용하기가 애매해질것 같긴합니다.. Playing 페이지에서는 하단 뮤직 플레이어바가 안보이고 플레이리스트에서는 보여져야 하는 상황이여서요 |
||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default Playlist; | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
next/image에서 외부 src를 가져오기 위해 임시로 설정해둔 코드입니닷