From 25d40fb770caf2b478352aa66b8416489f5e3332 Mon Sep 17 00:00:00 2001
From: toothlessdev <toothless042@gmail.com>
Date: Mon, 26 Aug 2024 15:05:48 +0900
Subject: [PATCH 1/3] =?UTF-8?q?feature:=20DatePicker=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

---
 packages/components/form/DatePicker.style.ts | 22 ++++++++++++++++++++
 packages/components/form/DatePicker.tsx      | 11 ++++++++++
 2 files changed, 33 insertions(+)
 create mode 100644 packages/components/form/DatePicker.style.ts
 create mode 100644 packages/components/form/DatePicker.tsx

diff --git a/packages/components/form/DatePicker.style.ts b/packages/components/form/DatePicker.style.ts
new file mode 100644
index 0000000..890ed81
--- /dev/null
+++ b/packages/components/form/DatePicker.style.ts
@@ -0,0 +1,22 @@
+import styled from "@emotion/styled";
+import { DatePickerProps } from "./DatePicker";
+
+export const DatePickerElement = styled.input<DatePickerProps>`
+    display: block;
+
+    width: ${(props) => props.width};
+    height: ${(props) => props.height};
+
+    border: 0;
+    border-bottom: 1px solid #c4c7cc;
+
+    font-size: 16px;
+
+    &:focus {
+        outline: none;
+    }
+    &::-webkit-calendar-picker-indicator {
+        height: 100%;
+        aspect-ratio: 1/1;
+    }
+`;
diff --git a/packages/components/form/DatePicker.tsx b/packages/components/form/DatePicker.tsx
new file mode 100644
index 0000000..a199811
--- /dev/null
+++ b/packages/components/form/DatePicker.tsx
@@ -0,0 +1,11 @@
+import { forwardRef } from "react";
+import { DatePickerElement } from "./DatePicker.style";
+
+export interface DatePickerProps extends React.ComponentProps<"input"> {
+    width: string;
+    height: string;
+}
+
+export const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(({ width, height }, ref) => {
+    return <DatePickerElement ref={ref} type="date" width={width} height={height}></DatePickerElement>;
+});

From 8d51fb2f990501be098e68dbaa1f8b1d5e61ae36 Mon Sep 17 00:00:00 2001
From: toothlessdev <toothless042@gmail.com>
Date: Mon, 26 Aug 2024 15:05:57 +0900
Subject: [PATCH 2/3] =?UTF-8?q?test:=20DatePicker=20=EC=8A=A4=ED=86=A0?=
 =?UTF-8?q?=EB=A6=AC=EB=B6=81=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/stories/DatePicker.story.ts | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 packages/stories/DatePicker.story.ts

diff --git a/packages/stories/DatePicker.story.ts b/packages/stories/DatePicker.story.ts
new file mode 100644
index 0000000..912187c
--- /dev/null
+++ b/packages/stories/DatePicker.story.ts
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { DatePicker } from "../components/form/DatePicker";
+
+const meta = {
+    title: "Form/DatePicker",
+    component: DatePicker,
+} satisfies Meta<typeof DatePicker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        width: "440px",
+        height: "54px",
+    },
+};

From e1334f7ce838a583bc137edcf114bcb54c7c06b6 Mon Sep 17 00:00:00 2001
From: toothlessdev <toothless042@gmail.com>
Date: Mon, 26 Aug 2024 15:06:00 +0900
Subject: [PATCH 3/3] =?UTF-8?q?feature:=20DatePicker=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

---
 packages/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/index.ts b/packages/index.ts
index 6a84317..9198f9e 100644
--- a/packages/index.ts
+++ b/packages/index.ts
@@ -8,6 +8,7 @@ export { SearchBar } from "./components/form/SearchBar";
 export { TextArea } from "./components/form/TextArea";
 export { RadioGroup, RadioItem } from "./components/form/Radio";
 export { DropDown, DropDownItem } from "./components/form/DropDown";
+export { DatePicker } from "./components/form/DatePicker";
 
 // helper
 export { withProviders } from "./components/helper/withProviders";