[Feat] 스케줄러 카드 추가 및 탭 컴포넌트 수정

src/app/schedule/(components)/current.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import Card from '@/components/shared/card';
+
+const MOCK_MEETINGS = [
+  {
+    id: 1,
+    title: '네즈코와 무한성에서 정모 하실 분',
+    images: [],
+    location: '네즈코 호수공원',
+    dateTime: '25. 11. 28 - 10:00',
+    nickName: 'Hope Lee',
+    participantCount: 8,
+    maxParticipants: 10,
+    tags: ['#태그', '#태그', '#태그'],
+  },
+];
+
+export default function Current() {
+  const router = useRouter();
+
+  return (
+    <section className='flex w-full flex-col gap-4 px-4 py-4'>
+      {MOCK_MEETINGS.map((meeting) => (
+        <Card
+          key={meeting.id}
+          dateTime={meeting.dateTime}
+          images={meeting.images}
+          leaveAndChatActions={{
+            onLeave: () => console.log('모임 탈퇴', meeting.id),
+            onChat: () => router.push(`/chat/${meeting.id}`),
+          }}
+          location={meeting.location}
+          maxParticipants={meeting.maxParticipants}
+          nickName={meeting.nickName}
+          participantCount={meeting.participantCount}
+          tags={meeting.tags}
+          title={meeting.title}
+          onClick={() => router.push(`/meetup/${meeting.id}`)}
+        />
+      ))}
+    </section>
+  );
+}

src/app/schedule/(components)/history.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import Card from '@/components/shared/card';
+
+const MOCK_MEETINGS = [
+  {
+    id: 3,
+    title: '동네 책모임 신규 멤버 구함',
+    images: [],
+    location: '망원동 카페 거리',
+    dateTime: '25. 12. 10 - 19:30',
+    nickName: 'Book Lover',
+    participantCount: 3,
+    maxParticipants: 8,
+    tags: ['#책모임', '#수다환영'],
+  },
+];
+
+export default function History() {
+  const router = useRouter();
+
+  return (
+    <section className='flex w-full flex-col gap-4 px-4 py-4'>
+      {MOCK_MEETINGS.map((meeting) => (
+        <Card
+          key={meeting.id}
+          dateTime={meeting.dateTime}
+          images={meeting.images}
+          leaveAndChatActions={{
+            onLeave: () => console.log('모임 탈퇴', meeting.id),
+            onChat: () => router.push(`/chat/${meeting.id}`),
+          }}
+          location={meeting.location}
+          maxParticipants={meeting.maxParticipants}
+          nickName={meeting.nickName}
+          participantCount={meeting.participantCount}
+          tags={meeting.tags}
+          title={meeting.title}
+          onClick={() => router.push(`/meetup/${meeting.id}`)}
+        />
+      ))}
+    </section>
+  );
+}

src/app/schedule/(components)/my.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import Card from '@/components/shared/card';
+
+const MOCK_MEETINGS = [
+  {
+    id: 2,
+    title: '주말 러닝 크루 모집',
+    images: [],
+    location: '한강공원 잠실지구',
+    dateTime: '25. 12. 05 - 07:30',
+    nickName: 'Minseo Kim',
+    participantCount: 5,
+    maxParticipants: 12,
+    tags: ['#러닝', '#아침운동'],
+  },
+];
+
+export default function My() {
+  const router = useRouter();
+
+  return (
+    <section className='flex w-full flex-col gap-4 px-4 py-4'>
+      {MOCK_MEETINGS.map((meeting) => (
+        <Card
+          key={meeting.id}
+          dateTime={meeting.dateTime}
+          images={meeting.images}
+          leaveAndChatActions={{
+            onLeave: () => console.log('모임 탈퇴', meeting.id),
+            onChat: () => router.push(`/chat/${meeting.id}`),
+          }}
+          location={meeting.location}
+          maxParticipants={meeting.maxParticipants}
+          nickName={meeting.nickName}
+          participantCount={meeting.participantCount}
+          tags={meeting.tags}
+          title={meeting.title}
+          onClick={() => router.push(`/meetup/${meeting.id}`)}
+        />
+      ))}
+    </section>
+  );
+}

src/app/schedule/page.tsx

@@ -1,5 +1,30 @@
-import { redirect } from 'next/navigation';
+'use client';
+
+import { useSearchParams } from 'next/navigation';
+
+import { TabNavigation } from '@/components/shared';
+
+import Current from './(components)/current';
+import History from './(components)/history';
+import My from './(components)/my';
+
+const SCHEDULE_TABS = [
+  { label: '현재 모임', value: 'current' },
+  { label: '나의 모임', value: 'my' },
+  { label: '모임 이력', value: 'history' },
+];
 
 export default function SchedulePage() {
-  redirect('/schedule/current');
+  const searchParams = useSearchParams();
+  const tab = searchParams.get('tab') || 'current';
+
+  return (
+    <div className='min-h-screen bg-[#F1F5F9]'>
+      <TabNavigation basePath='/schedule' tabs={SCHEDULE_TABS} />
+
+      {tab === 'current' && <Current />}
+      {tab === 'my' && <My />}
+      {tab === 'history' && <History />}
+    </div>
+  );
 }

src/components/shared/card/card-participation-row/index.tsx

@@ -12,7 +12,7 @@ export const CardParticipationRow = ({
   progress,
 }: CardParticipationRowProps) => {
   return (
-    <div className='mt-[14px] flex items-center'>
+    <div className='mt-3 flex h-[18px] items-center'>
       <div className='flex min-w-0 flex-1 items-center gap-1.5'>
         <Icon id='users' width={12} className='shrink-0 text-gray-600' height={12} />
         <div className='h-[6px] w-[200px] overflow-hidden rounded-full bg-gray-200 sm:w-[210px]'>

src/components/shared/card/index.stories.tsx

@@ -49,3 +49,13 @@ export const ManyTags: Story = {
     tags: ['#러닝', '#아침운동', '#주말', '#건강', '#친목', '#초보환영'],
   },
 };
+
+export const WithActions: Story = {
+  args: {
+    ...Default.args,
+    leaveAndChatActions: {
+      onLeave: () => alert('모임 탈퇴'),
+      onChat: () => alert('채팅 입장'),
+    },
+  },
+};

src/components/shared/card/index.test.tsx

@@ -39,10 +39,12 @@ describe('Card', () => {
     const user = userEvent.setup();
     const handleClick = jest.fn();
 
-    render(<Card {...defaultProps} onClick={handleClick} />);
+    const { container } = render(<Card {...defaultProps} onClick={handleClick} />);
 
-    const button = screen.getByRole('button');
-    await user.click(button);
+    const card = container.querySelector('.cursor-pointer');
+    expect(card).toBeInTheDocument();
+
+    await user.click(card!);
 
     expect(handleClick).toHaveBeenCalledTimes(1);
   });