@uniai-fe/ui-legacy 0.1.1

package/src/form-field/input/styles/styled-components/base.ts

@@ -0,0 +1,96 @@
+"use client";
+
+import { styled, css } from "styled-components";
+import { styleBaseSize } from "@uniai-fe/util-functions";
+
+type StyledInputProps = Partial<{
+  $width: string | number;
+  $icon: boolean;
+  $unitWidth: string | number | boolean;
+}>;
+const inputBox = styled.input<StyledInputProps>`
+  // layout
+  width: ${({ $width }) => styleBaseSize("rem", $width, "100%")};
+  height: var(--input-box-height);
+  padding: 0 var(--input-box-padding);
+  ${({ $icon }) =>
+    $icon &&
+    css`
+      padding-left: 4.2rem;
+    `};
+  ${({ $unitWidth }) =>
+    ["string", "number"].includes(typeof $unitWidth)
+      ? css`
+          padding-right: ${styleBaseSize("rem", $unitWidth as string | number)};
+        `
+      : typeof $unitWidth === "boolean" &&
+        $unitWidth &&
+        css`
+          padding-right: 5rem;
+        `};
+
+  border: 1px solid var(--input-box-border-color);
+  border-top-left-radius: var(--input-box-border-top-radius);
+  border-top-right-radius: var(--input-box-border-top-radius);
+  border-bottom-left-radius: var(--input-box-border-bottom-radius);
+  border-bottom-right-radius: var(--input-box-border-bottom-radius);
+
+  background: var(--input-box-bg);
+
+  font-size: var(--input-box-text-size);
+  color: var(--input-box-text-color);
+  font-weight: 400;
+  line-height: 1em;
+
+  &:focus {
+    border-color: var(--field-state-focus);
+  }
+  &.readonly,
+  &[readonly] {
+    color: var(--input-box-text-color-readonly);
+    background-color: var(--color_5);
+    user-select: none;
+    cursor: auto;
+    &:focus {
+      border-color: var(--input-box-border-color);
+    }
+  }
+`;
+
+type StyledIconProps = {
+  $width: number;
+  $height: number;
+};
+const inputIcon = styled.div<StyledIconProps>`
+  position: absolute;
+  top: 50%;
+  left: var(--input-box-padding);
+  transform: translateY(-50%);
+
+  figure {
+    width: ${({ $width }) => `${$width / 10}rem`};
+    height: ${({ $height }) => `${$height / 10}rem`};
+    position: relative;
+  }
+`;
+
+const inputUnit = styled.div`
+  position: absolute;
+  top: 50%;
+  right: var(--input-box-padding);
+  transform: translateY(calc(-50% + 1px));
+  span {
+    font-size: var(--input-box-text-size);
+    color: var(--input-box-text-color);
+    font-weight: 500;
+    line-height: 1em;
+  }
+`;
+
+const StyledInputBase = {
+  box: inputBox,
+  icon: inputIcon,
+  unit: inputUnit,
+};
+
+export default StyledInputBase;

package/src/form-field/input/styles/styled-components/calendar.ts

@@ -0,0 +1,18 @@
+"use client";
+
+import { styled } from "styled-components";
+
+const customButtonContainer = styled.div`
+  padding-top: 1rem;
+  display: flex;
+  align-items: center;
+  button {
+    background: var(--flatpickr-button-bg) !important;
+  }
+`;
+
+const StyledCalendar = {
+  customButtonContainer,
+};
+
+export default StyledCalendar;

package/src/form-field/input/styles/styled-components/click.ts

@@ -0,0 +1,37 @@
+"use client";
+
+import { styled } from "styled-components";
+
+const container = styled.div`
+  position: relative;
+  cursor: pointer;
+
+  input {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: -1;
+    width: 0.8rem;
+    height: 0.8rem;
+  }
+`;
+
+const checkbox = styled.input``;
+
+const radio = styled.input`
+  &:checked + .input-icon-radio {
+    border-color: var(--theme-blue-main);
+    span {
+      opacity: 1;
+    }
+  }
+`;
+
+const StyledInputClick = {
+  container,
+  checkbox,
+  radio,
+};
+
+export default StyledInputClick;

package/src/form-field/input/styles/styled-components/input-file.ts

@@ -0,0 +1,26 @@
+"use client";
+
+import styled from "styled-components";
+
+const dropZone = styled.div`
+  width: var(--input-file-drop-zone-width);
+  height: var(--input-file-drop-zone-height);
+  border-radius: var(--input-file-drop-zone-radius);
+  border: var(--input-file-drop-zone-border-width-default)
+    var(--input-file-drop-zone-border-style-default)
+    var(--input-file-drop-zone-border-color-default);
+  background-color: var(--input-file-drop-zone-bg-default);
+
+  &.drag-over {
+    border-width: var(--input-file-drop-zone-border-width-over);
+    border-style: var(--input-file-drop-zone-border-style-over);
+    border-color: var(--input-file-drop-zone-border-color-over);
+    background-color: var(--input-file-drop-zone-bg-over);
+  }
+`;
+
+const StyledInputFile = {
+  dropZone,
+};
+
+export default StyledInputFile;

