@tipp/ui 2.3.33 → 2.3.35

package/dist/molecules/index.d.cts

@@ -23,6 +23,7 @@ export { OneOnOneGuideData, OneOnOneGuideList, OneOnOneGuideListProps, oneOnOneN
 export { Description, DescriptionBlock, DescriptionBlockType, DescriptionBulletListBlock, DescriptionCalloutBlock, DescriptionJsonRender, DescriptionJsonRenderProps, DescriptionTypoBlock } from './description-json-render.cjs';
 export { TrainingInfoGuideline, TrainingInfoGuidelineProps } from './training-info-guideline.cjs';
 export { DynamicFormEditor, DynamicFormEditorProps } from './dynamic-form-editor.cjs';
+export { AutocompleteOption, AutocompleteTextfield, AutocompleteTextfieldProps } from './autocomplete-textfield.cjs';
 export { ExpandComp, OnRowClick } from './expand-table/row.cjs';
 export { ColumnDef, Row, createColumnHelper } from '@tanstack/react-table';
 import 'react';
@@ -37,4 +38,5 @@ import '../types/curriculum.type.cjs';
 import 'yup';
 import '../types/dynamic-form-schema-generated.cjs';
 import '../types/training-info-guideline-schema-generated.cjs';
+import '../atoms/text-field.cjs';
 import '../utils/get-cell-align.cjs';

package/dist/molecules/index.d.ts

@@ -23,6 +23,7 @@ export { OneOnOneGuideData, OneOnOneGuideList, OneOnOneGuideListProps, oneOnOneN
 export { Description, DescriptionBlock, DescriptionBlockType, DescriptionBulletListBlock, DescriptionCalloutBlock, DescriptionJsonRender, DescriptionJsonRenderProps, DescriptionTypoBlock } from './description-json-render.js';
 export { TrainingInfoGuideline, TrainingInfoGuidelineProps } from './training-info-guideline.js';
 export { DynamicFormEditor, DynamicFormEditorProps } from './dynamic-form-editor.js';
+export { AutocompleteOption, AutocompleteTextfield, AutocompleteTextfieldProps } from './autocomplete-textfield.js';
 export { ExpandComp, OnRowClick } from './expand-table/row.js';
 export { ColumnDef, Row, createColumnHelper } from '@tanstack/react-table';
 import 'react';
@@ -37,4 +38,5 @@ import '../types/curriculum.type.js';
 import 'yup';
 import '../types/dynamic-form-schema-generated.js';
 import '../types/training-info-guideline-schema-generated.js';
+import '../atoms/text-field.js';
 import '../utils/get-cell-align.js';

package/dist/molecules/index.js

@@ -1,8 +1,9 @@
-import "../chunk-YWYYPYBK.js";
+import "../chunk-SYMOHU2B.js";
 import "../chunk-AS7ID74X.js";
 import {
   CurriculumBody
-} from "../chunk-HLL4QJJY.js";
+} from "../chunk-2TNZVHXZ.js";
+import "../chunk-KFUBWOCN.js";
 import {
   CurriculumSidebar
 } from "../chunk-6TQGX5ZU.js";
@@ -13,22 +14,21 @@ import "../chunk-MJMHPIYX.js";
 import "../chunk-4TST4UK5.js";
 import "../chunk-VH37R5IH.js";
 import "../chunk-ZFTQ2XBH.js";
-import "../chunk-R3ZYNS4D.js";
-import "../chunk-WOAZK56Z.js";
-import "../chunk-4QHXYLE4.js";
-import "../chunk-TB3ZF5TJ.js";
-import "../chunk-3WNHPKHP.js";
-import "../chunk-XXMZLXDE.js";
+import "../chunk-SRZK4OC5.js";
+import "../chunk-ESM3HX57.js";
+import "../chunk-PGUDVR3V.js";
+import "../chunk-7R5KG7SJ.js";
+import "../chunk-W7TBPRHG.js";
+import "../chunk-TCFXG4AX.js";
 import "../chunk-76PNGKCB.js";
 import "../chunk-SAEPW5JF.js";
 import "../chunk-VK6INFSB.js";
-import "../chunk-GXG26SHU.js";
-import "../chunk-JFJ3N4V5.js";
-import "../chunk-W7TBPRHG.js";
+import "../chunk-OILH5J7Q.js";
+import "../chunk-NTJLECYY.js";
 import "../chunk-CNW3YEAK.js";
 import "../chunk-NIMLBANB.js";
+import "../chunk-CIQ7ELE6.js";
 import "../chunk-GMKRNFH5.js";
-import "../chunk-KFUBWOCN.js";
 import {
   CurriculumSubNav
 } from "../chunk-M6C7IXCB.js";
@@ -48,15 +48,18 @@ import {
 import {
   ExpandTable,
   createColumnHelper
-} from "../chunk-5J4YHHVX.js";
+} from "../chunk-V3F7KAR6.js";
 import "../chunk-JCG2AUFJ.js";
 import "../chunk-2ISIAPFS.js";
+import {
+  RadioButtonCard
+} from "../chunk-CSKNBWPB.js";
 import {
   Stepper
-} from "../chunk-3Z2XZ4ZG.js";
+} from "../chunk-QKZTZUWP.js";
 import {
   TagSelector
-} from "../chunk-ZVSATS4O.js";
+} from "../chunk-5OLJJUMC.js";
 import {
   TimeSelect
 } from "../chunk-7PF6I4RN.js";
