Merge pull request #5 from Principes-Artis-Mechanicae/feature/DatePicker

Feature: DatePicker 컴포넌트 구현

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;
+    }
+`;

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>;
+});

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";

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",
+    },
+};