@uniai-fe/uds-primitives 0.2.11 → 0.3.1

package/src/components/form/markup/index.tsx

@@ -0,0 +1,11 @@
+import FormProvider from "./Provider";
+import { FormField } from "./form-field";
+
+/**
+ * Form namespace 조립 전용 파일.
+ * - index.tsx 배럴 파일에서 로직/객체 생성을 분리한다.
+ */
+export const Form = {
+  Provider: FormProvider,
+  Field: FormField,
+};

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

@@ -1,2 +1,2 @@
-@use "./form-field/variables.scss";
-@use "./form-field/layout.scss";
+@use "./form-field/variables.scss" as form-field-variables;
+@use "./form-field/layout.scss" as form-field-layout;

package/src/components/form/utils/index.ts

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

package/src/components/input/markup/foundation/Button.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { Button } from "../../../button";
-import type { ButtonProps } from "../../../button/types";
 import type { InputUtilityButtonProps } from "../../types";
 
 /**
@@ -19,17 +18,13 @@ export default function InputBaseUtilityButton({
   disabled,
   onClick,
 }: InputUtilityButtonProps) {
-  const handleButtonClick: ButtonProps["onClick"] = event => {
-    onClick?.(event);
-  };
-
   return (
     <Button.Default
       fill="outlined"
       size="small"
       priority={priority}
       className="input-utility-button"
-      onClick={handleButtonClick}
+      onClick={event => onClick?.(event)}
       disabled={disabled}
     >
       {children}

package/src/components/input/markup/text/AuthCode.tsx

@@ -22,7 +22,7 @@ const DEFAULT_PLACEHOLDER = "인증코드 입력";
 const DEFAULT_COUNTDOWN_ACTION_LABEL = "시간연장";
 
 /**
- * AuthCodeInput — Text Input priority secondary 스타일로 구성된 인증번호 입력.
+ * Input Preset; AuthCode 카운트다운 입력
  * @component
  * @param {AuthCodeInputProps} props 인증코드 입력 props
  * @property {string} [props.value] 제어형 인증코드 값
@@ -36,6 +36,8 @@ const DEFAULT_COUNTDOWN_ACTION_LABEL = "시간연장";
  * @property {ReactNode} [props.countdownActionLabel="시간연장"] 제한 시간 연장 버튼 라벨
  * @property {InputUtilityButtonClickHandler} [props.onCountdownAction] 연장 버튼 클릭 핸들러
  * @property {boolean} [props.countdownActionDisabled] 연장 버튼 disabled 여부
+ * @example
+ * <AuthCodeInput length={6} onComplete={code => console.log(code)} />
  */
 const AuthCodeInput = forwardRef<HTMLInputElement, AuthCodeInputProps>(
   (

package/src/components/input/markup/text/Email.tsx

@@ -5,10 +5,10 @@ import { forwardRef, useCallback } from "react";
 
 import type { EmailInputProps } from "../../types";
 import InputBase from "../foundation/Input";
-import { renderVerificationRequestButton } from "../../utils/verification";
+import InputBaseUtilityButton from "../foundation/Button";
 
 /**
- * EmailInput — 이메일 입력과 인증요청 버튼만 제공한다.
+ * Input Preset; Email 인증요청 조합 입력
  * @component
  * @param {EmailInputProps} props 이메일 입력 props
  * @property {string} [props.value] 제어형 이메일 값
@@ -19,6 +19,8 @@ import { renderVerificationRequestButton } from "../../utils/verification";
  * @property {ReactNode} [props.requestButtonLabel] 버튼 라벨
  * @property {boolean} [props.requestButtonDisabled] 버튼 disabled 상태
  * @property {ReactNode} [props.right] 기본 오른쪽 슬롯 override
+ * @example
+ * <EmailInput onRequestCode={() => {}} />
  */
 const EmailInput = forwardRef<HTMLInputElement, EmailInputProps>(
   (
@@ -35,7 +37,6 @@ const EmailInput = forwardRef<HTMLInputElement, EmailInputProps>(
     },
     forwardedRef,
   ) => {
-    // 이메일 값 변경 시 상위 상태(onValueChange)와 native onChange를 모두 호출한다.
     const handleChange = useCallback(
       (event: ChangeEvent<HTMLInputElement>) => {
         onValueChange?.(event.currentTarget.value);
@@ -44,13 +45,6 @@ const EmailInput = forwardRef<HTMLInputElement, EmailInputProps>(
       [onChange, onValueChange],
     );
 
-    // 인증 요청 옵션이 있을 때만 우측 액션 버튼을 만든다.
-    const actionButton = renderVerificationRequestButton({
-      onRequestCode,
-      requestButtonDisabled,
-      requestButtonLabel,
-    });
-
     return (
       <div className="email-verification">
         <InputBase
@@ -61,7 +55,18 @@ const EmailInput = forwardRef<HTMLInputElement, EmailInputProps>(
           value={value}
           defaultValue={defaultValue}
           onChange={handleChange}
-          right={right ?? actionButton}
+          right={
+            right ??
+            (onRequestCode ? (
+              <InputBaseUtilityButton
+                priority="primary"
+                onClick={onRequestCode}
+                disabled={requestButtonDisabled}
+              >
+                {requestButtonLabel}
+              </InputBaseUtilityButton>
+            ) : null)
+          }
         />
       </div>
     );

package/src/components/input/markup/text/Password.tsx

@@ -7,13 +7,15 @@ import HideOffIcon from "../../img/hide-off.svg";
 import HideOnIcon from "../../img/hide-on.svg";
 
 /**
- * PasswordInput — 기본 Text 입력을 비밀번호 토글 UX로 확장한다.
+ * Input Preset; Password 표시 전환 입력
  * @component
  * @param {InputPasswordProps} props
  * @property {boolean} [props.defaultVisible=false] 초기 노출 여부
  * @property {{show: string; hide: string}} [props.toggleLabel] 토글 버튼 라벨
  * @property {ReactNode} [props.right] 오른쪽 슬롯 override
  * @property {string | number | readonly string[]} [props.defaultValue] 초기값
+ * @example
+ * <PasswordInput defaultVisible={false} />
  */
 const PasswordInput = forwardRef<HTMLInputElement, InputPasswordProps>(
   (
@@ -36,13 +38,11 @@ const PasswordInput = forwardRef<HTMLInputElement, InputPasswordProps>(
       <button
         type="button"
         className="input-password-toggle"
-        // Tab 이동 시 다음 입력 필드로 바로 넘어가도록 토글 버튼은 순서에서 제외한다.
         tabIndex={-1}
         onClick={handleToggle}
         aria-pressed={visible}
         aria-label={visible ? toggleLabel.hide : toggleLabel.show}
       >
-        {/* 토글 상태에 따라 hide-on/off 아이콘을 교체한다. */}
         {visible ? (
           <HideOffIcon aria-hidden="true" />
         ) : (

package/src/components/input/markup/text/Phone.tsx

@@ -5,8 +5,8 @@ import type { ChangeEvent } from "react";
 import { forwardRef, useCallback, useMemo } from "react";
 import type { PhoneInputProps } from "../../types";
 import InputBase from "../foundation/Input";
-import { renderVerificationRequestButton } from "../../utils/verification";
 import { useDigitField } from "../../hooks/useDigitField";
+import InputBaseUtilityButton from "../foundation/Button";
 
 /**
  * 휴대폰 입력에서 허용할 숫자 자리수. 국내 번호 11자 기준.
@@ -14,22 +14,20 @@ import { useDigitField } from "../../hooks/useDigitField";
 const MAX_DIGITS = 11;
 
 /**
- * util-functions의 maskPhone 규칙으로 자리수/패턴을 일원화한다.
- */
-const formatPhoneNumber = (digits: string) => maskPhone(digits);
-
-/**
- * 휴대폰 번호 입력 컴포넌트; 마스킹 처리와 인증요청 버튼까지만 담당한다.
+ * Input Preset; Phone 인증요청 조합 입력
  * @component
  * @param {PhoneInputProps} props 휴대폰 입력 props
- * @param {string} [props.value] 제어형 포맷 값
- * @param {string} [props.defaultValue] 비제어 초기값
- * @param {(value: string, digits: string) => void} [props.onValueChange] 포맷/숫자 변경 콜백
- * @param {(event: ChangeEvent<HTMLInputElement>) => void} [props.onChange] native onChange override
- * @param {InputUtilityButtonClickHandler} [props.onRequestCode] 인증 요청 버튼 클릭 시 호출
- * @param {ReactNode} [props.requestButtonLabel] 인증 요청 버튼 라벨
- * @param {boolean} [props.requestButtonDisabled] 인증 요청 버튼 disabled
- * @param {ReactNode} [props.right] 기본 오른쪽 슬롯 override
+ * @property {string} [props.value] 제어형 포맷 값
+ * @property {string} [props.defaultValue] 비제어 초기값
+ * @property {(value: string, digits: string) => void} [props.onValueChange] 포맷/숫자 변경 콜백
+ * @property {(event: ChangeEvent<HTMLInputElement>) => void} [props.onChange] native onChange override
+ * @property {InputUtilityButtonClickHandler} [props.onRequestCode] 인증 요청 버튼 클릭 시 호출
+ * @property {ReactNode} [props.requestButtonLabel] 인증 요청 버튼 라벨
+ * @property {boolean} [props.requestButtonDisabled] 인증 요청 버튼 disabled
+ * @property {string} [props.placeholder] 전화번호 placeholder 텍스트
+ * @property {ReactNode} [props.right] 기본 오른쪽 슬롯 override
+ * @example
+ * <PhoneInput onRequestCode={() => {}} />
  */
 const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>(
   (
@@ -41,50 +39,54 @@ const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>(
       onRequestCode,
       requestButtonLabel = "인증번호 요청",
       requestButtonDisabled,
+      // 기본 placeholder를 유지하되 호출자가 값을 전달하면 그대로 우선 적용한다.
+      placeholder = "000-0000-0000",
       right,
       ...restProps
     },
     forwardedRef,
   ) => {
-    // 제어/비제어 숫자 입력을 통합 관리한다.
     const { digits, handleDigitsChange } = useDigitField({
       value,
       defaultValue,
       maxLength: MAX_DIGITS,
     });
-    const formattedValue = useMemo(() => formatPhoneNumber(digits), [digits]);
+    const formattedValue = useMemo(() => maskPhone(digits), [digits]);
 
     const handleChange = useCallback(
       (event: ChangeEvent<HTMLInputElement>) => {
         const digitsOnly = handleDigitsChange(event);
-        const formatted = formatPhoneNumber(digitsOnly);
+        const formatted = maskPhone(digitsOnly);
         if (event.currentTarget.value !== formatted) {
           event.currentTarget.value = formatted;
         }
-        // 포맷팅된 값과 숫자만으로 분리된 값을 모두 호출자에게 전달한다.
         onValueChange?.(formatted, digitsOnly);
         onChange?.(event);
       },
       [handleDigitsChange, onChange, onValueChange],
     );
 
-    const actionButton = renderVerificationRequestButton({
-      onRequestCode,
-      requestButtonDisabled,
-      requestButtonLabel,
-    });
-
-    // 기본 전화 입력 필드; 인증 UI 노출 여부에 따라 래핑된다.
     const phoneField = (
       <InputBase
         {...restProps}
         ref={forwardedRef}
         type="tel"
         inputMode="tel"
-        placeholder="000-0000-0000"
+        placeholder={placeholder}
         value={formattedValue}
         onChange={handleChange}
-        right={right ?? actionButton}
+        right={
+          right ??
+          (onRequestCode ? (
+            <InputBaseUtilityButton
+              priority="primary"
+              onClick={onRequestCode}
+              disabled={requestButtonDisabled}
+            >
+              {requestButtonLabel}
+            </InputBaseUtilityButton>
+          ) : null)
+        }
       />
     );
 

package/src/components/input/markup/text/Search.tsx

@@ -4,11 +4,13 @@ import InputBase from "../foundation/Input";
 import SearchIcon from "../../img/search.svg";
 
 /**
- * SearchInput — 검색 아이콘(left slot)과 type="search"를 적용한 Text 입력.
+ * Input Preset; Search 아이콘 고정 입력
  * @component
  * @param {SearchInputProps} props
  * @property {ReactNode} [props.left] left 슬롯 override
  * @property {ReactNode} [props.right] right 슬롯 override
+ * @example
+ * <SearchInput placeholder="검색어 입력" />
  */
 const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
   ({ left, ...restProps }, forwardedRef) => {

package/src/components/input/types/text.ts

@@ -1,4 +1,4 @@
-import type { ComponentPropsWithoutRef, MouseEvent, ReactNode } from "react";
+import type { ChangeEvent, MouseEvent, ReactNode } from "react";
 import type { ButtonPriority } from "../../button/types";
 import type { InputProps } from "./foundation";
 
@@ -64,7 +64,7 @@ export interface InputPasswordProps extends Omit<InputProps, "type"> {
  * @property {string} [value] 제어형 값
  * @property {string} [defaultValue] 비제어 초기값
  * @property {(value:string)=>void} [onValueChange] 값 변경 시 호출
- * @property {ComponentPropsWithoutRef<"input">["onChange"]} [onChange] native onChange override
+ * @property {(event: ChangeEvent<HTMLInputElement>) => void} [onChange] native onChange override
  * @property {number} [length] 자리수 제한
  * @property {(code:string)=>void} [onComplete] 입력 완료 콜백
  * @property {string} [placeholder] placeholder 텍스트
@@ -92,7 +92,7 @@ export interface AuthCodeInputProps extends Omit<
   /**
    * native onChange override
    */
-  onChange?: ComponentPropsWithoutRef<"input">["onChange"];
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
   /**
    * 자리수 제한
    */
@@ -148,7 +148,7 @@ export interface EmailInputProps extends Omit<
   /**
    * native onChange override
    */
-  onChange?: ComponentPropsWithoutRef<"input">["onChange"];
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
   /**
    * 인증 요청 클릭 핸들러
    */
@@ -166,6 +166,7 @@ export interface EmailInputProps extends Omit<
 /**
  * Phone Input props; 전화번호 포맷팅과 인증요청 버튼만 담당한다.
  * @property {(value:string,digits:string)=>void} [onValueChange] 포맷/숫자 콜백
+ * @property {string} [placeholder] 전화번호 placeholder 텍스트
  * 나머지 props는 InputProps 기반이며 type 관련 속성을 제외한다.
  */
 export interface PhoneInputProps extends Omit<
@@ -187,7 +188,7 @@ export interface PhoneInputProps extends Omit<
   /**
    * native onChange override
    */
-  onChange?: ComponentPropsWithoutRef<"input">["onChange"];
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
   /**
    * 인증 요청 핸들러
    */
@@ -200,4 +201,8 @@ export interface PhoneInputProps extends Omit<
    * 인증 요청 disabled
    */
   requestButtonDisabled?: boolean;
+  /**
+   * 전화번호 placeholder 텍스트
+   */
+  placeholder?: string;
 }

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

@@ -1,4 +1,3 @@
-export * from "./verification";
 export * from "./date";
 export * from "./address";
 export * from "./file";

package/src/components/table/markup/Container.tsx

@@ -1,5 +1,5 @@
 import { forwardRef } from "react";
-import type { TableTemplateColumn, TableTemplateProps } from "../types";
+import type { TableContainerProps } from "../types";
 import TableBody from "./foundation/Body";
 import TableCell from "./foundation/Cell";
 import TableHead from "./foundation/Head";
@@ -7,33 +7,12 @@ import TableTh from "./foundation/Th";
 import TableRoot from "./foundation/Root";
 import TableRow from "./foundation/Row";
 
-const resolveHeadContent = (column: TableTemplateColumn): React.ReactNode => {
-  if (typeof column.cellContents !== "undefined") {
-    return column.cellContents;
-  }
-
-  if (typeof column.cellChildren !== "undefined") {
-    return column.cellChildren;
-  }
-
-  if (typeof column.headContent !== "undefined") {
-    return column.headContent;
-  }
-
-  if (typeof column.dataName !== "undefined") {
-    return column.dataName;
-  }
-
-  return column.dataKey;
-};
-
 /**
  * Table Preset; 기본 Container 조합 컴포넌트
  * @component
- * @param {TableTemplateProps} props
- * @param {TableTemplateColumn[]} [props.columns] colgroup/head 자동 렌더링 column 목록
+ * @param {TableContainerProps} props
+ * @param {TableColumnData[]} [props.columns] colgroup/head 자동 렌더링 column 목록
  * @param {boolean} [props.isCustomBody=false] true면 body wrapper 없이 children 직접 렌더링
- * @param {"legacy-rem" | "raw"} [props.widthMode="legacy-rem"] number width 해석 방식
  * @param {React.ReactNode} [props.footer] footer 노드. `<Table.Foot />`를 직접 전달하는 방식을 권장
  * @param {React.ReactNode} [props.children] table body 콘텐츠
  * @example
@@ -52,63 +31,50 @@ const resolveHeadContent = (column: TableTemplateColumn): React.ReactNode => {
  *   {rows}
  * </Table.Container>
  */
-const TableContainer = forwardRef<HTMLTableElement, TableTemplateProps>(
-  (
-    {
-      columns,
-      isCustomBody = false,
-      widthMode = "legacy-rem",
-      footer,
-      children,
-      ...tableProps
-    },
-    ref,
-  ) => {
-    const hasColumns = Array.isArray(columns) && columns.length > 0;
+const TableContainer = forwardRef<HTMLTableElement, TableContainerProps>(
+  ({ columns, isCustomBody = false, footer, children, ...tableProps }, ref) => {
+    // 변경: optional columns를 안전하게 순회하기 위한 기본 배열을 고정한다.
+    const resolvedColumns = columns ?? [];
+    // 변경: columns 존재 여부만 단일 플래그로 관리해 렌더 분기 가독성을 유지한다.
+    const hasColumns = resolvedColumns.length > 0;
 
     return (
       <TableRoot {...tableProps} ref={ref}>
         {hasColumns && (
           <colgroup>
-            {columns.map(({ key, width, dataKey, className, span }) => {
-              const normalizedWidth =
-                typeof width === "number"
-                  ? widthMode === "legacy-rem"
-                    ? `${width / 10}rem`
-                    : width
-                  : width;
-
-              return (
-                <col
-                  key={`${key}/colgroup`}
-                  className={className}
-                  data-key={dataKey}
-                  span={span}
-                  style={
-                    normalizedWidth
-                      ? {
-                          width: normalizedWidth,
-                        }
-                      : undefined
-                  }
-                  width={typeof width === "number" ? width : undefined}
-                />
-              );
-            })}
+            {resolvedColumns.map(({ key, width, dataKey, className }) => (
+              <col
+                key={`${key}/colgroup`}
+                className={className}
+                data-key={dataKey}
+                style={
+                  typeof width !== "undefined"
+                    ? {
+                        // 변경: width는 number|string 값을 그대로 사용하고, 단위 해석은 사용처에서 결정한다.
+                        width,
+                      }
+                    : undefined
+                }
+                width={typeof width === "number" ? width : undefined}
+              />
+            ))}
           </colgroup>
         )}
 
         {hasColumns && (
           <TableHead>
             <TableRow>
-              {columns.map(column => (
-                <TableTh key={`${column.key}/head`} data-key={column.dataKey}>
-                  {/* 변경: 헤더 셀 여백/정렬도 Cell 레이어에서 일관 제어한다. */}
-                  <TableCell section="head" alignX={column.align}>
-                    {resolveHeadContent(column)}
-                  </TableCell>
-                </TableTh>
-              ))}
+              {resolvedColumns.map(
+                ({ key, dataKey, alignX, alignY, cellContents }) => (
+                  <TableTh key={`${key}/head`} data-key={dataKey}>
+                    {/* 변경: header cell 정렬은 alignX/alignY로만 제어한다. */}
+                    <TableCell section="head" alignX={alignX} alignY={alignY}>
+                      {/* 변경: key는 렌더 식별자이므로 헤더 노출값 fallback으로 사용하지 않는다. */}
+                      {cellContents}
+                    </TableCell>
+                  </TableTh>
+                ),
+              )}
             </TableRow>
           </TableHead>
         )}

package/src/components/table/markup/foundation/Cell.tsx

@@ -6,13 +6,12 @@ import type { TableCellContentProps } from "../../types";
  * Table Foundation; Cell 콘텐츠 래퍼 컴포넌트
  * @component
  * @param {TableCellContentProps} props
- * @param {"left" | "center" | "right"} [props.alignX] cell 콘텐츠 가로 정렬
- * @param {"top" | "center" | "bottom"} [props.alignY] cell 콘텐츠 세로 정렬
+ * @param {"left" | "center" | "right" | "normal" | "start" | "end" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | "stretch"} [props.alignX] cell 콘텐츠 가로 정렬(CSS `justify-content`로 매핑)
+ * @param {"top" | "center" | "bottom" | "normal" | "stretch" | "start" | "end" | "flex-start" | "flex-end" | "self-start" | "self-end" | "baseline"} [props.alignY] cell 콘텐츠 세로 정렬(CSS `align-items`로 매핑)
  * @param {boolean} [props.noPadding=false] true면 cell 내부 padding 제거
  * @param {"default" | "none"} [props.padding="default"] cell 내부 padding 제어
- * @param {"left" | "center" | "right"} [props.align] cell 콘텐츠 가로 정렬(호환 alias)
  * @param {string} [props.className] cell content className
- * @param {React.ReactNode} [props.children] 셀 내부 콘텐츠
+ * @param {React.ReactNode} [props.children] 셀 내부 콘텐츠 `span.table-cell-text.table-${section}-cell-text`
  */
 const TableCell = forwardRef<HTMLDivElement, TableCellContentProps>(
   (
@@ -24,12 +23,11 @@ const TableCell = forwardRef<HTMLDivElement, TableCellContentProps>(
       alignY,
       noPadding = false,
       padding = "default",
-      align,
       ...cellProps
     },
     ref,
   ) => {
-    const resolvedAlignX = alignX ?? align ?? "left";
+    const resolvedAlignX = alignX ?? "left";
     const resolvedAlignY = alignY ?? "center";
     // 변경: noPadding boolean이 주어지면 padding 옵션보다 우선해 none으로 고정한다.
     const resolvedPadding = noPadding ? "none" : padding;

package/src/components/table/styles/foundation.scss

@@ -167,22 +167,52 @@
 }
 
 // 변경: Cell.alignX/alignY로 콘텐츠 정렬을 제어한다.
-.table-cell-content[data-align-x="left"],
-.table-cell-content[data-align="left"] {
+.table-cell-content[data-align-x="left"] {
   justify-content: flex-start;
-  text-align: left;
 }
 
-.table-cell-content[data-align-x="center"],
-.table-cell-content[data-align="center"] {
+.table-cell-content[data-align-x="center"] {
   justify-content: center;
-  text-align: center;
 }
 
-.table-cell-content[data-align-x="right"],
-.table-cell-content[data-align="right"] {
+.table-cell-content[data-align-x="right"] {
   justify-content: flex-end;
-  text-align: right;
+}
+
+.table-cell-content[data-align-x="normal"] {
+  justify-content: normal;
+}
+
+.table-cell-content[data-align-x="start"] {
+  justify-content: start;
+}
+
+.table-cell-content[data-align-x="end"] {
+  justify-content: end;
+}
+
+.table-cell-content[data-align-x="flex-start"] {
+  justify-content: flex-start;
+}
+
+.table-cell-content[data-align-x="flex-end"] {
+  justify-content: flex-end;
+}
+
+.table-cell-content[data-align-x="space-between"] {
+  justify-content: space-between;
+}
+
+.table-cell-content[data-align-x="space-around"] {
+  justify-content: space-around;
+}
+
+.table-cell-content[data-align-x="space-evenly"] {
+  justify-content: space-evenly;
+}
+
+.table-cell-content[data-align-x="stretch"] {
+  justify-content: stretch;
 }
 
 .table-cell-content[data-align-y="top"] {
@@ -197,6 +227,42 @@
   align-items: flex-end;
 }
 
+.table-cell-content[data-align-y="normal"] {
+  align-items: normal;
+}
+
+.table-cell-content[data-align-y="stretch"] {
+  align-items: stretch;
+}
+
+.table-cell-content[data-align-y="start"] {
+  align-items: start;
+}
+
+.table-cell-content[data-align-y="end"] {
+  align-items: end;
+}
+
+.table-cell-content[data-align-y="flex-start"] {
+  align-items: flex-start;
+}
+
+.table-cell-content[data-align-y="flex-end"] {
+  align-items: flex-end;
+}
+
+.table-cell-content[data-align-y="self-start"] {
+  align-items: self-start;
+}
+
+.table-cell-content[data-align-y="self-end"] {
+  align-items: self-end;
+}
+
+.table-cell-content[data-align-y="baseline"] {
+  align-items: baseline;
+}
+
 // 변경: section 기반 Cell 텍스트는 native cell 토큰과 동일한 스케일을 따르게 한다.
 .table-cell.table-head-cell .table-cell-text {
   color: var(--table-th-text-color);