@uniai-fe/ui-legacy 0.1.1

package/src/dropdown/styles/styled-components/dropdown.ts

@@ -0,0 +1,79 @@
+"use client";
+
+import { styleBaseSize } from "@uniai-fe/util-functions";
+import { styled, css } from "styled-components";
+
+type StyledParentProps = Partial<{
+  $width: string | number;
+}>;
+const parent = styled.div<StyledParentProps>`
+  width: ${({ $width }) => styleBaseSize("rem", $width, "fit-content")};
+  position: relative;
+  /* z-index: 0; */
+`;
+
+type StyledDropdownContainerProps = Partial<{
+  $horizontal: "left" | "right";
+  $gap: number;
+}>;
+const container = styled.div<StyledDropdownContainerProps>`
+  width: fit-content;
+  min-width: 100%;
+  overflow-x: hidden;
+  position: absolute;
+  top: 100%;
+  ${({ $horizontal }) => $horizontal || "left"} : 0;
+  z-index: 500;
+  ${({ $gap }) =>
+    typeof $gap === "number" &&
+    css`
+      margin-top: ${$gap}px;
+    `}
+`;
+
+const wrapper = styled.div`
+  min-width: 100%;
+  width: fit-content;
+
+  padding: var(--dropdown-padding-vertical) var(--dropdown-padding-horizontal);
+
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--dropdown-border-color);
+  border-top-left-radius: var(--dropdown-border-top-radius);
+  border-top-right-radius: var(--dropdown-border-top-radius);
+  border-bottom-left-radius: var(--dropdown-border-bottom-radius);
+  border-bottom-right-radius: var(--dropdown-border-bottom-radius);
+
+  background-color: var(--dropdown-bg-default);
+
+  box-shadow: var(--dropdown-shadow);
+  overflow: hidden;
+
+  ul {
+    width: 100%;
+    overflow: hidden;
+  }
+  li {
+    width: 100%;
+  }
+`;
+
+const button = styled.button`
+  width: 100%;
+  min-width: var(--dropdown-button-width);
+  height: var(--dropdown-button-height);
+  padding: var(--dropdown-button-padding-vertical)
+    var(--dropdown-button-padding-horizontal);
+
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    background-color: var(--dropdown-button-active);
+  }
+`;
+
+const StyledDropdown = { parent, container, wrapper, button };
+
+export default StyledDropdown;

package/src/form/components/Provider.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { useEffect } from "react";
+// import { useEffect } from "react";
+import {
+  FormProvider as ReactHookFormProvider,
+  useForm,
+  type FieldValues,
+  type UseFormProps,
+  type UseFormReturn,
+} from "react-hook-form";
+
+/**
+ * react-hook-form; context provider
+ */
+export default function FormProvider<FormDataType extends FieldValues>({
+  children,
+  options,
+  callback,
+}: {
+  children: React.ReactNode;
+} & Partial<{
+  options: UseFormProps<FormDataType>;
+  callback: (params: UseFormReturn<FormDataType>) => void | undefined;
+}>) {
+  const formMethods = useForm<FormDataType>({ mode: "all", ...options });
+
+  useEffect(() => {
+    if (typeof callback === "undefined") return;
+    // if (typeof callback !== "undefined")
+    callback(formMethods);
+  }, [callback, formMethods]);
+
+  return (
+    <ReactHookFormProvider {...formMethods}>{children}</ReactHookFormProvider>
+  );
+}

package/src/form/index.tsx

@@ -0,0 +1,5 @@
+import FormProvider from "./components/Provider";
+
+const Form = { Provider: FormProvider };
+
+export default Form;

