Revert "(#0) input disabled & readOnly 상태 추가 / 파일 정리"

This reverts commit 58fc939.
thebbodek · Feb 11, 2024 · dadb1ea · dadb1ea
1 parent 58fc939
commit dadb1ea
Show file tree

Hide file tree

Showing 45 changed files with 435 additions and 134 deletions.
diff --git a/src/constants/color.ts b/src/constants/color.ts
@@ -1,7 +1,6 @@
 export const THEME_COLOR = {
   WHITE: "white",
   BLACK: "black",
-  GRAY_09: "gray-09",
   GRAY_08: "gray-08",
   GRAY_07: "gray-07",
   GRAY_06: "gray-06",

diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -1,7 +1,6 @@
 export const ColorOptions = [
   "white",
   "black",
-  "gray-09",
   "gray-08",
   "gray-07",
   "gray-06",

diff --git a/src/core/components/Calendar/DatePickerCalendar/DatePickerCalendar.stories.tsx b/src/core/components/Calendar/DatePickerCalendar/DatePickerCalendar.stories.tsx
@@ -2,7 +2,6 @@ import { Meta } from "@storybook/react";
 import { useState } from "react";
 
 import DatePickerCalendar from "@/core/components/Calendar/DatePickerCalendar";
-import { DATE_PICKER_TYPE } from "./constants";
 import { PeriodDates } from "./types/DatePickerCalendarProps";
 
 const meta = {
@@ -26,7 +25,7 @@ export const SingleDatePicker = () => {
     <div className = {"w-[500px] border rounded-3xl py-6"}>
       <DatePickerCalendar
         cutoffDate = "2023-12-08"
-        variants = {DATE_PICKER_TYPE["SINGLE"]}
+        variants = "single"
         label = {["해지 신청일"]}
         initialDate = "2024-02-05"
         periodDates = {periodDates}
@@ -49,7 +48,7 @@ export const PeriodDatesPicker = () => {
   return (
     <div className = {"w-[500px] border rounded-3xl py-6"}>
       <DatePickerCalendar
-        variants = {DATE_PICKER_TYPE["PERIOD"]}
+        variants = "period"
         cutoffDate = "2024-01-23"
         periodDates = {periodDates}
         onDateClick = {onDateClick}

diff --git a/src/core/components/Calendar/DatePickerCalendar/constants/index.ts b/src/core/components/Calendar/DatePickerCalendar/constants/index.ts
@@ -1,4 +1,5 @@
+
 export const DATE_PICKER_TYPE = {
-  SINGLE: "single",
+  SINGGLE: "single",
   PERIOD: "period",
 } as const;
diff --git a/src/core/components/Calendar/DatePickerCalendar/index.tsx b/src/core/components/Calendar/DatePickerCalendar/index.tsx
@@ -6,7 +6,6 @@ import { useCalendar } from "@/core/components/Calendar/common/hooks/useCalendar
 import { CalendarHeader } from "@/core/components/Calendar/common/subs/CalendarHeader";
 import { CalendarWeekDayComponent } from "@/core/components/Calendar/common/subs/CalendarWeekdayComponent";
 import { CalendarDateDto } from "@/core/components/Calendar/common/types/CalendarDateDto";
-import { DATE_PICKER_TYPE } from "./constants";
 import { CalendarComponentDaySubText } from "./subs/CalendarComponentDaySubText";
 import { CalendarComponentDayText } from "./subs/CalendarComponentDayText";
 import { DatePickerCalendarProps, DatePickerType, PeriodDates } from "./types/DatePickerCalendarProps";
@@ -40,7 +39,7 @@ export const useDatePickerCalendar = (): UseDatePickerCalendarResponse => {
       return;
     }
 
-    if (variants === DATE_PICKER_TYPE["PERIOD"] && periodDates.startDate) {
+    if (variants === "period" && periodDates.startDate) {
       if (!dayjs(periodDates.startDate).isAfter(calendarDate.dayjs)) {
         newPeriodDates.endDate = currentDate;
       } else {
@@ -83,7 +82,7 @@ export const useDatePickerCalendar = (): UseDatePickerCalendarResponse => {
 };
 
 const DatePickerCalendar = ({
-  variants = DATE_PICKER_TYPE["SINGLE"],
+  variants = "single",
   label = ["사용일"],
   initialDate,
   periodDates,

diff --git a/src/core/components/Demo/Demo.stories.tsx b/src/core/components/Demo/Demo.stories.tsx
@@ -0,0 +1,14 @@
+import { Meta } from "@storybook/react";
+import Demo from "./index";
+
+const meta = {
+  title: "core/Demo",
+  component: Demo,
+  argTypes: {},
+} satisfies Meta<typeof Demo>;
+
+export default meta;
+
+export const Default = {
+  args: {},
+};
diff --git a/src/core/components/Demo/index.tsx b/src/core/components/Demo/index.tsx
@@ -0,0 +1,7 @@
+const Demo = () => {
+  return (
+    <div className = "text-[50px]">데모</div>
+  );
+};
+
+export default Demo;
diff --git a/src/core/components/Dropdown/DropdownBase/DropdownTrigger.tsx b/src/core/components/Dropdown/DropdownBase/DropdownTrigger.tsx
@@ -13,13 +13,10 @@ const DropdownTrigger = forwardRef((
     }: DropdownTriggerProps,
     ref: React.Ref<HTMLButtonElement>,
   ) => {
-  const { isToggle, readOnly, disabled, setIsToggle } = useContext(DropdownContext) as DropdownContextValue;
-  const content = typeof children === "function" ? children({ isToggle, readOnly, disabled }) : children;
-  const isDisabled = readOnly || disabled;
+  const { isToggle, setIsToggle } = useContext(DropdownContext) as DropdownContextValue;
+  const content = typeof children === "function" ? children({ isToggle }) : children;
 
   const onClickHandler = (e: React.MouseEvent<HTMLButtonElement>) => {
-    if(isDisabled) return;
-
     setIsToggle(v => !v);
     onClick?.(e);
   };
@@ -29,11 +26,9 @@ const DropdownTrigger = forwardRef((
       ref = {ref}
       type = "button"
       onClick = {onClickHandler}
-      className = {clsx("whitespace-nowrap cursor-pointer", isDisabled && "!cursor-not-allowed bg-gray-09", className)}
+      className = {clsx("whitespace-nowrap cursor-pointer", className)}
       aria-haspopup = "listbox"
       aria-expanded = {isToggle}
-      aria-disabled = {disabled}
-      aria-readonly = {readOnly}
       {...props}
     >
       {content}

diff --git a/src/core/components/Dropdown/DropdownBase/index.tsx b/src/core/components/Dropdown/DropdownBase/index.tsx
@@ -10,16 +10,15 @@ import { DropdownContextValue, DropdownProps, ReturnType } from "./types";
 export const DropdownContext = createContext<DropdownContextValue | undefined>(undefined);
 DropdownContext.displayName = "DropdownContext";
 
-const DropdownBase = ({ className, readOnly = false, disabled = false, trigger, content }: DropdownProps) => {
+const DropdownBase = ({ className, trigger, content }: DropdownProps) => {
   const [ isToggle, setIsToggle ] = useState(false);
   const { contentRef } = useClickOutside<HTMLDivElement>(() => setIsToggle(false));
-  const isVisibleContent = !readOnly && !disabled && isToggle;
 
   return (
-    <DropdownContext.Provider value = {{ isToggle, setIsToggle, readOnly, disabled }}>
+    <DropdownContext.Provider value = {{ isToggle, setIsToggle }}>
       <div ref = {contentRef} className = {clsx(className, "relative")}>
         {trigger}
-        {isVisibleContent && content}
+        {isToggle && content}
       </div>
     </DropdownContext.Provider>
   );

diff --git a/src/core/components/Dropdown/DropdownBase/types/index.ts b/src/core/components/Dropdown/DropdownBase/types/index.ts
@@ -4,17 +4,15 @@ import DropdownItems from "../DropdownItems";
 import DropdownTrigger from "../DropdownTrigger";
 
 export interface DropdownProps {
-  className?: string;
-  disabled?: boolean;
-  readOnly?: boolean;
-  trigger: React.ReactNode;
-  content: React.ReactNode;
+  className?: string,
+  trigger: React.ReactNode,
+  content: React.ReactNode,
 }
 
-export interface DropdownContextValue extends Pick<DropdownProps, "readOnly" | "disabled"> {
+export type DropdownContextValue = {
   isToggle: boolean;
   setIsToggle: Dispatch<SetStateAction<boolean>>;
-}
+};
 
 export interface DropdownItemProps extends HTMLAttributes<HTMLLIElement> {}
 
@@ -24,7 +22,7 @@ export interface DropdownItemsProps extends HTMLAttributes<HTMLUListElement>{
 
 export interface DropdownTriggerProps extends Omit<HTMLAttributes<HTMLButtonElement>, "children"> {
   onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-  children: React.ReactNode | ((props: Pick<DropdownContextValue, "isToggle" | "readOnly" | "disabled">) => React.ReactNode);
+  children: React.ReactNode | ((props: { isToggle: boolean }) => React.ReactNode);
 }
 
 type Dropdown = (props: DropdownProps) => React.ReactElement;

diff --git a/src/core/components/Dropdown/DropdownSelect/DropdownSelectTrigger.tsx b/src/core/components/Dropdown/DropdownSelect/DropdownSelectTrigger.tsx
@@ -18,17 +18,12 @@ const DropdownSelectTrigger = forwardRef((
 
   return (
     <DropdownBase.Trigger ref = {ref} className = {clsx("flex items-center justify-between w-full h-[3.75rem] p-3 gap-x-2 border border-gray-03 rounded-xl overflow-hidden", className)} {...rest}>
-      {({ isToggle, disabled, readOnly }) => {
-        const isDisabled = readOnly || disabled;
-        const isVisibleContent = !readOnly && !disabled && isToggle;
-
-        return (
-          <>
-            <Typography theme = "subhead-02-regular" className = {clsx(isDisabled && "mr-[1.75rem]")} color = {(!isDisabled && !showPlaceholder) ? "gray-08" : "gray-05"} text = {currentValue ? currentValue : (placeholder ?? "")}/>
-            {!isDisabled ? <CaretDown size = "28" className = {clsx("text-gray-06", isVisibleContent ? "rotate-180" : "rotate-0")} weight = "fill"/> : null}
-          </>
-        );
-      }}
+      {({ isToggle }) => (
+        <>
+          <Typography theme = "subhead-02-regular" color = "gray-08" className = {clsx(showPlaceholder && "!text-gray-05")} text = {currentValue ? currentValue : (placeholder ?? "")}/>
+          <CaretDown size = "28" className = {clsx("text-gray-06", isToggle ? "rotate-180" : "rotate-0")} weight = "fill"/>
+        </>
+      )}
     </DropdownBase.Trigger>
   );
 });

diff --git a/src/core/components/Input/InputBase/index.tsx b/src/core/components/Input/InputBase/index.tsx
@@ -9,29 +9,26 @@ import { InputBaseProps } from "./types";
 const InputBase = forwardRef(
   <T extends React.ElementType>(
     {
-      label,
       inputId,
-      rootClassName,
       element: Element,
+      rootClassName,
       inputRootClassName,
+      label,
       startComponent,
       inputComponent,
       endComponent,
       labelColor,
-      feedback,
       borderColor = "gray-03",
-      feedbackColor = "error",
       error = false,
-      disabled = false,
-      readOnly = false,
-      required = false,
+      required,
+      readOnly,
+      feedback,
+      feedbackColor = "error",
       ...props
     }: InputBaseProps<T>,
     ref: React.ComponentPropsWithRef<T>["ref"],
   ) => {
   const Component: React.ElementType = Element || "div";
-  const isDisabled = readOnly || disabled;
-  const isVisibleEndComponent = !isDisabled && endComponent;
 
   return (
     <Component ref = {ref} className = {clsx(label && "flex-v-stack", rootClassName)} {...props}>
@@ -42,16 +39,15 @@ const InputBase = forwardRef(
       }
       <div
         className = {cn(
-          `flex items-center px-3 py-4 text-subhead-02-regular bg-white rounded-xl overflow-hidden border border-${borderColor}`,
+          `flex items-center px-3 py-4 text-subhead-02-regular bg-transparent rounded-xl overflow-hidden border border-${borderColor}`,
+          error && "border-error",
           feedback && "mb-1",
           inputRootClassName,
-          isDisabled && "bg-gray-09",
-          error && "border-error",
         )}
       >
         {startComponent && startComponent}
         {inputComponent && inputComponent}
-        {isVisibleEndComponent && endComponent}
+        {!readOnly && endComponent && endComponent}
       </div>
       {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
@@ -15,7 +15,6 @@ export interface InputBaseProps<T extends React.ElementType> extends React.HTMLA
   borderColor?: ThemeColors;
   error?: boolean
   readOnly?: boolean;
-  disabled?: boolean;
   feedback?: React.ReactNode;
   feedbackColor?: ThemeColors;
 }
diff --git a/src/core/components/Input/InputDatePicker/DatePicker.tsx b/src/core/components/Input/InputDatePicker/DatePicker.tsx
@@ -2,7 +2,6 @@ import { useEffect, useId, useState } from "react";
 
 import Button from "../../Button";
 import DatePickerCalendar from "../../Calendar/DatePickerCalendar";
-import { DATE_PICKER_TYPE } from "../../Calendar/DatePickerCalendar/constants";
 import { PeriodDates } from "../../Calendar/DatePickerCalendar/types/DatePickerCalendarProps";
 import Divider from "../../Divider";
 import ModalPopUp from "../../Modal/ModalPopUp";
@@ -11,7 +10,7 @@ import Typography from "../../Typography";
 import { DatePickerProps } from "./types";
 
 const DatePicker = ({
-  variants = DATE_PICKER_TYPE["PERIOD"],
+  variants = "period",
   cutoffDate,
   cutoffAfterDate,
   isOpen,

diff --git a/src/core/components/Input/InputDatePicker/index.tsx b/src/core/components/Input/InputDatePicker/index.tsx
@@ -3,14 +3,13 @@ import clsx from "clsx";
 import dayjs from "dayjs";
 import { HTMLAttributes, useEffect, useId, useState } from "react";
 
-import { DATE_PICKER_TYPE } from "../../Calendar/DatePickerCalendar/constants";
 import { PeriodDates } from "../../Calendar/DatePickerCalendar/types/DatePickerCalendarProps";
 import InputBase from "../InputBase";
 import DatePicker from "./DatePicker";
 import { InputDatePickerProps } from "./types";
 
 const InputDatePicker = ({
-  variants = DATE_PICKER_TYPE["PERIOD"],
+  variants = "period",
   cutoffDate,
   cutoffAfterDate,
   overlay,
@@ -21,7 +20,6 @@ const InputDatePicker = ({
   useTab = false,
   useHoliday = false,
   disabled = false,
-  readOnly = false,
   required = false,
   className,
   inputClassName,
@@ -32,22 +30,21 @@ const InputDatePicker = ({
   placeholder,
   feedback,
   feedbackColor,
-}: InputDatePickerProps & Omit<HTMLAttributes<HTMLInputElement>, "disabled" | "readOnly">) => {
+}: InputDatePickerProps & HTMLAttributes<HTMLInputElement>) => {
   const id = useId();
   const [ periodDates, setPeriodDates ] = useState<PeriodDates>({
     startDate: "",
     endDate: "",
   });
   const startDate = dayjs(periodDates.startDate).format("YYYY. MM. DD");
   const endDate = dayjs(periodDates.endDate).format("YYYY. MM. DD");
-  const isDisabled = readOnly || disabled;
 
   const onDatePickerClick = (): Promise<PeriodDates> => {
     return new Promise(resolve => {
       overlay.open(({ isOpen, close }) => (
         <DatePicker
           variants = {variants}
-          disabled = {isDisabled}
+          disabled = {disabled}
           isOpen = {isOpen}
           close = {(periodDates: PeriodDates, isAfterAllDate?: boolean) => {
             resolve(periodDates);
@@ -69,8 +66,7 @@ const InputDatePicker = ({
   };
 
   const handleDatePicker = async () => {
-    if (isDisabled) return;
-
+    if (disabled) return;
     const periodDates = await onDatePickerClick();
     setPeriodDates(periodDates);
   };
@@ -87,29 +83,24 @@ const InputDatePicker = ({
     <InputBase
       inputId = {id}
       inputRootClassName = {clsx("h-[3.75rem] cursor-pointer relative", {
-        "cursor-not-allowed": isDisabled,
+        "cursor-not-allowed bg-gray-01": disabled,
       }, className)}
       onClick = {handleDatePicker}
       label = {label}
       required = {required}
       feedback = {feedback}
       feedbackColor = {feedbackColor}
-      disabled = {disabled}
-      readOnly = {readOnly}
       inputComponent = {
         <input
           type = "text"
           placeholder = {placeholder || "날짜를 입력해주세요"}
-          className = {clsx("bbodek-field pointer-events-none", inputClassName)}
+          className = {clsx("flex-1 focus-visible:outline-0 cursor-pointer pointer-events-none disabled:bg-gray-01", inputClassName)}
           value = {periodDates.startDate && (!afterAllDate ? `${startDate}${periodDates.endDate && ` - ${endDate}`}` : `${startDate} ~`)}
           onKeyDown = {() => false}
           onFocus = {(e: React.FocusEvent<HTMLInputElement>) => e.target.blur()}
           onChange = {() => {}}
           onInvalid = {handleOnInvalid}
           disabled = {disabled}
-          readOnly = {readOnly}
-          aria-disabled = {disabled}
-          aria-readonly = {readOnly}
           required = {required}
         />
       }

diff --git a/src/core/components/Input/InputDatePicker/types/index.ts b/src/core/components/Input/InputDatePicker/types/index.ts
@@ -24,7 +24,7 @@ export interface ExternalDates {
 
 export interface InputDatePickerProps extends
   Omit<DatePickerProps, "isOpen"| "close" | "periodDates" | "setPeriodDates" | "setIsAfterAllDate">,
-  Pick<InputBaseProps<"div">, "feedback" | "feedbackColor" | "disabled" | "readOnly"> {
+  Pick<InputBaseProps<"div">, "feedback" | "feedbackColor"> {
     required?: boolean;
     inputClassName?: string;
     label?: string;