@@ -68,6 +71,10 @@ import "../chunk-2BPFXK4L.js";
 import {
   TrainingInfoGuideline
 } from "../chunk-SLJLEPD2.js";
+import {
+  DynamicFormResponseItem
+} from "../chunk-77H5BUYO.js";
+import "../chunk-K7LTEKQS.js";
 import {
   ForceRefresh
 } from "../chunk-EWFZXCMV.js";
@@ -76,7 +83,7 @@ import {
 } from "../chunk-5JQOU3IR.js";
 import {
   LearningPost
-} from "../chunk-SACH3XVV.js";
+} from "../chunk-F7JSPN5P.js";
 import "../chunk-7FKRQQYK.js";
 import {
   Navigation
@@ -86,74 +93,74 @@ import {
   oneOnOneNoteTextReplacer
 } from "../chunk-FVNXDLRU.js";
 import {
-  RadioButtonCard
-} from "../chunk-CSKNBWPB.js";
+  DownloadCard
+} from "../chunk-OHNBVT52.js";
 import {
   DynamicFormEditor
-} from "../chunk-BKYPABII.js";
-import "../chunk-GXPEADVY.js";
-import "../chunk-6UXCNYVO.js";
-import "../chunk-MIATMZDP.js";
-import "../chunk-JRSZNGFD.js";
+} from "../chunk-YPEB36YK.js";
+import "../chunk-5WX7CODZ.js";
+import "../chunk-7R65MUL6.js";
+import "../chunk-AA6OYHCE.js";
+import "../chunk-ZA4NYPSW.js";
 import {
   DynamicForm,
   createYupValidation
-} from "../chunk-KCAOUZCT.js";
+} from "../chunk-GTO7GG2K.js";
 import {
   DynamicFormField
-} from "../chunk-MPZJH3PI.js";
+} from "../chunk-HTNDVNLQ.js";
 import "../chunk-Z7WNKARH.js";
 import {
-  DynamicFormResponseItem
-} from "../chunk-77H5BUYO.js";
-import "../chunk-K7LTEKQS.js";
+  AutocompleteTextfield
+} from "../chunk-LSDD4TAP.js";
 import {
   DescriptionJsonRender
-} from "../chunk-BFRNEBJN.js";
+} from "../chunk-QEDJOAP6.js";
 import "../chunk-LT6LBTA7.js";
 import {
   DotNavigation
 } from "../chunk-IJOOKMKQ.js";
-import {
-  DownloadCard
-} from "../chunk-OHNBVT52.js";
 import "../chunk-4U6DFH7Z.js";
 import "../chunk-QDC3LFHS.js";
+import "../chunk-5ZITU5L7.js";
 import "../chunk-5XYPLDI5.js";
 import "../chunk-6NPTJBFE.js";
+import "../chunk-MUPK4L3U.js";
 import "../chunk-X2GMDZ7M.js";
 import "../chunk-HYITAA4J.js";
 import "../chunk-FR2GDOU2.js";
-import "../chunk-5ZITU5L7.js";
+import "../chunk-JIJLOKVN.js";
+import "../chunk-F7LTJOOC.js";
+import "../chunk-5AVBYDPB.js";
 import "../chunk-365QMK4D.js";
 import "../chunk-6IVCARWS.js";
 import "../chunk-6DJOIRMF.js";
 import "../chunk-FPD73OHW.js";