package/src/form-field/common/components/item-contents/Container.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { forwardRef, memo } from "react";
+import { clsx } from "clsx";
+
+import StyledField from "../../styled";
+import type { FormFieldItemContainerProps } from "../../../../types";
+
+const FieldItemContainer = forwardRef(
+  (
+    {
+      className,
+      fieldType,
+      labelName,
+      labelHide,
+      icon,
+      thumb,
+      selectorId,
+      readonly,
+      useHtmlLabel = true,
+      children,
+    }: FormFieldItemContainerProps,
+    ref: React.ForwardedRef<HTMLDivElement>,
+  ) => {
+    return (
+      <StyledField.item.container
+        className={clsx("field-item-component", fieldType, className)}
+        ref={ref}
+      >
+        <StyledField.item.contents.container
+          className="field-item-container"
+          aria-label={labelName}
+          // htmlFor={selectorId}
+          title={labelName}
+          {...(useHtmlLabel
+            ? { as: "label", htmlFor: selectorId }
+            : { as: "div" })}
+          $style={fieldType}
+          $hide={labelHide}
+          $icon={icon}
+          $thumb={thumb}
+          $readonly={readonly}
+        >
+          {children}
+        </StyledField.item.contents.container>
+      </StyledField.item.container>
+    );
+  },
+);
+
+export default memo(FieldItemContainer);

package/src/form-field/common/components/item-contents/Label.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { clsx } from "clsx";
+import StyledField from "../../styled";
+import type { FormFieldItemLabelProps } from "../../../../types";
+
+export default function FieldItemLabel({
+  name,
+  position,
+  topAlign,
+}: FormFieldItemLabelProps) {
+  return (
+    <StyledField.item.contents.label
+      className={clsx("field-item-label", position, topAlign)}
+      $pos={position}
+      $topAlign={topAlign}
+    >
+      {typeof name === "string" ? <span>{name}</span> : name}
+    </StyledField.item.contents.label>
+  );
+}

package/src/form-field/common/components/item-contents/Wrapper.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { clsx } from "clsx";
+import StyledField from "../../styled";
+import type { FormFieldItemWrapperProps } from "../../../../types";
+
+export default function FieldItemWrapper({
+  className,
+  state,
+  focus,
+  openSelect,
+  children,
+}: FormFieldItemWrapperProps) {
+  return (
+    <StyledField.item.contents.wrapper
+      className={clsx("field-item-wrapper", className)}
+      $state={state}
+      $focus={focus}
+      $openSelect={openSelect}
+    >
+      {children}
+    </StyledField.item.contents.wrapper>
+  );
+}

package/src/form-field/common/components/item-contents/index.tsx

@@ -0,0 +1,11 @@
+import FieldItemContainer from "./Container";
+import FieldItemLabel from "./Label";
+import FieldItemWrapper from "./Wrapper";
+
+const FieldItem = {
+  Container: FieldItemContainer,
+  Wrapper: FieldItemWrapper,
+  Label: FieldItemLabel,
+};
+
+export default FieldItem;

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

@@ -0,0 +1,2 @@
+@use "./styles/scss/reset.scss";
+@use "./styles/scss/variables.scss";

package/src/form-field/common/hook.tsx

@@ -0,0 +1 @@
+export * from "./hooks";

package/src/form-field/common/hooks/index.tsx

@@ -0,0 +1,13 @@
+import useFieldChangeEvents from "./useChangeEvents";
+import useInputFile from "./useInputFile";
+import useInputCountdown from "./useInputCountdown";
+import useInputMask from "./useInputMask";
+import useOpenDaumPostCodePopup from "./useOpenDaumPostCodePopup";
+
+export {
+  useFieldChangeEvents,
+  useInputFile,
+  useInputCountdown,
+  useInputMask,
+  useOpenDaumPostCodePopup,
+};

package/src/form-field/common/hooks/types.ts

@@ -0,0 +1,16 @@
+export type UseCountdownOptions = {
+  /** 시작 값 (예: 180초) */
+  countStart: number;
+  /** 정지 값 (기본: 감소 모드에서는 0, 증가 모드에서는 Infinity) */
+  countStop?: number;
+  /** tick 간격(ms). 기본 1000ms */
+  intervalMs?: number;
+  /** true면 카운트업, false면 카운트다운 */
+  isIncrement?: boolean;
+};
+
+export type UseCountdownControls = {
+  startCountdown: () => void;
+  stopCountdown: () => void;
+  resetCountdown: () => void;
+};