package/src/form-field/input/styles/styled-components/mixin.ts

@@ -0,0 +1,200 @@
+"use client";
+
+import { css } from "styled-components";
+
+const borderBottom = css`
+  transition: border-color 0.3s;
+  &:after {
+    content: "입력 창 상태를 나타내기 위한 하단 선";
+    font-size: 0;
+
+    position: absolute;
+    bottom: 0;
+    left: 0;
+
+    display: block;
+
+    width: 100%;
+    height: var(--input-border-width);
+    border-radius: 0.2rem;
+    background: var(--input-border-color-default);
+
+    transition: background-color 0.4s;
+  }
+
+  &[default-state="success"] {
+    &:after {
+      background-color: var(--input-success);
+    }
+  }
+  &[default-state="fail"],
+  &[default-state="error"] {
+    &:after {
+      background-color: var(--input-error);
+    }
+  }
+`;
+
+const focusBorder = css`
+  .input-wrapper {
+    &[focus-state="on"] {
+      input,
+      textarea {
+        border-color: var(--input-border-color-focus);
+      }
+    }
+  }
+`;
+
+const commonBoxStyle = css`
+  width: 20rem;
+  height: var(--input-height);
+  padding: 0 var(--input-box-padding);
+  border-radius: var(--input-border-radius);
+  border: 1px solid var(--input-border-color-default);
+  background: var(--color_0);
+  font-size: var(--input-font-size);
+  color: var(--input-text-color);
+  font-weight: 400;
+`;
+
+const commonReadonlyStyle = css`
+  .input-wrapper {
+    &[default-state="readonly"],
+    &[default-state="disabled"] {
+      cursor: default;
+      overflow: hidden;
+      &:before {
+        content: "입력방지";
+        display: block;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 10;
+        font-size: 0;
+      }
+      color: var(--input-text-readonly);
+      input {
+        pointer-events: none;
+        color: var(--input-text-readonly);
+      }
+      figure {
+        &:not(.input-icon) {
+          opacity: 0.4;
+        }
+      }
+      input:checked + figure {
+        border-color: var(--input-checkbox-readonly);
+        &.input-check-icon {
+          background: var(--input-checkbox-readonly);
+        }
+        &.input-radio-icon {
+          span {
+            background: var(--input-checkbox-readonly);
+          }
+        }
+      }
+    }
+  }
+`;
+
+const commonCheckableStyle = css`
+  width: fit-content;
+  cursor: pointer;
+  .input-wrapper {
+    display: flex;
+    align-items: center;
+    @include inputReadonlyCommonStyle();
+    &[default-state="readonly"],
+    &[default-state="disabled"] {
+      .input-label {
+        color: var(--input-label-readonly);
+      }
+      .input-check-icon {
+        border-color: var(--input-checkbox-readonly);
+        &.checked {
+          border-color: var(--input-checkbox-readonly);
+        }
+      }
+    }
+  }
+  .input-icon {
+    width: fit-content;
+    height: fit-content;
+    margin-bottom: 1rem;
+  }
+  .input-icon-container {
+    position: relative;
+    width: var(--input-icon-area-size);
+    height: var(--input-icon-area-size);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    input {
+      position: absolute;
+      top: 0;
+      left: 0;
+      &[readonly],
+      &[disabled] {
+        border-color: var(--input-readonly-border);
+        background: var(--input-readonly-bg);
+      }
+    }
+    figure {
+      width: var(--input-icon-input-size);
+      height: var(--input-icon-input-size);
+      border: 0.2rem solid var(--color_40);
+    }
+    input:checked + figure {
+      border-color: var(--theme-blue-main);
+      img {
+        opacity: 1;
+      }
+    }
+    span {
+      font-size: 0;
+    }
+  }
+  input {
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+  }
+  span {
+    font-size: 1.6rem;
+    color: var(--color_90);
+    user-select: none;
+    white-space: nowrap;
+  }
+`;
+
+const commonCheckableIcon = css`
+  width: var(--input-icon-input-size);
+  height: var(--input-icon-input-size);
+  border: 0.2rem solid var(--color_40);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  z-index: 1;
+  span {
+    font-size: 0;
+  }
+  img {
+    opacity: 0;
+    user-select: none;
+  }
+`;
+
+const StyledInputMixin = {
+  borderBottom,
+  focusBorder,
+  commonBoxStyle,
+  commonReadonlyStyle,
+  commonCheckableStyle,
+  commonCheckableIcon,
+};
+
+export default StyledInputMixin;

