From fd259b944cb1321f0df32329c50210fe2cc80738 Mon Sep 17 00:00:00 2001
From: JinJu <jin_jooo@naver.com>
Date: Tue, 30 Jan 2024 16:47:59 +0900
Subject: [PATCH] (#0) Add InputDatePicker Feedback Props

---
 src/core/components/Input/InputBase/index.tsx |  3 ++-
 .../components/Input/InputBase/types/index.ts |  1 +
 .../Input/InputDatePicker/index.tsx           |  4 +++
 .../Input/InputDatePicker/types/index.ts      | 27 ++++++++++---------
 4 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/core/components/Input/InputBase/index.tsx b/src/core/components/Input/InputBase/index.tsx
index 49103b5..11e3a95 100644
--- a/src/core/components/Input/InputBase/index.tsx
+++ b/src/core/components/Input/InputBase/index.tsx
@@ -23,6 +23,7 @@ const InputBase = forwardRef(
       required,
       readOnly,
       feedback,
+      feedbackColor = "error",
       ...props
     }: InputBaseProps<T>,
     ref: React.ComponentPropsWithRef<T>["ref"],
@@ -48,7 +49,7 @@ const InputBase = forwardRef(
         {inputComponent && inputComponent}
         {!readOnly && endComponent && endComponent}
       </div>
-      {feedback ? <Typography theme = "body-03-regular" color = "error" text = {feedback} /> : null}
+      {feedback ? <Typography theme = "body-03-regular" color = {feedbackColor} text = {feedback} /> : null}
     </Component>
   );
 });
diff --git a/src/core/components/Input/InputBase/types/index.ts b/src/core/components/Input/InputBase/types/index.ts
index 02e1a15..0f81196 100644
--- a/src/core/components/Input/InputBase/types/index.ts
+++ b/src/core/components/Input/InputBase/types/index.ts
@@ -16,4 +16,5 @@ export interface InputBaseProps<T extends React.ElementType> extends React.HTMLA
   error?: boolean
   readOnly?: boolean;
   feedback?: React.ReactNode;
+  feedbackColor?: ThemeColors;
 }
diff --git a/src/core/components/Input/InputDatePicker/index.tsx b/src/core/components/Input/InputDatePicker/index.tsx
index 8ca6b46..769cdfb 100644
--- a/src/core/components/Input/InputDatePicker/index.tsx
+++ b/src/core/components/Input/InputDatePicker/index.tsx
@@ -28,6 +28,8 @@ const InputDatePicker = ({
   dateLabel,
   closeButtonText,
   placeholder,
+  feedback,
+  feedbackColor,
 }: InputDatePickerProps & HTMLAttributes<HTMLInputElement>) => {
   const id = useId();
   const [ periodDates, setPeriodDates ] = useState<PeriodDates>({
@@ -86,6 +88,8 @@ const InputDatePicker = ({
       onClick = {handleDatePicker}
       label = {label}
       required = {required}
+      feedback = {feedback}
+      feedbackColor = {feedbackColor}
       inputComponent = {
         <input
           type = "text"
diff --git a/src/core/components/Input/InputDatePicker/types/index.ts b/src/core/components/Input/InputDatePicker/types/index.ts
index 0526c00..5353a2e 100644
--- a/src/core/components/Input/InputDatePicker/types/index.ts
+++ b/src/core/components/Input/InputDatePicker/types/index.ts
@@ -1,4 +1,5 @@
 import { DatePickerCalendarProps, PeriodDates } from "@/core/components/Calendar/DatePickerCalendar/types/DatePickerCalendarProps";
+import { InputBaseProps } from "../../InputBase/types";
 
 export interface DatePickerProps extends Pick<DatePickerCalendarProps, "useHoliday" | "disabled" | "disabledDates" | "cutoffDate" | "cutoffAfterDate" | "initialDate" | "afterAllDate"> {
   variants?: DatePickerCalendarProps["variants"];
@@ -7,7 +8,7 @@ export interface DatePickerProps extends Pick<DatePickerCalendarProps, "useHolid
   isOpen: boolean;
   close: DatePickerCalendarProps["onDateClick"];
   useTab?: boolean;
-  dateLabel?: DatePickerCalendarProps["label"]
+  dateLabel?: DatePickerCalendarProps["label"];
 }
 
 type CreateOverlayElement = (props: {
@@ -21,15 +22,17 @@ export interface ExternalDates {
   endDate: string | null;
 }
 
-export interface InputDatePickerProps extends Omit<DatePickerProps, "isOpen"| "close" | "periodDates" | "setPeriodDates" | "setIsAfterAllDate"> {
-  required?: boolean;
-  inputClassName?: string;
-  label?: string;
-  getPeriodDates: DatePickerCalendarProps["onDateClick"];
-  dateLabel?: DatePickerCalendarProps["label"]
-  overlay: {
-    open: (overlayElement: CreateOverlayElement) => void;
-    close: () => void;
-    exit: () => void;
+export interface InputDatePickerProps extends
+  Omit<DatePickerProps, "isOpen"| "close" | "periodDates" | "setPeriodDates" | "setIsAfterAllDate">,
+  Pick<InputBaseProps<"div">, "feedback" | "feedbackColor"> {
+    required?: boolean;
+    inputClassName?: string;
+    label?: string;
+    getPeriodDates: DatePickerCalendarProps["onDateClick"];
+    dateLabel?: DatePickerCalendarProps["label"];
+    overlay: {
+      open: (overlayElement: CreateOverlayElement) => void;
+      close: () => void;
+      exit: () => void;
+    }
   }
-}