@uniai-fe/ui-legacy 0.1.1

package/src/form-field/input/components/click/index.tsx

@@ -0,0 +1,9 @@
+import InputCheckbox from "./Checkbox";
+import InputRadio from "./Radio";
+
+const InputClick = {
+  Checkbox: InputCheckbox,
+  Radio: InputRadio,
+};
+
+export default InputClick;

package/src/form-field/input/components/date-time/Date.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import Image from "next/image";
+import { useCallback, useState } from "react";
+import assetUrl from "../../../../asset-url";
+
+import InputContainer from "../Container";
+import CustomDatePicker from "../assets/calendar/DatePicker";
+
+import StyledInputBase from "../../styles/styled-components/base";
+import type { InputDateTimeProps } from "../../../../types";
+
+/**
+ * input; date
+ * @component
+ * @param {InputProps} props
+ * @property {string} [className]
+ * @property {string} selectorId
+ * @property {string} dataKey
+ * @property {LabelOptionType} label
+ * @property {UseFormRegisterReturn} register react-hook-form의 useForm().register() 메소드
+ * @property {InputAttrType} [attr] HTML 태그 속성
+ * @property {InputUtilType} [util] 유틸리티 기능 설정
+ * @property {FormFieldStatePropsType} [state] 입력요소 상태 설정
+ * @property {Function} [onDefaultChange] react-hook-form 기본 onChange 기능을 덮어씀
+ * @property {Function} [onCustomChange] react-hook-form 기본 onChange 기능과 함께씀
+ * @property {FormFieldErrorMonitorType} [errorMonitor] react-hook-form 기본 onChange 기능과 함께씀
+ * @property {FieldError | FieldErrors} [formError] react-hook-form의 useForm().formState.errors.[dataName]
+ * @property {DateTimePickerProps} [flatpickrOptions] HTML 태그 속성
+ */
+export default function InputDate(props: InputDateTimeProps) {
+  const { selectorId, label /*setFocusTableRow*/ } = props;
+
+  const [isFocus, setFocus] = useState<boolean>(false);
+
+  const updateIsOpenCalendar = useCallback((state: boolean) => {
+    setFocus(state);
+    //     if (typeof setFocusTableRow !== "undefined") setFocusTableRow(state);
+  }, []);
+
+  return (
+    <InputContainer
+      className={props.className}
+      fieldType="date"
+      selectorId={selectorId}
+      label={label}
+      wrapperOptions={{
+        state: props.state?.fixed
+          ? props.state?.fixed
+          : props.state?.default
+            ? props.state?.default
+            : "active",
+        focus: isFocus,
+      }}
+      icon={true}
+    >
+      <StyledInputBase.icon $width={25} $height={25}>
+        <figure>
+          <Image
+            src={`${assetUrl}/img/icon/calendar.svg`}
+            alt="날짜 선택"
+            // width={25}
+            // height={25}
+            fill={true}
+          />
+        </figure>
+      </StyledInputBase.icon>
+      <CustomDatePicker
+        {...props}
+        updateIsOpenCalendar={updateIsOpenCalendar}
+      />
+    </InputContainer>
+  );
+}

package/src/form-field/input/components/date-time/DateTime.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import Image from "next/image";
+import { useCallback, useState } from "react";
+import assetUrl from "../../../../asset-url";
+
+import InputContainer from "../Container";
+import CustomDateTimePicker from "../assets/calendar/DateTimePicker";
+
+import StyledInputBase from "../../styles/styled-components/base";
+import type { InputDateTimeProps } from "../../../../types";
+
+/**
+ * input text 입력 컴포넌트
+ * @component
+ * @param {InputProps} props
+ * @property {string} [className]
+ * @property {string} selectorId
+ * @property {string} dataKey
+ * @property {LabelOptionType} label
+ * @property {UseFormRegisterReturn} register react-hook-form의 useForm().register() 메소드
+ * @property {InputAttrType} [attr] HTML 태그 속성
+ * @property {InputUtilType} [util] 유틸리티 기능 설정
+ * @property {FormFieldStatePropsType} [state] 입력요소 상태 설정
+ * @property {Function} [onDefaultChange] react-hook-form 기본 onChange 기능을 덮어씀
+ * @property {Function} [onCustomChange] react-hook-form 기본 onChange 기능과 함께씀
+ * @property {FormFieldErrorMonitorType} [errorMonitor] react-hook-form 기본 onChange 기능과 함께씀
+ * @property {FieldError | FieldErrors} [formError] react-hook-form의 useForm().formState.errors.[dataName]
+ * @property {DateTimePickerProps} [flatpickrOptions] HTML 태그 속성
+ */
+export default function InputDateTime(props: InputDateTimeProps) {
+  const { selectorId, label /*setFocusTableRow*/ } = props;
+
+  const [isFocus, setFocus] = useState<boolean>(false);
+
+  const updateIsOpenCalendar = useCallback((state: boolean) => {
+    setFocus(state);
+    // if (typeof setFocusTableRow !== "undefined") setFocusTableRow(state);
+  }, []);
+
+  return (
+    <InputContainer
+      className={props.className}
+      fieldType="date-time"
+      selectorId={selectorId}
+      label={label}
+      wrapperOptions={{
+        state: props.state?.fixed
+          ? props.state?.fixed
+          : props.state?.default
+            ? props.state?.default
+            : "active",
+        focus: isFocus,
+      }}
+      icon={true}
+    >
+      <StyledInputBase.icon $width={25} $height={25}>
+        <Image
+          src={`${assetUrl}/img/icon/calendar.svg`}
+          alt="날짜 선택"
+          // width={25}
+          // height={25}
+          fill={true}
+        />
+      </StyledInputBase.icon>
+      <CustomDateTimePicker
+        {...props}
+        updateIsOpenCalendar={updateIsOpenCalendar}
+      />
+    </InputContainer>
+  );
+}