package/src/form-field/input/styles/styled-components/util.ts

@@ -0,0 +1,47 @@
+"use client";
+
+import { styled } from "styled-components";
+
+const container = styled.div`
+  margin: 0 0.4rem;
+  &:first-child {
+    margin-left: 0;
+  }
+  &:last-child {
+    margin-right: 0;
+  }
+`;
+
+const countdown = styled(container)`
+  font-size: 1.4rem;
+  color: var(--color_90);
+  span {
+    margin-right: 0.4rem;
+  }
+  time {
+    color: var(--red);
+  }
+`;
+
+type StyledInputNoticeProps = {
+  $status?: string;
+};
+const notice = styled.div<StyledInputNoticeProps>`
+  margin-top: var(--input-util-notice-margin);
+  p {
+    font-size: 1.2rem;
+    color: var(--color_70);
+    line-height: 1.4rem;
+  }
+`;
+
+const errorMessage = styled.div``;
+
+const StyledInputUtil = {
+  container,
+  countdown,
+  notice,
+  errorMessage,
+};
+
+export default StyledInputUtil;

package/src/form-field/select/components/Default.tsx

@@ -0,0 +1,222 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useFormContext, useWatch } from "react-hook-form";
+
+import SelectContainer from "./assets/Container";
+import SelectDropdownDefault from "./assets/dropdown/Default";
+import type {
+  SelectDefaultProps,
+  SelectOptionType,
+  SelectSelectedStateType,
+} from "../../../types";
+import { clsx } from "clsx";
+
+export default function SelectDefault({
+  className,
+  label,
+  selectorId,
+  dataKey,
+  register,
+  state,
+  width,
+  dropdownPosition,
+  defaultName,
+  selectItems,
+  onDefaultChange,
+  onCustomChange,
+  errorMonitor,
+  formError,
+  isFetching,
+}: SelectDefaultProps) {
+  const formMethods = useFormContext();
+
+  const isReadonly = useMemo(
+    (): boolean => ["readonly", "disabled"].includes(state?.fixed || ""),
+    [state?.fixed],
+  );
+
+  const selectContainerRef = useRef<HTMLDivElement | null>(null);
+  const selectRef = useRef<HTMLSelectElement | null>(null);
+  const updateSelectRef = useCallback(
+    (node: HTMLSelectElement | null) => {
+      if (register?.ref) register.ref(node);
+      selectRef.current = node;
+    },
+    [register],
+  );
+
+  const [selectOptionList, setOptions] = useState<SelectOptionType[]>([]);
+  const [selectedValue, setSelectedValue] = useState<SelectSelectedStateType>({
+    optionName: defaultName || String(label.name) || "--",
+    value: "",
+  });
+
+  useEffect(() => {
+    if (
+      typeof window === "undefined" ||
+      typeof selectItems === "undefined" ||
+      !Array.isArray(selectItems)
+    ) {
+      if (selectOptionList.length > 0) setOptions([]);
+      return;
+    }
+    setOptions(selectItems.filter(option => !option.disabled));
+  }, [selectItems, selectOptionList.length]);
+
+  const setRegisterValue = useCallback(
+    (value: string) => {
+      if (
+        typeof formMethods?.setValue === "undefined" ||
+        typeof register?.name === "undefined"
+      )
+        return;
+
+      formMethods.setValue(register.name, value, { shouldValidate: true });
+    },
+    [formMethods, register?.name],
+  );
+
+  const syncSelectValue = useCallback(
+    (option: SelectOptionType) => {
+      if (!selectRef.current) return;
+
+      const selectElement = selectRef.current as HTMLSelectElement;
+      selectElement.value = String(option.value);
+
+      setSelectedValue({
+        optionName: option.optionName,
+        value: String(option.value),
+      });
+
+      setRegisterValue(String(option.value));
+
+      if (typeof onDefaultChange !== "undefined") {
+        onDefaultChange(selectElement);
+      }
+
+      if (typeof onCustomChange !== "undefined")
+        onCustomChange(selectElement, option);
+    },
+    [onCustomChange, onDefaultChange, setRegisterValue],
+  );
+
+  useEffect(() => {
+    if (
+      typeof window === "undefined" ||
+      typeof selectItems === "undefined" ||
+      !Array.isArray(selectItems) ||
+      selectedValue.value !== "" ||
+      selectItems.length == 0
+    )
+      return;
+
+    // if (selectItems.length == 0) {
+    //   setOptions([]);
+    //   return;
+    // }
+
+    // setOptions(selectItems);
+
+    const selectedIndex =
+      typeof defaultName === "undefined"
+        ? 0
+        : selectItems.findIndex(option => option.optionName === defaultName);
+    const selectedOption =
+      selectedIndex > -1 ? selectItems[selectedIndex] : selectItems[0];
+
+    setSelectedValue({
+      optionName: selectedOption.optionName,
+      value: String(selectedOption.value),
+    });
+  }, [defaultName, selectItems, selectedValue.value]);
+
+  // 직접 메뉴를 선택하지 않고, react-hook-form에서 각 메서드를 통해 값을 변경한 경우에 대한 모니터링
+  const selectedRegisterValue = useWatch({
+    control: formMethods?.control,
+    name: register?.name || "",
+  });
+
+  useEffect(() => {
+    if (
+      typeof selectedRegisterValue === "undefined" ||
+      typeof selectItems === "undefined" ||
+      !Array.isArray(selectItems) ||
+      selectItems.length == 0
+    )
+      return;
+
+    // const selectedValue = formMethods.getValues(register.name);
+    const selectedIndex = selectItems.findIndex(
+      option => String(option.value) === String(selectedRegisterValue),
+    );
+    const selectedOption =
+      selectedIndex > -1 ? selectItems[selectedIndex] : selectItems[0];
+
+    setSelectedValue({
+      optionName: selectedOption.optionName,
+      value: String(selectedOption.value),
+    });
+  }, [selectItems, selectedRegisterValue]);
+
+  // 에러 모니터링
+  useEffect(() => {
+    if (typeof errorMonitor !== "undefined")
+      errorMonitor({ inputKey: dataKey });
+  }, [errorMonitor, dataKey, selectedValue.value, formError]);
+
+  const selectedName = useMemo(
+    () =>
+      selectedValue?.optionName
+        ? selectedValue?.optionName
+        : defaultName
+          ? defaultName
+          : typeof label.name === "string"
+            ? String(label.name)
+            : "--",
+    [defaultName, label.name, selectedValue?.optionName],
+  );
+  return (
+    <SelectContainer
+      className={clsx("select-default-container", className)}
+      fieldType="select"
+      selectorId={selectorId}
+      label={label}
+      wrapperOptions={{
+        state: isReadonly ? "readonly" : "active",
+      }}
+      ref={selectContainerRef}
+    >
+      <SelectDropdownDefault
+        list={selectOptionList}
+        selectEvent={syncSelectValue}
+        selectName={selectedName}
+        isReadonly={isReadonly}
+        isFetching={isFetching}
+        styleOptions={{
+          width,
+          position: dropdownPosition,
+        }}
+      />
+      <select
+        id={selectorId}
+        aria-label={`${label.name} 입력`}
+        name={dataKey}
+        {...register}
+        ref={updateSelectRef}
+      >
+        {selectOptionList.map(
+          ({ key, value, optionName }: SelectOptionType, index: number) => (
+            <option
+              key={`select/option/native/${key}`}
+              value={value}
+              defaultChecked={typeof defaultName === "undefined" && index === 0}
+            >
+              {optionName}
+            </option>
+          ),
+        )}
+      </select>
+    </SelectContainer>
+  );
+}

