[Feat] 쇼케이스 페이지 club profile card 구현

src/common/type/design.ts

@@ -1,2 +1,2 @@
 export type Size = 'xxSmall' | 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge';
-export type TextSize = 'body1' | 'body2' | 'body3' | 'body4' | 'body5' | 'body6';
+export type TextSize = 'body1' | 'body2' | 'body3' | 'body4' | 'body5' | 'body6' | 'body7' | 'body8';

src/page/showcase/component/ClubProfileCard/ClubProfileCard.style.ts

@@ -0,0 +1,26 @@
+import { css } from '@emotion/react';
+
+export const containerStyle = css({ width: '100%' });
+
+export const imageStyle = css({
+  width: '100%',
+
+  borderRadius: '16px 16px 0px 0px',
+
+  objectFit: 'cover',
+  aspectRatio: 16 / 9,
+});
+
+export const descriptionStyle = css({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.6rem',
+
+  padding: '1.6rem',
+});
+
+export const detailStyle = css({
+  height: '3.4rem',
+
+  overflow: 'hidden',
+});

src/page/showcase/component/ClubProfileCard/ClubProfileCard.tsx

@@ -0,0 +1,32 @@
+import {
+  containerStyle,
+  descriptionStyle,
+  detailStyle,
+  imageStyle,
+} from '@/page/showcase/component/ClubProfileCard/ClubProfileCard.style';
+
+import defaultImage from '@/common/asset/svg/default_profile.svg';
+import Heading from '@/common/component/Heading/Heading';
+import Text from '@/common/component/Text/Text';
+
+interface ClubProfileCardProps {
+  title: string;
+  detail: string;
+  imageUrl?: string;
+}
+
+const ClubProfileCard = ({ title, detail, imageUrl }: ClubProfileCardProps) => {
+  return (
+    <article css={containerStyle}>
+      <img src={imageUrl ? imageUrl : defaultImage} alt={`${title}-image`} css={imageStyle} />
+      <div css={descriptionStyle}>
+        <Heading tag="H6">{title}</Heading>
+        <Text tag="body7" css={detailStyle}>
+          {detail}
+        </Text>
+      </div>
+    </article>
+  );
+};
+
+export default ClubProfileCard;

src/story/page/archiving/DaySection.stories.tsx

@@ -9,7 +9,7 @@ const meta = {
   },
   args: {
     day: 1,
-    onDayClick: () => {},
+    isClicked: false,
   },
   argTypes: {
     day: {
@@ -23,8 +23,4 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-  args: {
-    onDayClick: () => {},
-  },
-};
+export const Default: Story = {};

src/story/page/showcase/ClubProfileCard.stories.tsx

@@ -0,0 +1,32 @@
+import ClubProfileCard from '@/page/showcase/component/ClubProfileCard/ClubProfileCard';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Page/ClubProfileCard',
+  component: ClubProfileCard,
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    title: 'Tiki 티키',
+    detail: '안녕하세요 티키입니다. 저희는 멋진 웹사이트를 제작합니다.',
+    imageUrl: '',
+  },
+  argTypes: {
+    title: {
+      control: {
+        type: 'text',
+      },
+    },
+    detail: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+} satisfies Meta<typeof ClubProfileCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};