diff --git a/src/widgets/show-music/index.ts b/src/widgets/show-music/index.ts new file mode 100644 index 0000000..86aecc7 --- /dev/null +++ b/src/widgets/show-music/index.ts @@ -0,0 +1 @@ +export { ShowMusicContainer } from './ui/ShowMusicContainer'; diff --git a/src/widgets/show-music/model/type.ts b/src/widgets/show-music/model/type.ts new file mode 100644 index 0000000..5fb1e35 --- /dev/null +++ b/src/widgets/show-music/model/type.ts @@ -0,0 +1,6 @@ +export interface ShowMusicContainerProps { + youtubeId: string; // 유튜브 ID + thumbnailUrl: string; // 스포티파이 썸네일 + title: string; // 곡 제목 + artist: string; // 곡 아티스트 +} diff --git a/src/widgets/show-music/ui/ShowMusicContainer.stories.ts b/src/widgets/show-music/ui/ShowMusicContainer.stories.ts new file mode 100644 index 0000000..a5f74ca --- /dev/null +++ b/src/widgets/show-music/ui/ShowMusicContainer.stories.ts @@ -0,0 +1,21 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { ShowMusicContainer } from './ShowMusicContainer'; + +const meta: Meta = { + title: 'Widgets/UI/ShowMusicContainer', + component: ShowMusicContainer, + tags: ['autodocs'] +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + youtubeId: 'ArmDp-zijuc', + thumbnailUrl: + 'https://i.scdn.co/image/ab67616d0000b2730744690248ef3ba7b776ea7b', + title: 'Super Shy', + artist: 'NewJeans' + } +}; diff --git a/src/widgets/show-music/ui/ShowMusicContainer.styled.ts b/src/widgets/show-music/ui/ShowMusicContainer.styled.ts new file mode 100644 index 0000000..31aabab --- /dev/null +++ b/src/widgets/show-music/ui/ShowMusicContainer.styled.ts @@ -0,0 +1,38 @@ +import styled from 'styled-components'; +// import { Container as MusicCard } from '@/entities/music/ui/MusicCard.styled'; + +export const Container = styled.div` + background-color: #ffffff; + border-radius: 10px; + padding: 30px; + box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.13); + + font-size: 16px; + font-weight: bold; + font-family: 'Pretendard', sans-serif; +`; + +export const HiddenYoutubeContainer = styled.div` + position: fixed; + top: -9999px; + left: -9999px; + width: 1px; + height: 1px; + visibility: hidden; +`; + +export const SubContainer = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 30px; + margin-top: 10px; + margin-bottom: 50px; +`; + +// export const MusicCardContainer = styled(MusicCard)` +// &:hover { +// background-color: #ffffff; +// } +// `; diff --git a/src/widgets/show-music/ui/ShowMusicContainer.tsx b/src/widgets/show-music/ui/ShowMusicContainer.tsx new file mode 100644 index 0000000..5c1c402 --- /dev/null +++ b/src/widgets/show-music/ui/ShowMusicContainer.tsx @@ -0,0 +1,60 @@ +import React, { useState } from 'react'; +import { + Container, + SubContainer, + HiddenYoutubeContainer +} from './ShowMusicContainer.styled'; +import { ShowMusicContainerProps } from '../model/type'; +import { MusicCard } from '@/entities/music'; +import { YoutubeButton } from './YoutubeButton'; + +export const ShowMusicContainer = ({ + youtubeId, + thumbnailUrl, + title, + artist +}: ShowMusicContainerProps) => { + const [nowPlaying, setNowPaying] = useState(null); + + const handlePlay = (id: string) => { + if (nowPlaying === id) { + setNowPaying(null); + console.log('노래 재생 중지'); + } else { + setNowPaying(id); + console.log('노래 재생 중 : ', id); + } + }; + + return ( + + 노래 + + + {nowPlaying && ( +