From ccbf837eaa8a5d45534bd3929eae2303d0f66ec4 Mon Sep 17 00:00:00 2001
From: lydiacho <sheecho0804@ewhain.net>
Date: Sat, 1 Jun 2024 13:17:55 +0900
Subject: [PATCH 01/17] =?UTF-8?q?feat:=20Callout=20=EC=9E=91=EC=97=85=20?=
 =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/Callout/Callout.tsx  | 5 +++++
 packages/ui/Callout/index.tsx    | 1 +
 packages/ui/Callout/style.css.ts | 0
 3 files changed, 6 insertions(+)
 create mode 100644 packages/ui/Callout/Callout.tsx
 create mode 100644 packages/ui/Callout/index.tsx
 create mode 100644 packages/ui/Callout/style.css.ts

diff --git a/packages/ui/Callout/Callout.tsx b/packages/ui/Callout/Callout.tsx
new file mode 100644
index 0000000..7f2a146
--- /dev/null
+++ b/packages/ui/Callout/Callout.tsx
@@ -0,0 +1,5 @@
+function Callout() {
+  return <div>Callout</div>;
+}
+
+export default Callout;
diff --git a/packages/ui/Callout/index.tsx b/packages/ui/Callout/index.tsx
new file mode 100644
index 0000000..68a8991
--- /dev/null
+++ b/packages/ui/Callout/index.tsx
@@ -0,0 +1 @@
+export { default } from "./Callout";
diff --git a/packages/ui/Callout/style.css.ts b/packages/ui/Callout/style.css.ts
new file mode 100644
index 0000000..e69de29

From ab99352406a557c8fae250f5d7302ae820d00087 Mon Sep 17 00:00:00 2001
From: lydiacho <sheecho0804@ewhain.net>
Date: Mon, 3 Jun 2024 18:14:43 +0900
Subject: [PATCH 02/17] =?UTF-8?q?design:=20Callout=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B8=B0=EB=B3=B8=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/Callout/Callout.tsx  | 12 +++++++++++-
 packages/ui/Callout/style.css.ts | 30 ++++++++++++++++++++++++++++++
 2 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/packages/ui/Callout/Callout.tsx b/packages/ui/Callout/Callout.tsx
index 7f2a146..4b23b19 100644
--- a/packages/ui/Callout/Callout.tsx
+++ b/packages/ui/Callout/Callout.tsx
@@ -1,5 +1,15 @@
+import { IconAlertCircle, IconInfoCircle } from "@sopt-makers/icons";
+import { blueIcon, callout, redIcon, text, yellowIcon } from "./style.css";
+
 function Callout() {
-  return <div>Callout</div>;
+  return (
+    <aside className={callout}>
+      <IconAlertCircle className={redIcon} />
+      <IconInfoCircle className={blueIcon} />
+      <IconInfoCircle className={yellowIcon} />
+      <span className={text}>테스트 Text</span>
+    </aside>
+  );
 }
 
 export default Callout;
diff --git a/packages/ui/Callout/style.css.ts b/packages/ui/Callout/style.css.ts
index e69de29..b1d2c00 100644
--- a/packages/ui/Callout/style.css.ts
+++ b/packages/ui/Callout/style.css.ts
@@ -0,0 +1,30 @@
+import { style } from "@vanilla-extract/css";
+import theme from "../theme.css";
+
+export const callout = style({
+  display: "flex",
+  gap: "10px",
+  padding: "14px 18px",
+
+  border: `1px solid ${theme.colors.red600}`,
+  borderRadius: "10px",
+  backgroundColor: theme.colors.redAlpha100,
+});
+
+export const text = style({
+  ...theme.fontsObject.BODY_3_14_M,
+  color: theme.colors.gray30,
+});
+
+export const redIcon = style({
+  width: 20,
+  color: theme.colors.red500,
+});
+export const blueIcon = style({
+  width: 20,
+  color: theme.colors.blue500,
+});
+export const yellowIcon = style({
+  width: 20,
+  color: theme.colors.yellow600,
+});

From 4de935a9d19c411bdbf06f0deeb9d4b30f75cf99 Mon Sep 17 00:00:00 2001
From: lydiacho <sheecho0804@ewhain.net>
Date: Mon, 3 Jun 2024 19:48:20 +0900
Subject: [PATCH 03/17] =?UTF-8?q?feat:=20constants(=EC=BD=9C=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20=EC=83=89=EC=83=81=EB=B3=84=20=ED=83=80=EC=9E=85),?=
 =?UTF-8?q?=20types=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/Callout/constants.ts | 20 ++++++++++++++++++++
 packages/ui/Callout/types.ts     |  1 +
 2 files changed, 21 insertions(+)
 create mode 100644 packages/ui/Callout/constants.ts
 create mode 100644 packages/ui/Callout/types.ts

diff --git a/packages/ui/Callout/constants.ts b/packages/ui/Callout/constants.ts
new file mode 100644
index 0000000..4401681
--- /dev/null
+++ b/packages/ui/Callout/constants.ts
@@ -0,0 +1,20 @@
+import theme from "../theme.css";
+import type { CalloutType } from "./types";
+
+export const borderColors: Record<CalloutType, string> = {
+  danger: theme.colors.red600,
+  information: theme.colors.blueAlpha600,
+  warning: theme.colors.yellow600,
+};
+
+export const backgroundColor: Record<CalloutType, string> = {
+  danger: theme.colors.redAlpha100,
+  information: theme.colors.blueAlpha100,
+  warning: "rgba(255,194,52,0.1)",
+};
+
+export const iconColor: Record<CalloutType, string> = {
+  danger: theme.colors.red500,
+  information: theme.colors.blue500,
+  warning: theme.colors.yellow500,
+};
diff --git a/packages/ui/Callout/types.ts b/packages/ui/Callout/types.ts
new file mode 100644
index 0000000..887157f
--- /dev/null
+++ b/packages/ui/Callout/types.ts
@@ -0,0 +1 @@
+export type CalloutType = "danger" | "information" | "warning";

