From 80673917a38d1bd274c7289ce81ec4e5525fa66d Mon Sep 17 00:00:00 2001
From: SeungYeon Hong <lisa@corca.ai>
Date: Fri, 19 Apr 2024 15:23:03 +0900
Subject: [PATCH] ADCIO-3282) fix: fix date picker required issue (#45)

* fix: fix date picker required issue

* fix: fix datepicker issue

---------

Co-authored-by: dev-redo <mis05041@naver.com>
---
 src/components/DatePicker/DateTime/index.tsx  |  1 +
 .../DatePicker/SingleDate/index.tsx           |  1 +
 src/stories/DatePicker.stories.tsx            | 32 +++++++++++++++++++
 3 files changed, 34 insertions(+)

diff --git a/src/components/DatePicker/DateTime/index.tsx b/src/components/DatePicker/DateTime/index.tsx
index 61a50274..dfa44bba 100644
--- a/src/components/DatePicker/DateTime/index.tsx
+++ b/src/components/DatePicker/DateTime/index.tsx
@@ -35,6 +35,7 @@ export function DateTime({
         locale={LOCALE[language]}
         selected={newDate}
         onChange={date => setNewDate(date)}
+        required={inputProps?.required}
         customInput={
           <CustomInput
             {...inputProps}
diff --git a/src/components/DatePicker/SingleDate/index.tsx b/src/components/DatePicker/SingleDate/index.tsx
index 818d4f0f..4e7877e8 100644
--- a/src/components/DatePicker/SingleDate/index.tsx
+++ b/src/components/DatePicker/SingleDate/index.tsx
@@ -35,6 +35,7 @@ export function SingleDate({
         ref={datePickerRef}
         locale={LOCALE[language]}
         selected={selected}
+        required={inputProps?.required}
         onChange={date => {
           onChange(date!);
         }}
diff --git a/src/stories/DatePicker.stories.tsx b/src/stories/DatePicker.stories.tsx
index 68ed9338..f4dd7df3 100644
--- a/src/stories/DatePicker.stories.tsx
+++ b/src/stories/DatePicker.stories.tsx
@@ -106,6 +106,38 @@ export function DateTime() {
   );
 }
 
+export function InputStyle() {
+  const [singleDate, setSingleDate] = useState<Date | null>(null);
+  const [dateTime, setDateTime] = useState<Date | null>(null);
+
+  return (
+    <Container>
+      <DatePicker.Date
+        selected={singleDate}
+        onChange={setSingleDate}
+        language={'ko'}
+        inputProps={{
+          width: 400,
+          label: 'Single Date',
+          required: true,
+          description: '날짜만 입력할 수 있는 입력창 입니다.',
+        }}
+      />
+      <DatePicker.DateTime
+        selected={dateTime}
+        onChange={setDateTime}
+        language={'ko'}
+        inputProps={{
+          width: 400,
+          label: 'Date Time',
+          required: true,
+          description: '날짜와 시간을 모두 입력할 수 있는 입력창 입니다.',
+        }}
+      />
+    </Container>
+  );
+}
+
 const Container = styled.div`
   width: 100%;
   height: 100%;