# Summary

> **Note:** This is a summary overview using the LLMs.txt format (https://llmstxt.org/). Each section links to its full documentation file in plain text (.txt) format. Click any link below to view the detailed documentation for that section.



- [Intro](resources/components/intro.txt)
- [Guide/Getting Started](resources/guides/guide-getting-started.md)
- [Guide/Common Mistakes](resources/guides/guide-common-mistakes.md)
- [Guide/Foundation Usage](resources/guides/guide-foundation-usage.md)
- [Guide/Style Utilities](resources/guides/guide-style-utilities.md)
- [Guide/Component Decision Tree](resources/guides/guide-component-decision-tree.md)
- [Guide/Composition Patterns](resources/guides/guide-composition-patterns.md)
- [Guide/Icon Unicode Lookup](resources/guides/guide-icon-unicode-lookup.md)
- [Guide/Icon Mapping](resources/guides/guide-icon-mapping.md)
- [Foundation/Colors](resources/components/foundation-colors.txt)
- [Foundation/SemanticColors](resources/components/foundation-semanticcolors.txt)
- [Foundation/SemanticSpacing](resources/components/foundation-semanticspacing.txt)
- [Foundation/Shapes](resources/components/foundation-shapes.txt)
- [Foundation/Spacing](resources/components/foundation-spacing.txt)
- [Foundation/Typography](resources/components/foundation-typography.txt)
- [Component/Badge](resources/components/component-badge.props.txt): 상태, 분류 등 짧은 정보를 일반 텍스트와 구분하거나 더 강조하기 위해 사용하는 컴포넌트입니다.
- [Component/Banner](resources/components/component-banner.props.txt): 사용자의 작업 흐름을 방해하지 않으면서 중요한 정보나 상태를 화면에 고정 노출하는 컴포넌트.
- [Component/BottomSheet](resources/components/component-bottomsheet.props.txt): 바텀 시트는 화면 하단에 고정되는 보조 콘텐츠 표시 도구로 모바일에서만 사용합니다.
- [Component/Breadcrumb](resources/components/component-breadcrumb.props.txt): Depth가 2개 이상일 때 사용할 수 있으며 클릭 가능한 메뉴만 노출합니다.
- [Component/Button/AccordionButton](resources/components/component-button-accordionbutton.props.txt): 아코디언 버튼은 숨겨진 콘텐츠를 표시하거나 숨길 수 있는 트리거입니다.
- [Component/Button/Button](resources/components/component-button-button.props.txt): 버튼을 눌러 특정한 동작을 수행할 수 있습니다. 위계와 기능에 따라 스타일이 나뉘므로 적절하게 사용해야 합니다.
- [Component/Button/FloatingButton](resources/components/component-button-floatingbutton.props.txt)
- [Component/Button/IconButton](resources/components/component-button-iconbutton.props.txt): 버튼을 눌러 특정한 동작을 수행할 수 있습니다. 위계와 기능에 따라 스타일이 나뉘므로 적절하게 사용해야 합니다.
- [Component/Button/PopoverButton](resources/components/component-button-popoverbutton.props.txt): 버튼을 밖에 모두 꺼내놓기에 공간이 부족한 경우 유사한 기능들을 하나의 그룹으로 묶어서 보여줄 때 사용합니다. 단순히 여러 항목 중 하나를 선택하는 거라면 Dropdown을 사용해주세요.
- [Component/Button/TextButton](resources/components/component-button-textbutton.props.txt): 버튼을 눌러 특정한 동작을 수행할 수 있습니다. 위계와 기능에 따라 스타일이 나뉘므로 적절하게 사용해야 합니다.
- [Component/CategorySelector](resources/components/component-categoryselector.props.txt): 카테고리를 선택할 때 사용하며 최대 네 단계까지의 하위 카테고리를 선택할 수 있습니다.
- [Component/Control/Checkbox](resources/components/component-control-checkbox.props.txt): 여러 요소를 선택할 때 사용합니다.
- [Component/Control/CheckboxGroup](resources/components/component-control-checkboxgroup.props.txt)
- [Component/Chip/InputChip](resources/components/component-chip-inputchip.props.txt): 여러 옵션 중 사용자가 선택한 항목을 Input이나 Dropdown에 표시할 때 사용합니다.
- [Component/Chip/SelectChip](resources/components/component-chip-selectchip.props.txt): 여러 옵션 중 선택한 옵션에 해당하는 내용을 조회할 수 있으며 하나의 옵션만 선택할 수 있습니다.
- [Component/ColorPicker](resources/components/component-colorpicker.props.txt): 컬러를 선택할 때 사용합니다.
- [Component/ColumnViewController](resources/components/component-columnviewcontroller.props.txt): 테이블의 컬럼을 보이지 않게 숨기거나 왼쪽에 고정시킬 수 있고, 순서를 변경할 수 있습니다.
- [Component/CopyText](resources/components/component-copytext.props.txt): 텍스트 스타일 자유롭게 변경 가능합니다.
- [Component/DatePickerV2/DatePickerV2](resources/components/component-datepickerv2-datepickerv2.props.txt)
- [Component/Divider](resources/components/component-divider.props.txt): 화면 안의 요소들을 시각적으로 분리하는 구분선입니다.
- [Component/Drawer](resources/components/component-drawer.props.txt): 드로어는 화면 우측에서 슬라이드되어 페이지 위에 표시되는 패널입니다.
- [Component/DropdownComposite](resources/components/component-dropdowncomposite.props.txt): 계층 구조의 데이터를 단계적으로 탐색하며 원하는 값을 선택할 수 있습니다.
- [Component/Dropdown](resources/components/component-dropdown.props.txt): Input 박스를 누르면 리스트가 표시되며 하나의 항목만 선택할 수 있습니다.
- [Component/DropdownFilter](resources/components/component-dropdownfilter.props.txt): 옵션이 많은 필터를 드랍다운 안으로 집어넣어 간결한 필터링을 구현할 수 있습니다.
- [Component/DropdownInput](resources/components/component-dropdowninput.props.txt): Input 박스를 눌러 텍스트를 입력할 수 있으며 입력을 시작하면 일치하는 항목이 실시간으로 표시됩니다.
- [Component/DropdownMultiSelect](resources/components/component-dropdownmultiselect.props.txt): Input 박스를 누르면 리스트가 표시되며 여러 항목을 선택할 수 있습니다.
- [Component/Upload/FileUpload](resources/components/component-upload-fileupload.props.txt): 파일을 선택하여 업로드할 수 있습니다.
- [Component/Upload/FileUploadButton](resources/components/component-upload-fileuploadbutton.props.txt): 파일을 선택하여 업로드할 수 있습니다.
- [Component/Upload/ImageUpload](resources/components/component-upload-imageupload.props.txt): 이미지를 업로드할 수 있습니다.
- [Component/Upload/ImageUploadButton](resources/components/component-upload-imageuploadbutton.props.txt)
- [Component/Upload/ImageUploadPreview](resources/components/component-upload-imageuploadpreview.props.txt)
- [Component/Form/FormField](resources/components/component-form-formfield.props.txt): 영문, 한글, 숫자 등 모든 텍스트를 입력할 수 있습니다.
- [Component/Form/FormHelperText](resources/components/component-form-formhelpertext.props.txt): Button, Input 하단에 관련 메시지를 표시할 때 사용하며 해당 컴포넌트의 width를 따릅니다.
- [Component/Form/Label](resources/components/component-form-label.props.txt): Input, Control 등의 이름을 표기할 때 사용합니다.
- [Component/Image/ImagePreview](resources/components/component-image-imagepreview.props.txt): 업로드된 이미지를 썸네일로 보여줍니다.
- [Component/ChipInput](resources/components/component-chipinput.props.txt): 내용을 직접 입력하여 칩 형태로 추가할 수 있습니다.
- [Component/Input](resources/components/component-input.props.txt): 사용자가 텍스트를 입력하는 곳입니다. 특정 항목의 속성을 입력할 때 외에도 검색, 정보 입력 등 상황에 따라 각기 다른 목적으로 사용합니다.
- [Component/InputStepper](resources/components/component-inputstepper.props.txt): 숫자를 증가하거나 감소시키는 데 사용합니다.
- [Component/NumericInput](resources/components/component-numericinput.props.txt)
- [Component/ListItem](resources/components/component-listitem.props.txt): 텍스트를 표시하는 기본 리스트입니다.
- [Component/List](resources/components/component-list.props.txt): 텍스트를 표시하는 기본 리스트입니다.
- [Component/Menu](resources/components/component-menu.props.txt)
- [Component/Modal/AlertModal](resources/components/component-modal-alertmodal.props.txt): 사용자에게 특정 행동에 대한 결과를 알려줄 때 사용합니다.
- [Component/Modal/ConfirmModal](resources/components/component-modal-confirmmodal.props.txt): 어떤 행동에 대한 사용자의 의사를 한 번 더 확인해야 할 때 사용합니다.
- [Component/Modal/FloatingModal](resources/components/component-modal-floatingmodal.props.txt): 딤드 처리 없이 특정 위치에 바로 띄울 수 있는 모달입니다.
- [Component/Modal/BasicModal](resources/components/component-modal-basicmodal.props.txt): 페이지를 이동하지 않고 어떠한 내용을 추가하거나 수정할 때 사용합니다.
- [Component/Modal/NoticeModal](resources/components/component-modal-noticemodal.props.txt): 페이지를 이동하지 않고 어떠한 내용을 추가하거나 수정할 때 사용합니다.
- [Component/Notification](resources/components/component-notification.props.txt): 사용자에게 정보를 전달하기 위한 알림 메시지입니다. 자동으로 사라지지 않고, 사용자가 액션을 취해야만 사라집니다.
- [Component/PageIndicator](resources/components/component-pageindicator.props.txt): 여러 페이지를 좌우로 넘겨 탐색할 때 사용하며 현재 표시되는 페이지를 알려줍니다.
- [Component/Pagination/Pagination](resources/components/component-pagination-pagination.props.txt): 많은 정보를 페이지 단위로 분류하여 표시할 때 사용합니다.
- [Component/Pagination/PaginationArrow](resources/components/component-pagination-paginationarrow.props.txt)
- [Component/Popover](resources/components/component-popover.props.txt): 특정 요소에 마우스를 가져다 대거나 눌렀을 때 표시되는 컨테이너입니다. 비교적 많은 내용을 담을 때 사용합니다.
- [Component/Control/RadioGroup/BoxRadio](resources/components/component-control-radiogroup-boxradio.props.txt): 기본적인 속성은 Radio와 동일하지만 강조가 필요하거나 조회 기간처럼 같은 종류 중 하나를 선택해야 할 때 사용합니다.
- [Component/Control/Radio](resources/components/component-control-radio.props.txt): 여러 항목 중 하나만 선택해야 할 때 사용합니다. 다른 항목을 선택하면 기존에 선택되어 있었던 Radio는 선택 해제됩니다.
- [Component/Control/RadioGroup/Radio](resources/components/component-control-radiogroup-radio.props.txt)
- [Component/Control/SegmentedControl](resources/components/component-control-segmentedcontrol.props.txt): Segmented Control은 두 개 이상의 상호 배타적인 옵션 중 하나를 선택할 수 있도록 하는 컴포넌트로, 탭 전환이나 필터 선택 등에 사용됩니다. 사용자는 한 번에 하나의 Segment만 선택할 수 있습니다.
- [Component/Stack/HStack](resources/components/component-stack-hstack.props.txt)
- [Component/Stack/Stack](resources/components/component-stack-stack.props.txt)
- [Component/Stack/VStack](resources/components/component-stack-vstack.props.txt)
- [Component/Control/Switch](resources/components/component-control-switch.props.txt): [Label 있는 경우 사이즈 조절 가능]
- [Component/Table/DataTable](resources/components/component-table-datatable.props.txt)
- [Component/Table/Table](resources/components/component-table-table.props.txt)
- [Component/Table/TableCell](resources/components/component-table-tablecell.props.txt)
- [Component/Table/VirtualizedDataTable](resources/components/component-table-virtualizeddatatable.props.txt)
- [Component/BoxTabs](resources/components/component-boxtabs.props.txt)
- [Component/PanelTabs/PanelTab](resources/components/component-paneltabs-paneltab.props.txt): 같은 레벨의 콘텐츠 그룹에서 원하는 정보를 빠르게 필터링하여 볼 수 있는 기능을 제공합니다.
- [Component/PanelTabs/PanelTabGroup](resources/components/component-paneltabs-paneltabgroup.props.txt)
- [Component/PanelTabs/PanelTabs](resources/components/component-paneltabs-paneltabs.props.txt): 같은 레벨의 콘텐츠 그룹에서 원하는 정보를 빠르게 필터링하여 볼 수 있는 기능을 제공합니다.
- [Component/LineTabs](resources/components/component-linetabs.props.txt): 위계가 가장 높은 곳에 사용하며 각 탭은 페이지 단위로 이동합니다.
- [Component/Text/BaseText](resources/components/component-text-basetext.props.txt)
- [Component/Text/HelpText](resources/components/component-text-helptext.props.txt)
- [Component/Textarea](resources/components/component-textarea.props.txt): 많은 양의 텍스트를 작성할 때 사용합니다.
- [Component/TimeChipInput](resources/components/component-timechipinput.props.txt): 시/분을 가로 스크롤 칩으로 선택하는 인라인 입력 조각입니다. 입력칸·팝오버·확인 버튼 없이 칩만 렌더하며, TimePicker의 BottomSheet나 DatePicker의 인라인 시간 입력에서 공통으로 사용합니다.
- [Component/TimePicker](resources/components/component-timepicker.props.txt): 시간을 단일 또는 범위로 선택할 수 있습니다.
- [Component/TimeRangePicker](resources/components/component-timerangepicker.props.txt)
- [Component/Toast](resources/components/component-toast.props.txt): 동작에 대한 피드백 메시지를 일시적으로 보여주고 사라집니다.
- [Component/Tooltip/Disabled](resources/components/component-tooltip-disabled.props.txt): 슬롯 안의 요소는 반드시 비활성화해 주세요.
- [Component/Tooltip/Basic](resources/components/component-tooltip-basic.props.txt): 특정 요소에 마우스를 가져다 대었을 때 추가적인 도움말이나 정보를 표시하며 한두 줄 정도의 짧은 내용을 담습니다.
- [Component/Tree](resources/components/component-tree.props.txt): 계층 구조로 구성된 데이터를 트리 형태로 시각화해주는 컴포넌트입니다.
- [Component/Ul](resources/components/component-ul.props.txt)
- [Container/Footer](resources/components/container-footer.txt)
- [Container/PageHeader](resources/components/container-pageheader.props.txt): 페이지의 최상단 제목 영역에 사용합니다.
- [Container/Page](resources/components/container-page.txt)
- [Container/SectionTitle](resources/components/container-sectiontitle.props.txt): 제목 영역에 사용합니다.
- [Container/Section](resources/components/container-section.props.txt)
- [Container/State](resources/components/container-state.props.txt): 오류, 비어있음, 로딩 등의 상태를 표시할 때 사용합니다.
- [Container/TopNavigation](resources/components/container-topnavigation.props.txt)
- [Container/TopBar](resources/components/container-topbar.txt)
- [Icon/Example](resources/components/icon-example.props.txt): 모든 아이콘은 SVG 포맷을 사용하며 상황에 따라 컬러와 사이즈를 변경할 수 있습니다.
- [Icon/Icons](resources/components/icon-icons.txt): 모든 아이콘은 SVG 포맷을 사용하며 상황에 따라 컬러와 사이즈를 변경할 수 있습니다.
- [Image/Example](resources/components/image-example.props.txt)
- [Image/Images](resources/components/image-images.txt)
- [Lottie/Lotties](resources/components/lottie-lotties.txt)