@uniai-fe/ui-legacy 0.1.1

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

@@ -0,0 +1,56 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import type { MaskType } from "../../../types";
+import {
+  maskBusinessCode,
+  maskDate,
+  maskDecimalSeparator,
+  maskPhone,
+  maskResidentCode,
+} from "@uniai-fe/util-functions";
+
+/**
+ * Form-Field Hook; 입력 마스크
+ * @desc
+ * - 전화번호: "phone"
+ * - 주민등록번호: "residentCode"
+ * - 사업자등록번호: "businessCode"
+ * - 날짜: "date"
+ * - 숫자에 쉼표 추가: "comma"
+ * @return maskValue: 현재 마스크된 값, updateMaskValue: 마스크 업데이트 함수
+ */
+export default function useInputMask() {
+  const [maskValue, setMaskValue] = useState<string | number>("");
+
+  /**
+   * 입력 마스크 업데이트 함수
+   * @param {string | number} value - 입력 값
+   * @param {MaskType} type - phone, residentCode, businessCode, date, comma
+   * @return {string} - 마스크된 값
+   */
+  const updateMaskValue = useCallback(
+    (value: string | number, type: MaskType): string => {
+      if (String(maskValue) === String(value)) return String(value);
+
+      let newValue = String(value);
+      if (type === "phone") {
+        newValue = maskPhone(String(value));
+      } else if (type === "residentCode") {
+        newValue = maskResidentCode(String(value));
+      } else if (type === "businessCode") {
+        newValue = maskBusinessCode(String(value));
+      } else if (type === "comma") {
+        newValue = maskDecimalSeparator(value);
+      } else if (type === "date") {
+        newValue = maskDate(value);
+      }
+      setMaskValue(newValue);
+
+      return newValue;
+    },
+    [maskValue],
+  );
+
+  return { maskValue, updateMaskValue };
+}

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

@@ -0,0 +1,55 @@
+"use client";
+
+import { useSetAtom } from "jotai";
+import { useDaumPostcodePopup, type Address } from "react-daum-postcode";
+import { daumPostCodeState } from "../jotai/find-address";
+
+/**
+ * react-daum-postcode 주소 찾기
+ * 참조: https://github.com/kmsbernard/react-daum-postcode
+ */
+export default function useOpenDaumPostCodePopup(addressKey: string) {
+  const openPopup = useDaumPostcodePopup();
+  // 팝업에서 선택한 주소 상태관리
+  const setDaumPostCodeState = useSetAtom(daumPostCodeState);
+
+  // 주소찾기 버튼 클릭 이벤트
+  return () => {
+    // 주소찾기 열기
+    openPopup({
+      // 주소찾기 선택 완료 시
+      onComplete: ({
+        address: locationAddress,
+        addressType,
+        bname,
+        buildingName,
+        zonecode,
+      }: Address) => {
+        let fullAddress: string = locationAddress;
+        let buildingAddress: string = "";
+
+        // 동읍면 및 빌딩 정보 추가
+        if (addressType === "R") {
+          if (bname !== "") buildingAddress += bname;
+
+          if (buildingName !== "")
+            buildingAddress +=
+              buildingAddress !== "" ? `, ${buildingName}` : buildingName;
+          fullAddress += buildingAddress !== "" ? ` (${buildingAddress})` : "";
+        }
+
+        console.log(`fullAddress: `, fullAddress);
+        // 선택한 주소 상태 저장
+        console.log(`addressKey`, addressKey);
+        if (typeof addressKey === "undefined" || addressKey === "") return;
+        setDaumPostCodeState(prev => ({
+          ...prev,
+          [addressKey]: {
+            address: fullAddress,
+            zipCode: zonecode,
+          },
+        }));
+      },
+    });
+  };
+}

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

@@ -0,0 +1,7 @@
+import FieldItem from "./components/item-contents";
+
+const Field = {
+  Item: FieldItem,
+};
+
+export default Field;