package/src/form-field/input/components/date-time/Time.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { useCallback, useState } from "react";
+
+import InputContainer from "../Container";
+import CustomTimePicker from "../assets/calendar/TimePicker";
+
+import type { InputDateTimeProps } from "../../../../types";
+
+/**
+ * input text 입력 컴포넌트
+ * @component
+ * @param {InputProps} props
+ * @property {string} [className]
+ * @property {string} selectorId
+ * @property {string} dataKey
+ * @property {LabelOptionType} label
+ * @property {UseFormRegisterReturn} register react-hook-form의 useForm().register() 메소드
+ * @property {InputAttrType} [attr] HTML 태그 속성
+ * @property {InputUtilType} [util] 유틸리티 기능 설정
+ * @property {FormFieldStatePropsType} [state] 입력요소 상태 설정
+ * @property {Function} [onDefaultChange] react-hook-form 기본 onChange 기능을 덮어씀
+ * @property {Function} [onCustomChange] react-hook-form 기본 onChange 기능과 함께씀
+ * @property {FormFieldErrorMonitorType} [errorMonitor] react-hook-form 기본 onChange 기능과 함께씀
+ * @property {FieldError | FieldErrors} [formError] react-hook-form의 useForm().formState.errors.[dataName]
+ * @property {DateTimePickerProps} [flatpickrOptions] HTML 태그 속성
+ */
+export default function InputTime(props: InputDateTimeProps) {
+  const { selectorId, label /*setFocusTableRow*/ } = props;
+
+  const [isFocus, setFocus] = useState<boolean>(false);
+
+  const updateIsOpenCalendar = useCallback((state: boolean) => {
+    setFocus(state);
+    // if (typeof setFocusTableRow !== "undefined") setFocusTableRow(state);
+  }, []);
+
+  return (
+    <InputContainer
+      className={props.className}
+      fieldType="time"
+      selectorId={selectorId}
+      label={label}
+      wrapperOptions={{
+        state: props.state?.fixed
+          ? props.state?.fixed
+          : props.state?.default
+            ? props.state?.default
+            : "active",
+        focus: isFocus,
+      }}
+    >
+      <CustomTimePicker
+        {...props}
+        updateIsOpenCalendar={updateIsOpenCalendar}
+      />
+      {/* <ExpandIcon /> */}
+    </InputContainer>
+  );
+}