From 82b6b0c7517cf759394374788d6414649c04647d Mon Sep 17 00:00:00 2001
From: lydiacho <sheecho0804@ewhain.net>
Date: Mon, 3 Jun 2024 23:36:54 +0900
Subject: [PATCH 04/17] =?UTF-8?q?feat:=20Icon=20=ED=83=80=EC=9E=85?=
 =?UTF-8?q?=EB=B3=84=20=EC=A1=B0=EA=B1=B4=EB=B6=80=20=EB=A0=8C=EB=8D=94?=
 =?UTF-8?q?=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/Callout/Callout.tsx  | 32 +++++++++++++++++++++++++------
 packages/ui/Callout/constants.ts |  2 +-
 packages/ui/Callout/style.css.ts | 33 +++++++++++++++++++++-----------
 3 files changed, 49 insertions(+), 18 deletions(-)

diff --git a/packages/ui/Callout/Callout.tsx b/packages/ui/Callout/Callout.tsx
index 4b23b19..a45e488 100644
--- a/packages/ui/Callout/Callout.tsx
+++ b/packages/ui/Callout/Callout.tsx
@@ -1,13 +1,33 @@
 import { IconAlertCircle, IconInfoCircle } from "@sopt-makers/icons";
-import { blueIcon, callout, redIcon, text, yellowIcon } from "./style.css";
+import { callout, icon, sprinkles, text } from "./style.css";
+import type { CalloutType } from "./types";
+
+const icons = {
+  danger: IconAlertCircle,
+  information: IconInfoCircle,
+  warning: IconInfoCircle,
+};
+interface CalloutProps {
+  type: CalloutType;
+  isIcon?: boolean;
+}
+
+function Callout({ type, isIcon }: CalloutProps) {
+  const Icon = icons[type];
 
-function Callout() {
   return (
     <aside className={callout}>
-      <IconAlertCircle className={redIcon} />
-      <IconInfoCircle className={blueIcon} />
-      <IconInfoCircle className={yellowIcon} />
-      <span className={text}>테스트 Text</span>
+      {isIcon ? (
+        <Icon
+          className={`${icon} ${sprinkles({
+            color: type,
+          })}`}
+        />
+      ) : null}
+      <span className={text}>
+        테스트 Text 테스트 Text 테스트 Text 테스트 Text 테스트 Text 테스트 Text
+        테스트 Text 테스트 Text 테스트 Text 테스트 Text 테스트 Text 테스트 Text
+      </span>
     </aside>
   );
 }
diff --git a/packages/ui/Callout/constants.ts b/packages/ui/Callout/constants.ts
index 4401681..e573a2e 100644
--- a/packages/ui/Callout/constants.ts
+++ b/packages/ui/Callout/constants.ts
@@ -1,7 +1,7 @@
 import theme from "../theme.css";
 import type { CalloutType } from "./types";
 
-export const borderColors: Record<CalloutType, string> = {
+export const borderColor: Record<CalloutType, string> = {
   danger: theme.colors.red600,
   information: theme.colors.blueAlpha600,
   warning: theme.colors.yellow600,
diff --git a/packages/ui/Callout/style.css.ts b/packages/ui/Callout/style.css.ts
index b1d2c00..3fbd8cc 100644
--- a/packages/ui/Callout/style.css.ts
+++ b/packages/ui/Callout/style.css.ts
@@ -1,30 +1,41 @@
 import { style } from "@vanilla-extract/css";
+import { createSprinkles, defineProperties } from "@vanilla-extract/sprinkles";
 import theme from "../theme.css";
+import { backgroundColor, borderColor, iconColor } from "./constants";
 
+// sprinkles
+const calloutProperties = defineProperties({
+  properties: {
+    borderColor,
+    backgroundColor,
+  },
+});
+const iconProperties = defineProperties({
+  properties: {
+    color: iconColor,
+  },
+});
+export const sprinkles = createSprinkles(calloutProperties, iconProperties);
+
+// styles
 export const callout = style({
   display: "flex",
   gap: "10px",
+  alignItems: "flex-start",
   padding: "14px 18px",
 
-  border: `1px solid ${theme.colors.red600}`,
+  border: "1px solid",
+  borderColor: theme.colors.red600,
   borderRadius: "10px",
   backgroundColor: theme.colors.redAlpha100,
 });
 
 export const text = style({
+  textAlign: "left",
   ...theme.fontsObject.BODY_3_14_M,
   color: theme.colors.gray30,
 });
 
-export const redIcon = style({
-  width: 20,
-  color: theme.colors.red500,
-});
-export const blueIcon = style({
-  width: 20,
-  color: theme.colors.blue500,
-});
-export const yellowIcon = style({
+export const icon = style({
   width: 20,
-  color: theme.colors.yellow600,
 });

From 14dc3772a17856041f8d80965045510dce5dd2a4 Mon Sep 17 00:00:00 2001
From: lydiacho <sheecho0804@ewhain.net>
Date: Tue, 4 Jun 2024 00:03:47 +0900
Subject: [PATCH 05/17] =?UTF-8?q?feat:=20bd/border=20Color=20=EC=A1=B0?=
 =?UTF-8?q?=EA=B1=B4=EB=B6=80=20=EB=A0=8C=EB=8D=94=EB=A7=81=20-=20not=20wo?=
 =?UTF-8?q?rking?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/Callout/Callout.tsx  | 7 ++++++-
 packages/ui/Callout/style.css.ts | 2 --
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/ui/Callout/Callout.tsx b/packages/ui/Callout/Callout.tsx
index a45e488..798e4a3 100644
--- a/packages/ui/Callout/Callout.tsx
+++ b/packages/ui/Callout/Callout.tsx
@@ -16,7 +16,12 @@ function Callout({ type, isIcon }: CalloutProps) {
   const Icon = icons[type];
 
   return (
-    <aside className={callout}>
+    <aside
+      className={`${callout} ${sprinkles({
+        backgroundColor: type,
+        borderColor: type,
+      })}`}
+    >
       {isIcon ? (
         <Icon
           className={`${icon} ${sprinkles({
diff --git a/packages/ui/Callout/style.css.ts b/packages/ui/Callout/style.css.ts
index 3fbd8cc..74943d0 100644
--- a/packages/ui/Callout/style.css.ts
+++ b/packages/ui/Callout/style.css.ts
@@ -25,9 +25,7 @@ export const callout = style({
   padding: "14px 18px",
 
   border: "1px solid",
-  borderColor: theme.colors.red600,
   borderRadius: "10px",
-  backgroundColor: theme.colors.redAlpha100,
 });
 
 export const text = style({

From 25995abe75f985cb5d3641ef49fa1a3165ab7e57 Mon Sep 17 00:00:00 2001
From: lydiacho <sheecho0804@ewhain.net>
Date: Tue, 4 Jun 2024 00:26:47 +0900
Subject: [PATCH 06/17] =?UTF-8?q?feat:=20sprinkles=20->=20styleVariants=20?=
 =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/Callout/Callout.tsx  | 17 ++------
 packages/ui/Callout/style.css.ts | 75 +++++++++++++++++++++++++-------
 2 files changed, 63 insertions(+), 29 deletions(-)

diff --git a/packages/ui/Callout/Callout.tsx b/packages/ui/Callout/Callout.tsx
index 798e4a3..b63b3cd 100644
--- a/packages/ui/Callout/Callout.tsx
+++ b/packages/ui/Callout/Callout.tsx
@@ -1,5 +1,5 @@
 import { IconAlertCircle, IconInfoCircle } from "@sopt-makers/icons";
-import { callout, icon, sprinkles, text } from "./style.css";
+import { calloutVariant, iconVariant, text } from "./style.css";
 import type { CalloutType } from "./types";
 
 const icons = {
@@ -16,19 +16,8 @@ function Callout({ type, isIcon }: CalloutProps) {
   const Icon = icons[type];
 
   return (
-    <aside
-      className={`${callout} ${sprinkles({
-        backgroundColor: type,
-        borderColor: type,
-      })}`}
-    >
-      {isIcon ? (
-        <Icon
-          className={`${icon} ${sprinkles({
-            color: type,
-          })}`}
-        />
-      ) : null}
+    <aside className={calloutVariant[type]}>
+      {isIcon ? <Icon className={iconVariant[type]} /> : null}
       <span className={text}>
         테스트 Text 테스트 Text 테스트 Text 테스트 Text 테스트 Text 테스트 Text
         테스트 Text 테스트 Text 테스트 Text 테스트 Text 테스트 Text 테스트 Text
diff --git a/packages/ui/Callout/style.css.ts b/packages/ui/Callout/style.css.ts
index 74943d0..f5287d1 100644
--- a/packages/ui/Callout/style.css.ts
+++ b/packages/ui/Callout/style.css.ts
@@ -1,21 +1,21 @@
-import { style } from "@vanilla-extract/css";
-import { createSprinkles, defineProperties } from "@vanilla-extract/sprinkles";
+import { style, styleVariants } from "@vanilla-extract/css";
+// import { createSprinkles, defineProperties } from "@vanilla-extract/sprinkles";
 import theme from "../theme.css";
-import { backgroundColor, borderColor, iconColor } from "./constants";
+// import { backgroundColor, borderColor, iconColor } from "./constants";
 
 // sprinkles
-const calloutProperties = defineProperties({
-  properties: {
-    borderColor,
-    backgroundColor,
-  },
-});
-const iconProperties = defineProperties({
-  properties: {
-    color: iconColor,
-  },
-});
-export const sprinkles = createSprinkles(calloutProperties, iconProperties);
+// const calloutProperties = defineProperties({
+//   properties: {
+//     borderColor,
+//     backgroundColor,
+//   },
+// });
+// const iconProperties = defineProperties({
+//   properties: {
+//     color: iconColor,
+//   },
+// });
+// export const sprinkles = createSprinkles(calloutProperties, iconProperties);
 
 // styles
 export const callout = style({
@@ -37,3 +37,48 @@ export const text = style({
 export const icon = style({
   width: 20,
 });
+
+export const iconVariant = styleVariants({
+  danger: [
+    icon,
+    {
+      color: theme.colors.red500,
+    },
+  ],
+  information: [
+    icon,
+    {
+      color: theme.colors.blue500,
+    },
+  ],
+  warning: [
+    icon,
+    {
+      color: theme.colors.yellow500,
+    },
+  ],
+});
+
+export const calloutVariant = styleVariants({
+  danger: [
+    callout,
+    {
+      backgroundColor: theme.colors.redAlpha100,
+      borderColor: theme.colors.red600,
+    },
+  ],
+  information: [
+    callout,
+    {
+      backgroundColor: theme.colors.blueAlpha100,
+      borderColor: theme.colors.blueAlpha600,
+    },
+  ],
+  warning: [
+    callout,
+    {
+      backgroundColor: "rgba(255, 194, 52, 0.1)",
+      borderColor: theme.colors.yellow600,
+    },
+  ],
+});

From 3128be2672070ee5a010ee200ce540994cf79542 Mon Sep 17 00:00:00 2001
From: lydiacho <sheecho0804@ewhain.net>
Date: Tue, 4 Jun 2024 00:55:46 +0900
Subject: [PATCH 07/17] =?UTF-8?q?design:=20button=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/Callout/Callout.tsx  | 30 ++++++++++++++++-----
 packages/ui/Callout/style.css.ts | 46 ++++++++++++++++++++++++++++++++
 2 files changed, 70 insertions(+), 6 deletions(-)

diff --git a/packages/ui/Callout/Callout.tsx b/packages/ui/Callout/Callout.tsx
index b63b3cd..606377d 100644
--- a/packages/ui/Callout/Callout.tsx
+++ b/packages/ui/Callout/Callout.tsx
@@ -1,5 +1,16 @@
-import { IconAlertCircle, IconInfoCircle } from "@sopt-makers/icons";
-import { calloutVariant, iconVariant, text } from "./style.css";
+import {
+  IconAlertCircle,
+  IconChevronRight,
+  IconInfoCircle,
+} from "@sopt-makers/icons";
+import {
+  buttonIcon,
+  buttonVariant,
+  calloutVariant,
+  container,
+  iconVariant,
+  text,
+} from "./style.css";
 import type { CalloutType } from "./types";
 
 const icons = {
@@ -18,10 +29,17 @@ function Callout({ type, isIcon }: CalloutProps) {
   return (
     <aside className={calloutVariant[type]}>
       {isIcon ? <Icon className={iconVariant[type]} /> : null}
-      <span className={text}>
-        테스트 Text 테스트 Text 테스트 Text 테스트 Text 테스트 Text 테스트 Text
-        테스트 Text 테스트 Text 테스트 Text 테스트 Text 테스트 Text 테스트 Text
-      </span>
+      <div className={container}>
+        <span className={text}>
+          테스트 Text 테스트 Text 테스트 Text 테스트 Text 테스트 Text 테스트
+          Text 테스트 Text 테스트 Text 테스트 Text 테스트 Text 테스트 Text
+          테스트 Text
+        </span>
+        <button className={buttonVariant[type]} type="button">
+          <span>Button</span>
+          <IconChevronRight className={buttonIcon} />
+        </button>
+      </div>
     </aside>
   );
 }
diff --git a/packages/ui/Callout/style.css.ts b/packages/ui/Callout/style.css.ts
index f5287d1..03465bc 100644
--- a/packages/ui/Callout/style.css.ts
+++ b/packages/ui/Callout/style.css.ts
@@ -82,3 +82,49 @@ export const calloutVariant = styleVariants({
     },
   ],
 });
+
+export const container = style({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "flex-start",
+  gap: 18,
+});
+export const button = style({
+  display: "flex",
+  gap: 4,
+  padding: "9px 14px",
+  alignItems: "center",
+
+  border: 0,
+  borderRadius: 8,
+
+  ...theme.fontsObject.LABEL_3_14_SB,
+  color: theme.colors.white,
+
+  cursor: "pointer",
+});
+export const buttonVariant = styleVariants({
+  danger: [
+    button,
+    {
+      backgroundColor: theme.colors.red800,
+    },
+  ],
+  information: [
+    button,
+    {
+      backgroundColor: theme.colors.blue800,
+    },
+  ],
+  warning: [
+    button,
+    {
+      backgroundColor: theme.colors.yellow800,
+    },
+  ],
+});
+
+export const buttonIcon = style({
+  width: 16,
+  color: theme.colors.white,
+});

From 0eacbd95e60efe1e05e015c21c6df22bb8d3d6c7 Mon Sep 17 00:00:00 2001
From: lydiacho <sheecho0804@ewhain.net>
Date: Tue, 4 Jun 2024 01:09:45 +0900
Subject: [PATCH 08/17] =?UTF-8?q?feat:=20content=20=EB=B0=8F=20button=20?=
 =?UTF-8?q?=EA=B4=80=EB=A0=A8=20props=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/Callout/Callout.tsx  | 20 ++++++++++----------
 packages/ui/Callout/style.css.ts |  1 +
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/ui/Callout/Callout.tsx b/packages/ui/Callout/Callout.tsx
index 606377d..f0e1d77 100644
--- a/packages/ui/Callout/Callout.tsx
+++ b/packages/ui/Callout/Callout.tsx
@@ -19,24 +19,24 @@ const icons = {
   warning: IconInfoCircle,
 };
 interface CalloutProps {
+  content: string;
   type: CalloutType;
-  isIcon?: boolean;
+  hasIcon?: boolean;
+  buttonLabel?: string;
+  onClick?: () => void;
 }
 
-function Callout({ type, isIcon }: CalloutProps) {
+function Callout(props: CalloutProps) {
+  const { content, type, hasIcon, buttonLabel, onClick } = props;
   const Icon = icons[type];
 
   return (
     <aside className={calloutVariant[type]}>
-      {isIcon ? <Icon className={iconVariant[type]} /> : null}
+      {hasIcon ? <Icon className={iconVariant[type]} /> : null}
       <div className={container}>
-        <span className={text}>
-          테스트 Text 테스트 Text 테스트 Text 테스트 Text 테스트 Text 테스트
-          Text 테스트 Text 테스트 Text 테스트 Text 테스트 Text 테스트 Text
-          테스트 Text
-        </span>
-        <button className={buttonVariant[type]} type="button">
-          <span>Button</span>
+        <span className={text}>{content}</span>
+        <button className={buttonVariant[type]} onClick={onClick} type="button">
+          <span>{buttonLabel}</span>
           <IconChevronRight className={buttonIcon} />
         </button>
       </div>
diff --git a/packages/ui/Callout/style.css.ts b/packages/ui/Callout/style.css.ts
index 03465bc..1589fc7 100644
--- a/packages/ui/Callout/style.css.ts
+++ b/packages/ui/Callout/style.css.ts
@@ -35,6 +35,7 @@ export const text = style({
 });
 
 export const icon = style({
+  flexShrink: 0,
   width: 20,
 });
 

From 87b403086a79f63cbd0082aa27063be94e3444ca Mon Sep 17 00:00:00 2001
From: lydiacho <sheecho0804@ewhain.net>
Date: Tue, 4 Jun 2024 02:17:44 +0900
Subject: [PATCH 09/17] =?UTF-8?q?feat:=20=EC=A1=B0=EA=B1=B4=EB=B6=80=20?=
 =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A7=81=20styleVariants=EB=A1=9C?=
 =?UTF-8?q?=20=ED=86=B5=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/Callout/style.css.ts | 159 ++++++++++++-------------------
 1 file changed, 63 insertions(+), 96 deletions(-)

diff --git a/packages/ui/Callout/style.css.ts b/packages/ui/Callout/style.css.ts
index 1589fc7..b657541 100644
--- a/packages/ui/Callout/style.css.ts
+++ b/packages/ui/Callout/style.css.ts
@@ -1,31 +1,11 @@
 import { style, styleVariants } from "@vanilla-extract/css";
-// import { createSprinkles, defineProperties } from "@vanilla-extract/sprinkles";
 import theme from "../theme.css";
-// import { backgroundColor, borderColor, iconColor } from "./constants";
-
-// sprinkles
-// const calloutProperties = defineProperties({
-//   properties: {
-//     borderColor,
-//     backgroundColor,
-//   },
-// });
-// const iconProperties = defineProperties({
-//   properties: {
-//     color: iconColor,
-//   },
-// });
-// export const sprinkles = createSprinkles(calloutProperties, iconProperties);
-
-// styles
-export const callout = style({
+
+export const container = style({
   display: "flex",
-  gap: "10px",
+  flexDirection: "column",
   alignItems: "flex-start",
-  padding: "14px 18px",
-
-  border: "1px solid",
-  borderRadius: "10px",
+  gap: 18,
 });
 
 export const text = style({
@@ -34,63 +14,64 @@ export const text = style({
   color: theme.colors.gray30,
 });
 
-export const icon = style({
+export const buttonIcon = style({
+  width: 16,
+  color: theme.colors.white,
+});
+
+// ▶️ icon styleVariants
+const iconBase = style({
   flexShrink: 0,
   width: 20,
 });
 
-export const iconVariant = styleVariants({
-  danger: [
-    icon,
-    {
-      color: theme.colors.red500,
-    },
-  ],
-  information: [
-    icon,
-    {
-      color: theme.colors.blue500,
-    },
-  ],
-  warning: [
-    icon,
-    {
-      color: theme.colors.yellow500,
-    },
-  ],
-});
+const iconColors = {
+  danger: theme.colors.red500,
+  information: theme.colors.blue500,
+  warning: theme.colors.yellow500,
+};
 
-export const calloutVariant = styleVariants({
-  danger: [
-    callout,
-    {
-      backgroundColor: theme.colors.redAlpha100,
-      borderColor: theme.colors.red600,
-    },
-  ],
-  information: [
-    callout,
-    {
-      backgroundColor: theme.colors.blueAlpha100,
-      borderColor: theme.colors.blueAlpha600,
-    },
-  ],
-  warning: [
-    callout,
-    {
-      backgroundColor: "rgba(255, 194, 52, 0.1)",
-      borderColor: theme.colors.yellow600,
-    },
-  ],
-});
+export const iconVariant = styleVariants(iconColors, (color) => [
+  iconBase,
+  { color },
+]);
 
-export const container = style({
+// ▶️ callout styleVariants
+const calloutBase = style({
   display: "flex",
-  flexDirection: "column",
+  gap: "10px",
   alignItems: "flex-start",
-  gap: 18,
+  padding: "14px 18px",
+
+  border: "1px solid",
+  borderRadius: "10px",
 });
-export const button = style({
+
+const calloutColors = {
+  danger: {
+    backgroundColor: theme.colors.redAlpha100,
+    borderColor: theme.colors.red600,
+  },
+  information: {
+    backgroundColor: theme.colors.blueAlpha100,
+    borderColor: theme.colors.blueAlpha600,
+  },
+  warning: {
+    backgroundColor: "rgba(255, 194, 52, 0.1)",
+    borderColor: theme.colors.yellow600,
+  },
+};
+
+export const calloutVariant = styleVariants(
+  calloutColors,
+  ({ backgroundColor, borderColor }) => [
+    calloutBase,
+    { backgroundColor, borderColor },
+  ]
+);
+
+// ▶️ button styleVariants
+const buttonBase = style({
   display: "flex",
   gap: 4,
   padding: "9px 14px",
@@ -104,28 +85,14 @@ export const button = style({
 
   cursor: "pointer",
 });
-export const buttonVariant = styleVariants({
-  danger: [
-    button,
-    {
-      backgroundColor: theme.colors.red800,
-    },
-  ],
-  information: [
-    button,
-    {
-      backgroundColor: theme.colors.blue800,
-    },
-  ],
-  warning: [
-    button,
-    {
-      backgroundColor: theme.colors.yellow800,
-    },
-  ],
-});
 
-export const buttonIcon = style({
-  width: 16,
-  color: theme.colors.white,
-});
+const buttonColors = {
+  danger: theme.colors.red800,
+  information: theme.colors.blue800,
+  warning: theme.colors.yellow800,
+};
+
+export const buttonVariant = styleVariants(buttonColors, (backgroundColor) => [
+  buttonBase,
+  { backgroundColor },
+]);

From eaef7c7eeb0d11e778c2e6c0b6e59ad9b1d71a7d Mon Sep 17 00:00:00 2001
From: lydiacho <sheecho0804@ewhain.net>
Date: Tue, 4 Jun 2024 02:24:05 +0900
Subject: [PATCH 10/17] =?UTF-8?q?feat:=20variant=EC=9A=A9=20Colors=20?=
 =?UTF-8?q?=EA=B0=9D=EC=B2=B4=20constants=EB=A1=9C=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/Callout/constants.ts | 34 +++++++++++++++++++++-----------
 packages/ui/Callout/style.css.ts | 28 +-------------------------
 2 files changed, 23 insertions(+), 39 deletions(-)

diff --git a/packages/ui/Callout/constants.ts b/packages/ui/Callout/constants.ts
index e573a2e..5976187 100644
--- a/packages/ui/Callout/constants.ts
+++ b/packages/ui/Callout/constants.ts
@@ -1,20 +1,30 @@
+import type { CSSProperties } from "react";
 import theme from "../theme.css";
 import type { CalloutType } from "./types";
 
-export const borderColor: Record<CalloutType, string> = {
-  danger: theme.colors.red600,
-  information: theme.colors.blueAlpha600,
-  warning: theme.colors.yellow600,
+export const iconColors: Record<CalloutType, string> = {
+  danger: theme.colors.red500,
+  information: theme.colors.blue500,
+  warning: theme.colors.yellow500,
 };
 
-export const backgroundColor: Record<CalloutType, string> = {
-  danger: theme.colors.redAlpha100,
-  information: theme.colors.blueAlpha100,
-  warning: "rgba(255,194,52,0.1)",
+export const calloutColors: Record<CalloutType, CSSProperties> = {
+  danger: {
+    backgroundColor: theme.colors.redAlpha100,
+    borderColor: theme.colors.red600,
+  },
+  information: {
+    backgroundColor: theme.colors.blueAlpha100,
+    borderColor: theme.colors.blueAlpha600,
+  },
+  warning: {
+    backgroundColor: "rgba(255, 194, 52, 0.1)",
+    borderColor: theme.colors.yellow600,
+  },
 };
 
-export const iconColor: Record<CalloutType, string> = {
-  danger: theme.colors.red500,
-  information: theme.colors.blue500,
-  warning: theme.colors.yellow500,
+export const buttonColors: Record<CalloutType, string> = {
+  danger: theme.colors.red800,
+  information: theme.colors.blue800,
+  warning: theme.colors.yellow800,
 };
diff --git a/packages/ui/Callout/style.css.ts b/packages/ui/Callout/style.css.ts
index b657541..a390bee 100644
--- a/packages/ui/Callout/style.css.ts
+++ b/packages/ui/Callout/style.css.ts
@@ -1,5 +1,6 @@
 import { style, styleVariants } from "@vanilla-extract/css";
 import theme from "../theme.css";
+import { buttonColors, calloutColors, iconColors } from "./constants";
 
 export const container = style({
   display: "flex",
@@ -25,12 +26,6 @@ const iconBase = style({
   width: 20,
 });
 
-const iconColors = {
-  danger: theme.colors.red500,
-  information: theme.colors.blue500,
-  warning: theme.colors.yellow500,
-};
-
 export const iconVariant = styleVariants(iconColors, (color) => [
   iconBase,
   { color },
@@ -47,21 +42,6 @@ const calloutBase = style({
   borderRadius: "10px",
 });
 
-const calloutColors = {
-  danger: {
-    backgroundColor: theme.colors.redAlpha100,
-    borderColor: theme.colors.red600,
-  },
-  information: {
-    backgroundColor: theme.colors.blueAlpha100,
-    borderColor: theme.colors.blueAlpha600,
-  },
-  warning: {
-    backgroundColor: "rgba(255, 194, 52, 0.1)",
-    borderColor: theme.colors.yellow600,
-  },
-};
-
 export const calloutVariant = styleVariants(
   calloutColors,
   ({ backgroundColor, borderColor }) => [
@@ -86,12 +66,6 @@ const buttonBase = style({
   cursor: "pointer",
 });
 
-const buttonColors = {
-  danger: theme.colors.red800,
-  information: theme.colors.blue800,
-  warning: theme.colors.yellow800,
-};
-
 export const buttonVariant = styleVariants(buttonColors, (backgroundColor) => [
   buttonBase,
   { backgroundColor },

From 41c8416e3dd1d48b481c15458e4688b6b3557e07 Mon Sep 17 00:00:00 2001
From: lydiacho <sheecho0804@ewhain.net>
Date: Tue, 4 Jun 2024 11:59:45 +0900
Subject: [PATCH 11/17] =?UTF-8?q?fix:=20icon=20=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?=EB=B0=8F=20button=20=EC=A1=B0=EA=B1=B4=EB=B6=80=20=EB=A0=8C?=
 =?UTF-8?q?=EB=8D=94=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/Callout/Callout.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/ui/Callout/Callout.tsx b/packages/ui/Callout/Callout.tsx
index f0e1d77..339b0b2 100644
--- a/packages/ui/Callout/Callout.tsx
+++ b/packages/ui/Callout/Callout.tsx
@@ -16,7 +16,7 @@ import type { CalloutType } from "./types";
 const icons = {
   danger: IconAlertCircle,
   information: IconInfoCircle,
-  warning: IconInfoCircle,
+  warning: IconAlertCircle,
 };
 interface CalloutProps {
   content: string;
@@ -35,10 +35,16 @@ function Callout(props: CalloutProps) {
       {hasIcon ? <Icon className={iconVariant[type]} /> : null}
       <div className={container}>
         <span className={text}>{content}</span>
-        <button className={buttonVariant[type]} onClick={onClick} type="button">
-          <span>{buttonLabel}</span>
-          <IconChevronRight className={buttonIcon} />
-        </button>
+        {buttonLabel ? (
+          <button
+            className={buttonVariant[type]}
+            onClick={onClick}
+            type="button"
+          >
+            <span>{buttonLabel}</span>
+            <IconChevronRight className={buttonIcon} />
+          </button>
+        ) : null}
       </div>
     </aside>
   );

From 58965449cb70cefaed35b3dbcc8a68a09e620b1d Mon Sep 17 00:00:00 2001
From: lydiacho <sheecho0804@ewhain.net>
Date: Wed, 5 Jun 2024 12:19:16 +0900
Subject: [PATCH 12/17] =?UTF-8?q?feat:=20Callout=20=20=ED=95=98=EB=8B=A8?=
 =?UTF-8?q?=20Button=20=EC=B6=94=EA=B0=80=20=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/Callout/Callout.tsx  |  9 +++--
 packages/ui/Callout/constants.ts |  6 ---
 packages/ui/Callout/style.css.ts | 66 +++++++++++++++++++++-----------
 3 files changed, 49 insertions(+), 32 deletions(-)

diff --git a/packages/ui/Callout/Callout.tsx b/packages/ui/Callout/Callout.tsx
index 339b0b2..de5bd65 100644
--- a/packages/ui/Callout/Callout.tsx
+++ b/packages/ui/Callout/Callout.tsx
@@ -5,7 +5,7 @@ import {
 } from "@sopt-makers/icons";
 import {
   buttonIcon,
-  buttonVariant,
+  button,
   calloutVariant,
   container,
   iconVariant,
@@ -23,11 +23,13 @@ interface CalloutProps {
   type: CalloutType;
   hasIcon?: boolean;
   buttonLabel?: string;
+  isButtonDisabled?: boolean;
   onClick?: () => void;
 }
 
 function Callout(props: CalloutProps) {
-  const { content, type, hasIcon, buttonLabel, onClick } = props;
+  const { content, type, hasIcon, buttonLabel, isButtonDisabled, onClick } =
+    props;
   const Icon = icons[type];
 
   return (
@@ -37,7 +39,8 @@ function Callout(props: CalloutProps) {
         <span className={text}>{content}</span>
         {buttonLabel ? (
           <button
-            className={buttonVariant[type]}
+            className={button}
+            disabled={isButtonDisabled}
             onClick={onClick}
             type="button"
           >
diff --git a/packages/ui/Callout/constants.ts b/packages/ui/Callout/constants.ts
index 5976187..6c640b4 100644
--- a/packages/ui/Callout/constants.ts
+++ b/packages/ui/Callout/constants.ts
@@ -22,9 +22,3 @@ export const calloutColors: Record<CalloutType, CSSProperties> = {
     borderColor: theme.colors.yellow600,
   },
 };
-
-export const buttonColors: Record<CalloutType, string> = {
-  danger: theme.colors.red800,
-  information: theme.colors.blue800,
-  warning: theme.colors.yellow800,
-};
diff --git a/packages/ui/Callout/style.css.ts b/packages/ui/Callout/style.css.ts
index a390bee..1ca16e2 100644
--- a/packages/ui/Callout/style.css.ts
+++ b/packages/ui/Callout/style.css.ts
@@ -1,6 +1,6 @@
 import { style, styleVariants } from "@vanilla-extract/css";
 import theme from "../theme.css";
-import { buttonColors, calloutColors, iconColors } from "./constants";
+import { calloutColors, iconColors } from "./constants";
 
 export const container = style({
   display: "flex",
@@ -15,9 +15,50 @@ export const text = style({
   color: theme.colors.gray30,
 });
 
+export const button = style({
+  display: "flex",
+  alignItems: "center",
+
+  paddingBottom: 4,
+
+  borderWidth: "0px 0px 0.8px 0px",
+  borderStyle: "solid",
+  borderColor: "transparent",
+  backgroundColor: "transparent",
+
+  cursor: "pointer",
+  color: theme.colors.gray30,
+  ...theme.fontsObject.LABEL_4_12_SB,
+
+  ":hover": {
+    color: theme.colors.gray50,
+    borderColor: theme.colors.gray50,
+  },
+  ":active": {
+    color: theme.colors.gray100,
+    borderColor: theme.colors.gray100,
+  },
+  ":disabled": {
+    color: theme.colors.gray500,
+    borderColor: "transparent",
+    cursor: "default",
+  },
+});
+
 export const buttonIcon = style({
   width: 16,
-  color: theme.colors.white,
+  color: theme.colors.gray30,
+  selectors: {
+    [`${button}:hover &`]: {
+      color: theme.colors.gray50,
+    },
+    [`${button}:active &`]: {
+      color: theme.colors.gray100,
+    },
+    [`${button}:disabled &`]: {
+      color: theme.colors.gray500,
+    },
+  },
 });
 
 // ▶️ icon styleVariants
@@ -49,24 +90,3 @@ export const calloutVariant = styleVariants(
     { backgroundColor, borderColor },
   ]
 );
-
-// ▶️ button styleVariants
-const buttonBase = style({
-  display: "flex",
-  gap: 4,
-  padding: "9px 14px",
-  alignItems: "center",
-
-  border: 0,
-  borderRadius: 8,
-
-  ...theme.fontsObject.LABEL_3_14_SB,
-  color: theme.colors.white,
-
-  cursor: "pointer",
-});
-
-export const buttonVariant = styleVariants(buttonColors, (backgroundColor) => [
-  buttonBase,
-  { backgroundColor },
-]);

From 0c9a5894f9c3447ad82d14926e31615b43180875 Mon Sep 17 00:00:00 2001
From: lydiacho <sheecho0804@ewhain.net>
Date: Wed, 5 Jun 2024 12:21:00 +0900
Subject: [PATCH 13/17] =?UTF-8?q?fix:=20content=20prop=20->=20children=20p?=
 =?UTF-8?q?rop=EC=9C=BC=EB=A1=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/Callout/Callout.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/ui/Callout/Callout.tsx b/packages/ui/Callout/Callout.tsx
index de5bd65..2c77980 100644
--- a/packages/ui/Callout/Callout.tsx
+++ b/packages/ui/Callout/Callout.tsx
@@ -3,6 +3,7 @@ import {
   IconChevronRight,
   IconInfoCircle,
 } from "@sopt-makers/icons";
+import type { ReactNode } from "react";
 import {
   buttonIcon,
   button,
@@ -19,7 +20,7 @@ const icons = {
   warning: IconAlertCircle,
 };
 interface CalloutProps {
-  content: string;
+  children: ReactNode;
   type: CalloutType;
   hasIcon?: boolean;
   buttonLabel?: string;
@@ -28,7 +29,7 @@ interface CalloutProps {
 }
 
 function Callout(props: CalloutProps) {
-  const { content, type, hasIcon, buttonLabel, isButtonDisabled, onClick } =
+  const { children, type, hasIcon, buttonLabel, isButtonDisabled, onClick } =
     props;
   const Icon = icons[type];
 
@@ -36,7 +37,7 @@ function Callout(props: CalloutProps) {
     <aside className={calloutVariant[type]}>
       {hasIcon ? <Icon className={iconVariant[type]} /> : null}
       <div className={container}>
-        <span className={text}>{content}</span>
+        <span className={text}>{children}</span>
         {buttonLabel ? (
           <button
             className={button}

From b2f2210c941040f1bbdf0016da71ea9c5459199a Mon Sep 17 00:00:00 2001
From: lydiacho <sheecho0804@ewhain.net>
Date: Sun, 9 Jun 2024 13:53:51 +0900
Subject: [PATCH 14/17] =?UTF-8?q?fix:=20=EB=8B=A8=EC=9D=BC=20=ED=94=BD?=
 =?UTF-8?q?=EC=85=80=EA=B0=92=EC=9D=98=20=EB=8B=A8=EC=9C=84=20=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/Callout/style.css.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/Callout/style.css.ts b/packages/ui/Callout/style.css.ts
index 1ca16e2..613009a 100644
--- a/packages/ui/Callout/style.css.ts
+++ b/packages/ui/Callout/style.css.ts
@@ -75,12 +75,12 @@ export const iconVariant = styleVariants(iconColors, (color) => [
 // ▶️ callout styleVariants
 const calloutBase = style({
   display: "flex",
-  gap: "10px",
+  gap: 10,
   alignItems: "flex-start",
   padding: "14px 18px",
 
   border: "1px solid",
-  borderRadius: "10px",
+  borderRadius: 10,
 });
 
 export const calloutVariant = styleVariants(

From a04252dcd0baa6a4284ebc90bb9850810540a810 Mon Sep 17 00:00:00 2001
From: lydiacho <sheecho0804@ewhain.net>
Date: Mon, 10 Jun 2024 00:13:09 +0900
Subject: [PATCH 15/17] =?UTF-8?q?feat:=20button=20=EB=A0=8C=EB=8D=94?=
 =?UTF-8?q?=EB=A7=81=20=EC=A1=B0=EA=B1=B4=EC=97=90=20hasIcon=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

---
 packages/ui/Callout/Callout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/Callout/Callout.tsx b/packages/ui/Callout/Callout.tsx
index 2c77980..b2f10cb 100644
--- a/packages/ui/Callout/Callout.tsx
+++ b/packages/ui/Callout/Callout.tsx
@@ -38,7 +38,7 @@ function Callout(props: CalloutProps) {
       {hasIcon ? <Icon className={iconVariant[type]} /> : null}
       <div className={container}>
         <span className={text}>{children}</span>
-        {buttonLabel ? (
+        {hasIcon && buttonLabel ? (
           <button
             className={button}
             disabled={isButtonDisabled}

From 46b7ae8baebae5b79cff0380f60abb0d36da19aa Mon Sep 17 00:00:00 2001
From: lydiacho <sheecho0804@ewhain.net>
Date: Mon, 10 Jun 2024 15:47:55 +0900
Subject: [PATCH 16/17] =?UTF-8?q?fix:=20buttonLabel=20=EC=A1=B4=EC=9E=AC?=
 =?UTF-8?q?=20=EC=8B=9C=20=ED=95=AD=EC=83=81=20icon=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/Callout/Callout.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/Callout/Callout.tsx b/packages/ui/Callout/Callout.tsx
index b2f10cb..fc75d7d 100644
--- a/packages/ui/Callout/Callout.tsx
+++ b/packages/ui/Callout/Callout.tsx
@@ -35,10 +35,10 @@ function Callout(props: CalloutProps) {
 
   return (
     <aside className={calloutVariant[type]}>
-      {hasIcon ? <Icon className={iconVariant[type]} /> : null}
+      {buttonLabel || hasIcon ? <Icon className={iconVariant[type]} /> : null}
       <div className={container}>
         <span className={text}>{children}</span>
-        {hasIcon && buttonLabel ? (
+        {buttonLabel ? (
           <button
             className={button}
             disabled={isButtonDisabled}

From 77bc170cc9b5279853f55d9d29790810dd03e56d Mon Sep 17 00:00:00 2001
From: lydiacho <sheecho0804@ewhain.net>
Date: Mon, 10 Jun 2024 17:09:32 +0900
Subject: [PATCH 17/17] =?UTF-8?q?docs:=20Callout=20storybook=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/docs/src/stories/Callout.stories.tsx | 70 +++++++++++++++++++++++
 packages/ui/index.ts                      |  3 +-
 2 files changed, 72 insertions(+), 1 deletion(-)
 create mode 100644 apps/docs/src/stories/Callout.stories.tsx

diff --git a/apps/docs/src/stories/Callout.stories.tsx b/apps/docs/src/stories/Callout.stories.tsx
new file mode 100644
index 0000000..39a6d0d
--- /dev/null
+++ b/apps/docs/src/stories/Callout.stories.tsx
@@ -0,0 +1,70 @@
+import { Callout } from "@sopt-makers/ui";
+import { Meta, StoryObj } from "@storybook/react";
+
+interface CalloutProps {
+  children: React.ReactNode;
+  type: "danger" | "information" | "warning";
+  hasIcon?: boolean;
+  buttonLabel?: string;
+  isButtonDisabled?: boolean;
+  onClick?: () => void;
+}
+
+export default {
+  title: "Components/Callout",
+  component: Callout,
+  tags: ["autodocs"],
+} as Meta<CalloutProps>;
+
+// danger 콜아웃 스토리
+export const Danger: StoryObj<CalloutProps> = {
+  args: {
+    children: "hasIcon 옵션으로 통해 아이콘을 표시할 수 있어요",
+    type: "danger",
+    hasIcon: false,
+  },
+};
+// information 콜아웃 스토리
+export const Information: StoryObj<CalloutProps> = {
+  args: {
+    children: "hasIcon 옵션으로 통해 아이콘을 표시할 수 있어요",
+    type: "information",
+    hasIcon: false,
+  },
+};
+// warning 콜아웃 스토리
+export const Warning: StoryObj<CalloutProps> = {
+  args: {
+    children: "hasIcon 옵션으로 통해 아이콘을 표시할 수 있어요",
+    type: "warning",
+    hasIcon: false,
+  },
+};
+
+// warning+icon+button 콜아웃 스토리
+export const CalloutWithBtn: StoryObj<CalloutProps> = {
+  args: {
+    children: (
+      <>
+        버튼이 있는 경우 hasIcon과 무관하게 아이콘이 항상 표시돼요. <br />
+        isButtonDisabled 옵션으로 disabled state를 확인해보세요.
+      </>
+    ),
+    type: "warning",
+    hasIcon: true,
+    buttonLabel: "hover, press 해보세요!",
+    isButtonDisabled: false,
+  },
+};
+
+// 여러줄 텍스트 콜아웃 스토리
+export const CalloutWithLongText: StoryObj<CalloutProps> = {
+  args: {
+    children:
+      "Facebook 정책이 변경되어, 앞으로 Facebook 로그인이 불가해요. 다른 계정으로 재설정 부탁드려요. Facebook 정책이 변경되어, 앞으로 Facebook 로그인이 불가해요. 다른 계정으로 재설정 부탁드려요.",
+    type: "information",
+    hasIcon: true,
+    buttonLabel: "소셜 계정 재설정하기",
+    isButtonDisabled: false,
+  },
+};
diff --git a/packages/ui/index.ts b/packages/ui/index.ts
index 8cd806e..89aa89e 100644
--- a/packages/ui/index.ts
+++ b/packages/ui/index.ts
@@ -7,7 +7,8 @@ export { Dialog, DialogContext, DialogProvider, useDialog } from "./Dialog";
 export type { DialogOptionType } from "./Dialog";
 export { ToastProvider, useToast, Toast } from "./Toast";
 export type { ToastOptionType } from "./Toast";
-export { TextField, TextArea, SearchField } from './Input';
+export { TextField, TextArea, SearchField } from "./Input";
+export { default as Callout } from "./Callout";
 
 // test component
 export { default as Test } from "./Test";