package/src/form-field/common/jotai/find-address.ts

@@ -0,0 +1,4 @@
+import type { DaumPostCodeStateType } from "../../../types";
+import { atom } from "jotai";
+
+export const daumPostCodeState = atom<DaumPostCodeStateType>({});

package/src/form-field/common/jotai/password-hide.ts

@@ -0,0 +1,6 @@
+import { atom } from "jotai";
+
+interface InputHideStateType {
+  [inputKey: string]: "text" | "password";
+}
+export const inputHideState = atom<InputHideStateType>({});

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

@@ -0,0 +1,7 @@
+import StyledFieldItem from "./styles/styled-components/item";
+
+const StyledField = {
+  item: StyledFieldItem,
+};
+
+export default StyledField;

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

@@ -0,0 +1,52 @@
+input,
+select,
+textarea,
+button {
+  &:focus,
+  &:focus-visible,
+  &:focus-within {
+    outline: none;
+  }
+}
+select,
+input,
+textarea {
+  transition: border-color var(--field-item-state-transition-duration);
+}
+
+select {
+  display: none;
+}
+
+input {
+  &:focus {
+    border-color: var(--field-state-focus);
+  }
+  &[type="search"] {
+    outline-offset: -0.2rem;
+  }
+  &[type="file"] {
+    display: none;
+  }
+}
+
+@mixin placeholder {
+  &::placeholder {
+    opacity: 1;
+    color: var(--field-item-placeholder);
+    transition:
+      opacity var(--field-item-state-transition-duration),
+      color var(--field-item-state-transition-duration);
+  }
+
+  &:not([readonly], [disabled]):focus::placeholder {
+    color: transparent;
+  }
+}
+input {
+  @include placeholder;
+}
+
+textarea {
+  @include placeholder;
+}

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

@@ -0,0 +1,52 @@
+:root {
+  // state
+  --field-state-focus: var(--color-light-blue-600);
+  --field-state-success: var(--green);
+  --field-state-error: var(--red);
+  --field-item-state-transition-duration: 0.12s;
+
+  // background
+  --field-item-bg-default: var(--color_0);
+  --field-item-bg-hover: var(--color_10);
+  --field-item-bg-readonly: var(--theme-background-20);
+
+  // border
+  --field-item-border-radius: 4px;
+  --field-item-border-default: var(--color-blue-gray-300);
+  --field-item-border-focus: var(--color-light-blue-600);
+  --field-item-border-readonly: var(--color-light-blue-600);
+
+  // text
+  --field-label-text: var(--color_90);
+  --field-item-placeholder: var(--color_40);
+  --field-item-text-input: var(--color_70);
+  --field-item-text-select: var(--color_60);
+  --field-item-text-focus: var(--color_90);
+  --field-item-text-readonly: var(--color_40);
+
+  // align
+  --field-item-flex-wrap: wrap;
+
+  // size
+  --field-item-width: auto;
+  --field-item-margin-vertical: 0px;
+  --field-item-margin-horizontal: 0.4rem;
+  --field-item-padding-vertical: 0px;
+  --field-item-padding-horizontal: 0px;
+  --field-item-wrapper-width: 100%;
+  --field-item-wrapper-height: 3.6rem;
+  --field-gap-thumb: 0.8rem;
+  --field-gap-label: 0.8rem;
+  --field-label-width: fit-content;
+  --field-label-text-size: 1.4rem;
+  --field-item-height: 3.6rem;
+
+  &.dark-mode {
+    --field-item-bg-default: var(--color_bg_dark_40);
+
+    --field-item-border-default: var(--color_bg_dark_40);
+
+    // 디자인시스템에 일관성이 없음.
+    // 다크테마 정돈하고 적용해야함.
+  }
+}

package/src/form-field/common/styles/styled-components/item.ts

