From c1d2e5c93c8c50693c4f7f18754b4839973143fa Mon Sep 17 00:00:00 2001
From: Jeongbowoon <happyanne200212@gmail/com>
Date: Mon, 8 Jul 2024 18:27:26 +0900
Subject: [PATCH 01/16] =?UTF-8?q?#47=20feat:club=20profile=20card=20?=
 =?UTF-8?q?=EC=B4=88=EA=B8=B0=20=EC=84=B8=ED=8C=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ClubProfileCard/ClubProfileCard.style.ts    |  0
 .../ClubProfileCard/ClubProfileCard.tsx         | 17 +++++++++++++++++
 2 files changed, 17 insertions(+)
 create mode 100644 src/page/showcase/component/ClubProfileCard/ClubProfileCard.style.ts
 create mode 100644 src/page/showcase/component/ClubProfileCard/ClubProfileCard.tsx

diff --git a/src/page/showcase/component/ClubProfileCard/ClubProfileCard.style.ts b/src/page/showcase/component/ClubProfileCard/ClubProfileCard.style.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/page/showcase/component/ClubProfileCard/ClubProfileCard.tsx b/src/page/showcase/component/ClubProfileCard/ClubProfileCard.tsx
new file mode 100644
index 000000000..94957396d
--- /dev/null
+++ b/src/page/showcase/component/ClubProfileCard/ClubProfileCard.tsx
@@ -0,0 +1,17 @@
+interface ClubProfileCardProps {
+  title: string;
+  detail: string;
+  image: string;
+}
+
+const ClubProfileCard = ({ title, detail, image }: ClubProfileCardProps) => {
+  return (
+    <section>
+      <img src={image} alt={`${title}-image`} />
+      <p>{title}</p>
+      <p>{detail}</p>
+    </section>
+  );
+};
+
+export default ClubProfileCard;

From 34dab33704c9ee7c7615a4eadf0ccf9d479432a8 Mon Sep 17 00:00:00 2001
From: Jeongbowoon <happyanne200212@gmail/com>
Date: Tue, 9 Jul 2024 14:54:30 +0900
Subject: [PATCH 02/16] =?UTF-8?q?#47=20fix:=20style=20props=20=EA=B0=9D?=
 =?UTF-8?q?=EC=B2=B4=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/component/Input/Input.style.ts | 2 +-
 src/common/component/Input/Input.tsx      | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/common/component/Input/Input.style.ts b/src/common/component/Input/Input.style.ts
index fad9872b3..190e5fbdf 100644
--- a/src/common/component/Input/Input.style.ts
+++ b/src/common/component/Input/Input.style.ts
@@ -46,7 +46,7 @@ export const inputStyle = css({
   },
 });
 
