Docs(design-system): CSS 스타일 수정 및 스토리북 데이터 업데이트

packages/design-system/src/components/artist-card/artist-card.css.ts

@@ -49,9 +49,15 @@ export const artistName = recipe({
   },
   variants: {
     size: {
-      sm: [themeVars.fontStyles.body4_m_13],
-      md: [themeVars.fontStyles.body2_m_15],
-      lg: [themeVars.fontStyles.body3_m_14],
+      sm: {
+        ...themeVars.fontStyles.body4_m_13,
+      },
+      md: {
+        ...themeVars.fontStyles.body2_m_15,
+      },
+      lg: {
+        ...themeVars.fontStyles.body3_m_14,
+      },
     },
   },
 });

packages/design-system/src/components/artist-card/artist-card.stories.tsx

@@ -9,7 +9,7 @@ const meta: Meta<typeof ArtistCard> = {
   },
   decorators: [
     (Story) => (
-      <div style={{ width: '375px' }}>
+      <div style={{ width: '100px' }}>
         <Story />
       </div>
     ),
@@ -24,26 +24,29 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     artistId: '1',
-    title: '데이식스',
-    imageSrc: 'https://dummyimage.com/80X80',
-    size: 'lg',
+    title: '한로로',
+    imageSrc:
+      'https://i.scdn.co/image/ab6761610000f1786a50f39b95ce98a0e6bf5b21',
+    size: 'md',
   },
 };
 
 export const Sm: Story = {
   args: {
-    artistId: '1',
-    title: '데이식스',
-    imageSrc: 'https://dummyimage.com/80X80',
+    artistId: '2',
+    title: 'Coldplay',
+    imageSrc:
+      'https://i.scdn.co/image/ab6761610000f1781ba8fc5f5c73e7e9313cc6eb',
     size: 'sm',
   },
 };
 
 export const Md: Story = {
   args: {
-    artistId: '1',
+    artistId: '3',
     title: '데이식스',
-    imageSrc: 'https://dummyimage.com/80X80',
+    imageSrc:
+      'https://i.scdn.co/image/ab6761610000f17810e83b0ca558533d0f3c376c',
     size: 'md',
   },
 };

packages/design-system/src/components/festival-card/festival-card.stories.tsx

@@ -21,24 +21,39 @@ type Story = StoryObj<typeof FestivalCard>;
 
 export const Default: Story = {
   args: {
-    title: '2024 위버스 콘 페스티벌',
-    imageSrc: 'https://dummyimage.com/100x142',
+    title: '오로라 내한 공연',
+    imageSrc: 'https://i.imgur.com/DwH8XUo.png',
   },
+  render: (args) => (
+    <div style={{ width: '10rem', height: '14rem' }}>
+      <FestivalCard {...args} />
+    </div>
+  ),
 };
 
 export const Selectable: Story = {
   args: {
-    title: '2024 위버스 콘 페스티벌',
-    imageSrc: 'https://dummyimage.com/100x142',
+    title: '오로라 내한 공연',
+    imageSrc: 'https://i.imgur.com/DwH8XUo.png',
     selectable: true,
   },
+  render: (args) => (
+    <div style={{ width: '10rem', height: '14rem' }}>
+      <FestivalCard {...args} />
+    </div>
+  ),
 };
 
 export const Preselected: Story = {
   args: {
-    title: '2024 위버스 콘 페스티벌',
-    imageSrc: 'https://dummyimage.com/100x142',
+    title: '오로라 내한 공연',
+    imageSrc: 'https://i.imgur.com/DwH8XUo.png',
     selectable: true,
     isSelected: true,
   },
+  render: (args) => (
+    <div style={{ width: '10rem', height: '14rem' }}>
+      <FestivalCard {...args} />
+    </div>
+  ),
 };

packages/design-system/src/components/floating-button/floating-button.css.ts