@@ -0,0 +1,148 @@
+"use client";
+
+import type {
+  FormFieldType,
+  LabelPositionType,
+  LabelTopAlignType,
+} from "../../../../types";
+import { styled, css } from "styled-components";
+
+const container = styled.div`
+  width: var(--field-item-width);
+  margin: var(--field-item-margin-vertical) var(--field-item-margin-horizontal);
+  &:first-child {
+    margin-left: 0;
+  }
+  &:last-child {
+    margin-right: 0;
+  }
+`;
+
+type StyledWrapperProps = Partial<{
+  $state: string;
+  $focus: boolean;
+  $openSelect: boolean;
+}>;
+const contentsWrapper = styled.div<StyledWrapperProps>`
+  width: var(--field-item-wrapper-width);
+  min-height: var(--field-item-wrapper-height);
+  padding: var(--field-item-padding-vertical)
+    var(--field-item-padding-horizontal);
+
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  flex-wrap: var(--field-item-flex-wrap);
+`;
+
+type StyledLabelTextProps = Partial<{
+  $pos: LabelPositionType;
+  $topAlign: LabelTopAlignType;
+}>;
+const labelBox = styled.div<StyledLabelTextProps>`
+  --field-label-text-size: 1.6rem;
+
+  ${({ $topAlign }) =>
+    $topAlign
+      ? css`
+          width: 100%;
+          margin-bottom: var(--field-gap-label);
+        `
+      : css`
+          width: var(--field-label-width);
+        `};
+
+  ${({ $pos }) =>
+    $pos === "right"
+      ? css`
+          margin-left: var(--field-gap-label);
+        `
+      : css`
+          margin-right: var(--field-gap-label);
+        `};
+
+  display: flex;
+  align-items: center;
+
+  ${({ $topAlign }) => {
+    switch ($topAlign) {
+      case "left":
+        return css`
+          justify-content: flex-start;
+        `;
+      case "center":
+        return css`
+          justify-content: center;
+        `;
+      case "right":
+        return css`
+          justify-content: flex-end;
+        `;
+      default:
+        return undefined;
+    }
+  }};
+
+  span {
+    font-size: var(--field-label-text-size);
+    color: var(--field-label-text);
+    font-weight: 500;
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  i {
+    font-size: calc(var(--field-label-text-size) * 0.75);
+    align-self: self-end;
+  }
+`;
+
+type StyledContainerProps = Partial<{
+  $style: FormFieldType;
+  $hide: boolean;
+  $icon: boolean;
+  $thumb: boolean;
+  $readonly: boolean;
+}>;
+const contentsContainer = styled.label<StyledContainerProps>`
+  width: 100%;
+  ${({ $style }) => {
+    switch ($style) {
+      case "checkbox":
+        return css`
+          ${labelBox} {
+            cursor: pointer;
+          }
+        `;
+      default:
+        return undefined;
+    }
+  }}
+  ${({ $readonly }) =>
+    $readonly &&
+    css`
+      opacity: 0.4;
+      cursor: default;
+    `}
+`;
+
+const contents = {
+  container: contentsContainer,
+  wrapper: contentsWrapper,
+  label: labelBox,
+};
+
+const thumbnail = styled.figure`
+  width: 100%;
+  height: auto;
+  margin-bottom: var(--field-gap-thumb);
+`;
+
+const StyledFieldItem = {
+  container,
+  contents,
+  thumbnail,
+};
+
+export default StyledFieldItem;

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

