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

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

@@ -0,0 +1,30 @@
+import { css } from '@emotion/react';
+
+import { theme } from '@/common/style/theme/theme';
+
+export const imageStyle = css({
+  width: '100%',
+  height: '14rem',
+
+  borderRadius: '16px 16px 0px 0px',
+});
+
+export const descriptionStyle = css({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.6rem',
+
+  padding: '1.6rem',
+});
+
+export const titleStyle = css({
+  ...theme.heading.heading06,
+});
+
+export const detailStyle = css({
+  height: '3.4rem',
+
+  ...theme.text.body07,
+
+  overflow: 'hidden',
+});

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

@@ -0,0 +1,26 @@
+import {
+  descriptionStyle,
+  detailStyle,
+  imageStyle,
+  titleStyle,
+} from '@/page/showcase/component/ClubProfileCard/ClubProfileCard.style';
+
+interface ClubProfileCardProps {
+  title: string;
+  detail: string;
+  Image: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+}
+
+const ClubProfileCard = ({ title, detail, Image }: ClubProfileCardProps) => {
+  return (
+    <>
+      <Image css={imageStyle} />
+      <div css={descriptionStyle}>
+        <p css={titleStyle}>{title}</p>
+        <p css={detailStyle}>{detail}</p>
+      </div>
+    </>
+  );
+};
+
+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,22 @@
+import ClubProfileCard from '@/page/showcase/component/ClubProfileCard/ClubProfileCard';
+import Image from '@/page/showcase/constant/empty.svg?react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Page/ClubProfileCard',
+  component: ClubProfileCard,
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    title: 'Tiki 티키',
+    detail: '안녕하세요 티키입니다. 저희는 멋진 웹사이트를 제작합니다.',
+    Image: Image,
+  },
+  argTypes: {},
+} satisfies Meta<typeof ClubProfileCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};