package/src/form-field/select/components/MultipleCategoryList.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useMemo, useRef } from "react";
+import { clsx } from "clsx";
+
+import SelectContainer from "./assets/Container";
+import type { SelectMultipleCategoryProps } from "../../../types";
+import SelectDropdownMultipleCategoryList from "./assets/dropdown/MultipleCategoryList";
+
+export default function SelectMultipleCategoryList({
+  className,
+  label,
+  selectorId,
+  state,
+  dropdownPosition,
+  defaultName,
+  categoryList,
+}: SelectMultipleCategoryProps) {
+  const isReadonly = useMemo(
+    (): boolean => ["readonly", "disabled"].includes(state?.fixed || ""),
+    [state?.fixed],
+  );
+
+  const selectContainerRef = useRef<HTMLDivElement | null>(null);
+
+  return (
+    <SelectContainer
+      className={clsx("select-multiple-category-list-container", className)}
+      fieldType="select"
+      selectorId={selectorId}
+      label={label}
+      wrapperOptions={{ state: isReadonly ? "readonly" : "active" }}
+      ref={selectContainerRef}
+    >
+      <SelectDropdownMultipleCategoryList
+        defaultName={defaultName}
+        categoryList={categoryList}
+        isReadonly={isReadonly}
+        styleOptions={{
+          // width: "100%",
+          horizontal: dropdownPosition,
+          // gap: 8,
+        }}
+      />
+    </SelectContainer>
+  );
+}