From 759da29f5251fba543d5629275ceee6d7bd13d89 Mon Sep 17 00:00:00 2001
From: gahyeon <gus_05@naver.com>
Date: Wed, 15 Jan 2025 03:08:49 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20InfoBtn=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/button/infoBtn/InfoBtn.tsx         | 19 +++++++++++
 .../common/button/infoBtn/infoBtn.css.ts      | 26 +++++++++++++++
 src/stories/InfoBtn.stories.ts                | 33 +++++++++++++++++++
 3 files changed, 78 insertions(+)
 create mode 100644 src/components/common/button/infoBtn/InfoBtn.tsx
 create mode 100644 src/components/common/button/infoBtn/infoBtn.css.ts
 create mode 100644 src/stories/InfoBtn.stories.ts

diff --git a/src/components/common/button/infoBtn/InfoBtn.tsx b/src/components/common/button/infoBtn/InfoBtn.tsx
new file mode 100644
index 0000000..190a900
--- /dev/null
+++ b/src/components/common/button/infoBtn/InfoBtn.tsx
@@ -0,0 +1,19 @@
+import Icon from '@assets/svgs';
+import buttonStyle from '@components/common/button/infoBtn/infoBtn.css';
+
+interface InfoBtnProps {
+  label: string;
+  onClick: () => void;
+  hasDivider?: boolean;
+}
+
+const InfoBtn = ({ label, onClick, hasDivider = false }: InfoBtnProps) => {
+  return (
+    <button onClick={onClick} className={buttonStyle({ hasDivider })}>
+      <p>{label} </p>
+      <Icon.IcnArrowGrayRight />
+    </button>
+  );
+};
+
+export default InfoBtn;
diff --git a/src/components/common/button/infoBtn/infoBtn.css.ts b/src/components/common/button/infoBtn/infoBtn.css.ts
new file mode 100644
index 0000000..2dc4ca6
--- /dev/null
+++ b/src/components/common/button/infoBtn/infoBtn.css.ts
@@ -0,0 +1,26 @@
+import theme from '@styles/theme.css';
+import { recipe } from '@vanilla-extract/recipes';
+
+const buttonStyle = recipe({
+  base: {
+    backgroundColor: '#fff',
+    ...theme.FONTS.h5Sb16,
+    display: 'flex',
+    justifyContent: 'space-between',
+    width: '31.7rem',
+    padding: '1.6rem 2.3rem 1.6rem 0',
+  },
+  variants: {
+    hasDivider: {
+      true: {
+        boxShadow: '0px 1px 0px 0px #EBEDEF',
+      },
+      false: {},
+    },
+  },
+  defaultVariants: {
+    hasDivider: false,
+  },
+});
+
+export default buttonStyle;
diff --git a/src/stories/InfoBtn.stories.ts b/src/stories/InfoBtn.stories.ts
new file mode 100644
index 0000000..81ca12d
--- /dev/null
+++ b/src/stories/InfoBtn.stories.ts
@@ -0,0 +1,33 @@
+import InfoBtn from '@components/common/button/infoBtn/InfoBtn';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Common/Button/InfoBtn',
+  component: InfoBtn,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: { type: 'text' },
+    },
+    onClick: {
+      action: 'clicked',
+    },
+    hasDivider: {
+      action: 'boolean',
+    },
+  },
+  args: {
+    label: '공지사항',
+    onClick: () => alert('click !'),
+    hasDivider: true,
+  },
+} satisfies Meta<typeof InfoBtn>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

From f024f93f8fcb7ac6e26183755d5ee62c97799e59 Mon Sep 17 00:00:00 2001
From: gahyeon <gus_05@naver.com>
Date: Wed, 15 Jan 2025 07:44:03 +0900
Subject: [PATCH 2/2] =?UTF-8?q?refactor:=20divider=20color=20theme=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/button/infoBtn/infoBtn.css.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/common/button/infoBtn/infoBtn.css.ts b/src/components/common/button/infoBtn/infoBtn.css.ts
index 2dc4ca6..8940483 100644
--- a/src/components/common/button/infoBtn/infoBtn.css.ts
+++ b/src/components/common/button/infoBtn/infoBtn.css.ts
@@ -13,7 +13,7 @@ const buttonStyle = recipe({
   variants: {
     hasDivider: {
       true: {
-        boxShadow: '0px 1px 0px 0px #EBEDEF',
+        boxShadow: `0px 1px 0px 0px ${theme.COLORS.gray2}`,
       },
       false: {},
     },