package/src/form-field/common/hooks/useChangeEvents.ts

@@ -0,0 +1,171 @@
+"use client";
+
+import type { FieldStateType, UseFieldChangeEvents } from "../../../types";
+import { useCallback, useMemo, useState } from "react";
+import useInputMask from "./useInputMask";
+
+/**
+ * Form-Field Hook; 입력변경 이벤트
+ * @param {Partial<UseFieldChangeEvents>} params - 입력 변경 이벤트 파라미터
+ * @property {FormFieldStatePropsType} state - Form field 상태 Props
+ * @property {FieldStateType} state.default: 기본 상태 (인터랙션에 따라 동적 상태)
+ * @property {FieldStateReadonlyType} state.fixed: 고정 상태 (특정 상태로 고정이 필요한 경우)
+ * @property {boolean} state.checked: 체크 상태 (체크박스, 라디오 등에서 사용)
+ * @property {boolean} convertNumber - 숫자 변환 여부
+ * @property {MaskType} maskType - 입력 마스크 타입
+ * @property {UseFormRegisterReturn} register - React Hook Form 등록 정보
+ * @property {Function} onDefaultChange - 기본 입력 변경 이벤트 핸들러
+ * @property {Function} onCustomChange - 커스텀 입력 변경 이벤트 핸들러
+ * @desc
+ * return {
+ *   isReadonly,
+ *   activeState,
+ *   currentValue,
+ *   isFocused,
+ *   setFocused,
+ *   onFocus,
+ *   onBlur,
+ *   onChange,
+ * }
+ */
+export default function useFieldChangeEvents<
+  Field extends
+    | HTMLInputElement
+    | HTMLTextAreaElement
+    | HTMLSelectElement = HTMLInputElement,
+>({
+  state,
+  convertNumber,
+  maskType,
+  register,
+  onDefaultChange,
+  onCustomChange,
+}: Partial<UseFieldChangeEvents<Field>>) {
+  // 입력 마스크
+  const { updateMaskValue } = useInputMask();
+
+  // 읽기전용 여부
+  const isReadonly = useMemo(
+    () => ["readonly", "disabled"].includes(state?.fixed || ""),
+    [state?.fixed],
+  );
+
+  const activeState = useMemo(
+    (): FieldStateType =>
+      state?.fixed // 입력 상태 기본값
+        ? state.fixed
+        : state?.default
+          ? state.default
+          : "active",
+    [state?.default, state?.fixed],
+  );
+
+  // 마지막 입력값
+  const [currentValue, setCurrentValue] = useState<string>("");
+
+  // 입력 상태
+  const [isFocused, setIsFocused] = useState<boolean>(false);
+
+  /**
+   * Focus 이벤트 핸들러
+   */
+  const onFocus = useCallback(
+    (e: React.FocusEvent<Field>) => {
+      // 읽기전용 인터렉션 방지
+      if (isReadonly) {
+        e.preventDefault();
+        return;
+      }
+
+      // focus on
+      setIsFocused(true);
+
+      // 포커스 되었을 때, 현재 입력값 최초 업데이트
+      const { value } = e.target;
+      if (["string", "number"].includes(typeof value)) setCurrentValue(value);
+    },
+    [isReadonly],
+  );
+
+  /**
+   * Blur 이벤트 할들러
+   */
+  const onBlur = useCallback(
+    (e: React.FocusEvent<Field>) => {
+      // 읽기전용 인터렉션 방지
+      if (isReadonly) {
+        e.preventDefault();
+        return;
+      }
+
+      // focus off
+      setIsFocused(false);
+
+      // react-hook-form register onBlur 동작 적용
+      if (typeof register !== "undefined") register?.onBlur(e);
+    },
+    [isReadonly, register],
+  );
+
+  const onChange = useCallback(
+    (e: React.ChangeEvent<Field>) => {
+      // 읽기전용 인터렉션 방지
+      if (isReadonly) {
+        e.preventDefault();
+        return;
+      }
+
+      // react-hook-React.form의 onChange 동작을 덮어쓴다.
+      if (typeof onDefaultChange !== "undefined") {
+        onDefaultChange(e);
+        return;
+      }
+
+      const { value } = e.target;
+      const isValidInput = ["string", "number"].includes(typeof value);
+
+      // 입력 값 관리
+      if (isValidInput) setCurrentValue(value);
+
+      // 입력값 숫자 변환
+      if (convertNumber && value !== "" && !isNaN(Number(value))) {
+        // 입력값
+        const isPoint =
+          Number(value) !== 0 && value.indexOf(".") === value.length - 1;
+        const intValue = String(Number(value) * 1);
+
+        e.target.value = intValue + (isPoint ? "." : "");
+      }
+
+      // 입력값 마스킹
+      if (isValidInput && maskType)
+        e.target.value = updateMaskValue(value, maskType);
+
+      // react-hook-form register onChange 동작 적용
+      if (typeof register !== "undefined") register?.onChange(e);
+
+      // props로 받아온 커스텀 onChange 동작; react-hook-form register의 onChange와 함께 동작한다.
+      if (typeof onCustomChange !== "undefined") onCustomChange(e);
+    },
+    [
+      convertNumber,
+      isReadonly,
+      maskType,
+      onCustomChange,
+      onDefaultChange,
+      register,
+      updateMaskValue,
+    ],
+  );
+
+  return {
+    isReadonly,
+    activeState,
+    currentValue,
+    isFocused,
+    setFocused: setIsFocused,
+    onFocus,
+    onBlur,
+    onChange,
+  };
+}