@@ -3,7 +3,7 @@ import { themeVars } from '../../styles';
 
 export const floatingButtonVariants = recipe({
   base: {
-    position: 'sticky',
+    position: 'absolute',
     width: '4rem',
     height: '4rem',
     display: 'flex',

packages/design-system/src/components/floating-button/floating-button.stories.tsx

@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import FloatingButton from './floating-button';
-
 const meta: Meta<typeof FloatingButton> = {
   title: 'Common/FloatingButton',
   component: FloatingButton,
@@ -14,4 +13,29 @@ const meta: Meta<typeof FloatingButton> = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  render: () => (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '100vw',
+        height: '100vh',
+        background: '#f0f0f0',
+        overflow: 'hidden',
+      }}
+    >
+      <div
+        style={{
+          position: 'relative',
+          width: '430px',
+          height: '100%',
+          background: '#ffffff',
+        }}
+      >
+        <FloatingButton />,
+      </div>
+    </div>
+  ),
+};

packages/design-system/src/components/like-button/like-button.stories.tsx

@@ -22,10 +22,20 @@ export const Liked: Story = {
   args: {
     isFavorite: true,
   },
+  render: (args) => (
+    <div style={{ width: '2.5rem', height: '2.5rem' }}>
+      <LikeButton {...args} />
+    </div>
+  ),
 };
 
 export const Unliked: Story = {
   args: {
     isFavorite: false,
   },
+  render: (args) => (
+    <div style={{ width: '2.5rem', height: '2.5rem' }}>
+      <LikeButton {...args} />
+    </div>
+  ),
 };

packages/design-system/src/components/performance-carousel/performance-carousel.stories.tsx

@@ -1,62 +1,23 @@
 import type { Meta } from '@storybook/react';
 import PerformanceCarousel from './performance-carousel';
+import { PerformData } from './performance-carousel';
 
-const MOCK_PERFORM_DATA = [
+const MOCK_PERFORM_DATA: PerformData[] = [
   {
     typeId: 1,
-    type: 'concert',
-    title: '오아시스 내한공연',
-    subTitle: 'LIVE NATION PRESENTS COLDPLAY',
-    performanceAt: '2025.10.21',
-    posterUrl: 'https://dummyimage.com/197x262',
+    type: 'FESTIVAL',
+    title: '러브 썸 페스티벌',
+    subtitle: 'LOVESOME',
+    performanceAt: '2025.04.27',
+    posterUrl: 'https://i.imgur.com/b89Kzzd.png',
   },
   {
     typeId: 2,
-    type: 'festival',
-    title: '오아시스 내한공연',
-    subTitle: '라이브 네이션 프레젠트 콜드플레이',
-    performanceAt: '2025.10.21',
-    posterUrl: 'https://dummyimage.com/197x262',
-  },
-  {
-    typeId: 3,
-    type: 'festival',
-    title: '오아시스 내한공연3',
-    subTitle: 'LIVE NATION PRESENTS COLDPLAY',
-    performanceAt: '2025.10.21',
-    posterUrl: 'https://dummyimage.com/197x262',
-  },
-  {
-    typeId: 4,
-    type: 'festival',
-    title: '오아시스 내한공연4',
-    subTitle: '콜드플레이 내한 공연', // subTitle 수정
-    performanceAt: '2025.10.21',
-    posterUrl: 'https://dummyimage.com/197x262',
-  },
-  {
-    typeId: 5,
-    type: 'festival',
-    title: '오아시스 내한공연5',
-    subTitle: 'LIVE NATION PRESENTS COLDPLAY',
-    performanceAt: '2025.10.21',
-    posterUrl: 'https://dummyimage.com/197x262',
-  },
-  {
-    typeId: 6,
-    type: 'festival',
-    title: '오아시스 내한공연6',
-    subTitle: 'LIVE NATION PRESENTS COLDPLAY',
-    performanceAt: '2025.10.21',
-    posterUrl: 'https://dummyimage.com/197x262',
-  },
-  {
-    typeId: 7,
-    type: 'festival',
-    title: '오아시스 내한공연7',
-    subTitle: '콜드플레이와 함께하는 축제',
-    performanceAt: '2025.10.21',
-    posterUrl: 'https://dummyimage.com/197x262',
+    type: 'FESTIVAL',
+    title: '뷰티풀 민트 라이프',
+    subtitle: 'Beautiful Mint Life 2025',
+    performanceAt: '2025.05.11',
+    posterUrl: 'https://i.imgur.com/9yX1b3P.png',
   },
 ];
 

packages/design-system/src/components/performance-carousel/performance-carousel.tsx

@@ -6,9 +6,9 @@ import './dots.css';
 import './performance-carousel.css';
 import { useNavigate } from 'react-router-dom';
 
-interface PerformData {
+export interface PerformData {
   typeId: number;
-  type: 'FESTIVAL' | 'CONCERT' | 'ARTIST';
+  type: 'CONCERT' | 'FESTIVAL' | 'ARTIST';
   title: string;
   subtitle?: string | null;
   performanceAt: string;