@uniai-fe/uds-primitives 0.2.1 → 0.2.2

package/src/components/input/utils/address.ts

@@ -0,0 +1,165 @@
+import { string as toString } from "@uniai-fe/util-functions";
+import type { Address } from "react-daum-postcode";
+
+import type {
+  AddressResolvedValue,
+  AddressSearchResult,
+  AddressStructure,
+} from "../types/address";
+
+/**
+ * 객체 여부 체크 util.
+ */
+const isObject = (value: unknown): value is Record<string, unknown> =>
+  typeof value === "object" && value !== null;
+
+/**
+ * react-daum-postcode AddressSearchResult 유사 객체인지 검사한다.
+ */
+const isAddressSearchResultLike = (
+  value: unknown,
+): value is Partial<AddressSearchResult> =>
+  isObject(value) && typeof value.address === "string";
+
+/**
+ * AddressStructure 형태인지 검사한다.
+ */
+const isAddressStructureLike = (
+  value: unknown,
+): value is Partial<AddressStructure> =>
+  isObject(value) &&
+  ("main" in value || "extras" in value) &&
+  (typeof value.main === "string" || Array.isArray(value.extras));
+
+/**
+ * 문자열 파트 배열을 안전하게 변환한다.
+ */
+const toAddressParts = (items: unknown[] | undefined): string[] => {
+  if (!Array.isArray(items)) return [];
+  return items
+    .map(item => toString(item, ""))
+    .filter((segment): segment is string => segment.length > 0);
+};
+
+/**
+ * AddressStructure에서 main/extras를 순서대로 병합한다.
+ */
+const mergeStructureParts = (
+  structure: AddressStructure | Partial<AddressStructure>,
+): string[] => {
+  const mainPart =
+    typeof structure.main === "string" ? structure.main : undefined;
+  const extras = toAddressParts(structure.extras);
+  return [mainPart, ...extras].filter(
+    (part): part is string => typeof part === "string" && part.length > 0,
+  );
+};
+
+/**
+ * Template/Base 컴포넌트에서 사용하는 주소 문자열 정규화.
+ * @function
+ * @param {unknown} value RHF watch 값 혹은 addressInput.value override
+ * @returns {AddressResolvedValue} 문자열과 파트 배열
+ */
+export const resolveAddressValue = (value: unknown): AddressResolvedValue => {
+  if (typeof value === "string") {
+    return {
+      text: value,
+      parts: value.length > 0 ? [value] : [],
+    };
+  }
+
+  if (Array.isArray(value)) {
+    const parts = toAddressParts(value);
+    return {
+      text: parts.join(" "),
+      parts,
+    };
+  }
+
+  if (isAddressSearchResultLike(value)) {
+    const base = value.address ?? "";
+    const parts =
+      value.addressParts && value.addressParts.length > 0
+        ? toAddressParts(value.addressParts)
+        : value.addressStructure
+          ? mergeStructureParts(value.addressStructure)
+          : base
+            ? [base]
+            : [];
+    return {
+      text: base,
+      parts,
+    };
+  }
+
+  if (isAddressStructureLike(value)) {
+    const parts = mergeStructureParts(value);
+    return {
+      text: parts.join(" "),
+      parts,
+    };
+  }
+
+  if (isObject(value) && "text" in value) {
+    const textValue =
+      typeof (value as { text?: unknown }).text === "string"
+        ? (value as { text: string }).text
+        : "";
+    const parts = Array.isArray((value as { parts?: unknown[] }).parts)
+      ? toAddressParts((value as { parts: unknown[] }).parts)
+      : textValue
+        ? [textValue]
+        : [];
+    return {
+      text: textValue,
+      parts,
+    };
+  }
+
+  return { text: "", parts: [] };
+};
+
+/**
+ * react-daum-postcode Address 데이터를 AddressSearchResult 형식으로 변환한다.
+ * `address` 필드는 우편번호 서비스에서 내려준 최종 문자열(도로명 + 추가 항목)을 그대로 유지하고,
+ * 분해 정보(`addressParts`, `addressStructure`)를 추가로 제공한다.
+ * @function
+ * @see https://www.juso.go.kr/addrlink/devAddrLinkRequestGuide.do
+ * @param {Address} data 우편번호 서비스 선택 결과
+ * @returns {AddressSearchResult} 변환된 주소 정보 객체
+ * @example
+ * ```ts
+ * const result = createAddressSearchResult(data);
+ * console.log(result.address); // "서울시 강남구 ... (OO동)"
+ * console.log(result.addressParts); // ["서울시 강남구 ...", "OO동"]
+ * ```
+ */
+export const createAddressSearchResult = (
+  data: Address,
+): AddressSearchResult => {
+  const extraParts: string[] = [];
+
+  if (data.addressType === "R") {
+    if (data.bname) extraParts.push(data.bname);
+    if (data.buildingName) extraParts.push(data.buildingName);
+  }
+
+  const baseAddress = data.address;
+  const labelExtras =
+    extraParts.length > 0 ? ` (${extraParts.join(", ")})` : "";
+  const parts = [baseAddress, ...extraParts].filter(part => part.length > 0);
+
+  return {
+    address: `${baseAddress}${labelExtras}`,
+    addressParts: parts,
+    addressStructure: {
+      main: baseAddress,
+      extras: [...extraParts],
+    },
+    zipCode: data.zonecode,
+    buildingName: data.buildingName || undefined,
+    district: data.bname || undefined,
+    raw: data,
+  };
+};