@@ -0,0 +1,54 @@
+"use client";
+
+import { forwardRef, memo } from "react";
+
+import FieldItem from "../../common/components/item-contents";
+import type { InputContainerProps } from "../../../types";
+
+const InputContainer = forwardRef(
+  (
+    {
+      className,
+      fieldType,
+      selectorId,
+      label,
+      wrapperOptions,
+      icon,
+      thumb,
+      readonly,
+      useHtmlLabel,
+      children,
+    }: InputContainerProps,
+    ref: React.ForwardedRef<HTMLDivElement>,
+  ) => {
+    const isShowLabel = (isHide?: boolean) =>
+      typeof isHide === "boolean" && isHide === false;
+
+    return (
+      <FieldItem.Container
+        className={className}
+        fieldType={fieldType}
+        selectorId={selectorId}
+        labelName={label.tooltip}
+        labelHide={label.hide || true}
+        icon={icon}
+        thumb={thumb}
+        readonly={readonly}
+        useHtmlLabel={useHtmlLabel}
+        ref={ref}
+      >
+        <FieldItem.Wrapper className="input" {...wrapperOptions}>
+          {isShowLabel(label.hide) && label.position !== "right" && (
+            <FieldItem.Label {...label} />
+          )}
+          {children}
+          {isShowLabel(label.hide) && label.position === "right" && (
+            <FieldItem.Label {...label} />
+          )}
+        </FieldItem.Wrapper>
+      </FieldItem.Container>
+    );
+  },
+);
+
+export default memo(InputContainer);

package/src/form-field/input/components/assets/button/ResetButton.tsx

@@ -0,0 +1,24 @@
+import Reset from "@icon/action/close_circle_filled.svg";
+
+/**
+ * 입력 값 모두 지우기 버튼
+ * @property {Function} clickEvent InputText에서 사용하는 reset callback
+ */
+export default function InputResetButton({
+  clickEvent,
+}: {
+  clickEvent: (e?: React.MouseEvent<HTMLButtonElement>) => void;
+}) {
+  return (
+    <button
+      type="reset"
+      className="input-util-item"
+      onClick={clickEvent}
+      tabIndex={-1}
+    >
+      <figure>
+        <Reset />
+      </figure>
+    </button>
+  );
+}

package/src/form-field/input/components/assets/calendar/DatePicker.tsx