-import "../chunk-MUPK4L3U.js";
+import "../chunk-EGEQY3KT.js";
 import "../chunk-XQOL7UBI.js";
 import "../chunk-TULWX7D6.js";
 import "../chunk-DHZVOXFM.js";
-import "../chunk-JIJLOKVN.js";
-import "../chunk-MFIOT62L.js";
-import "../chunk-5AVBYDPB.js";
-import "../chunk-EGEQY3KT.js";
-import "../chunk-W7X7KSJP.js";
-import "../chunk-VYCYVN3L.js";
-import "../chunk-OHMOP5PV.js";
-import "../chunk-NFDQJVFA.js";
 import "../chunk-B5CKZFDM.js";
 import "../chunk-BESTU2AY.js";
 import "../chunk-U7N2PWMO.js";
 import "../chunk-XK6VEVOK.js";
 import "../chunk-HF6GNDPV.js";
+import "../chunk-SMLC2O3V.js";
+import "../chunk-B6XJN6EC.js";
+import "../chunk-RP2RGCAW.js";
+import "../chunk-W7X7KSJP.js";
+import "../chunk-VYCYVN3L.js";
+import "../chunk-OHMOP5PV.js";
+import "../chunk-NFDQJVFA.js";
+import "../chunk-6SYFG6YY.js";
+import "../chunk-K36TPMKL.js";
+import "../chunk-U3BQT7ZO.js";
 import "../chunk-4Y5BEXVN.js";
 import "../chunk-PMJIFLDT.js";
 import "../chunk-LDBWASUA.js";
 import "../chunk-25HMMI7R.js";
 import "../chunk-ZVDAEY5Q.js";
 import "../chunk-LQY4RKWI.js";
-import "../chunk-B6XJN6EC.js";
-import "../chunk-RP2RGCAW.js";
 import "../chunk-DLP4UUNG.js";
 import "../chunk-VD7AQ7HK.js";
 import "../chunk-ZQE7SP6P.js";
@@ -171,11 +178,9 @@ import "../chunk-5OM2H6RI.js";
 import "../chunk-ZUYCXCPW.js";
 import "../chunk-YVFNJE4E.js";
 import "../chunk-EAXUQEO5.js";
-import "../chunk-6SYFG6YY.js";
-import "../chunk-K36TPMKL.js";
-import "../chunk-U3BQT7ZO.js";
 import "../chunk-CRTRMMJ7.js";
 export {
+  AutocompleteTextfield,
   CurriculumBody,
   CurriculumProvider,
   CurriculumSidebar,

package/dist/molecules/learning-post.js

@@ -1,9 +1,10 @@
 import {
   LearningPost
-} from "../chunk-SACH3XVV.js";
+} from "../chunk-F7JSPN5P.js";
 import "../chunk-7FKRQQYK.js";
 import "../chunk-EGEQY3KT.js";
 import "../chunk-BESTU2AY.js";
+import "../chunk-U3BQT7ZO.js";
 import "../chunk-4Y5BEXVN.js";
 import "../chunk-PMJIFLDT.js";
 import "../chunk-LDBWASUA.js";
@@ -11,7 +12,6 @@ import "../chunk-25HMMI7R.js";
 import "../chunk-ZVDAEY5Q.js";
 import "../chunk-LQY4RKWI.js";
 import "../chunk-EAXUQEO5.js";
-import "../chunk-U3BQT7ZO.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   LearningPost

package/dist/molecules/stepper.js

@@ -1,6 +1,7 @@
 import {
   Stepper
-} from "../chunk-3Z2XZ4ZG.js";
+} from "../chunk-QKZTZUWP.js";
+import "../chunk-K36TPMKL.js";
 import "../chunk-PMJIFLDT.js";
 import "../chunk-LDBWASUA.js";
 import "../chunk-25HMMI7R.js";
@@ -20,7 +21,6 @@ import "../chunk-YSYJCYHY.js";
 import "../chunk-5OM2H6RI.js";
 import "../chunk-ZUYCXCPW.js";
 import "../chunk-YVFNJE4E.js";
-import "../chunk-K36TPMKL.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   Stepper

package/dist/molecules/tag-selector.js

