codeit-team3 · wynter24 · Dec 13, 2024 · Dec 12, 2024 · Dec 12, 2024 · Dec 12, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/bookclub/page.tsx b/src/app/bookclub/page.tsx
@@ -1,5 +1,9 @@
-// import BookClubMainPage from '@/features/bookclub/components/BookClubMainPage';
+import { BookClubMainPage } from '@/features/bookclub/components';
 
 export default function Home() {
-  return <div className="-mx-4 md:-mx-6 lg:-mx-10"></div>;
+  return (
+    <>
+      <BookClubMainPage />
+    </>
+  );
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -16,10 +16,10 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="ko">
-      <body className="min-h-screen bg-gray-100">
+      <body className="min-h-screen bg-white">
         <ReactQueryProviders>
           <HeaderBar />
-          <main className="mx-auto min-h-screen max-w-[1200px] bg-gray-50 px-4 pt-[56px] md:px-6 lg:px-10">
+          <main className="mx-auto min-h-screen max-w-[1200px] bg-white pt-[56px]">
             {children}
           </main>
         </ReactQueryProviders>

diff --git a/src/components/button/Button.stories.tsx b/src/components/button/Button.stories.tsx
@@ -12,21 +12,20 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
+export const Solid: Story = {
   args: {
     text: '확인',
     size: 'medium',
     fillType: 'solid',
     themeColor: 'green-normal-01',
   },
 };
-
-export const Small: Story = {
+export const Outline: Story = {
   args: {
     text: '확인',
-    size: 'small',
+    size: 'medium',
     fillType: 'outline',
-    themeColor: 'green-light-03',
+    themeColor: 'green-normal-01',
   },
 };
 
@@ -35,7 +34,16 @@ export const LightSolid: Story = {
     text: '확인',
     size: 'modal',
     fillType: 'lightSolid',
-    themeColor: 'gray-normal-03',
+    themeColor: 'green-normal-01',
+    lightColor: 'green-light-03',
+  },
+};
+export const Small: Story = {
+  args: {
+    text: '확인',
+    size: 'small',
+    fillType: 'outline',
+    themeColor: 'green-light-03',
   },
 };
 
@@ -58,10 +66,11 @@ export const Submitting: Story = {
 
 export const Disabled: Story = {
   args: {
-    text: '확인',
+    text: '생성하기',
     size: 'large',
-    fillType: 'solid',
-    themeColor: 'gray-darker',
+    fillType: 'lightSolid',
+    themeColor: 'gray-dark-01',
+    lightColor: 'gray-normal-01',
     disabled: true,
   },
   parameters: {

diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
@@ -1,17 +1,13 @@
 import React from 'react';
 import { twMerge } from 'tailwind-merge';
-import { BASE_CLASSES, COLOR_GROUPS, SIZE } from '@/constants';
+import { COLOR_SCHEMES, SIZE } from '@/constants';
 
 interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
   text: string;
   size: 'large' | 'medium' | 'small' | 'modal';
-  fillType: 'solid' | 'outline' | 'lightSolid' | 'lightOutline';
-  themeColor:
-    | 'green-normal-01'
-    | 'green-light-03'
-    | 'gray-normal-03'
-    | 'gray-normal-02'
-    | 'gray-darker';
+  fillType: 'solid' | 'outline' | 'lightSolid';
+  themeColor: keyof typeof COLOR_SCHEMES;
+  lightColor?: keyof typeof COLOR_SCHEMES;
   isSubmitting?: boolean;
 }
 
@@ -20,6 +16,7 @@ export default function Button({
   size,
   fillType = 'solid',
   themeColor = 'green-normal-01',
+  lightColor,
   isSubmitting,
   ...buttonProps
 }: ButtonProps) {
@@ -36,35 +33,17 @@ export default function Button({
       : themeColor;
 
   const variantClasses = (() => {
-    const color = COLOR_GROUPS[resolvedColor];
-
-    type TextClassType =
-      | 'text-green-normal-01'
-      | 'text-gray-darker'
-      | 'text-white'
-      | 'text-gray-dark-02';
-
-    let textClass: TextClassType = color.text;
-
-    // 배경색과 글자색이 동일한 경우 textClass를 흰색으로 덮어쓰기
-    if (
-      (fillType === 'lightSolid' || fillType === 'lightOutline') &&
-      color.bg.includes(color.text.replace('text-', 'bg-'))
-    ) {
-      textClass = 'text-white';
-    }
-
     switch (fillType) {
       case 'solid':
-        return `${color.bg} ${BASE_CLASSES.solid}`;
+        return `text-gray-white ${COLOR_SCHEMES[resolvedColor]['bg']}`;
       case 'outline':
-        return `${BASE_CLASSES.outline} ${color.text} ${color.border}`;
+        return `bg-gray-white border ${COLOR_SCHEMES[resolvedColor]['text']} ${COLOR_SCHEMES[resolvedColor]['border']}`;
       case 'lightSolid':
-        return `${color.bg} ${textClass}`;
-      case 'lightOutline':
-        return `${BASE_CLASSES.lightOutline} ${color.bg} ${textClass} ${color.border}`;
-      default:
-        throw new Error(`잘못된 fillType 값입니다: ${fillType}`);
+        if (lightColor) {
+          return `${COLOR_SCHEMES[resolvedColor]['text']} ${COLOR_SCHEMES[lightColor]['bg']}`;
+        } else {
+          return `${COLOR_SCHEMES[resolvedColor]['text']} bg-gray-white`;
+        }
     }
   })();
 

diff --git a/src/components/card/Card.tsx b/src/components/card/Card.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { createContext, useContext } from 'react';
 import Chip from '@/components/chip/Chip';
 import ParticipantCounter from '../participant-counter/ParticipantCounter';

diff --git a/src/components/card/my-club-card/MyClubCard.stories.tsx b/src/components/card/my-club-card/MyClubCard.stories.tsx
@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import MyClubCard from './MyClubCard';
+
+const meta = {
+  title: 'Components/Card/MyClubCard',
+  component: MyClubCard,
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof MyClubCard>;
+
+export default meta;
+type Story = StoryObj<typeof MyClubCard>;
+
+const mockClubMeeting = {
+  meetingInfo: {
+    title: '을지로에서 만나는 독서 모임',
+    location: '을지로 3가',
+    datetime: '12/14(토) 오전 10:00',
+    category: '자유책',
+  },
+  imageInfo: {
+    url: 'https://picsum.photos/seed/bookclub/800/450',
+    isLiked: true,
+    onLikeClick: () => alert('좋아요를 눌렀습니다!'),
+  },
+  clubStatus: {
+    isCompleted: false,
+    isConfirmed: true,
+  },
+  actions: {
+    onClick: () => alert('카드를 클릭했습니다!'),
+    onDelete: () => alert('모임을 삭제했습니다!'),
+  },
+};
+
+export const Default: Story = {
+  args: {
+    meeting: mockClubMeeting,
+  },
+  render: (args) => (
+    <div className="w-[344px]">
+      <MyClubCard {...args} />
+    </div>
+  ),
+};
+
+export const Completed: Story = {
+  args: {
+    meeting: {
+      ...mockClubMeeting,
+      clubStatus: {
+        ...mockClubMeeting.clubStatus,
+        isCompleted: true,
+      },
+    },
+  },
+};
+
+export const Pending: Story = {
+  args: {
+    meeting: {
+      ...mockClubMeeting,
+      clubStatus: {
+        ...mockClubMeeting.clubStatus,
+        isConfirmed: false,
+      },
+    },
+  },
+};
+
+export const Canceled: Story = {
+  args: {
+    meeting: {
+      ...mockClubMeeting,
+      isCanceled: true,
+    },
+  },
+};
diff --git a/src/components/card/my-club-card/MyClubCard.tsx b/src/components/card/my-club-card/MyClubCard.tsx
@@ -0,0 +1,68 @@
+import { ComponentPropsWithoutRef } from 'react';
+import Card from '../Card';
+import ClubChip from '@/components/chip/club-chip/ClubChip';
+import Button from '@/components/button/Button';
+import { ClubMeeting } from '@/components/card/types';
+import Chip from '@/components/chip/Chip';
+
+interface MyClubCardProps extends ComponentPropsWithoutRef<'article'> {
+  meeting: ClubMeeting;
+}
+
+function MyClubCard({ meeting, className, ...props }: MyClubCardProps) {
+  const {
+    meetingInfo,
+    imageInfo,
+    clubStatus,
+    isCanceled = false,
+    actions,
+  } = meeting;
+
+  return (
+    <Card isCanceled={isCanceled} className={className} {...props}>
+      <div className="flex flex-col gap-4">
+        <Card.Image {...imageInfo} />
+        <Card.Box className="relative flex-1" onClick={actions?.onClick}>
+          {/* 첫 번째 줄: ClubChip + Chip */}
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <ClubChip
+                variant={clubStatus.isCompleted ? 'completed' : 'scheduled'}
+              />
+              <ClubChip
+                variant={clubStatus.isConfirmed ? 'confirmed' : 'pending'}
+              />
+            </div>
+            <Chip text={meetingInfo.category} />
+          </div>
+
+          {/* 두 번째 줄: 모임 정보 */}
+          <div className="mt-4">
+            <h3 className="text-xl font-semibold text-gray-black">
+              {meetingInfo.title}
+            </h3>
+            <div className="mt-1 flex items-center gap-1.5 text-sm text-gray-dark-03">
+              <span>{meetingInfo.location}</span>
+              <span>{meetingInfo.datetime}</span>
+            </div>
+          </div>
+
+          {/* 세 번째 줄: 버튼 */}
+          <div className="mt-4">
+            <Button
+              text="참여 취소하기"
+              size="medium"
+              fillType="outline"
+              themeColor="green-normal-01"
+              onClick={actions?.onDelete}
+            />
+          </div>
+
+          <Card.EndedOverlay onDelete={actions?.onDelete} />
+        </Card.Box>
+      </div>
+    </Card>
+  );
+}
+
+export default MyClubCard;
diff --git a/src/components/card/types/models.ts b/src/components/card/types/models.ts
@@ -18,3 +18,15 @@ export interface FullMeeting extends Omit<Meeting, 'actions'> {
   hostInfo: HostInfo;
   actions: FullActions;
 }
+
+export interface ClubStatus {
+  isCompleted: boolean;
+  isConfirmed: boolean;
+}
+
+export interface ClubMeeting extends BaseProps {
+  meetingInfo: MeetingInfo;
+  imageInfo: ImageInfo;
+  clubStatus: ClubStatus;
+  actions: SimpleActions;
+}
diff --git a/src/components/chip/Chip.stories.tsx b/src/components/chip/Chip.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Chip from './Chip';
 
 const meta = {
-  title: 'Components/Chip',
+  title: 'Components/Chip/Base',
   component: Chip,
   parameters: {
     layout: 'centered',
@@ -29,7 +29,7 @@ export const RoundedLight: Story = {
 export const SquareOutlined: Story = {
   args: {
     text: '오프라인',
-    variant: 'square-light',
+    variant: 'square-outlined',
   },
 };
 
@@ -54,13 +54,13 @@ export const AllStates: Story = {
       <div className="flex gap-2">
         <Chip text="모집중" variant="rounded-filled" />
         <Chip text="1월 7일" variant="rounded-light" />
-        <Chip text="오프라인" variant="square-light" />
+        <Chip text="오프라인" variant="square-outlined" />
         <Chip text="마감" variant="square-filled" />
       </div>
       <div className="flex gap-2">
         <Chip text="자유책" variant="rounded-filled" isPast={true} />
         <Chip text="1월 7일" variant="rounded-light" isPast={true} />
-        <Chip text="오프라인" variant="square-light" isPast={true} />
+        <Chip text="오프라인" variant="square-outlined" isPast={true} />
         <Chip text="마감" variant="square-filled" isPast={true} />
       </div>
     </div>

diff --git a/src/components/chip/Chip.test.tsx b/src/components/chip/Chip.test.tsx
@@ -2,7 +2,7 @@ import Chip from '@/components/chip/Chip';
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 
-describe('TextChip', () => {
+describe('Chip', () => {
   it('텍스트가 올바르게 렌더링되어야 한다', () => {
     render(<Chip text="테스트" />);
     const chip = screen.getByText('테스트');

diff --git a/src/components/chip/Chip.tsx b/src/components/chip/Chip.tsx
@@ -1,11 +1,13 @@
 import { twMerge } from 'tailwind-merge';
 
 const CHIP_VARIANTS = {
-  'rounded-filled': 'rounded-full bg-green-light-02 text-green-dark-01',
-  'rounded-light': 'rounded-full bg-green-normal-01 text-gray-white',
-  'square-light':
-    'rounded border border-gray-normal-02 bg-gray-light-01 text-gray-dark-01',
-  'square-filled': 'rounded bg-green-dark-01 text-gray-dark-01',
+  'rounded-filled':
+    'rounded-full bg-green-light-02 text-green-dark-01 font-semibold',
+  'rounded-light':
+    'rounded-full bg-green-normal-01 text-gray-white font-semibold',
+  'square-outlined':
+    'rounded-md border border-green-normal-01 bg-gray-white text-green-normal-01',
+  'square-filled': 'rounded-md bg-green-normal-01 text-gray-white px-2',
 } as const;
 
 type ChipVariant = keyof typeof CHIP_VARIANTS;
@@ -24,7 +26,7 @@ function Chip({
   className,
 }: ChipProps) {
   const baseStyles =
-    'inline-flex items-center justify-center px-2.5 py-1 text-sm font-semibold';
+    'inline-flex items-center justify-center px-2.5 py-1 text-sm font-medium';
 
   const combinedClassName = twMerge(
     baseStyles,