package/src/form-field/common/hooks/useInputCountdown.ts

@@ -0,0 +1,115 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import type { UseCountdownOptions, UseCountdownControls } from "./types";
+
+/**
+ * usehooks-ts/useCountdown 패턴을 참고한, 의존성 없는 카운트다운 훅.
+ * - [count, { startCountdown, stopCountdown, resetCountdown }] 형태로 반환.
+ * - startCountdown: 현재 count 값부터 시작
+ * - resetCountdown: count를 초기값으로 되돌리고 정지
+ */
+function useCountdown({
+  countStart,
+  countStop,
+  intervalMs = 1000,
+  isIncrement = false,
+}: UseCountdownOptions): readonly [number, UseCountdownControls] {
+  const [count, setCount] = useState<number>(countStart);
+  const [isRunning, setIsRunning] = useState<boolean>(false);
+
+  const resolvedStop = (() => {
+    if (typeof countStop === "number") {
+      return countStop;
+    }
+    // 기본값: 감소 모드에서는 0, 증가 모드에서는 Infinity
+    return isIncrement ? Number.POSITIVE_INFINITY : 0;
+  })();
+
+  const startCountdown = useCallback(() => {
+    setIsRunning(true);
+  }, []);
+
+  const stopCountdown = useCallback(() => {
+    setIsRunning(false);
+  }, []);
+
+  const resetCountdown = useCallback(() => {
+    setCount(countStart);
+    setIsRunning(false);
+  }, [countStart]);
+
+  useEffect(() => {
+    if (!isRunning) {
+      return;
+    }
+
+    const id = window.setInterval(() => {
+      setCount(prev => {
+        const next = isIncrement ? prev + 1 : prev - 1;
+
+        if (isIncrement) {
+          if (next >= resolvedStop) {
+            setIsRunning(false);
+            return resolvedStop;
+          }
+          return next;
+        }
+
+        // 감소 모드
+        if (next <= resolvedStop) {
+          setIsRunning(false);
+          return resolvedStop;
+        }
+
+        return next;
+      });
+    }, intervalMs);
+
+    return () => {
+      window.clearInterval(id);
+    };
+  }, [isRunning, intervalMs, isIncrement, resolvedStop]);
+
+  return [
+    count,
+    {
+      startCountdown,
+      stopCountdown,
+      resetCountdown,
+    },
+  ] as const;
+}
+
+/**
+ * 인증 입력 타이머용 훅.
+ * - 기본 180초에서 0까지 1초 단위 카운트다운.
+ * - 외부 API:
+ *   - startCount, stopCount, resetCount
+ *   - showCount, setShowCount
+ *   - remainTime
+ */
+export default function useInputCountdown({
+  countTime = 180,
+}: {
+  countTime?: number;
+}) {
+  const [showCount, setShowCount] = useState(false);
+
+  const [count, { startCountdown, stopCountdown, resetCountdown }] =
+    useCountdown({
+      countStart: countTime,
+      countStop: 0,
+      intervalMs: 1000,
+      isIncrement: false,
+    });
+
+  return {
+    startCount: startCountdown,
+    stopCount: stopCountdown,
+    resetCount: resetCountdown,
+    showCount,
+    setShowCount,
+    remainTime: count,
+  };
+}