@@ -1,9 +1,11 @@
 import {
   TagSelector
-} from "../chunk-ZVSATS4O.js";
+} from "../chunk-5OLJJUMC.js";
 import "../chunk-MUPK4L3U.js";
 import "../chunk-5AVBYDPB.js";
 import "../chunk-EGEQY3KT.js";
+import "../chunk-6SYFG6YY.js";
+import "../chunk-U3BQT7ZO.js";
 import "../chunk-PMJIFLDT.js";
 import "../chunk-LDBWASUA.js";
 import "../chunk-25HMMI7R.js";
@@ -25,8 +27,6 @@ import "../chunk-YSYJCYHY.js";
 import "../chunk-5OM2H6RI.js";
 import "../chunk-ZUYCXCPW.js";
 import "../chunk-YVFNJE4E.js";
-import "../chunk-6SYFG6YY.js";
-import "../chunk-U3BQT7ZO.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   TagSelector

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui",
-  "version": "2.3.33",
+  "version": "2.3.35",
   "private": false,
   "type": "module",
   "exports": {

package/src/atoms/dropdown-menu.tsx

@@ -3,6 +3,7 @@ import { forwardRef, useMemo } from 'react';
 
 type ContentProps = RadixDropdownMenu.ContentProps & {
   isNavigation?: boolean;
+  onOpenAutoFocus?: (event: Event) => void;
 };
 
 const Content = forwardRef<HTMLDivElement, ContentProps>((props, ref) => {
@@ -23,7 +24,19 @@ const Content = forwardRef<HTMLDivElement, ContentProps>((props, ref) => {
 
 Content.displayName = 'DropdownMenu.Content';
 
+/** @radix-ui/themes의 DropdownMenu.Trigger는 asChild 타입이 누락되어 있어 별도로 확장 */
+type TriggerProps = RadixDropdownMenu.TriggerProps & { asChild?: boolean };
+
+const Trigger = forwardRef<HTMLButtonElement, TriggerProps>(
+  ({ asChild: _asChild, ...props }, ref) => (
+    <RadixDropdownMenu.Trigger ref={ref} {...props} />
+  ),
+);
+
+Trigger.displayName = 'DropdownMenu.Trigger';
+
 export const DropdownMenu = {
   ...RadixDropdownMenu,
   Content,
+  Trigger,
 };

package/src/atoms/pagination.tsx

@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {
   ChevronLeftIcon,
   ChevronRightIcon,
@@ -40,15 +46,27 @@ export function Pagination(props: PaginationProps): React.ReactNode {
     return Array.from({ length: end - start + 1 }, (_, i) => i + start);
   }, [count, page, siblingCount]);
 
+  // onChange 참조가 매 렌더 새로 생성되더라도 effect가 재발화하지 않도록 ref로 보관한다.
+  const onChangeRef = useRef(onChange);
   useEffect(() => {
-    onChange?.(page);
-  }, [onChange, page]);
+    onChangeRef.current = onChange;
+  });
 
+  // 내부 page 상태가 바뀔 때만 부모에 알림. 마운트 시 초기 page는 부모가 이미 알고 있으므로 제외.
+  const isFirstRender = useRef(true);
   useEffect(() => {
-    if (props.page) {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    onChangeRef.current?.(page);
+  }, [page]);
+
+  useEffect(() => {
+    if (props.page && props.page !== page) {
       setPage(props.page);
     }
-  }, [props.page]);
+  }, [props.page, page]);
 
   const prev = useMemo<number | undefined>(() => {
     const p = page - 1;

package/src/molecules/autocomplete-textfield.tsx

@@ -0,0 +1,302 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from 'react';
+import { Box } from '@radix-ui/themes';
+import { TextField, type RootProps as TextFieldRootProps } from '../atoms/text-field';
+import { DropdownMenu } from '../atoms/dropdown-menu';
+import { Typo } from '../atoms/typo';
+
+export interface AutocompleteOption {
+  label: string;
+  value: string;
+}
+
+export interface AutocompleteTextfieldProps
+  extends Omit<TextFieldRootProps, 'value' | 'onChange' | 'onSelect'> {
+  options: AutocompleteOption[];
+  value?: string;
+  onChange?: (value: string) => void;
+  onSelect?: (option: AutocompleteOption) => void;
+  placeholder?: string;
+  /** 빈 결과일 때 표시할 메시지. null이면 빈 결과 시 드롭다운을 표시하지 않음 */
+  emptyMessage?: string | null;
+  /** 최대 표시 항목 수 (기본값: 10) */
+  maxItems?: number;
+  /** TextField 왼쪽 슬롯 (아이콘 등) */
+  slotLeft?: React.ReactNode;
+  /** TextField 오른쪽 슬롯 (아이콘 등) */
+  slotRight?: React.ReactNode;
+}
+
+export const AutocompleteTextfield = forwardRef<
+  HTMLInputElement,
+  AutocompleteTextfieldProps
+>(
+  (
+    {
+      options,
+      value: externalValue,
+      onChange,
+      onSelect,
+      placeholder,
+      emptyMessage = '검색 결과가 없습니다.',
+      maxItems = 10,
+      slotLeft,
+      slotRight,
+      error,
+      ...rest
+    },
+    ref
+  ): React.ReactElement => {
+    const isControlled = externalValue !== undefined;
+    const [internalValue, setInternalValue] = useState('');
+    const inputValue = isControlled ? externalValue : internalValue;
+
+    const [open, setOpen] = useState(false);
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+
+    const inputRef = useRef<HTMLInputElement>(null);
+    const listRef = useRef<HTMLUListElement>(null);
+    const listboxId = useId();
+    const justSelectedRef = useRef(false);
+
+    const filtered = options
+      .filter((opt: AutocompleteOption) =>
+        opt.label.toLowerCase().includes(inputValue.toLowerCase())
+      )
+      .slice(0, maxItems);
+
+    const handleInputChange = useCallback(
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        const next = e.target.value;
+        if (!isControlled) setInternalValue(next);
+        onChange?.(next);
+        const nextFiltered = options
+          .filter((opt) => opt.label.toLowerCase().includes(next.toLowerCase()))
+          .slice(0, maxItems);
+        setOpen(nextFiltered.length > 0 || emptyMessage !== null);
+        setHighlightedIndex(-1);
+      },
+      [isControlled, onChange, options, maxItems, emptyMessage]
+    );
+
+    const handleSelect = useCallback(
+      (option: AutocompleteOption) => {
+        if (!isControlled) setInternalValue(option.label);
+        onChange?.(option.label);
+        onSelect?.(option);
+        setOpen(false);
+        setHighlightedIndex(-1);
+        justSelectedRef.current = true;
+        inputRef.current?.focus();
+      },
+      [isControlled, onChange, onSelect]
+    );
+
+    const handleFocus = useCallback(() => {
+      if (justSelectedRef.current) {
+        justSelectedRef.current = false;
+        return;
+      }
+      const currentFiltered = options
+        .filter((opt) => opt.label.toLowerCase().includes(inputValue.toLowerCase()))
+        .slice(0, maxItems);
+      setOpen(currentFiltered.length > 0 || emptyMessage !== null);
+    }, [options, inputValue, maxItems, emptyMessage]);
+
+    const handleBlur = useCallback((e: React.FocusEvent<HTMLInputElement>) => {
+      // 포커스가 dropdown content 내부로 이동한 경우 닫지 않음
+      if (e.relatedTarget && inputRef.current?.parentElement?.contains(e.relatedTarget as Node)) {
+        return;
+      }
+      setOpen(false);
+      setHighlightedIndex(-1);
+    }, []);
+
+    const handleKeyDown = useCallback(
+      (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (!open) {
+          if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+            setOpen(true);
+            setHighlightedIndex(0);
+            e.preventDefault();
+          }
+          return;
+        }
+
+        switch (e.key) {
+          case 'ArrowDown':
+            e.preventDefault();
+            setHighlightedIndex((prev) =>
+              prev < filtered.length - 1 ? prev + 1 : 0
+            );
+            break;
+          case 'ArrowUp':
+            e.preventDefault();
+            setHighlightedIndex((prev) =>
+              prev > 0 ? prev - 1 : filtered.length - 1
+            );
+            break;
+          case 'Enter':
+            e.preventDefault();
+            if (highlightedIndex >= 0 && filtered[highlightedIndex]) {
+              handleSelect(filtered[highlightedIndex]);
+            }
+            break;
+          case 'Escape':
+            setOpen(false);
+            setHighlightedIndex(-1);
+            break;
+          case 'Tab':
+            setOpen(false);
+            setHighlightedIndex(-1);
+            break;
+          default:
+            break;
+        }
+      },
+      [open, filtered, highlightedIndex, handleSelect]
+    );
+
+    // 하이라이트 항목을 리스트 뷰에 스크롤
+    useEffect(() => {
+      if (!listRef.current || highlightedIndex < 0) return;
+      const item = listRef.current.children[highlightedIndex];
+      (item as HTMLElement).scrollIntoView({ block: 'nearest' });
+    }, [highlightedIndex]);
+
+    return (
+      <Box position="relative" style={{ width: '100%' }}>
+        <TextField.Root
+          aria-activedescendant={
+            open && highlightedIndex >= 0
+              ? `${listboxId}-option-${highlightedIndex}`
+              : undefined
+          }
+          aria-autocomplete="list"
+          aria-controls={open ? listboxId : undefined}
+          aria-expanded={open}
+          error={error}
+          onBlur={handleBlur}
+          onChange={handleInputChange}
+          onFocus={handleFocus}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          ref={(node) => {
+            (inputRef as React.MutableRefObject<HTMLInputElement | null>).current =
+              node;
+            if (typeof ref === 'function') {
+              ref(node);
+            } else if (ref) {
+              (ref as React.MutableRefObject<HTMLInputElement | null>).current =
+                node;
+            }
+          }}
+          role="combobox"
+          style={{ width: '100%' }}
+          value={inputValue}
+          {...rest}
+        >
+          {slotLeft && <TextField.Slot side="left">{slotLeft}</TextField.Slot>}
+          {slotRight && <TextField.Slot side="right">{slotRight}</TextField.Slot>}
+        </TextField.Root>
+
+        {/* DropdownMenu.Trigger는 포지셔닝 앵커 전용으로 사용 (비대화형) */}
+        <DropdownMenu.Root
+          modal={false}
+          onOpenChange={(nextOpen) => {
+            if (!nextOpen && document.activeElement !== inputRef.current) {
+              setOpen(false);
+              setHighlightedIndex(-1);
+            }
+          }}
+          open={open}
+        >
+          <DropdownMenu.Trigger asChild>
+            <span
+              aria-hidden="true"
+              style={{
+                bottom: 0,
+                height: 0,
+                left: 0,
+                opacity: 0,
+                pointerEvents: 'none',
+                position: 'absolute',
+                width: '100%',
+              }}
+            />
+          </DropdownMenu.Trigger>
+
+          <DropdownMenu.Content
+            align="start"
+            onCloseAutoFocus={(e: Event) => {
+              e.preventDefault();
+            }}
+            onOpenAutoFocus={(e: Event) => {
+              e.preventDefault();
+            }}
+            sideOffset={4}
+            style={{
+              maxHeight: 240,
+              overflowY: 'auto',
+              padding: 0,
+              width: 'var(--radix-dropdown-menu-trigger-width)',
+            }}
+          >
+            {filtered.length === 0 && emptyMessage !== null ? (
+              <Box px="2" py="2">
+                <Typo color="gray">
+                  {emptyMessage}
+                </Typo>
+              </Box>
+            ) : (
+              <ul
+                id={listboxId}
+                ref={listRef}
+                role="listbox"
+                style={{ listStyle: 'none', margin: 0, padding: 0 }}
+              >
+                {filtered.map((option, index) => {
+                  const isHighlighted = index === highlightedIndex;
+                  return (
+                    <li
+                      aria-selected={isHighlighted}
+                      id={`${listboxId}-option-${index}`}
+                      key={option.value}
+                      onMouseEnter={() => {
+                        setHighlightedIndex(index);
+                      }}
+                      onPointerDown={(e) => {
+                        // blur 전에 선택되도록 pointerdown 사용
+                        e.preventDefault();
+                        handleSelect(option);
+                      }}
+                      role="option"
+                      style={{
+                        padding: 'var(--spacing-4) var(--spacing-6)',
+                        cursor: 'pointer',
+                        backgroundColor: isHighlighted
+                          ? 'var(--accent-3)'
+                          : 'transparent',
+                        transition: 'background-color 80ms',
+                      }}
+                    >
+                      <Typo variant="body">{option.label}</Typo>
+                    </li>
+                  );
+                })}
+              </ul>
+            )}
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
+      </Box>
+    );
+  }
+);
+
+AutocompleteTextfield.displayName = 'AutocompleteTextfield';