package/src/components/input/utils/index.tsx

@@ -1 +1,2 @@
 export * from "./verification";
+export * from "./address";

package/src/components/radio/markup/Radio.tsx

@@ -26,7 +26,7 @@ const RADIO_HELPER_CLASSNAME = "radio-helper";
  * @example
  * <Radio value="option" />
  */
-export const Radio = forwardRef<HTMLButtonElement, RadioProps>(function Radio(
+const Radio = forwardRef<HTMLButtonElement, RadioProps>(function Radio(
   { size = "medium", className, disabled, ...restProps },
   ref,
 ) {
@@ -49,6 +49,9 @@ export const Radio = forwardRef<HTMLButtonElement, RadioProps>(function Radio(
   );
 });
 
+// forwardRef Tooltip 유지를 위해 displayName 지정.
+Radio.displayName = "Radio";
+
 /**
  * RadioField component; label/helper wrapper for single radioItem
  * @component
@@ -66,7 +69,7 @@ export const Radio = forwardRef<HTMLButtonElement, RadioProps>(function Radio(
  * @example
  * <RadioField label="옵션" helperText="필수" value="option" />
  */
-export const RadioField = forwardRef<HTMLButtonElement, RadioFieldProps>(
+const RadioField = forwardRef<HTMLButtonElement, RadioFieldProps>(
   function RadioField(
     {
       label,
@@ -133,3 +136,8 @@ export const RadioField = forwardRef<HTMLButtonElement, RadioFieldProps>(
     );
   },
 );
+
+// forwardRef Tooltip 유지를 위해 displayName 지정.
+RadioField.displayName = "RadioField";
+
+export { Radio, RadioField };

package/src/components/radio/markup/RadioCard.tsx

@@ -30,7 +30,7 @@ const RADIO_CARD_INDICATOR_CLASSNAME = "radio-card-indicator";
  * @example
  * <RadioCard title="행복1농장" value="farm-1" />
  */
-export const RadioCard = forwardRef<HTMLButtonElement, RadioCardProps>(
+const RadioCard = forwardRef<HTMLButtonElement, RadioCardProps>(
   function RadioCard(
     {
       title,
@@ -74,3 +74,8 @@ export const RadioCard = forwardRef<HTMLButtonElement, RadioCardProps>(
     );
   },
 );
+
+// forwardRef Tooltip 유지를 위해 displayName 지정.
+RadioCard.displayName = "RadioCard";
+
+export { RadioCard };

package/src/components/radio/markup/RadioCardGroup.tsx

@@ -22,7 +22,7 @@ const RADIO_CARD_GROUP_CLASSNAME = "radio-card-group";
  * @example
  * <RadioCardGroup options={[{ id: "farm-1", title: "농장" }]} value="farm-1" />
  */
-export const RadioCardGroup = forwardRef<
+const RadioCardGroup = forwardRef<
   ElementRef<typeof RadixRadioGroup.Root>,
   RadioCardGroupProps
 >(function RadioCardGroup(
@@ -81,3 +81,8 @@ export const RadioCardGroup = forwardRef<
     </RadixRadioGroup.Root>
   );
 });
+
+// forwardRef Tooltip 유지를 위해 displayName 지정.
+RadioCardGroup.displayName = "RadioCardGroup";
+
+export { RadioCardGroup };

package/src/components/select/markup/Default.tsx

@@ -36,6 +36,7 @@ const SelectDefault = forwardRef<HTMLElement, SelectDefaultComponentProps>(
       size = "medium",
       state = "default",
       block,
+      width,
       isOpen,
       disabled,
       buttonType,
@@ -86,6 +87,7 @@ const SelectDefault = forwardRef<HTMLElement, SelectDefaultComponentProps>(
       <Container
         className={clsx("select-trigger-container", className)}
         block={block}
+        width={width}
       >
         <Dropdown.Root
           open={dropdownOpen}

package/src/components/select/markup/foundation/Container.tsx

@@ -3,6 +3,10 @@
 import clsx from "clsx";
 
 import type { SelectContainerProps } from "../../types/props";
+import {
+  getFormFieldWidthAttr,
+  getFormFieldWidthValue,
+} from "../../../form/utils/form-field";
 
 /**
  * Select trigger/container wrapper
@@ -16,12 +20,31 @@ export default function SelectContainer({
   className,
   children,
   block = false,
+  width,
+  style,
+  ...restProps
 }: SelectContainerProps) {
+  const widthAttr =
+    width !== undefined
+      ? getFormFieldWidthAttr(width)
+      : block
+        ? "full"
+        : undefined;
+  const widthValue =
+    width !== undefined ? getFormFieldWidthValue(width) : undefined;
+  const mergedStyle =
+    widthValue !== undefined
+      ? { ...(style ?? {}), ["--select-width" as const]: widthValue }
+      : style;
+
   return (
     <div
       className={clsx("select select-container", className, {
         "select-block": block,
       })}
+      data-width={widthAttr}
+      style={mergedStyle}
+      {...restProps}
     >
       {/** dropdown root 및 dropdown menu 등 포함 예정 */}
       {children}

package/src/components/select/markup/multiple/Multiple.tsx

@@ -38,6 +38,7 @@ const SelectMultipleTrigger = forwardRef<
       size = "medium",
       state = "default",
       block,
+      width,
       isOpen,
       disabled,
       tags,
@@ -113,6 +114,7 @@ const SelectMultipleTrigger = forwardRef<
       <Container
         className={clsx("select-trigger-multiple", className)}
         block={block}
+        width={width}
       >
         <Dropdown.Root
           open={dropdownOpen}

package/src/components/select/styles/select.scss

@@ -1,12 +1,35 @@
 .select {
   display: flex;
-  width: 100%;
+  width: var(--select-width);
+  flex: var(--select-flex);
   flex-direction: column;
   gap: var(--spacing-gap-2);
+  min-width: 0;
+}
+
+.select[data-width="auto"] {
+  --select-width: auto;
+  --select-flex: 0 1 auto;
+}
+
+.select[data-width="fill"] {
+  --select-width: auto;
+  --select-flex: 1 1 0%;
 }
 
+.select[data-width="full"],
 .select-block {
-  width: 100%;
+  --select-width: 100%;
+  --select-flex: 0 0 100%;
+}
+
+.select[data-width="fit"] {
+  --select-width: fit-content;
+  --select-flex: 0 0 auto;
+}
+
+.select[data-width="custom"] {
+  --select-flex: 0 0 auto;
 }
 
 .select-button {

package/src/components/select/styles/variables.scss

@@ -1,5 +1,9 @@
 /* Select tokens mapped to Input primary tokens for visual parity */
 :root {
+  /* layout presets */
+  --select-width: 100%;
+  --select-flex: 0 1 auto;
+
   --select-primary-height-small: var(--input-default-height-small);
   --select-primary-height-medium: var(--input-default-height-medium);
   --select-primary-height-large: var(--input-default-height-large);

package/src/components/select/types/props.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
 
 import type {
   DropdownContainerProps,
@@ -7,6 +7,7 @@ import type {
   DropdownRootProps,
   DropdownTemplateItem,
 } from "../../dropdown/types";
+import type { FormFieldWidth } from "../../form/types";
 import type { SelectPriority, SelectSize, SelectState } from "./base";
 import type {
   SelectTriggerDefaultProps,
@@ -82,7 +83,7 @@ export interface SelectComponentState {
  * @property {ReactNode} children trigger/Dropdown 등 내부 콘텐츠
  * @property {boolean} [block] block 여부
  */
-export interface SelectContainerProps {
+export interface SelectContainerProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * 사용자 정의 className
    */
@@ -95,6 +96,21 @@ export interface SelectContainerProps {
    * block 여부
    */
   block?: boolean;
+  /**
+   * width preset
+   */
+  width?: FormFieldWidth;
+}
+
+/**
+ * Select width 옵션
+ * @property {FormFieldWidth} [width] width preset 옵션
+ */
+export interface SelectWidthOption {
+  /**
+   * width preset 옵션
+   */
+  width?: FormFieldWidth;
 }
 
 /**
@@ -103,7 +119,8 @@ export interface SelectContainerProps {
  */
 export type SelectProps = SelectStyleOptions &
   SelectValueOptions &
-  SelectComponentState;
+  SelectComponentState &
+  SelectWidthOption;
 
 /**
  * Select dropdown option; Dropdown.Template item 계약을 그대로 따른다.
@@ -194,7 +211,8 @@ export interface SelectDefaultComponentProps
   extends
     SelectTriggerDefaultProps,
     SelectDropdownConfigProps,
-    SelectDropdownBehaviorProps {}
+    SelectDropdownBehaviorProps,
+    SelectWidthOption {}
 
 /**
  * Select.Multiple 컴포넌트 props
@@ -206,4 +224,5 @@ export interface SelectMultipleComponentProps
   extends
     SelectTriggerMultipleProps,
     SelectDropdownConfigProps,
-    SelectDropdownBehaviorProps {}
+    SelectDropdownBehaviorProps,
+    SelectWidthOption {}

package/src/components/input/styles/index.scss

@@ -1,4 +0,0 @@
-@use "./variables.scss" as inputVariables;
-@use "./foundation.scss" as inputFoundation;
-@use "./text.scss" as inputText;
-@use "./calendar.scss" as inputCalendar;