♻️ [Refactor] Card 리팩토링

src/components/button/Button.tsx

@@ -19,10 +19,9 @@ export default function Button({
   themeColor = 'green-normal-01',
   lightColor,
   isSubmitting,
-  className,
   ...buttonProps
 }: ButtonProps) {
-  const { disabled } = buttonProps;
+  const { disabled, className } = buttonProps;
 
   const sizeClasses = SIZE[size];
   const baseClasses = 'rounded-[12px] font-semibold cursor-pointer';
@@ -35,6 +34,10 @@ export default function Button({
       : themeColor;
 
   const variantClasses = (() => {
+    if (disabled) {
+      return `text-gray-dark-02 bg-gray-normal-02`;
+    }
+
     switch (fillType) {
       case 'solid':
         return `text-gray-white ${COLOR_SCHEMES[resolvedColor]['bg']}`;

src/components/card/Card.stories.tsx

@@ -1,40 +1,72 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import Card from './Card';
-import { mockMeeting } from './mock/mock';
 
 const meta = {
-  title: 'Components/Card/Base',
+  title: 'Components/Card/Elements',
   component: Card,
   parameters: {
     layout: 'centered',
   },
-  argTypes: {
-    isCanceled: {
-      control: 'boolean',
-      description: '모임 취소 여부',
-    },
-    className: {
-      control: 'text',
-      description: '추가 스타일링을 위한 className',
-    },
-  },
+  tags: ['autodocs'],
 } satisfies Meta<typeof Card>;
 
 export default meta;
 type Story = StoryObj<typeof Card>;
 
-export const Default: Story = {
-  args: {
-    isCanceled: false,
-  },
-  render: (args) => (
-    <Card {...args}>
-      <Card.Image {...mockMeeting.imageInfo} />
-      <Card.Box>
-        <Card.Info {...mockMeeting.meetingInfo} />
-        <Card.Status {...mockMeeting.participationStatus} />
-        <Card.EndedOverlay onDelete={() => alert('삭제되었습니다')} />
-      </Card.Box>
-    </Card>
+export const Box: Story = {
+  render: () => (
+    <Card.Box>
+      <p>Card Box Content</p>
+    </Card.Box>
+  ),
+};
+
+export const Image: Story = {
+  render: () => (
+    <Card.Image
+      url="https://picsum.photos/400/300"
+      alt="샘플 이미지"
+      isLiked={false}
+      onLikeClick={() => alert('좋아요 클릭!')}
+    />
+  ),
+};
+
+export const Title: Story = {
+  render: () => <Card.Title>모임 제목 예시</Card.Title>,
+};
+
+export const Location: Story = {
+  render: () => <Card.Location>서울특별시 강남구</Card.Location>,
+};
+
+export const DateTime: Story = {
+  render: () => <Card.DateTime>2024.03.15 (금) 19:00</Card.DateTime>,
+};
+
+export const Overlay: Story = {
+  render: () => (
+    <div className="relative h-[200px] w-[336px]">
+      <Card.Overlay onDelete={() => alert('삭제 버튼 클릭!')} />
+    </div>
+  ),
+};
+
+export const ImageWithLike: Story = {
+  render: () => (
+    <Card.Image
+      url="https://picsum.photos/400/300"
+      alt="좋아요된 이미지"
+      isLiked={true}
+      onLikeClick={() => alert('좋아요 클릭!')}
+    />
+  ),
+};
+
+export const BoxWithClick: Story = {
+  render: () => (
+    <Card.Box onClick={() => alert('박스 클릭!')}>
+      <p>클릭 가능한 Card Box</p>
+    </Card.Box>
   ),
 };