feat : 일기조회-노래 위젯 구현 (#168)

src/widgets/show-music/index.ts

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

src/widgets/show-music/model/type.ts

@@ -0,0 +1,6 @@
+export interface ShowMusicContainerProps {
+    youtubeId: string; // 유튜브 ID
+    thumbnailUrl: string; // 스포티파이 썸네일
+    title: string; // 곡 제목
+    artist: string; // 곡 아티스트
+}

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<typeof ShowMusicContainer> = {
+    title: 'Widgets/UI/ShowMusicContainer',
+    component: ShowMusicContainer,
+    tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryObj<typeof ShowMusicContainer>;
+
+export const Default: Story = {
+    args: {
+        youtubeId: 'ArmDp-zijuc',
+        thumbnailUrl:
+            'https://i.scdn.co/image/ab67616d0000b2730744690248ef3ba7b776ea7b',
+        title: 'Super Shy',
+        artist: 'NewJeans'
+    }
+};

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;
+//     }
+// `;

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<string | null>(null);
+
+    const handlePlay = (id: string) => {
+        if (nowPlaying === id) {
+            setNowPaying(null);
+            console.log('노래 재생 중지');
+        } else {
+            setNowPaying(id);
+            console.log('노래 재생 중 : ', id);
+        }
+    };
+
+    return (
+        <Container>
+            노래
+            <SubContainer>
+                <HiddenYoutubeContainer>
+                    {nowPlaying && (
+                        <iframe
+                            title="YouTube music player"
+                            width="560"
+                            height="315"
+                            src={`https://www.youtube.com/embed/${youtubeId}?autoplay=1`}
+                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                            allowFullScreen
+                        />
+                    )}
+                </HiddenYoutubeContainer>
+                <MusicCard
+                    youtubeId={youtubeId}
+                    thumbnailUrl={thumbnailUrl}
+                    title={title}
+                    artist={artist}
+                    $isPlaying={nowPlaying === youtubeId}
+                    onPlay={handlePlay}
+                    onClick={() => {}}
+                />
+                <YoutubeButton
+                    youtubeUrl={`https://www.youtube.com/watch?v=${youtubeId}`}
+                />
+            </SubContainer>
+        </Container>
+    );
+};

src/widgets/show-music/ui/YoutubeButton.styled.ts

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+export const YoutubeButtonContainer = styled.a`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 180px;
+    height: 50px;
+    background-color: #d80700;
+    border-radius: 10px;
+    cursor: pointer;
+    text-decoration: none;
+
+    color: #ffffff;
+    font-weight: normal;
+
+    &:hover {
+        background-color: #b80600;
+    }
+`;

src/widgets/show-music/ui/YoutubeButton.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { YoutubeButtonContainer } from './YoutubeButton.styled';
+
+interface YoutubeButtonProps {
+    youtubeUrl: string;
+}
+
+export const YoutubeButton = ({ youtubeUrl }: YoutubeButtonProps) => {
+    return (
+        <YoutubeButtonContainer
+            href={youtubeUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+        >
+            Youtube 바로가기
+        </YoutubeButtonContainer>
+    );
+};