package/src/form-field/input/components/file-upload/Container.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { useCallback, useEffect } from "react";
+import { clsx } from "clsx";
+
+import InputContainer from "../Container";
+
+import useFieldChangeEvents from "../../../common/hooks/useChangeEvents";
+import type { InputFileProps } from "../../../../types";
+
+/**
+ * Input; 파일첨부 컨테이너 컴포넌트
+ * @param {InputFileProps} props - 파일첨부 컴포넌트 속
+ * @param {string} props.className - 클래스 이름
+ * @param {React.ReactNode} props.children - 자식 컴포넌트
+ * @param {string} props.selectorId - <input type="file" />의 id
+ * @param {string} props.dataKey - 데이터 키
+ * @param {object} props.label - 레이블 정보
+ * @param {UseFormRegisterReturn} props.register - React Hook Form 등록 정보
+ * @param {InputAttrType<HTMLInputElement>} props.attr - input 속성
+ * @param {FormFieldStatePropsType} props.state - Form field 상태 Props
+ * @param {Function} props.onDefaultChange - react-hook-form 덮어쓰기 이벤트
+ * @param {Function} props.onCustomChange - react-hook-form과 함께 동작하는 이벤트
+ * @param {Function} props.errorMonitor - 에러 모니터링 함수
+ * @param {string} props.formError - 폼 에러 메시지
+ * @param {boolean | object} props.customHTMLLabel - 커스텀 HTML 레이블 여부
+ */
+export default function InputFileContainer({
+  className,
+  children,
+  selectorId,
+  dataKey,
+  label,
+  register,
+  attr,
+  state,
+  onDefaultChange,
+  onCustomChange,
+  errorMonitor,
+  formError,
+  customHTMLLabel,
+}: InputFileProps) {
+  const { isReadonly, activeState, currentValue, onFocus, onBlur, onChange } =
+    useFieldChangeEvents<HTMLInputElement>({
+      state,
+      maskType: attr?.maskType,
+      register,
+      onDefaultChange,
+      onCustomChange,
+    });
+
+  // 에러 모니터링
+  useEffect(() => {
+    if (typeof errorMonitor !== "undefined")
+      errorMonitor({ inputKey: dataKey });
+  }, [errorMonitor, dataKey, currentValue, formError]);
+
+  const InputFile = useCallback(
+    () => (
+      <input
+        type="file"
+        id={selectorId}
+        className="input-file"
+        aria-label={`${label.name} 업로드`}
+        name={dataKey}
+        {...register}
+        {...attr?.origin}
+        readOnly={isReadonly}
+        {...{ onFocus, onBlur, onChange }}
+        hidden={true}
+      />
+    ),
+    [
+      attr?.origin,
+      dataKey,
+      isReadonly,
+      label.name,
+      onBlur,
+      onChange,
+      onFocus,
+      register,
+      selectorId,
+    ],
+  );
+
+  return (
+    <InputContainer
+      className={clsx("field-item-input-file input-file-container", className)}
+      fieldType="file"
+      selectorId={selectorId}
+      label={label}
+      useHtmlLabel={
+        typeof customHTMLLabel === "undefined" || customHTMLLabel === true
+      }
+      wrapperOptions={{
+        state: activeState,
+      }}
+    >
+      {typeof customHTMLLabel === "object" ? (
+        <label
+          htmlFor={selectorId}
+          aria-label={`${label.name} 업로드`}
+          className={clsx("input-file-label", customHTMLLabel?.className)}
+          {...customHTMLLabel}
+        >
+          <InputFile />
+          {children}
+        </label>
+      ) : (
+        <>
+          <InputFile />
+          {children}
+        </>
+      )}
+    </InputContainer>
+  );
+}