-export const variantStyle = ({ variant, isError }: { variant: Required<InputProps>['variant']; isError: boolean }) => {
+export const variantStyle = (variant: Required<InputProps>['variant'], isError: boolean) => {
   const borderColor = isError ? `${theme.colors.red}` : `${theme.colors.gray_400}`;
 
   const style = {
diff --git a/src/common/component/Input/Input.tsx b/src/common/component/Input/Input.tsx
index c3c7a8e7e..7c6d466ce 100644
--- a/src/common/component/Input/Input.tsx
+++ b/src/common/component/Input/Input.tsx
@@ -3,7 +3,6 @@ import React, { ForwardedRef, InputHTMLAttributes, forwardRef } from 'react';
 import {
   containerStyle,
   inputStyle,
-  inputSupportStyle,
   sizeStyle,
   variantStyle,
   warpperStyle,
@@ -40,7 +39,7 @@ const Input = (
   return (
     <article css={containerStyle}>
       {label && <Label id={label}>{label}</Label>}
-      <div css={[warpperStyle, variantStyle({ variant, isError }), sizeStyle(size)]}>
+      <div css={[warpperStyle, variantStyle(variant, isError), sizeStyle(size)]}>
         {LeftIcon && <LeftIcon />}
         <input ref={ref} css={inputStyle} {...props} />
       </div>

From b3f3a806276a6d3e9874f2c19430400d4cb36eed Mon Sep 17 00:00:00 2001
From: Jeongbowoon <happyanne200212@gmail/com>
Date: Tue, 9 Jul 2024 16:34:58 +0900
Subject: [PATCH 03/16] =?UTF-8?q?#47=20feat:=20=EA=B8=B0=EB=B3=B8=EC=8A=A4?=
 =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ClubProfileCard/ClubProfileCard.style.ts  | 30 +++++++++++++++++++
 .../ClubProfileCard/ClubProfileCard.tsx       | 10 ++++---
 .../page/showcase/ClubProfileCard.stories.tsx | 22 ++++++++++++++
 3 files changed, 58 insertions(+), 4 deletions(-)
 create mode 100644 src/story/page/showcase/ClubProfileCard.stories.tsx

diff --git a/src/page/showcase/component/ClubProfileCard/ClubProfileCard.style.ts b/src/page/showcase/component/ClubProfileCard/ClubProfileCard.style.ts
index e69de29bb..3bb415398 100644
--- a/src/page/showcase/component/ClubProfileCard/ClubProfileCard.style.ts
+++ b/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 containerStyle = css({
+  width: '24.35rem', //나중에 바꿔야함
+});
+
+export const imageStyle = css({
+  width: '100%',
+  height: '14rem',
+  borderRadius: '16px 16px 0px 0px',
+});
+
+export const descriptionStyle = css({
+  display: 'flex',
+  flexDirection: 'column',
+  padding: '1.6rem',
+  gap: '0.6rem',
+});
+
+export const titleStyle = css({
+  ...theme.heading.heading06,
+});
+
+export const detailStyle = css({
+  ...theme.text.body07,
+  height: '3.4rem',
+  overflow: 'hidden',
+});
diff --git a/src/page/showcase/component/ClubProfileCard/ClubProfileCard.tsx b/src/page/showcase/component/ClubProfileCard/ClubProfileCard.tsx
index 94957396d..e0b5fe510 100644
--- a/src/page/showcase/component/ClubProfileCard/ClubProfileCard.tsx
+++ b/src/page/showcase/component/ClubProfileCard/ClubProfileCard.tsx
@@ -1,13 +1,15 @@
+import { containerStyle } from '@/page/showcase/component/ClubProfileCard/ClubProfileCard.style';
+
 interface ClubProfileCardProps {
   title: string;
   detail: string;
-  image: string;
+  Image: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
 }
 
-const ClubProfileCard = ({ title, detail, image }: ClubProfileCardProps) => {
+const ClubProfileCard = ({ title, detail, Image }: ClubProfileCardProps) => {
   return (
-    <section>
-      <img src={image} alt={`${title}-image`} />
+    <section css={containerStyle}>
+      <Image />
       <p>{title}</p>
       <p>{detail}</p>
     </section>
diff --git a/src/story/page/showcase/ClubProfileCard.stories.tsx b/src/story/page/showcase/ClubProfileCard.stories.tsx
new file mode 100644
index 000000000..7e33c9956
--- /dev/null
+++ b/src/story/page/showcase/ClubProfileCard.stories.tsx
@@ -0,0 +1,22 @@
+import ClubProfileCard from '@/page/showcase/component/ClubProfileCard/ClubProfileCard';
+import type { Meta, StoryObj } from '@storybook/react';
+import Image from 'public/check.svg?react';
+
+const meta = {
+  title: 'Page/ClubProfileCard',
+  component: ClubProfileCard,
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    title: 'titletitle',
+    detail: 'detaildetail',
+    Image: Image,
+  },
+  argTypes: {},
+} satisfies Meta<typeof ClubProfileCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

From 140db1dd2ad1b5cdbccf1b870475f25a9690963b Mon Sep 17 00:00:00 2001
From: Jeongbowoon <happyanne200212@gmail/com>
Date: Tue, 9 Jul 2024 16:35:39 +0900
Subject: [PATCH 04/16] =?UTF-8?q?#47=20feat:=20default=20image=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/showcase/constant/empty.svg | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 src/page/showcase/constant/empty.svg

diff --git a/src/page/showcase/constant/empty.svg b/src/page/showcase/constant/empty.svg
new file mode 100644
index 000000000..0711b09c3
--- /dev/null
+++ b/src/page/showcase/constant/empty.svg
@@ -0,0 +1,16 @@
+<svg width="244" height="140" viewBox="0 0 244 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="243.5" height="140" fill="#EDF0FD"/>
+<g clip-path="url(#clip0_715_3000)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M89.1846 53.9946C91.0123 53.9946 92.494 55.4763 92.494 57.3041V61.4408C92.494 61.4843 92.4931 61.5278 92.4914 61.5712L92.4886 61.6443L92.4806 61.8649C92.4738 62.0579 92.4643 62.3387 92.4537 62.687C92.4325 63.3843 92.4071 64.3484 92.3902 65.4161C92.3556 67.5976 92.3597 70.0545 92.4833 71.5884C92.5802 72.7908 93.1092 74.7085 94.3012 76.2435C95.3901 77.6457 97.0763 78.8153 99.9402 78.8153C102.804 78.8153 104.49 77.6457 105.579 76.2435C106.771 74.7085 107.3 72.7908 107.397 71.5884C107.544 69.7666 109.14 68.4086 110.962 68.5554C112.783 68.7021 114.141 70.298 113.995 72.1199C113.816 74.341 112.938 77.5586 110.807 80.3031C108.573 83.1803 105.019 85.4342 99.9402 85.4342C94.8615 85.4342 91.3078 83.1803 89.0735 80.3031C86.9422 77.5586 86.0647 74.341 85.8858 72.1199C85.7336 70.2302 85.7378 67.4804 85.7721 65.3112C85.7751 65.1207 85.7784 64.9334 85.7819 64.7503H80.911C79.0832 64.7503 77.6016 63.2686 77.6016 61.4408C77.6016 59.6131 79.0832 58.1314 80.911 58.1314H85.8751V57.3041C85.8751 55.4763 87.3568 53.9946 89.1846 53.9946Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M148.594 55.0301C149.886 56.3225 149.886 58.4179 148.594 59.7103L138.608 69.6958L148.594 79.6814C149.886 80.9738 149.886 83.0692 148.594 84.3616C147.302 85.654 145.206 85.654 143.914 84.3616L131.588 72.036C130.296 70.7435 130.296 68.6481 131.588 67.3557L143.914 55.0301C145.206 53.7376 147.302 53.7376 148.594 55.0301Z" fill="white"/>
+<rect x="118.97" y="53.9946" width="6.61886" height="23.166" rx="3.30943" fill="white"/>
+<rect x="118.97" y="78.8154" width="6.61886" height="6.61886" rx="3.30943" fill="white"/>
+<rect width="6.61886" height="23.166" rx="3.30943" transform="matrix(1 0 0 -1 157.028 85.4341)" fill="white"/>
+<rect width="6.61886" height="6.61886" rx="3.30943" transform="matrix(1 0 0 -1 157.028 60.6133)" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_715_3000">
+<rect width="90" height="33.4286" fill="white" transform="translate(77 53)"/>
+</clipPath>
+</defs>
+</svg>

From e445c40857b8ca7b0227f2e280c72a81c0994d8e Mon Sep 17 00:00:00 2001
From: Jeongbowoon <happyanne200212@gmail/com>
Date: Tue, 9 Jul 2024 16:36:21 +0900
Subject: [PATCH 05/16] =?UTF-8?q?#47=20feat:=20image=20svg=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ClubProfileCard/ClubProfileCard.tsx          | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/page/showcase/component/ClubProfileCard/ClubProfileCard.tsx b/src/page/showcase/component/ClubProfileCard/ClubProfileCard.tsx
index e0b5fe510..97d0bc40e 100644
--- a/src/page/showcase/component/ClubProfileCard/ClubProfileCard.tsx
+++ b/src/page/showcase/component/ClubProfileCard/ClubProfileCard.tsx
@@ -1,4 +1,10 @@
-import { containerStyle } from '@/page/showcase/component/ClubProfileCard/ClubProfileCard.style';
+import {
+  containerStyle,
+  descriptionStyle,
+  detailStyle,
+  imageStyle,
+  titleStyle,
+} from '@/page/showcase/component/ClubProfileCard/ClubProfileCard.style';
 
 interface ClubProfileCardProps {
   title: string;
@@ -9,9 +15,11 @@ interface ClubProfileCardProps {
 const ClubProfileCard = ({ title, detail, Image }: ClubProfileCardProps) => {
   return (
     <section css={containerStyle}>
-      <Image />
-      <p>{title}</p>
-      <p>{detail}</p>
+      <Image css={imageStyle} />
+      <div css={descriptionStyle}>
+        <p css={titleStyle}>{title}</p>
+        <p css={detailStyle}>{detail}</p>
+      </div>
     </section>
   );
 };

From 0f5ac2f96ba71032766b7133afa8b920fab7c00b Mon Sep 17 00:00:00 2001
From: Jeongbowoon <happyanne200212@gmail/com>
Date: Tue, 9 Jul 2024 16:37:02 +0900
Subject: [PATCH 06/16] =?UTF-8?q?#47=20feat:storybook=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/story/page/showcase/ClubProfileCard.stories.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/story/page/showcase/ClubProfileCard.stories.tsx b/src/story/page/showcase/ClubProfileCard.stories.tsx
index 7e33c9956..2284aee14 100644
--- a/src/story/page/showcase/ClubProfileCard.stories.tsx
+++ b/src/story/page/showcase/ClubProfileCard.stories.tsx
@@ -1,6 +1,6 @@
 import ClubProfileCard from '@/page/showcase/component/ClubProfileCard/ClubProfileCard';
+import Image from '@/page/showcase/constant/empty.svg?react';
 import type { Meta, StoryObj } from '@storybook/react';
-import Image from 'public/check.svg?react';
 
 const meta = {
   title: 'Page/ClubProfileCard',
@@ -9,8 +9,8 @@ const meta = {
     layout: 'centered',
   },
   args: {
-    title: 'titletitle',
-    detail: 'detaildetail',
+    title: 'Tiki 티키',
+    detail: '안녕하세요 티키입니다. 저희는 멋진 웹사이트를 제작합니다.',
     Image: Image,
   },
   argTypes: {},

From 69028fd1afa7307935dae744c2359f4ab3bf0a8c Mon Sep 17 00:00:00 2001
From: Jeongbowoon <happyanne200212@gmail/com>
Date: Tue, 9 Jul 2024 16:39:33 +0900
Subject: [PATCH 07/16] =?UTF-8?q?#47=20fix:=20=EC=A3=BC=EC=84=9D=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/ClubProfileCard/ClubProfileCard.style.ts       | 4 ----
 .../showcase/component/ClubProfileCard/ClubProfileCard.tsx   | 5 ++---
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/page/showcase/component/ClubProfileCard/ClubProfileCard.style.ts b/src/page/showcase/component/ClubProfileCard/ClubProfileCard.style.ts
index 3bb415398..68afc9123 100644
--- a/src/page/showcase/component/ClubProfileCard/ClubProfileCard.style.ts
+++ b/src/page/showcase/component/ClubProfileCard/ClubProfileCard.style.ts
@@ -2,10 +2,6 @@ import { css } from '@emotion/react';
 
 import { theme } from '@/common/style/theme/theme';
 
-export const containerStyle = css({
-  width: '24.35rem', //나중에 바꿔야함
-});
-
 export const imageStyle = css({
   width: '100%',
   height: '14rem',
diff --git a/src/page/showcase/component/ClubProfileCard/ClubProfileCard.tsx b/src/page/showcase/component/ClubProfileCard/ClubProfileCard.tsx
index 97d0bc40e..f3f59933c 100644
--- a/src/page/showcase/component/ClubProfileCard/ClubProfileCard.tsx
+++ b/src/page/showcase/component/ClubProfileCard/ClubProfileCard.tsx
@@ -1,5 +1,4 @@
 import {
-  containerStyle,
   descriptionStyle,
   detailStyle,
   imageStyle,
@@ -14,13 +13,13 @@ interface ClubProfileCardProps {
 
 const ClubProfileCard = ({ title, detail, Image }: ClubProfileCardProps) => {
   return (
-    <section css={containerStyle}>
+    <>
       <Image css={imageStyle} />
       <div css={descriptionStyle}>
         <p css={titleStyle}>{title}</p>
         <p css={detailStyle}>{detail}</p>
       </div>
-    </section>
+    </>
   );
 };
 

From d854eeb6e1865e7b309e0c5257e726e32f41c9e8 Mon Sep 17 00:00:00 2001
From: Jeongbowoon <happyanne200212@gmail/com>
Date: Tue, 9 Jul 2024 16:54:23 +0900
Subject: [PATCH 08/16] =?UTF-8?q?#47=20fix:=20daysection=20build=20?=
 =?UTF-8?q?=EC=97=90=EB=9F=AC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/story/page/archiving/DaySection.stories.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/story/page/archiving/DaySection.stories.tsx b/src/story/page/archiving/DaySection.stories.tsx
index 8f0465fad..fab44a4a1 100644
--- a/src/story/page/archiving/DaySection.stories.tsx
+++ b/src/story/page/archiving/DaySection.stories.tsx
@@ -9,7 +9,7 @@ const meta = {
   },
   args: {
     day: 1,
-    onDayClick: () => {},
+    isClicked: false,
   },
   argTypes: {
     day: {
@@ -24,7 +24,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  args: {
-    onDayClick: () => {},
-  },
 };

From fc7ffc819dfc14937959f150fdc20df937c0ad0b Mon Sep 17 00:00:00 2001
From: Jeongbowoon <happyanne200212@gmail/com>
Date: Tue, 9 Jul 2024 16:55:49 +0900
Subject: [PATCH 09/16] =?UTF-8?q?#47=20fix:=20=EC=A3=BC=EC=84=9D=EC=B2=98?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/story/page/archiving/DaySection.stories.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/story/page/archiving/DaySection.stories.tsx b/src/story/page/archiving/DaySection.stories.tsx
index fab44a4a1..9427016fd 100644
--- a/src/story/page/archiving/DaySection.stories.tsx
+++ b/src/story/page/archiving/DaySection.stories.tsx
@@ -23,5 +23,4 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-};
+export const Default: Story = {};

From 9f92bca01dff4459412a3eb5fa3f1ac85b9f7938 Mon Sep 17 00:00:00 2001
From: Jeongbowoon <happyanne200212@gmail/com>
Date: Tue, 9 Jul 2024 16:59:46 +0900
Subject: [PATCH 10/16] =?UTF-8?q?#47=20fix:=20css=20=EC=88=9C=EC=84=9C=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/ClubProfileCard/ClubProfileCard.style.ts    | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/page/showcase/component/ClubProfileCard/ClubProfileCard.style.ts b/src/page/showcase/component/ClubProfileCard/ClubProfileCard.style.ts
index 68afc9123..94b09edfb 100644
--- a/src/page/showcase/component/ClubProfileCard/ClubProfileCard.style.ts
+++ b/src/page/showcase/component/ClubProfileCard/ClubProfileCard.style.ts
@@ -5,14 +5,16 @@ 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',
-  padding: '1.6rem',
   gap: '0.6rem',
+
+  padding: '1.6rem',
 });
 
 export const titleStyle = css({
@@ -20,7 +22,9 @@ export const titleStyle = css({
 });
 
 export const detailStyle = css({
-  ...theme.text.body07,
   height: '3.4rem',
+
+  ...theme.text.body07,
+
   overflow: 'hidden',
 });

From 00de60619dd90b65f35cedaa220765c34086ea7e Mon Sep 17 00:00:00 2001
From: Jeongbowoon <happyanne200212@gmail/com>
Date: Tue, 9 Jul 2024 17:21:18 +0900
Subject: [PATCH 11/16] =?UTF-8?q?#47=20refactor:storybook=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/story/page/showcase/ClubProfileCard.stories.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/story/page/showcase/ClubProfileCard.stories.tsx b/src/story/page/showcase/ClubProfileCard.stories.tsx
index 2284aee14..305fa8083 100644
--- a/src/story/page/showcase/ClubProfileCard.stories.tsx
+++ b/src/story/page/showcase/ClubProfileCard.stories.tsx
@@ -13,7 +13,18 @@ const meta = {
     detail: '안녕하세요 티키입니다. 저희는 멋진 웹사이트를 제작합니다.',
     Image: Image,
   },
-  argTypes: {},
+  argTypes: {
+    title: {
+      control: {
+        type: 'text',
+      },
+    },
+    detail: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
 } satisfies Meta<typeof ClubProfileCard>;
 
 export default meta;

From 103520c2c54dda2bcbfac9d2ed46cb6578fc6a19 Mon Sep 17 00:00:00 2001
From: Jeongbowoon <happyanne200212@gmail/com>
Date: Tue, 9 Jul 2024 18:01:00 +0900
Subject: [PATCH 12/16] =?UTF-8?q?#47=20refactor:=20image=20url=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../asset/svg/default_profile.svg}                  |  0
 .../ClubProfileCard/ClubProfileCard.style.ts        |  5 +++++
 .../component/ClubProfileCard/ClubProfileCard.tsx   | 13 ++++++++-----
 src/story/page/showcase/ClubProfileCard.stories.tsx |  3 +--
 4 files changed, 14 insertions(+), 7 deletions(-)
 rename src/{page/showcase/constant/empty.svg => common/asset/svg/default_profile.svg} (100%)

diff --git a/src/page/showcase/constant/empty.svg b/src/common/asset/svg/default_profile.svg
similarity index 100%
rename from src/page/showcase/constant/empty.svg
rename to src/common/asset/svg/default_profile.svg
diff --git a/src/page/showcase/component/ClubProfileCard/ClubProfileCard.style.ts b/src/page/showcase/component/ClubProfileCard/ClubProfileCard.style.ts
index 94b09edfb..0d0109e9a 100644
--- a/src/page/showcase/component/ClubProfileCard/ClubProfileCard.style.ts
+++ b/src/page/showcase/component/ClubProfileCard/ClubProfileCard.style.ts
@@ -2,11 +2,16 @@ import { css } from '@emotion/react';
 
 import { theme } from '@/common/style/theme/theme';
 
+export const containerStyle = css({ width: '24.35rem' });
+
 export const imageStyle = css({
   width: '100%',
   height: '14rem',
 
   borderRadius: '16px 16px 0px 0px',
+
+  objectFit: 'none',
+  aspectRatio: 16 / 9,
 });
 
 export const descriptionStyle = css({
diff --git a/src/page/showcase/component/ClubProfileCard/ClubProfileCard.tsx b/src/page/showcase/component/ClubProfileCard/ClubProfileCard.tsx
index f3f59933c..e7fc4e518 100644
--- a/src/page/showcase/component/ClubProfileCard/ClubProfileCard.tsx
+++ b/src/page/showcase/component/ClubProfileCard/ClubProfileCard.tsx
@@ -1,25 +1,28 @@
 import {
+  containerStyle,
   descriptionStyle,
   detailStyle,
   imageStyle,
   titleStyle,
 } from '@/page/showcase/component/ClubProfileCard/ClubProfileCard.style';
 
+import defaultImage from '@/common/asset/svg/default_profile.svg';
+
 interface ClubProfileCardProps {
   title: string;
   detail: string;
-  Image: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+  imageUrl?: string;
 }
 
-const ClubProfileCard = ({ title, detail, Image }: ClubProfileCardProps) => {
+const ClubProfileCard = ({ title, detail, imageUrl }: ClubProfileCardProps) => {
   return (
-    <>
-      <Image css={imageStyle} />
+    <section css={containerStyle}>
+      <img src={imageUrl ? imageUrl : defaultImage} alt={`${title}-image`} css={imageStyle} />
       <div css={descriptionStyle}>
         <p css={titleStyle}>{title}</p>
         <p css={detailStyle}>{detail}</p>
       </div>
-    </>
+    </section>
   );
 };
 
diff --git a/src/story/page/showcase/ClubProfileCard.stories.tsx b/src/story/page/showcase/ClubProfileCard.stories.tsx
index 305fa8083..400d137d7 100644
--- a/src/story/page/showcase/ClubProfileCard.stories.tsx
+++ b/src/story/page/showcase/ClubProfileCard.stories.tsx
@@ -1,5 +1,4 @@
 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 = {
@@ -11,7 +10,7 @@ const meta = {
   args: {
     title: 'Tiki 티키',
     detail: '안녕하세요 티키입니다. 저희는 멋진 웹사이트를 제작합니다.',
-    Image: Image,
+    imageUrl: '',
   },
   argTypes: {
     title: {

From f0c3a593b4b06f36174d6f5bf1a0d2a54acaa9f0 Mon Sep 17 00:00:00 2001
From: Jeongbowoon <happyanne200212@gmail/com>
Date: Tue, 9 Jul 2024 20:52:31 +0900
Subject: [PATCH 13/16] =?UTF-8?q?#47=20refactor:=20style=20=EB=A6=AC?=
 =?UTF-8?q?=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/ClubProfileCard/ClubProfileCard.style.ts       | 5 ++---
 .../showcase/component/ClubProfileCard/ClubProfileCard.tsx   | 4 ++--
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/page/showcase/component/ClubProfileCard/ClubProfileCard.style.ts b/src/page/showcase/component/ClubProfileCard/ClubProfileCard.style.ts
index 0d0109e9a..ed9788ed8 100644
--- a/src/page/showcase/component/ClubProfileCard/ClubProfileCard.style.ts
+++ b/src/page/showcase/component/ClubProfileCard/ClubProfileCard.style.ts
@@ -2,15 +2,14 @@ import { css } from '@emotion/react';
 
 import { theme } from '@/common/style/theme/theme';
 
-export const containerStyle = css({ width: '24.35rem' });
+export const containerStyle = css({ width: '100%' });
 
 export const imageStyle = css({
   width: '100%',
-  height: '14rem',
 
   borderRadius: '16px 16px 0px 0px',
 
-  objectFit: 'none',
+  objectFit: 'cover',
   aspectRatio: 16 / 9,
 });
 
diff --git a/src/page/showcase/component/ClubProfileCard/ClubProfileCard.tsx b/src/page/showcase/component/ClubProfileCard/ClubProfileCard.tsx
index e7fc4e518..da3d38478 100644
--- a/src/page/showcase/component/ClubProfileCard/ClubProfileCard.tsx
+++ b/src/page/showcase/component/ClubProfileCard/ClubProfileCard.tsx
@@ -16,13 +16,13 @@ interface ClubProfileCardProps {
 
 const ClubProfileCard = ({ title, detail, imageUrl }: ClubProfileCardProps) => {
   return (
-    <section css={containerStyle}>
+    <article css={containerStyle}>
       <img src={imageUrl ? imageUrl : defaultImage} alt={`${title}-image`} css={imageStyle} />
       <div css={descriptionStyle}>
         <p css={titleStyle}>{title}</p>
         <p css={detailStyle}>{detail}</p>
       </div>
-    </section>
+    </article>
   );
 };
 

From 3dc4c870d6cc1015a6127a2a738542dfe7f7bb30 Mon Sep 17 00:00:00 2001
From: Jeongbowoon <happyanne200212@gmail/com>
Date: Tue, 9 Jul 2024 21:58:38 +0900
Subject: [PATCH 14/16] =?UTF-8?q?#47=20fix:=20Text=20=EA=B3=B5=ED=86=B5=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20style=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/type/design.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/type/design.ts b/src/common/type/design.ts
index da0252295..838bbfdb7 100644
--- a/src/common/type/design.ts
+++ b/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';

From 202131058caae47f6eeb66ef334b10522b466169 Mon Sep 17 00:00:00 2001
From: Jeongbowoon <happyanne200212@gmail/com>
Date: Tue, 9 Jul 2024 21:59:59 +0900
Subject: [PATCH 15/16] =?UTF-8?q?#53=20feat:=20tag=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/ClubProfileCard/ClubProfileCard.style.ts   | 6 ------
 .../component/ClubProfileCard/ClubProfileCard.tsx        | 9 ++++++---
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/page/showcase/component/ClubProfileCard/ClubProfileCard.style.ts b/src/page/showcase/component/ClubProfileCard/ClubProfileCard.style.ts
index ed9788ed8..c6e0fd5a0 100644
--- a/src/page/showcase/component/ClubProfileCard/ClubProfileCard.style.ts
+++ b/src/page/showcase/component/ClubProfileCard/ClubProfileCard.style.ts
@@ -21,14 +21,8 @@ export const descriptionStyle = css({
   padding: '1.6rem',
 });
 
-export const titleStyle = css({
-  ...theme.heading.heading06,
-});
-
 export const detailStyle = css({
   height: '3.4rem',
 
-  ...theme.text.body07,
-
   overflow: 'hidden',
 });
diff --git a/src/page/showcase/component/ClubProfileCard/ClubProfileCard.tsx b/src/page/showcase/component/ClubProfileCard/ClubProfileCard.tsx
index da3d38478..371a7b282 100644
--- a/src/page/showcase/component/ClubProfileCard/ClubProfileCard.tsx
+++ b/src/page/showcase/component/ClubProfileCard/ClubProfileCard.tsx
@@ -3,10 +3,11 @@ import {
   descriptionStyle,
   detailStyle,
   imageStyle,
-  titleStyle,
 } 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;
@@ -19,8 +20,10 @@ const ClubProfileCard = ({ title, detail, imageUrl }: ClubProfileCardProps) => {
     <article css={containerStyle}>
       <img src={imageUrl ? imageUrl : defaultImage} alt={`${title}-image`} css={imageStyle} />
       <div css={descriptionStyle}>
-        <p css={titleStyle}>{title}</p>
-        <p css={detailStyle}>{detail}</p>
+        <Heading tag="H6">{title}</Heading>
+        <Text tag="body7" css={detailStyle}>
+          {detail}
+        </Text>
       </div>
     </article>
   );

From bdbb0ad8a93d7c0efae1e893fbc48eb7b89e08d0 Mon Sep 17 00:00:00 2001
From: Jeongbowoon <happyanne200212@gmail/com>
Date: Tue, 9 Jul 2024 22:03:25 +0900
Subject: [PATCH 16/16] =?UTF-8?q?#47=20fix:=20=EC=A3=BC=EC=84=9D=20?=
 =?UTF-8?q?=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../showcase/component/ClubProfileCard/ClubProfileCard.style.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/page/showcase/component/ClubProfileCard/ClubProfileCard.style.ts b/src/page/showcase/component/ClubProfileCard/ClubProfileCard.style.ts
index c6e0fd5a0..0d5ec991b 100644
--- a/src/page/showcase/component/ClubProfileCard/ClubProfileCard.style.ts
+++ b/src/page/showcase/component/ClubProfileCard/ClubProfileCard.style.ts
@@ -1,7 +1,5 @@
 import { css } from '@emotion/react';
 
-import { theme } from '@/common/style/theme/theme';
-
 export const containerStyle = css({ width: '100%' });
 
 export const imageStyle = css({