스트리밍 페이지 레이아웃 구현 (#39)

* style: 채팅이 투표 아래로 지나가는 오류 수정

* feat: storybook에 tailwind 적용

* refactor: 채팅 메세지 컴포넌트 분리

* design: 스트리밍 컴포넌트 배경 이미지 구현

* design: 커스텀한 gray 로 변경

* feat: 스트리밍 컴포넌트 구현

client/.storybook/preview.ts

@@ -1,5 +1,5 @@
 import type { Preview } from '@storybook/react';
-
+import '@/index.css';
 const preview: Preview = {
   parameters: {
     controls: {

client/src/entities/album/type.ts

@@ -0,0 +1,8 @@
+export interface Album {
+  coverImage: string;
+  tags: string[];
+  title: string;
+  artist: string;
+  currentTime: string;
+  trackName: string;
+}

client/src/features/chatting/ChatInput.tsx

@@ -7,7 +7,7 @@ export default function ChatInput() {
         <input
           type="text"
           placeholder="채팅을 입력하세요"
-          className="bg-gray-700 rounded-lg w-full p-3 mr-2 focus:outline-none"
+          className="bg-grayscale-700 rounded-lg w-full p-3 mr-2 focus:outline-none"
         />
         <button>
           <SendIcon />

client/src/pages/StreamingPage/StreamingPage.tsx

@@ -1,16 +1,15 @@
 import { Chatting } from '@/widgets/chatting';
 import { Vote } from '@/widgets/vote';
+import { Streaming } from '@/widgets/streaming';
 
 export function StreamingPage() {
   return (
     <div className="flex flex-row w-screen h-screen">
-      <div className="bg-gray-400 w-3/4">스트리밍 중이지렁이</div>
-      <div className="bg-gray-900 w-1/4 text-gray-100 px-8 py-10 flex flex-col relative">
-        <div className="text-[24px] font-bold mb-4">채팅</div>
+      <Streaming />
+      <div className="bg-grayscale-900 w-1/4 text-grayscale-100 px-8 py-10 flex flex-col relative">
+        <div className="text-2xl font-bold mb-4">채팅</div>
         <Vote />
-        <div className="flex-grow overflow-hidden">
-          <Chatting />
-        </div>
+        <Chatting />
       </div>
     </div>
   );

client/src/widgets/albums/AlbumCard.tsx

@@ -21,7 +21,7 @@ export function AlbumCard({ album }: AlbumCardProps) {
       />
       <p className="text-xl font-semibold mb-1">{album.title}</p>
       <p className="mb-2">{album.artist}</p>
-      <p className="text-gray-400 mb-1">#{album.tags.join(' #')}</p>
+      <p className="text-grayscale-400 mb-1">#{album.tags.join(' #')}</p>
     </li>
   );
 }

client/src/widgets/albums/AlbumList.tsx

@@ -19,7 +19,7 @@ const mockAlbums: Album[] = Array.from({ length: 7 }, (_, index) => ({
 
 export function AlbumList() {
   return (
-    <div className="text-gray-50">
+    <div className="text-grayscale-50">
       <p className="mt-[70px] mb-7 text-3xl font-bold">최근 등록된 앨범</p>
       <ul className="flex flex-row gap-9 justify-between	">
         {mockAlbums.map((album) => (

client/src/widgets/chatting/Chatting.tsx

@@ -1,15 +1,13 @@
 import ChatInput from '@/features/chatting/ChatInput';
 import './Chatting.css';
+import { Message } from '.';
 
 export function Chatting() {
   return (
-    <div className="flex flex-col h-full">
-      <div className="flex-grow overflow-y-auto mb-5 pt-24">
+    <div className="flex flex-col flex-grow overflow-hidden">
+      <div className="overflow-y-auto mb-5 mt-24">
         {Array.from({ length: 100 }).map((_, index) => (
-          <div key={index} className="text-sm pb-4">
-            <span className="text-brand mr-4">코난못난코</span>
-            <span>{`안녕하세요${index}`}</span>
-          </div>
+          <Message key={index} />
         ))}
       </div>
       <div className="mt-auto">

client/src/widgets/chatting/Message.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Message } from './Message';
+
+const meta = {
+  component: Message,
+} satisfies Meta<typeof Message>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

client/src/widgets/chatting/Message.tsx

@@ -0,0 +1,8 @@
+export function Message() {
+  return (
+    <div className="text-sm pb-4">
+      <span className="text-brand mr-4">코난못난코</span>
+      <span className="text-grayscale-100">안녕하세요</span>
+    </div>
+  );
+}

client/src/widgets/chatting/index.ts

@@ -1 +1,2 @@
+export { Message } from './Message';
 export { Chatting } from './Chatting';

client/src/widgets/streaming/AlbumBackground.tsx

@@ -0,0 +1,16 @@
+interface AlbumBackgroundProps {
+  coverImage: string;
+}
+
+export function AlbumBackground({ coverImage }: AlbumBackgroundProps) {
+  return (
+    <>
+      <img
+        src={coverImage}
+        className="absolute inset-0 w-full h-full object-cover scale-150 blur-lg"
+        alt="Album Cover"
+      />
+      <div className="absolute inset-0 bg-grayscale-900 opacity-70"></div>
+    </>
+  );
+}

client/src/widgets/streaming/AlbumInfo.tsx

@@ -0,0 +1,27 @@
+import { Album } from '@/entities/album/type';
+
+interface AlbumInfoProps {
+  album: Album;
+}
+
+export function AlbumInfo({ album }: AlbumInfoProps) {
+  return (
+    <div className="flex flex-col items-center w-1/2 relative">
+      <div className="text-center mb-32 w-full">
+        <p className="text-gray-300 mb-4">#{album.tags.join(' #')}</p>
+        <p className="text-4xl font-bold mb-4">{album.title}</p>
+        <p>{album.artist}</p>
+      </div>
+      <div className="flex flex-col items-center">
+        <p className="text-sm mb-3">{album.currentTime}</p>
+        <img
+          src={album.coverImage}
+          alt="Album Cover"
+          className="w-52 h-52 object-cover rounded-lg mb-4"
+        />
+        <p className="text-2xl font-bold">{album.trackName}</p>
+      </div>
+      <div className="absolute bottom-0 bg-grayscale-900 w-full h-52"></div>
+    </div>
+  );
+}

client/src/widgets/streaming/Streaming.tsx

@@ -0,0 +1,24 @@
+import { AlbumBackground } from './AlbumBackground';
+import { AlbumInfo } from './AlbumInfo';
+import { Album } from '@/entities/album/type';
+import SampleAlbumCover from '@/assets/sample-album-cover-1.png';
+
+const SAMPLE_ALBUM: Album = {
+  coverImage: SampleAlbumCover,
+  tags: ['밴드', '국내'],
+  title: '코난못난코코난못난코코난못난코코난못난코',
+  artist: 'TOUCHED',
+  currentTime: '00:00',
+  trackName: '불시',
+};
+
+export function Streaming() {
+  return (
+    <div className="bg-grayscale-400 w-3/4 relative overflow-hidden">
+      <AlbumBackground coverImage={SAMPLE_ALBUM.coverImage} />
+      <div className="absolute inset-0 flex justify-center pt-36 text-grayscale-100 z-10">
+        <AlbumInfo album={SAMPLE_ALBUM} />
+      </div>
+    </div>
+  );
+}

client/src/widgets/streaming/index.ts

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

client/src/widgets/vote/Vote.tsx

@@ -4,19 +4,17 @@ import { useState } from 'react';
 export function Vote() {
   const [isOpen, setIsOpen] = useState(false);
   return (
-    <div
-      className={`absolute top-[5.5rem] left-0 right-0 bg-gray-700 transition-all duration-300 z-10 mx-8 rounded-lg`}
-    >
+    <div className="absolute top-[5.5rem] left-0 right-0 bg-grayscale-700  z-10 mx-8 rounded-lg">
       <div
-        className="flex flex-row items-center justify-between px-5 py-3 rounded-lg cursor-pointer"
+        className="flex flex-row items-center justify-between px-5 py-3 rounded-lg cursor-pointer hover:bg-grayscale-600"
         onClick={() => setIsOpen(!isOpen)}
       >
         <div className="mr-2">
-          <p className="text-gray-300">최애의 트랙</p>
+          <p className="text-grayscale-300">최애의 트랙</p>
           <p className="text-lg font-semibold">겨울 간식 뭐가 더 좋나</p>
         </div>
         <div
-          className={`transform transition-transform duration-300 ${isOpen ? 'rotate-180' : ''}`}
+          className={`transform transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
         >
           <ChevronDown />
         </div>
@@ -27,7 +25,7 @@ export function Vote() {
         {['슈크림 붕어빵', '팥 붕어빵', '피자 붕어빵'].map((item, index) => (
           <p
             key={index}
-            className="mb-1 cursor-pointer px-3 py-3 rounded-md hover:bg-gray-400"
+            className="mb-1 cursor-pointer px-3 py-3 rounded-md hover:bg-grayscale-600"
           >
             {item}
           </p>