package/src/form-field/common/hooks/useInputFile.ts

@@ -0,0 +1,94 @@
+"use client";
+
+import { useCallback } from "react";
+import type { UseInputFileProps } from "../../../types";
+
+/**
+ * Form-Field Hook; 파일첨부 Hook
+ * @param {UseInputFileProps} params - 파일 선택 input의 ID
+ * @param {string} params.selectorId - 파일 선택 input의 ID
+ * @param {Function} params.uploadCallback - 파일 업로드 콜백 함수
+ * @desc
+ * return { onOpenFinder, onRegisterFiles, onDropFiles }
+ */
+export default function useInputFile({
+  selectorId,
+  uploadCallback,
+}: UseInputFileProps) {
+  /**
+   * 파일 선택 창 열기
+   * @param {React.SyntheticEvent} e - 이벤트 객체
+   */
+  const onOpenFinder = useCallback(
+    <ElementType extends Element = HTMLElement>(
+      e?: React.SyntheticEvent<ElementType>,
+    ) => {
+      if (!selectorId) return;
+
+      if (typeof window === "undefined" || typeof e === "undefined") return;
+
+      e.preventDefault();
+      // e.stopPropagation();
+
+      const inputElement = document.querySelector<HTMLInputElement>(
+        `#${selectorId}`,
+      );
+      if (inputElement) inputElement.click();
+    },
+    [selectorId],
+  );
+
+  /**
+   * 파일 선택 후 등록
+   * @param {React.ChangeEvent<HTMLInputElement>} e - 파일 선택 이벤트
+   */
+  const onRegisterFiles = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      // 선택된 파일
+      const files = e.target.files;
+
+      // 파일이 없음
+      if (!files || files.length === 0) {
+        console.log("[onRegisterFiles] 선택된 파일이 없습니다.");
+        return;
+      }
+
+      const fileArray = Array.from<File>(files);
+      console.log("[onRegisterFiles] 업로드한 파일:", fileArray);
+
+      uploadCallback(fileArray);
+    },
+    [uploadCallback],
+  );
+
+  /**
+   * 파일 드롭 이벤트 핸들러
+   * @param {React.DragEvent} e - 드래그 앤 드롭 이벤트
+   */
+  const onDropFiles = useCallback(
+    <ElementType extends HTMLElement = HTMLDivElement>(
+      e: React.DragEvent<ElementType>,
+    ) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      const files = e.dataTransfer.files;
+      if (!files || files.length === 0) {
+        console.log("[onDropFiles] 드롭된 파일이 없습니다.");
+        return;
+      }
+
+      const fileArray = Array.from(files);
+      console.log("[onDropFiles] 드롭된 파일:", fileArray);
+
+      uploadCallback(fileArray);
+    },
+    [uploadCallback],
+  );
+
+  return {
+    onOpenFinder,
+    onRegisterFiles,
+    onDropFiles,
+  };
+}