package/src/form-field/input/components/file-upload/DragAndDrop.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { clsx } from "clsx";
+import { useCallback, useState } from "react";
+
+import useInputFile from "../../../common/hooks/useInputFile";
+import StyledInputFile from "../../styles/styled-components/input-file";
+
+export default function InputFileDragAndDrop({
+  className,
+  selectorId,
+  uploadCallback,
+  children,
+}: {
+  children: React.ReactNode;
+  uploadCallback: (files: File[]) => void;
+} & Partial<{
+  className: string;
+  selectorId: string;
+}>) {
+  const onDragEnter = useCallback((e: React.DragEvent<HTMLElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    console.log("[InputFileDragAndDrop] onDragEnter");
+    setHover(true);
+  }, []);
+
+  const onDragLeave = useCallback((e: React.DragEvent<HTMLElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    console.log("[InputFileDragAndDrop] onDragLeave");
+    setHover(false);
+  }, []);
+
+  const onDragOver = useCallback((e: React.DragEvent<HTMLElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+
+  const onReset = useCallback(
+    (files: File[]) => {
+      setHover(false);
+      uploadCallback(files);
+    },
+    [uploadCallback],
+  );
+
+  const { onDropFiles } = useInputFile({ selectorId, uploadCallback: onReset });
+
+  const [hover, setHover] = useState(false);
+
+  return (
+    <StyledInputFile.dropZone
+      className={clsx("input-file-drag-and-drop", className, {
+        "drag-over": hover,
+      })}
+      onDrop={onDropFiles}
+      onDragEnter={onDragEnter}
+      onDragLeave={onDragLeave}
+      onDragOver={onDragOver}
+    >
+      {children}
+    </StyledInputFile.dropZone>
+  );
+}

package/src/form-field/input/components/text/Box.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import { useCallback, useEffect, useRef } from "react";
+
+import InputContainer from "../Container";
+import StyledInputBase from "../../styles/styled-components/base";
+
+import useFieldChangeEvents from "../../../common/hooks/useChangeEvents";
+
+import type { InputProps } from "../../../../types";
+import { clsx } from "clsx";
+
+/**
+ * input; text box
+ * @component
+ * @param {InputProps} props
+ * @property {string} [className]
+ * @property {string} selectorId
+ * @property {string} dataKey
+ * @property {LabelOptionType} label
+ * @property {UseFormRegisterReturn} register react-hook-form의 useForm().register() 메소드
+ * @property {InputAttrType} [attr] HTML 태그 속성
+ * @property {InputUtilType} [util] 유틸리티 기능 설정
+ * @property {FormFieldStatePropsType} [state] 입력요소 상태 설정
+ * @property {Function} [onDefaultChange] react-hook-form 기본 onChange 기능을 덮어씀
+ * @property {Function} [onCustomChange] react-hook-form 기본 onChange 기능과 함께씀
+ * @property {FormFieldErrorMonitorType} [errorMonitor] react-hook-form 기본 onChange 기능과 함께씀
+ * @property {FieldError | FieldErrors} [formError] react-hook-form의 useForm().formState.errors.[dataName]
+ */
+export default function InputBox({
+  className,
+  selectorId,
+  dataKey,
+  label,
+  register,
+  // util,
+  width,
+  attr,
+  state,
+  // status,
+  convertNumber,
+  icon,
+  iconSize,
+  unit,
+  unitWidth,
+  keyDownEvent,
+  keyUpEvent,
+  // customBlurEvent,
+  onDefaultChange,
+  onCustomChange,
+  errorMonitor,
+  formError,
+  // setFocusTableRow,
+}: InputProps) {
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const updateInputRef = useCallback(
+    (node: HTMLInputElement | null) => {
+      if (register?.ref) register.ref(node); // react-hook-form ref
+      inputRef.current = node; // 컴포넌트용 ref
+    },
+    [register],
+  );
+
+  const {
+    isReadonly,
+    activeState,
+    currentValue,
+    isFocused,
+    onFocus,
+    onBlur,
+    onChange,
+  } = useFieldChangeEvents<HTMLInputElement>({
+    state,
+    convertNumber,
+    maskType: attr?.maskType,
+    register,
+    onDefaultChange,
+    onCustomChange,
+  });
+
+  // 에러 모니터링
+  useEffect(() => {
+    if (typeof errorMonitor !== "undefined")
+      errorMonitor({ inputKey: dataKey });
+  }, [errorMonitor, dataKey, currentValue, formError]);
+
+  return (
+    <InputContainer
+      className={clsx("field-item-input-box", className, activeState, {
+        focus: isFocused,
+      })}
+      fieldType="box"
+      selectorId={selectorId}
+      label={label}
+      wrapperOptions={{
+        state: activeState,
+        focus: isFocused,
+      }}
+      icon={!!icon}
+    >
+      {icon && iconSize?.length === 2 && (
+        <StyledInputBase.icon $width={iconSize[0]} $height={iconSize[1]}>
+          {icon}
+        </StyledInputBase.icon>
+      )}
+      <StyledInputBase.box
+        ref={updateInputRef}
+        className={clsx("input-box", {
+          focus: isFocused,
+          readonly: isReadonly,
+        })}
+        type="text"
+        autoComplete="off"
+        aria-label={`${label.name} 입력`}
+        id={selectorId}
+        name={dataKey}
+        $width={width}
+        $icon={!!icon}
+        $unitWidth={unitWidth || !!unit}
+        {...register}
+        {...attr?.origin}
+        readOnly={isReadonly}
+        onKeyDown={keyDownEvent}
+        onKeyUp={keyUpEvent}
+        {...{ onFocus, onBlur, onChange }}
+      />
+      {unit && (
+        <StyledInputBase.unit>
+          {typeof unit === "string" ? <span>{unit}</span> : unit}
+        </StyledInputBase.unit>
+      )}
+    </InputContainer>
+  );
+}

package/src/form-field/input/components/text/index.tsx

@@ -0,0 +1,7 @@
+import InputBox from "./Box";
+
+const InputText = {
+  Box: InputBox,
+};
+
+export default InputText;

package/src/form-field/input/index.tsx

@@ -0,0 +1,19 @@
+import CustomCalendarTodayButton from "./components/assets/calendar/custom/TodayButton";
+import InputClick from "./components/click";
+import InputDate from "./components/date-time/Date";
+import InputFileContainer from "./components/file-upload/Container";
+import InputFileDragAndDrop from "./components/file-upload/DragAndDrop";
+import InputText from "./components/text";
+
+const Input = {
+  ...InputText,
+  ...InputClick,
+  Date: InputDate,
+  TodayButton: CustomCalendarTodayButton,
+  File: {
+    Container: InputFileContainer,
+    DragAndDrop: InputFileDragAndDrop,
+  },
+};
+
+export default Input;

package/src/form-field/input/input.scss

@@ -0,0 +1,2 @@
+@use "./styles/scss/size.scss";
+@use "./styles/scss/theme.scss";

package/src/form-field/input/styled.tsx

@@ -0,0 +1,5 @@
+import StyledInputBase from "./styles/styled-components/base";
+
+const StyledInput = { ...StyledInputBase };
+
+export default StyledInput;

package/src/form-field/input/styles/scss/size.scss

@@ -0,0 +1,39 @@
+:root {
+  // --input-box-width: 100%;
+  --input-box-height: var(--field-item-height);
+  --input-box-padding: 1.2rem;
+
+  --input-box-border-top-radius: var(--field-item-border-radius);
+  --input-box-border-bottom-radius: var(--field-item-border-radius);
+  --input-box-border-color: var(--field-item-border-default);
+
+  --input-box-bg: var(--field-item-bg-default);
+
+  --input-box-text-size: 1.6rem;
+  --input-box-text-color: var(--field-item-text-input);
+  --input-box-text-color-readonly: var(--field-item-text-input);
+
+  --input-file-drop-zone-width: 100%;
+  --input-file-drop-zone-height: 100%;
+  --input-file-drop-zone-radius: var(--field-item-border-radius);
+  --input-file-drop-zone-border-width-default: 1px;
+  --input-file-drop-zone-border-width-over: 1px;
+  --input-file-drop-zone-border-style-default: solid;
+  --input-file-drop-zone-border-style-over: solid;
+  --input-file-drop-zone-border-color-default: var(--color_30);
+  --input-file-drop-zone-border-color-over: var(--color-light-blue-600);
+  --input-file-drop-zone-bg-default: var(--color_0);
+  --input-file-drop-zone-bg-over: var(--color_0);
+
+  // --input-height: 36px;
+  // --input-padding: 0;
+  // --input-thumb-margin: 8px;
+  // --input-util-notice-margin: 10px;
+  // --input-box-padding: 12px;
+  // --input-border-width: 2px;
+  // --input-border-radius: 4px;
+  // --input-icon-area-size: 24px;
+  // --input-icon-input-size: 20px;
+  // --input-font-size: 16px;
+  // --select-option-view-length: 4; // --input-select-padding: 0 12px; // --input-select-dropdown-padding: 3px;
+}

package/src/form-field/input/styles/scss/theme.scss

@@ -0,0 +1,39 @@
+// :root {
+// --input-border-color-default: var(--color_30);
+// --input-border-color-focus: var(--theme-blue-main);
+
+// --input-focus: var(--b_02);
+// --input-success: var(--green);
+// --input-error: var(--red);
+
+// --input-readonly-border: var(--color_40);
+// --input-readonly-bg: var(--color_5);
+
+// --input-label-readonly: #a3a3a4;
+
+// --input-checkbox-readonly: #a8b3bd;
+// --input-switch-bg: var(--color-blue-gray-300);
+// --input-switch-readonly: var(--color_40);
+
+// --input-check-button-border: var(--color_40);
+// --input-check-button-text: var(--color_60);
+// --input-check-button-border-selected: var(--color_40);
+// --input-check-button-checkbox-selected: var(--theme-blue-main);
+// --input-check-button-text-selected: var(--color_80);
+// --input-check-button-border-saved: var(--theme-blue-main);
+// --input-check-button-checkbox-saved: var(--theme-blue-main);
+// --input-check-button-text-saved: var(--theme-blue-main);
+// --input-check-button-border-empty: var(--red);
+// --input-check-button-checkbox-empty: var(--red);
+// --input-check-button-text-empty: var(--red);
+
+// --input-text-color: var(--color_60);
+// --input-text-focus: var(--color_90);
+// --input-text-color: var(--color_60);
+// --input-text-focus: var(--color_90);
+// --input-text-readonly: var(--color_40);
+
+// --input-select-text-default: var(--color_60);
+// --input-select-text-focus: var(--color_90);
+// --input-select-bg-hover: var(--color_10);
+// }