@@ -0,0 +1,184 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useAtomValue } from "jotai";
+import { Controller, useFormContext } from "react-hook-form";
+import flatpickr from "flatpickr";
+import DateTimePicker from "react-flatpickr";
+import { Korean } from "flatpickr/dist/l10n/ko";
+import { Japanese } from "flatpickr/dist/l10n/ja";
+
+import type { InputDateTimeProps } from "../../../../../types";
+import { systemLocaleState } from "@uniai-fe/i18n/jotai";
+import { dateFormat, isValidDateType } from "@uniai-fe/util-functions";
+import StyledInputBase from "../../../styles/styled-components/base";
+import CustomButtonContainer from "./custom/ButtonContainer";
+
+export default function CustomDatePicker({
+  selectorId,
+  dataKey,
+  label,
+  attr,
+  state,
+  register,
+  width,
+  updateIsOpenCalendar,
+  flatpickrOptions = {},
+  flatpickrCustomButtons,
+  preventChangeDatePicker,
+  onChangeDatePicker,
+  dateValidOptions,
+  errorMonitor,
+  formError,
+}: InputDateTimeProps) {
+  const locale = useAtomValue(systemLocaleState) || "ko";
+
+  const flatPickrRef = useRef<DateTimePicker | null>(null);
+
+  const styledOptions = useMemo(
+    () => ({
+      $width: width,
+      $icon: true,
+    }),
+    [width],
+  );
+
+  const attrs = {
+    id: selectorId,
+    "aria-label": `${label.name} 날짜 입력`,
+    "table-cell": attr?.isTableCell ? "true" : "false",
+  };
+  if (typeof attr?.origin !== "undefined")
+    Object.assign(attrs, { ...attr.origin });
+
+  const [selectDate, setSelectDate] = useState<Date | string>("");
+  const isReadonly = useMemo(
+    (): boolean => ["readonly", "disabled"].includes(state?.fixed || ""),
+    [state?.fixed],
+  );
+
+  const formMethods = useFormContext();
+
+  // 날짜를 범위지정 하는 경우
+  const isRange = useMemo(
+    () => flatpickrOptions.mode === "range",
+    [flatpickrOptions.mode],
+  );
+
+  const options = useMemo(
+    (): flatpickr.Options.Options => ({
+      clickOpens: !isReadonly,
+      altFormat: "Y. m. d.",
+      dateFormat: "Y. m. d.",
+      monthSelectorType: "static",
+      time_24hr: true,
+      locale: locale === "jp" ? Japanese : locale === "ko" ? Korean : "en", // 언어 변경에 따른 달력 설정 업데이트
+      ...flatpickrOptions,
+    }),
+    [flatpickrOptions, isReadonly, locale],
+  );
+
+  // 에러 모니터링
+  useEffect(() => {
+    if (typeof errorMonitor !== "undefined")
+      errorMonitor({ inputKey: dataKey });
+  }, [errorMonitor, dataKey, selectDate, formError]);
+
+  const registerName = useMemo(
+    () => (register?.name ? register.name : dataKey),
+    [dataKey, register?.name],
+  );
+  // console.log(`[${registerName}] options`, options);
+
+  return (
+    <>
+      {typeof formMethods?.control !== "undefined" ? (
+        <Controller
+          name={registerName}
+          control={formMethods.control}
+          rules={dateValidOptions}
+          render={({ field: { onChange, ...fieldProps } }) => (
+            <StyledInputBase.box
+              {...styledOptions}
+              as={DateTimePicker}
+              {...fieldProps}
+              ref={flatPickrRef}
+              {...attrs}
+              options={options}
+              disabled={isReadonly}
+              readOnly={isReadonly}
+              onOpen={() => {
+                if (typeof updateIsOpenCalendar !== "undefined")
+                  updateIsOpenCalendar(true);
+              }}
+              onClose={() => {
+                if (typeof updateIsOpenCalendar !== "undefined")
+                  updateIsOpenCalendar(false);
+              }}
+              onChange={(selectedDates, ...props) => {
+                if (typeof onChangeDatePicker !== "undefined") {
+                  onChangeDatePicker(selectedDates, ...props);
+                }
+
+                if (!preventChangeDatePicker) {
+                  const updateDate = isRange
+                    ? `${dateFormat(selectedDates[0])} ~ ${
+                        isValidDateType(selectedDates[1])
+                          ? dateFormat(selectedDates[1])
+                          : "----.--.--."
+                      }`
+                    : selectedDates[0];
+
+                  setSelectDate(updateDate);
+                  onChange(
+                    isRange ? selectedDates : selectedDates[0],
+                    ...props,
+                  );
+                }
+              }}
+            />
+          )}
+        />
+      ) : (
+        <StyledInputBase.box
+          as={DateTimePicker}
+          {...styledOptions}
+          ref={flatPickrRef}
+          {...attrs}
+          options={options}
+          readOnly={isReadonly}
+          disabled={isReadonly}
+          onOpen={() => {
+            if (typeof updateIsOpenCalendar !== "undefined")
+              updateIsOpenCalendar(true);
+          }}
+          onClose={() => {
+            if (typeof updateIsOpenCalendar !== "undefined")
+              updateIsOpenCalendar(false);
+          }}
+          onChange={(selectedDates, ...props) => {
+            if (typeof onChangeDatePicker !== "undefined") {
+              onChangeDatePicker(selectedDates, ...props);
+            }
+            const updateDate = isRange
+              ? `${dateFormat(selectedDates[0])} ~ ${dateFormat(selectedDates[1])}`
+              : selectedDates[0];
+
+            setSelectDate(updateDate);
+          }}
+        />
+      )}
+      {flatpickrCustomButtons &&
+        flatpickrCustomButtons instanceof HTMLElement &&
+        flatPickrRef.current &&
+        flatPickrRef.current.flatpickr?.calendarContainer &&
+        createPortal(
+          <CustomButtonContainer>
+            {flatpickrCustomButtons(flatPickrRef.current.flatpickr)}
+          </CustomButtonContainer>,
+          flatPickrRef.current.flatpickr.calendarContainer,
+        )}
+    </>
+  );
+}