# Icons URL: /docs/icons Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/icons.mdx @vapor-ui/icons 라이브러리에서 제공하는 아이콘입니다. 아이콘을 클릭해 import 문을 복사할 수 있습니다. *** title: Icons description: | @vapor-ui/icons 라이브러리에서 제공하는 아이콘입니다. 아이콘을 클릭해 import 문을 복사할 수 있습니다. ------------------------------ ## Basic Icons | Icon Name | Import Statement | | --------------------------- | ------------------------------------------------------------- | | `AchievementIcon` | `import { AchievementIcon } from '@vapor-ui/icons'` | | `AddUserIcon` | `import { AddUserIcon } from '@vapor-ui/icons'` | | `AiGoormeeIcon` | `import { AiGoormeeIcon } from '@vapor-ui/icons'` | | `AiSmartieIcon` | `import { AiSmartieIcon } from '@vapor-ui/icons'` | | `AirplayIcon` | `import { AirplayIcon } from '@vapor-ui/icons'` | | `AlgorithmIcon` | `import { AlgorithmIcon } from '@vapor-ui/icons'` | | `AppleIcon` | `import { AppleIcon } from '@vapor-ui/icons'` | | `ArrowDownCircleIcon` | `import { ArrowDownCircleIcon } from '@vapor-ui/icons'` | | `AssignmentIcon` | `import { AssignmentIcon } from '@vapor-ui/icons'` | | `AwsIcon` | `import { AwsIcon } from '@vapor-ui/icons'` | | `AzureIcon` | `import { AzureIcon } from '@vapor-ui/icons'` | | `BedIcon` | `import { BedIcon } from '@vapor-ui/icons'` | | `BellOffIcon` | `import { BellOffIcon } from '@vapor-ui/icons'` | | `BellOnIcon` | `import { BellOnIcon } from '@vapor-ui/icons'` | | `BitbucketIcon` | `import { BitbucketIcon } from '@vapor-ui/icons'` | | `BlogColorIcon` | `import { BlogColorIcon } from '@vapor-ui/icons'` | | `BlogIcon` | `import { BlogIcon } from '@vapor-ui/icons'` | | `BookIcon` | `import { BookIcon } from '@vapor-ui/icons'` | | `BookmarkIcon` | `import { BookmarkIcon } from '@vapor-ui/icons'` | | `BottomPlayerIcon` | `import { BottomPlayerIcon } from '@vapor-ui/icons'` | | `BranchIcon` | `import { BranchIcon } from '@vapor-ui/icons'` | | `BreakpointIcon` | `import { BreakpointIcon } from '@vapor-ui/icons'` | | `BuildIcon` | `import { BuildIcon } from '@vapor-ui/icons'` | | `CafeIcon` | `import { CafeIcon } from '@vapor-ui/icons'` | | `CakeIcon` | `import { CakeIcon } from '@vapor-ui/icons'` | | `CalculatorIcon` | `import { CalculatorIcon } from '@vapor-ui/icons'` | | `CalendarIcon` | `import { CalendarIcon } from '@vapor-ui/icons'` | | `CallIcon` | `import { CallIcon } from '@vapor-ui/icons'` | | `CameraIcon` | `import { CameraIcon } from '@vapor-ui/icons'` | | `CampIcon` | `import { CampIcon } from '@vapor-ui/icons'` | | `CaptionIcon` | `import { CaptionIcon } from '@vapor-ui/icons'` | | `CarIcon` | `import { CarIcon } from '@vapor-ui/icons'` | | `CardsIcon` | `import { CardsIcon } from '@vapor-ui/icons'` | | `CaretDownIcon` | `import { CaretDownIcon } from '@vapor-ui/icons'` | | `CaretLeftIcon` | `import { CaretLeftIcon } from '@vapor-ui/icons'` | | `CaretRightIcon` | `import { CaretRightIcon } from '@vapor-ui/icons'` | | `CaretUpIcon` | `import { CaretUpIcon } from '@vapor-ui/icons'` | | `CertificateIcon` | `import { CertificateIcon } from '@vapor-ui/icons'` | | `ChapterIcon` | `import { ChapterIcon } from '@vapor-ui/icons'` | | `ChartPieIcon` | `import { ChartPieIcon } from '@vapor-ui/icons'` | | `ChatgptIcon` | `import { ChatgptIcon } from '@vapor-ui/icons'` | | `CheckCircleIcon` | `import { CheckCircleIcon } from '@vapor-ui/icons'` | | `CheckboxIcon` | `import { CheckboxIcon } from '@vapor-ui/icons'` | | `ChromeColorIcon` | `import { ChromeColorIcon } from '@vapor-ui/icons'` | | `ChromeIcon` | `import { ChromeIcon } from '@vapor-ui/icons'` | | `ClassIcon` | `import { ClassIcon } from '@vapor-ui/icons'` | | `CodeBlockIcon` | `import { CodeBlockIcon } from '@vapor-ui/icons'` | | `CodevisorIcon` | `import { CodevisorIcon } from '@vapor-ui/icons'` | | `CollaborationIcon` | `import { CollaborationIcon } from '@vapor-ui/icons'` | | `ComponentIcon` | `import { ComponentIcon } from '@vapor-ui/icons'` | | `ContainerIcon` | `import { ContainerIcon } from '@vapor-ui/icons'` | | `ContainerRunIcon` | `import { ContainerRunIcon } from '@vapor-ui/icons'` | | `ContainerShareIcon` | `import { ContainerShareIcon } from '@vapor-ui/icons'` | | `ContainerStopIcon` | `import { ContainerStopIcon } from '@vapor-ui/icons'` | | `ContainerToImageIcon` | `import { ContainerToImageIcon } from '@vapor-ui/icons'` | | `ControlCommonIcon` | `import { ControlCommonIcon } from '@vapor-ui/icons'` | | `CopyIcon` | `import { CopyIcon } from '@vapor-ui/icons'` | | `CouponIcon` | `import { CouponIcon } from '@vapor-ui/icons'` | | `CourseHistoryIcon` | `import { CourseHistoryIcon } from '@vapor-ui/icons'` | | `CourseIcon` | `import { CourseIcon } from '@vapor-ui/icons'` | | `CpuIcon` | `import { CpuIcon } from '@vapor-ui/icons'` | | `CreditCardIcon` | `import { CreditCardIcon } from '@vapor-ui/icons'` | | `CursorshareoffIcon` | `import { CursorshareoffIcon } from '@vapor-ui/icons'` | | `CursorshareonIcon` | `import { CursorshareonIcon } from '@vapor-ui/icons'` | | `DarkIcon` | `import { DarkIcon } from '@vapor-ui/icons'` | | `DashboardIcon` | `import { DashboardIcon } from '@vapor-ui/icons'` | | `DatabaseIcon` | `import { DatabaseIcon } from '@vapor-ui/icons'` | | `DebugContinueIcon` | `import { DebugContinueIcon } from '@vapor-ui/icons'` | | `DebugIcon` | `import { DebugIcon } from '@vapor-ui/icons'` | | `DeployPushIcon` | `import { DeployPushIcon } from '@vapor-ui/icons'` | | `DetailViewIcon` | `import { DetailViewIcon } from '@vapor-ui/icons'` | | `DiscIcon` | `import { DiscIcon } from '@vapor-ui/icons'` | | `DiscordColorIcon` | `import { DiscordColorIcon } from '@vapor-ui/icons'` | | `DiscordIcon` | `import { DiscordIcon } from '@vapor-ui/icons'` | | `DiscussionIcon` | `import { DiscussionIcon } from '@vapor-ui/icons'` | | `DiskIcon` | `import { DiskIcon } from '@vapor-ui/icons'` | | `DislikeIcon` | `import { DislikeIcon } from '@vapor-ui/icons'` | | `DislikeThumbIcon` | `import { DislikeThumbIcon } from '@vapor-ui/icons'` | | `DividerIcon` | `import { DividerIcon } from '@vapor-ui/icons'` | | `DockerIcon` | `import { DockerIcon } from '@vapor-ui/icons'` | | `DocktoBottomIcon` | `import { DocktoBottomIcon } from '@vapor-ui/icons'` | | `DocumentViewerIcon` | `import { DocumentViewerIcon } from '@vapor-ui/icons'` | | `DotIcon` | `import { DotIcon } from '@vapor-ui/icons'` | | `DownloadIcon` | `import { DownloadIcon } from '@vapor-ui/icons'` | | `DragIndicatorIcon` | `import { DragIndicatorIcon } from '@vapor-ui/icons'` | | `EditIcon` | `import { EditIcon } from '@vapor-ui/icons'` | | `EraserIcon` | `import { EraserIcon } from '@vapor-ui/icons'` | | `ErrorCircleIcon` | `import { ErrorCircleIcon } from '@vapor-ui/icons'` | | `ExamIcon` | `import { ExamIcon } from '@vapor-ui/icons'` | | `ExamListIcon` | `import { ExamListIcon } from '@vapor-ui/icons'` | | `ExamReportIcon` | `import { ExamReportIcon } from '@vapor-ui/icons'` | | `ExploreIcon` | `import { ExploreIcon } from '@vapor-ui/icons'` | | `ExportIcon` | `import { ExportIcon } from '@vapor-ui/icons'` | | `ExportImageIcon` | `import { ExportImageIcon } from '@vapor-ui/icons'` | | `FacebookColorIcon` | `import { FacebookColorIcon } from '@vapor-ui/icons'` | | `FacebookIcon` | `import { FacebookIcon } from '@vapor-ui/icons'` | | `FigmaColorIcon` | `import { FigmaColorIcon } from '@vapor-ui/icons'` | | `FigmaIcon` | `import { FigmaIcon } from '@vapor-ui/icons'` | | `FileAddIcon` | `import { FileAddIcon } from '@vapor-ui/icons'` | | `FileDeleteIcon` | `import { FileDeleteIcon } from '@vapor-ui/icons'` | | `FileIcon` | `import { FileIcon } from '@vapor-ui/icons'` | | `FilenewIcon` | `import { FilenewIcon } from '@vapor-ui/icons'` | | `FilterIcon` | `import { FilterIcon } from '@vapor-ui/icons'` | | `FirefoxColorIcon` | `import { FirefoxColorIcon } from '@vapor-ui/icons'` | | `FlagIcon` | `import { FlagIcon } from '@vapor-ui/icons'` | | `FlaskIcon` | `import { FlaskIcon } from '@vapor-ui/icons'` | | `FlightIcon` | `import { FlightIcon } from '@vapor-ui/icons'` | | `FoldIcon` | `import { FoldIcon } from '@vapor-ui/icons'` | | `FolderIcon` | `import { FolderIcon } from '@vapor-ui/icons'` | | `FolderNewIcon` | `import { FolderNewIcon } from '@vapor-ui/icons'` | | `FolderSearchIcon` | `import { FolderSearchIcon } from '@vapor-ui/icons'` | | `ForkIcon` | `import { ForkIcon } from '@vapor-ui/icons'` | | `FunctionIcon` | `import { FunctionIcon } from '@vapor-ui/icons'` | | `GameIcon` | `import { GameIcon } from '@vapor-ui/icons'` | | `GcpIcon` | `import { GcpIcon } from '@vapor-ui/icons'` | | `GitIcon` | `import { GitIcon } from '@vapor-ui/icons'` | | `GithubColorIcon` | `import { GithubColorIcon } from '@vapor-ui/icons'` | | `GithubIcon` | `import { GithubIcon } from '@vapor-ui/icons'` | | `GitlabIcon` | `import { GitlabIcon } from '@vapor-ui/icons'` | | `GoogleCalendarIcon` | `import { GoogleCalendarIcon } from '@vapor-ui/icons'` | | `GoogleColorIcon` | `import { GoogleColorIcon } from '@vapor-ui/icons'` | | `GoogleDrawingIcon` | `import { GoogleDrawingIcon } from '@vapor-ui/icons'` | | `GoogleIcon` | `import { GoogleIcon } from '@vapor-ui/icons'` | | `GooglePresentationIcon` | `import { GooglePresentationIcon } from '@vapor-ui/icons'` | | `GoogleSpreadsheetIcon` | `import { GoogleSpreadsheetIcon } from '@vapor-ui/icons'` | | `GoormduinoIcon` | `import { GoormduinoIcon } from '@vapor-ui/icons'` | | `GpuIcon` | `import { GpuIcon } from '@vapor-ui/icons'` | | `GroupIcon` | `import { GroupIcon } from '@vapor-ui/icons'` | | `GuestIcon` | `import { GuestIcon } from '@vapor-ui/icons'` | | `HeartIcon` | `import { HeartIcon } from '@vapor-ui/icons'` | | `HelpCircleIcon` | `import { HelpCircleIcon } from '@vapor-ui/icons'` | | `HelpIcon` | `import { HelpIcon } from '@vapor-ui/icons'` | | `HighlightViewIcon` | `import { HighlightViewIcon } from '@vapor-ui/icons'` | | `HomeIcon` | `import { HomeIcon } from '@vapor-ui/icons'` | | `HourglassIcon` | `import { HourglassIcon } from '@vapor-ui/icons'` | | `IdCardIcon` | `import { IdCardIcon } from '@vapor-ui/icons'` | | `IdeShareIcon` | `import { IdeShareIcon } from '@vapor-ui/icons'` | | `ImageIcon` | `import { ImageIcon } from '@vapor-ui/icons'` | | `ImagePackIcon` | `import { ImagePackIcon } from '@vapor-ui/icons'` | | `ImageToContainerIcon` | `import { ImageToContainerIcon } from '@vapor-ui/icons'` | | `ImportIcon` | `import { ImportIcon } from '@vapor-ui/icons'` | | `InfoCircleIcon` | `import { InfoCircleIcon } from '@vapor-ui/icons'` | | `InstagramColorIcon` | `import { InstagramColorIcon } from '@vapor-ui/icons'` | | `InstagramIcon` | `import { InstagramIcon } from '@vapor-ui/icons'` | | `IntelliSenseClassIcon` | `import { IntelliSenseClassIcon } from '@vapor-ui/icons'` | | `IntelliSenseColorIcon` | `import { IntelliSenseColorIcon } from '@vapor-ui/icons'` | | `IntelliSenseConstantIcon` | `import { IntelliSenseConstantIcon } from '@vapor-ui/icons'` | | `IntelliSenseEnumIcon` | `import { IntelliSenseEnumIcon } from '@vapor-ui/icons'` | | `IntelliSenseEventIcon` | `import { IntelliSenseEventIcon } from '@vapor-ui/icons'` | | `IntelliSenseFunctionIcon` | `import { IntelliSenseFunctionIcon } from '@vapor-ui/icons'` | | `IntelliSenseInterfaceIcon` | `import { IntelliSenseInterfaceIcon } from '@vapor-ui/icons'` | | `IntelliSenseModuleIcon` | `import { IntelliSenseModuleIcon } from '@vapor-ui/icons'` | | `IntelliSenseNullIcon` | `import { IntelliSenseNullIcon } from '@vapor-ui/icons'` | | `IntelliSenseOperatorIcon` | `import { IntelliSenseOperatorIcon } from '@vapor-ui/icons'` | | `IntelliSensePropertyIcon` | `import { IntelliSensePropertyIcon } from '@vapor-ui/icons'` | | `IntelliSenseSnippetIcon` | `import { IntelliSenseSnippetIcon } from '@vapor-ui/icons'` | | `IntelliSenseStructureIcon` | `import { IntelliSenseStructureIcon } from '@vapor-ui/icons'` | | `IntelliSenseTextIcon` | `import { IntelliSenseTextIcon } from '@vapor-ui/icons'` | | `IntelliSenseUnitIcon` | `import { IntelliSenseUnitIcon } from '@vapor-ui/icons'` | | `IntelliSenseValueIcon` | `import { IntelliSenseValueIcon } from '@vapor-ui/icons'` | | `IntellijColorIcon` | `import { IntellijColorIcon } from '@vapor-ui/icons'` | | `ItalicIcon` | `import { ItalicIcon } from '@vapor-ui/icons'` | | `JiraIcon` | `import { JiraIcon } from '@vapor-ui/icons'` | | `JupyterColorIcon` | `import { JupyterColorIcon } from '@vapor-ui/icons'` | | `JupyterlabColorIcon` | `import { JupyterlabColorIcon } from '@vapor-ui/icons'` | | `JupyterlabIcon` | `import { JupyterlabIcon } from '@vapor-ui/icons'` | | `KakaoIcon` | `import { KakaoIcon } from '@vapor-ui/icons'` | | `KeyboardIcon` | `import { KeyboardIcon } from '@vapor-ui/icons'` | | `KeyboardTabIcon` | `import { KeyboardTabIcon } from '@vapor-ui/icons'` | | `KidIcon` | `import { KidIcon } from '@vapor-ui/icons'` | | `KrampolineIcon` | `import { KrampolineIcon } from '@vapor-ui/icons'` | | `KubernatesIcon` | `import { KubernatesIcon } from '@vapor-ui/icons'` | | `LightIcon` | `import { LightIcon } from '@vapor-ui/icons'` | | `LightbulbIcon` | `import { LightbulbIcon } from '@vapor-ui/icons'` | | `LightningIcon` | `import { LightningIcon } from '@vapor-ui/icons'` | | `LikeIcon` | `import { LikeIcon } from '@vapor-ui/icons'` | | `LikeThumbIcon` | `import { LikeThumbIcon } from '@vapor-ui/icons'` | | `LinkedinIcon` | `import { LinkedinIcon } from '@vapor-ui/icons'` | | `ListIcon` | `import { ListIcon } from '@vapor-ui/icons'` | | `ListNumberedIcon` | `import { ListNumberedIcon } from '@vapor-ui/icons'` | | `LiveLessonIcon` | `import { LiveLessonIcon } from '@vapor-ui/icons'` | | `LocationIcon` | `import { LocationIcon } from '@vapor-ui/icons'` | | `LockIcon` | `import { LockIcon } from '@vapor-ui/icons'` | | `MagicWandIcon` | `import { MagicWandIcon } from '@vapor-ui/icons'` | | `MailIcon` | `import { MailIcon } from '@vapor-ui/icons'` | | `MarkModeIcon` | `import { MarkModeIcon } from '@vapor-ui/icons'` | | `MarkdownIcon` | `import { MarkdownIcon } from '@vapor-ui/icons'` | | `MediumIcon` | `import { MediumIcon } from '@vapor-ui/icons'` | | `MemoIcon` | `import { MemoIcon } from '@vapor-ui/icons'` | | `MemoryIcon` | `import { MemoryIcon } from '@vapor-ui/icons'` | | `MessageIcon` | `import { MessageIcon } from '@vapor-ui/icons'` | | `MethodIcon` | `import { MethodIcon } from '@vapor-ui/icons'` | | `MicOffIcon` | `import { MicOffIcon } from '@vapor-ui/icons'` | | `MicOnIcon` | `import { MicOnIcon } from '@vapor-ui/icons'` | | `MinusBoxIcon` | `import { MinusBoxIcon } from '@vapor-ui/icons'` | | `MovieIcon` | `import { MovieIcon } from '@vapor-ui/icons'` | | `MysqlColorIcon` | `import { MysqlColorIcon } from '@vapor-ui/icons'` | | `MysqlIcon` | `import { MysqlIcon } from '@vapor-ui/icons'` | | `NaverIcon` | `import { NaverIcon } from '@vapor-ui/icons'` | | `NaverblogColorIcon` | `import { NaverblogColorIcon } from '@vapor-ui/icons'` | | `NaverblogIcon` | `import { NaverblogIcon } from '@vapor-ui/icons'` | | `NetworkIcon` | `import { NetworkIcon } from '@vapor-ui/icons'` | | `NextIcon` | `import { NextIcon } from '@vapor-ui/icons'` | | `NoImageIcon` | `import { NoImageIcon } from '@vapor-ui/icons'` | | `NoUserIcon` | `import { NoUserIcon } from '@vapor-ui/icons'` | | `NoticeBoardIcon` | `import { NoticeBoardIcon } from '@vapor-ui/icons'` | | `NoticeCircleIcon` | `import { NoticeCircleIcon } from '@vapor-ui/icons'` | | `NotionIcon` | `import { NotionIcon } from '@vapor-ui/icons'` | | `ObjectIcon` | `import { ObjectIcon } from '@vapor-ui/icons'` | | `OpenFileIcon` | `import { OpenFileIcon } from '@vapor-ui/icons'` | | `OpenFolderIcon` | `import { OpenFolderIcon } from '@vapor-ui/icons'` | | `OperaColorIcon` | `import { OperaColorIcon } from '@vapor-ui/icons'` | | `OrganizationIcon` | `import { OrganizationIcon } from '@vapor-ui/icons'` | | `PanelOpenIcon` | `import { PanelOpenIcon } from '@vapor-ui/icons'` | | `ParentsIcon` | `import { ParentsIcon } from '@vapor-ui/icons'` | | `PauseIcon` | `import { PauseIcon } from '@vapor-ui/icons'` | | `PaycoIcon` | `import { PaycoIcon } from '@vapor-ui/icons'` | | `PaypalColorIcon` | `import { PaypalColorIcon } from '@vapor-ui/icons'` | | `PcIcon` | `import { PcIcon } from '@vapor-ui/icons'` | | `PdfIcon` | `import { PdfIcon } from '@vapor-ui/icons'` | | `PhoneIcon` | `import { PhoneIcon } from '@vapor-ui/icons'` | | `PinSetIcon` | `import { PinSetIcon } from '@vapor-ui/icons'` | | `PipetteIcon` | `import { PipetteIcon } from '@vapor-ui/icons'` | | `PlansIcon` | `import { PlansIcon } from '@vapor-ui/icons'` | | `PlayIcon` | `import { PlayIcon } from '@vapor-ui/icons'` | | `PlugInIcon` | `import { PlugInIcon } from '@vapor-ui/icons'` | | `PlugOutIcon` | `import { PlugOutIcon } from '@vapor-ui/icons'` | | `PlusBoxIcon` | `import { PlusBoxIcon } from '@vapor-ui/icons'` | | `PortforwardingIcon` | `import { PortforwardingIcon } from '@vapor-ui/icons'` | | `PowerIcon` | `import { PowerIcon } from '@vapor-ui/icons'` | | `PreIcon` | `import { PreIcon } from '@vapor-ui/icons'` | | `PresentScreenIcon` | `import { PresentScreenIcon } from '@vapor-ui/icons'` | | `PreviewIcon` | `import { PreviewIcon } from '@vapor-ui/icons'` | | `PrintIcon` | `import { PrintIcon } from '@vapor-ui/icons'` | | `ProductHuntColorIcon` | `import { ProductHuntColorIcon } from '@vapor-ui/icons'` | | `ProgrammingIcon` | `import { ProgrammingIcon } from '@vapor-ui/icons'` | | `ProjectIcon` | `import { ProjectIcon } from '@vapor-ui/icons'` | | `ProjectOpenIcon` | `import { ProjectOpenIcon } from '@vapor-ui/icons'` | | `ProjectSettingIcon` | `import { ProjectSettingIcon } from '@vapor-ui/icons'` | | `PropertyIcon` | `import { PropertyIcon } from '@vapor-ui/icons'` | | `PsychologyIcon` | `import { PsychologyIcon } from '@vapor-ui/icons'` | | `PublishIcon` | `import { PublishIcon } from '@vapor-ui/icons'` | | `QnAIcon` | `import { QnAIcon } from '@vapor-ui/icons'` | | `QuoteIcon` | `import { QuoteIcon } from '@vapor-ui/icons'` | | `ReferenceIcon` | `import { ReferenceIcon } from '@vapor-ui/icons'` | | `RemoteIcon` | `import { RemoteIcon } from '@vapor-ui/icons'` | | `RemoteOffIcon` | `import { RemoteOffIcon } from '@vapor-ui/icons'` | | `ReplaceIcon` | `import { ReplaceIcon } from '@vapor-ui/icons'` | | `ResultManagementIcon` | `import { ResultManagementIcon } from '@vapor-ui/icons'` | | `RouteIcon` | `import { RouteIcon } from '@vapor-ui/icons'` | | `RstudioColorIcon` | `import { RstudioColorIcon } from '@vapor-ui/icons'` | | `RunIcon` | `import { RunIcon } from '@vapor-ui/icons'` | | `SaveAsIcon` | `import { SaveAsIcon } from '@vapor-ui/icons'` | | `SaveIcon` | `import { SaveIcon } from '@vapor-ui/icons'` | | `SavingIcon` | `import { SavingIcon } from '@vapor-ui/icons'` | | `SbomIcon` | `import { SbomIcon } from '@vapor-ui/icons'` | | `SchoolIcon` | `import { SchoolIcon } from '@vapor-ui/icons'` | | `SendIcon` | `import { SendIcon } from '@vapor-ui/icons'` | | `SentryIcon` | `import { SentryIcon } from '@vapor-ui/icons'` | | `SettingIcon` | `import { SettingIcon } from '@vapor-ui/icons'` | | `ShareIcon` | `import { ShareIcon } from '@vapor-ui/icons'` | | `ShoppingCartIcon` | `import { ShoppingCartIcon } from '@vapor-ui/icons'` | | `SideNavIcon` | `import { SideNavIcon } from '@vapor-ui/icons'` | | `SlackColorIcon` | `import { SlackColorIcon } from '@vapor-ui/icons'` | | `SlackIcon` | `import { SlackIcon } from '@vapor-ui/icons'` | | `SlotIcon` | `import { SlotIcon } from '@vapor-ui/icons'` | | `SoundOffIcon` | `import { SoundOffIcon } from '@vapor-ui/icons'` | | `SoundOnIcon` | `import { SoundOnIcon } from '@vapor-ui/icons'` | | `SourcecodeIcon` | `import { SourcecodeIcon } from '@vapor-ui/icons'` | | `SplitIcon` | `import { SplitIcon } from '@vapor-ui/icons'` | | `SshIcon` | `import { SshIcon } from '@vapor-ui/icons'` | | `StarIcon` | `import { StarIcon } from '@vapor-ui/icons'` | | `StopIcon` | `import { StopIcon } from '@vapor-ui/icons'` | | `StorageIcon` | `import { StorageIcon } from '@vapor-ui/icons'` | | `StorybookColorIcon` | `import { StorybookColorIcon } from '@vapor-ui/icons'` | | `StorybookIcon` | `import { StorybookIcon } from '@vapor-ui/icons'` | | `StripeColorIcon` | `import { StripeColorIcon } from '@vapor-ui/icons'` | | `StripeIcon` | `import { StripeIcon } from '@vapor-ui/icons'` | | `StruckIcon` | `import { StruckIcon } from '@vapor-ui/icons'` | | `StudentManagementIcon` | `import { StudentManagementIcon } from '@vapor-ui/icons'` | | `SyllabusIcon` | `import { SyllabusIcon } from '@vapor-ui/icons'` | | `TabletIcon` | `import { TabletIcon } from '@vapor-ui/icons'` | | `TaegukColorIcon` | `import { TaegukColorIcon } from '@vapor-ui/icons'` | | `TaegukIcon` | `import { TaegukIcon } from '@vapor-ui/icons'` | | `TakeoffIcon` | `import { TakeoffIcon } from '@vapor-ui/icons'` | | `TestIcon` | `import { TestIcon } from '@vapor-ui/icons'` | | `TimeIcon` | `import { TimeIcon } from '@vapor-ui/icons'` | | `TrashIcon` | `import { TrashIcon } from '@vapor-ui/icons'` | | `TreeCollapseIcon` | `import { TreeCollapseIcon } from '@vapor-ui/icons'` | | `TrelloIcon` | `import { TrelloIcon } from '@vapor-ui/icons'` | | `TwoFileIcon` | `import { TwoFileIcon } from '@vapor-ui/icons'` | | `UnlockIcon` | `import { UnlockIcon } from '@vapor-ui/icons'` | | `UploadIcon` | `import { UploadIcon } from '@vapor-ui/icons'` | | `UppercaseIcon` | `import { UppercaseIcon } from '@vapor-ui/icons'` | | `UserCheckIcon` | `import { UserCheckIcon } from '@vapor-ui/icons'` | | `UserIcon` | `import { UserIcon } from '@vapor-ui/icons'` | | `UserMoveIcon` | `import { UserMoveIcon } from '@vapor-ui/icons'` | | `UserSearchIcon` | `import { UserSearchIcon } from '@vapor-ui/icons'` | | `VariableIcon` | `import { VariableIcon } from '@vapor-ui/icons'` | | `VideocamOffIcon` | `import { VideocamOffIcon } from '@vapor-ui/icons'` | | `VideocamOnIcon` | `import { VideocamOnIcon } from '@vapor-ui/icons'` | | `ViewModuleIcon` | `import { ViewModuleIcon } from '@vapor-ui/icons'` | | `ViewOffIcon` | `import { ViewOffIcon } from '@vapor-ui/icons'` | | `ViewOnIcon` | `import { ViewOnIcon } from '@vapor-ui/icons'` | | `VscodeColorIcon` | `import { VscodeColorIcon } from '@vapor-ui/icons'` | | `VscodeIcon` | `import { VscodeIcon } from '@vapor-ui/icons'` | | `WarningIcon` | `import { WarningIcon } from '@vapor-ui/icons'` | | `WordMatchIcon` | `import { WordMatchIcon } from '@vapor-ui/icons'` | | `XIcon` | `import { XIcon } from '@vapor-ui/icons'` | | `YoutubeColorIcon` | `import { YoutubeColorIcon } from '@vapor-ui/icons'` | | `YoutubeIcon` | `import { YoutubeIcon } from '@vapor-ui/icons'` | ## Outline Icons | Icon Name | Import Statement | | -------------------------------------- | ------------------------------------------------------------------------ | | `AccessibilityOutlineIcon` | `import { AccessibilityOutlineIcon } from '@vapor-ui/icons'` | | `AchievementOutlineIcon` | `import { AchievementOutlineIcon } from '@vapor-ui/icons'` | | `AddCartOutlineIcon` | `import { AddCartOutlineIcon } from '@vapor-ui/icons'` | | `AddUserOutlineIcon` | `import { AddUserOutlineIcon } from '@vapor-ui/icons'` | | `AiGoormeeOutlineIcon` | `import { AiGoormeeOutlineIcon } from '@vapor-ui/icons'` | | `AiSmartieOutlineIcon` | `import { AiSmartieOutlineIcon } from '@vapor-ui/icons'` | | `AichatOutlineIcon` | `import { AichatOutlineIcon } from '@vapor-ui/icons'` | | `AirplayOutlineIcon` | `import { AirplayOutlineIcon } from '@vapor-ui/icons'` | | `AlgorithmOutlineIcon` | `import { AlgorithmOutlineIcon } from '@vapor-ui/icons'` | | `AlignCenterOutlineIcon` | `import { AlignCenterOutlineIcon } from '@vapor-ui/icons'` | | `AlignJustifyOutlineIcon` | `import { AlignJustifyOutlineIcon } from '@vapor-ui/icons'` | | `AlignLeftOutlineIcon` | `import { AlignLeftOutlineIcon } from '@vapor-ui/icons'` | | `AlignRightOutlineIcon` | `import { AlignRightOutlineIcon } from '@vapor-ui/icons'` | | `AnalysisOutlineIcon` | `import { AnalysisOutlineIcon } from '@vapor-ui/icons'` | | `ArrowDownOutlineIcon` | `import { ArrowDownOutlineIcon } from '@vapor-ui/icons'` | | `ArrowUpOutlineIcon` | `import { ArrowUpOutlineIcon } from '@vapor-ui/icons'` | | `AssignmentOutlineIcon` | `import { AssignmentOutlineIcon } from '@vapor-ui/icons'` | | `AttachFileOutlineIcon` | `import { AttachFileOutlineIcon } from '@vapor-ui/icons'` | | `AttemptOutlineIcon` | `import { AttemptOutlineIcon } from '@vapor-ui/icons'` | | `AutoCodeOutlineIcon` | `import { AutoCodeOutlineIcon } from '@vapor-ui/icons'` | | `BackPageOutlineIcon` | `import { BackPageOutlineIcon } from '@vapor-ui/icons'` | | `BackUpOutlineIcon` | `import { BackUpOutlineIcon } from '@vapor-ui/icons'` | | `BedOutlineIcon` | `import { BedOutlineIcon } from '@vapor-ui/icons'` | | `BellOffOutlineIcon` | `import { BellOffOutlineIcon } from '@vapor-ui/icons'` | | `BellOnOutlineIcon` | `import { BellOnOutlineIcon } from '@vapor-ui/icons'` | | `BlankOutlineIcon` | `import { BlankOutlineIcon } from '@vapor-ui/icons'` | | `BlockOutlineIcon` | `import { BlockOutlineIcon } from '@vapor-ui/icons'` | | `BoldOutlineIcon` | `import { BoldOutlineIcon } from '@vapor-ui/icons'` | | `BookOutlineIcon` | `import { BookOutlineIcon } from '@vapor-ui/icons'` | | `BookmarkOutlineIcon` | `import { BookmarkOutlineIcon } from '@vapor-ui/icons'` | | `BottomPlayerOutlineIcon` | `import { BottomPlayerOutlineIcon } from '@vapor-ui/icons'` | | `BranchOutlineIcon` | `import { BranchOutlineIcon } from '@vapor-ui/icons'` | | `BuildOutlineIcon` | `import { BuildOutlineIcon } from '@vapor-ui/icons'` | | `BulletlistOutlineIcon` | `import { BulletlistOutlineIcon } from '@vapor-ui/icons'` | | `CafeOutlineIcon` | `import { CafeOutlineIcon } from '@vapor-ui/icons'` | | `CakeOutlineIcon` | `import { CakeOutlineIcon } from '@vapor-ui/icons'` | | `CalculatorOutlineIcon` | `import { CalculatorOutlineIcon } from '@vapor-ui/icons'` | | `CalendarOutlineIcon` | `import { CalendarOutlineIcon } from '@vapor-ui/icons'` | | `CallOutlineIcon` | `import { CallOutlineIcon } from '@vapor-ui/icons'` | | `CameraOutlineIcon` | `import { CameraOutlineIcon } from '@vapor-ui/icons'` | | `CampOutlineIcon` | `import { CampOutlineIcon } from '@vapor-ui/icons'` | | `CaptionOutlineIcon` | `import { CaptionOutlineIcon } from '@vapor-ui/icons'` | | `CarOutlineIcon` | `import { CarOutlineIcon } from '@vapor-ui/icons'` | | `CardsOutlineIcon` | `import { CardsOutlineIcon } from '@vapor-ui/icons'` | | `CertificateOutlineIcon` | `import { CertificateOutlineIcon } from '@vapor-ui/icons'` | | `ChapterOutlineIcon` | `import { ChapterOutlineIcon } from '@vapor-ui/icons'` | | `ChartOutlineIcon` | `import { ChartOutlineIcon } from '@vapor-ui/icons'` | | `ChartPieOutlineIcon` | `import { ChartPieOutlineIcon } from '@vapor-ui/icons'` | | `CheckCartOutlineIcon` | `import { CheckCartOutlineIcon } from '@vapor-ui/icons'` | | `CheckCircleOutlineIcon` | `import { CheckCircleOutlineIcon } from '@vapor-ui/icons'` | | `ChevronDoubleLeftOutlineIcon` | `import { ChevronDoubleLeftOutlineIcon } from '@vapor-ui/icons'` | | `ChevronDoubleRightOutlineIcon` | `import { ChevronDoubleRightOutlineIcon } from '@vapor-ui/icons'` | | `ChevronDownOutlineIcon` | `import { ChevronDownOutlineIcon } from '@vapor-ui/icons'` | | `ChevronLeftOutlineIcon` | `import { ChevronLeftOutlineIcon } from '@vapor-ui/icons'` | | `ChevronRightOutlineIcon` | `import { ChevronRightOutlineIcon } from '@vapor-ui/icons'` | | `ChevronUpOutlineIcon` | `import { ChevronUpOutlineIcon } from '@vapor-ui/icons'` | | `CloseOutlineIcon` | `import { CloseOutlineIcon } from '@vapor-ui/icons'` | | `CodeBlockOutlineIcon` | `import { CodeBlockOutlineIcon } from '@vapor-ui/icons'` | | `CollaborationOutlineIcon` | `import { CollaborationOutlineIcon } from '@vapor-ui/icons'` | | `CollapseOutlineIcon` | `import { CollapseOutlineIcon } from '@vapor-ui/icons'` | | `CommitOutlineIcon` | `import { CommitOutlineIcon } from '@vapor-ui/icons'` | | `ConfirmOutlineIcon` | `import { ConfirmOutlineIcon } from '@vapor-ui/icons'` | | `ContainerOutlineIcon` | `import { ContainerOutlineIcon } from '@vapor-ui/icons'` | | `ContainerRunOutlineIcon` | `import { ContainerRunOutlineIcon } from '@vapor-ui/icons'` | | `ContainerShareOutlineIcon` | `import { ContainerShareOutlineIcon } from '@vapor-ui/icons'` | | `ContainerStopOutlineIcon` | `import { ContainerStopOutlineIcon } from '@vapor-ui/icons'` | | `ControlCommonOutlineIcon` | `import { ControlCommonOutlineIcon } from '@vapor-ui/icons'` | | `CopyAsMarkdownOutlineIcon` | `import { CopyAsMarkdownOutlineIcon } from '@vapor-ui/icons'` | | `CopyOutlineIcon` | `import { CopyOutlineIcon } from '@vapor-ui/icons'` | | `CorrectOutlineIcon` | `import { CorrectOutlineIcon } from '@vapor-ui/icons'` | | `CouponOutlineIcon` | `import { CouponOutlineIcon } from '@vapor-ui/icons'` | | `CourseOutlineIcon` | `import { CourseOutlineIcon } from '@vapor-ui/icons'` | | `CpuOutlineIcon` | `import { CpuOutlineIcon } from '@vapor-ui/icons'` | | `CreateBranchOutlineIcon` | `import { CreateBranchOutlineIcon } from '@vapor-ui/icons'` | | `CreditCardOutlineIcon` | `import { CreditCardOutlineIcon } from '@vapor-ui/icons'` | | `DarkOutlineIcon` | `import { DarkOutlineIcon } from '@vapor-ui/icons'` | | `DashboardOutlineIcon` | `import { DashboardOutlineIcon } from '@vapor-ui/icons'` | | `DatabaseOutlineIcon` | `import { DatabaseOutlineIcon } from '@vapor-ui/icons'` | | `DebugOutlineIcon` | `import { DebugOutlineIcon } from '@vapor-ui/icons'` | | `DeployOutlineIcon` | `import { DeployOutlineIcon } from '@vapor-ui/icons'` | | `DeployPushOutlineIcon` | `import { DeployPushOutlineIcon } from '@vapor-ui/icons'` | | `DetailViewOutlineIcon` | `import { DetailViewOutlineIcon } from '@vapor-ui/icons'` | | `DiscOutlineIcon` | `import { DiscOutlineIcon } from '@vapor-ui/icons'` | | `DiscardOutlineIcon` | `import { DiscardOutlineIcon } from '@vapor-ui/icons'` | | `DiscussionOutlineIcon` | `import { DiscussionOutlineIcon } from '@vapor-ui/icons'` | | `DislikeOutlineIcon` | `import { DislikeOutlineIcon } from '@vapor-ui/icons'` | | `DislikeThumbOutlineIcon` | `import { DislikeThumbOutlineIcon } from '@vapor-ui/icons'` | | `DividerOutlineIcon` | `import { DividerOutlineIcon } from '@vapor-ui/icons'` | | `DocktoBottomOutlineIcon` | `import { DocktoBottomOutlineIcon } from '@vapor-ui/icons'` | | `DocumentViewerOutlineIcon` | `import { DocumentViewerOutlineIcon } from '@vapor-ui/icons'` | | `DollarOutlineIcon` | `import { DollarOutlineIcon } from '@vapor-ui/icons'` | | `DownloadOutlineIcon` | `import { DownloadOutlineIcon } from '@vapor-ui/icons'` | | `EditOutlineIcon` | `import { EditOutlineIcon } from '@vapor-ui/icons'` | | `EnterOutlineIcon` | `import { EnterOutlineIcon } from '@vapor-ui/icons'` | | `EqualOutlineIcon` | `import { EqualOutlineIcon } from '@vapor-ui/icons'` | | `EraserOutlineIcon` | `import { EraserOutlineIcon } from '@vapor-ui/icons'` | | `ErrorCircleOutlineIcon` | `import { ErrorCircleOutlineIcon } from '@vapor-ui/icons'` | | `ExamListOutlineIcon` | `import { ExamListOutlineIcon } from '@vapor-ui/icons'` | | `ExamOutlineIcon` | `import { ExamOutlineIcon } from '@vapor-ui/icons'` | | `ExamReportOutlineIcon` | `import { ExamReportOutlineIcon } from '@vapor-ui/icons'` | | `ExpandOutlineIcon` | `import { ExpandOutlineIcon } from '@vapor-ui/icons'` | | `ExploreOutlineIcon` | `import { ExploreOutlineIcon } from '@vapor-ui/icons'` | | `ExportOutlineIcon` | `import { ExportOutlineIcon } from '@vapor-ui/icons'` | | `FileAddOutlineIcon` | `import { FileAddOutlineIcon } from '@vapor-ui/icons'` | | `FileDeleteOutlineIcon` | `import { FileDeleteOutlineIcon } from '@vapor-ui/icons'` | | `FileEditOutlineIcon` | `import { FileEditOutlineIcon } from '@vapor-ui/icons'` | | `FileNewOutlineIcon` | `import { FileNewOutlineIcon } from '@vapor-ui/icons'` | | `FileOutlineIcon` | `import { FileOutlineIcon } from '@vapor-ui/icons'` | | `FilterOutlineIcon` | `import { FilterOutlineIcon } from '@vapor-ui/icons'` | | `FlagOutlineIcon` | `import { FlagOutlineIcon } from '@vapor-ui/icons'` | | `FoldOutlineIcon` | `import { FoldOutlineIcon } from '@vapor-ui/icons'` | | `FolderNewOutlineIcon` | `import { FolderNewOutlineIcon } from '@vapor-ui/icons'` | | `FolderOutlineIcon` | `import { FolderOutlineIcon } from '@vapor-ui/icons'` | | `FolderSearchOutlineIcon` | `import { FolderSearchOutlineIcon } from '@vapor-ui/icons'` | | `ForkOutlineIcon` | `import { ForkOutlineIcon } from '@vapor-ui/icons'` | | `FormatColorTextOutlineIcon` | `import { FormatColorTextOutlineIcon } from '@vapor-ui/icons'` | | `ForwardPageOutlineIcon` | `import { ForwardPageOutlineIcon } from '@vapor-ui/icons'` | | `FunctionOutlineIcon` | `import { FunctionOutlineIcon } from '@vapor-ui/icons'` | | `FunctionsOutlineIcon` | `import { FunctionsOutlineIcon } from '@vapor-ui/icons'` | | `GameOutlineIcon` | `import { GameOutlineIcon } from '@vapor-ui/icons'` | | `GiftOutlineIcon` | `import { GiftOutlineIcon } from '@vapor-ui/icons'` | | `GitMergeOutlineIcon` | `import { GitMergeOutlineIcon } from '@vapor-ui/icons'` | | `GlobalOutlineIcon` | `import { GlobalOutlineIcon } from '@vapor-ui/icons'` | | `GoogleDrawingOutlineIcon` | `import { GoogleDrawingOutlineIcon } from '@vapor-ui/icons'` | | `GooglePresentationOutlineIcon` | `import { GooglePresentationOutlineIcon } from '@vapor-ui/icons'` | | `GoogleSpreadsheetOutlineIcon` | `import { GoogleSpreadsheetOutlineIcon } from '@vapor-ui/icons'` | | `GroupOutlineIcon` | `import { GroupOutlineIcon } from '@vapor-ui/icons'` | | `HardBreakOutlineIcon` | `import { HardBreakOutlineIcon } from '@vapor-ui/icons'` | | `HeadingOutlineIcon` | `import { HeadingOutlineIcon } from '@vapor-ui/icons'` | | `HeartOutlineIcon` | `import { HeartOutlineIcon } from '@vapor-ui/icons'` | | `HelpCircleOutlineIcon` | `import { HelpCircleOutlineIcon } from '@vapor-ui/icons'` | | `HighlightViewOutlineIcon` | `import { HighlightViewOutlineIcon } from '@vapor-ui/icons'` | | `HistoryOutlineIcon` | `import { HistoryOutlineIcon } from '@vapor-ui/icons'` | | `HomeOutlineIcon` | `import { HomeOutlineIcon } from '@vapor-ui/icons'` | | `IdCardOutlineIcon` | `import { IdCardOutlineIcon } from '@vapor-ui/icons'` | | `ImageOutlineIcon` | `import { ImageOutlineIcon } from '@vapor-ui/icons'` | | `ImagePackOutlineIcon` | `import { ImagePackOutlineIcon } from '@vapor-ui/icons'` | | `ImageToContainerOutlineIcon` | `import { ImageToContainerOutlineIcon } from '@vapor-ui/icons'` | | `ImportOutlineIcon` | `import { ImportOutlineIcon } from '@vapor-ui/icons'` | | `InOutlineIcon` | `import { InOutlineIcon } from '@vapor-ui/icons'` | | `IndentDecreaseOutlineIcon` | `import { IndentDecreaseOutlineIcon } from '@vapor-ui/icons'` | | `IndentIncreaseOutlineIcon` | `import { IndentIncreaseOutlineIcon } from '@vapor-ui/icons'` | | `InfiniteOutlineIcon` | `import { InfiniteOutlineIcon } from '@vapor-ui/icons'` | | `InfoCircleOutlineIcon` | `import { InfoCircleOutlineIcon } from '@vapor-ui/icons'` | | `InputSettingOutlineIcon` | `import { InputSettingOutlineIcon } from '@vapor-ui/icons'` | | `IntelliSenseEnumOutlineIcon` | `import { IntelliSenseEnumOutlineIcon } from '@vapor-ui/icons'` | | `IntelliSenseEventOutlineIcon` | `import { IntelliSenseEventOutlineIcon } from '@vapor-ui/icons'` | | `IntelliSenseFieldOutlineIcon` | `import { IntelliSenseFieldOutlineIcon } from '@vapor-ui/icons'` | | `IntelliSenseModuleOutlineIcon` | `import { IntelliSenseModuleOutlineIcon } from '@vapor-ui/icons'` | | `IntelliSensePropertyOutlineIcon` | `import { IntelliSensePropertyOutlineIcon } from '@vapor-ui/icons'` | | `IntelliSenseReferenceOutlineIcon` | `import { IntelliSenseReferenceOutlineIcon } from '@vapor-ui/icons'` | | `IntelliSenseSnippetOutlineIcon` | `import { IntelliSenseSnippetOutlineIcon } from '@vapor-ui/icons'` | | `IntelliSenseTypeParameterOutlineIcon` | `import { IntelliSenseTypeParameterOutlineIcon } from '@vapor-ui/icons'` | | `IntelliSenseUnitOutlineIcon` | `import { IntelliSenseUnitOutlineIcon } from '@vapor-ui/icons'` | | `IntelliSenseVariableOutlineIcon` | `import { IntelliSenseVariableOutlineIcon } from '@vapor-ui/icons'` | | `KeyboardOutlineIcon` | `import { KeyboardOutlineIcon } from '@vapor-ui/icons'` | | `KidOutlineIcon` | `import { KidOutlineIcon } from '@vapor-ui/icons'` | | `LightOutlineIcon` | `import { LightOutlineIcon } from '@vapor-ui/icons'` | | `LightbulbOutlineIcon` | `import { LightbulbOutlineIcon } from '@vapor-ui/icons'` | | `LightningOutlineIcon` | `import { LightningOutlineIcon } from '@vapor-ui/icons'` | | `LikeOutlineIcon` | `import { LikeOutlineIcon } from '@vapor-ui/icons'` | | `LikeThumbOutlineIcon` | `import { LikeThumbOutlineIcon } from '@vapor-ui/icons'` | | `LineSpacingOutlineIcon` | `import { LineSpacingOutlineIcon } from '@vapor-ui/icons'` | | `LineStyleOutlineIcon` | `import { LineStyleOutlineIcon } from '@vapor-ui/icons'` | | `LinearScaleOutlineIcon` | `import { LinearScaleOutlineIcon } from '@vapor-ui/icons'` | | `LinkOffOutlineIcon` | `import { LinkOffOutlineIcon } from '@vapor-ui/icons'` | | `LinkOutlineIcon` | `import { LinkOutlineIcon } from '@vapor-ui/icons'` | | `LiveLessonOutlineIcon` | `import { LiveLessonOutlineIcon } from '@vapor-ui/icons'` | | `LocationOutlineIcon` | `import { LocationOutlineIcon } from '@vapor-ui/icons'` | | `LockOutlineIcon` | `import { LockOutlineIcon } from '@vapor-ui/icons'` | | `LongTextOutlineIcon` | `import { LongTextOutlineIcon } from '@vapor-ui/icons'` | | `MagicWandOutlineIcon` | `import { MagicWandOutlineIcon } from '@vapor-ui/icons'` | | `MailOutlineIcon` | `import { MailOutlineIcon } from '@vapor-ui/icons'` | | `ManagementOutlineIcon` | `import { ManagementOutlineIcon } from '@vapor-ui/icons'` | | `MarkModeOutlineIcon` | `import { MarkModeOutlineIcon } from '@vapor-ui/icons'` | | `MarkdownOutlineIcon` | `import { MarkdownOutlineIcon } from '@vapor-ui/icons'` | | `MemoOutlineIcon` | `import { MemoOutlineIcon } from '@vapor-ui/icons'` | | `MenuOutlineIcon` | `import { MenuOutlineIcon } from '@vapor-ui/icons'` | | `MergeUpOutlineIcon` | `import { MergeUpOutlineIcon } from '@vapor-ui/icons'` | | `MessageOutlineIcon` | `import { MessageOutlineIcon } from '@vapor-ui/icons'` | | `MethodOutlineIcon` | `import { MethodOutlineIcon } from '@vapor-ui/icons'` | | `MicOffOutlineIcon` | `import { MicOffOutlineIcon } from '@vapor-ui/icons'` | | `MicOnOutlineIcon` | `import { MicOnOutlineIcon } from '@vapor-ui/icons'` | | `MinusBoxOutlineIcon` | `import { MinusBoxOutlineIcon } from '@vapor-ui/icons'` | | `MinusOutlineIcon` | `import { MinusOutlineIcon } from '@vapor-ui/icons'` | | `MoreCommonOutlineIcon` | `import { MoreCommonOutlineIcon } from '@vapor-ui/icons'` | | `MovieOutlineIcon` | `import { MovieOutlineIcon } from '@vapor-ui/icons'` | | `NetfficeOutlineIcon` | `import { NetfficeOutlineIcon } from '@vapor-ui/icons'` | | `NetworkOutlineIcon` | `import { NetworkOutlineIcon } from '@vapor-ui/icons'` | | `NextOutlineIcon` | `import { NextOutlineIcon } from '@vapor-ui/icons'` | | `NoImageOutlineIcon` | `import { NoImageOutlineIcon } from '@vapor-ui/icons'` | | `NoUserOutlineIcon` | `import { NoUserOutlineIcon } from '@vapor-ui/icons'` | | `NoticeBoardOutlineIcon` | `import { NoticeBoardOutlineIcon } from '@vapor-ui/icons'` | | `NoticeCircleOutlineIcon` | `import { NoticeCircleOutlineIcon } from '@vapor-ui/icons'` | | `NumberlistOutlineIcon` | `import { NumberlistOutlineIcon } from '@vapor-ui/icons'` | | `OpenFileOutlineIcon` | `import { OpenFileOutlineIcon } from '@vapor-ui/icons'` | | `OpenFolderOutlineIcon` | `import { OpenFolderOutlineIcon } from '@vapor-ui/icons'` | | `OpenInNewOutlineIcon` | `import { OpenInNewOutlineIcon } from '@vapor-ui/icons'` | | `OutOutlineIcon` | `import { OutOutlineIcon } from '@vapor-ui/icons'` | | `PandasOutlineIcon` | `import { PandasOutlineIcon } from '@vapor-ui/icons'` | | `PanelOpenOutlineIcon` | `import { PanelOpenOutlineIcon } from '@vapor-ui/icons'` | | `PauseOutlineIcon` | `import { PauseOutlineIcon } from '@vapor-ui/icons'` | | `PcOutlineIcon` | `import { PcOutlineIcon } from '@vapor-ui/icons'` | | `PdfOutlineIcon` | `import { PdfOutlineIcon } from '@vapor-ui/icons'` | | `PhoneOutlineIcon` | `import { PhoneOutlineIcon } from '@vapor-ui/icons'` | | `PinSetOutlineIcon` | `import { PinSetOutlineIcon } from '@vapor-ui/icons'` | | `PlansOutlineIcon` | `import { PlansOutlineIcon } from '@vapor-ui/icons'` | | `PlayOutlineIcon` | `import { PlayOutlineIcon } from '@vapor-ui/icons'` | | `PlaylistOutlineIcon` | `import { PlaylistOutlineIcon } from '@vapor-ui/icons'` | | `PlusBoxOutlineIcon` | `import { PlusBoxOutlineIcon } from '@vapor-ui/icons'` | | `PlusOutlineIcon` | `import { PlusOutlineIcon } from '@vapor-ui/icons'` | | `PortforwardingOutlineIcon` | `import { PortforwardingOutlineIcon } from '@vapor-ui/icons'` | | `PreOutlineIcon` | `import { PreOutlineIcon } from '@vapor-ui/icons'` | | `PresentScreenOutlineIcon` | `import { PresentScreenOutlineIcon } from '@vapor-ui/icons'` | | `PresetOutlineIcon` | `import { PresetOutlineIcon } from '@vapor-ui/icons'` | | `PreviewOutlineIcon` | `import { PreviewOutlineIcon } from '@vapor-ui/icons'` | | `PriceOutlineIcon` | `import { PriceOutlineIcon } from '@vapor-ui/icons'` | | `PrintOutlineIcon` | `import { PrintOutlineIcon } from '@vapor-ui/icons'` | | `ProgrammingOutlineIcon` | `import { ProgrammingOutlineIcon } from '@vapor-ui/icons'` | | `ProjectOutlineIcon` | `import { ProjectOutlineIcon } from '@vapor-ui/icons'` | | `ProjectSettingOutlineIcon` | `import { ProjectSettingOutlineIcon } from '@vapor-ui/icons'` | | `PsychologyOutlineIcon` | `import { PsychologyOutlineIcon } from '@vapor-ui/icons'` | | `PublishOutlineIcon` | `import { PublishOutlineIcon } from '@vapor-ui/icons'` | | `PullOutlineIcon` | `import { PullOutlineIcon } from '@vapor-ui/icons'` | | `QnAOutlineIcon` | `import { QnAOutlineIcon } from '@vapor-ui/icons'` | | `QrcodeOutlineIcon` | `import { QrcodeOutlineIcon } from '@vapor-ui/icons'` | | `QuoteOutlineIcon` | `import { QuoteOutlineIcon } from '@vapor-ui/icons'` | | `ReferenceOutlineIcon` | `import { ReferenceOutlineIcon } from '@vapor-ui/icons'` | | `RefreshOutlineIcon` | `import { RefreshOutlineIcon } from '@vapor-ui/icons'` | | `RegexOutlineIcon` | `import { RegexOutlineIcon } from '@vapor-ui/icons'` | | `ReloadOutlineIcon` | `import { ReloadOutlineIcon } from '@vapor-ui/icons'` | | `RemoteOffOutlineIcon` | `import { RemoteOffOutlineIcon } from '@vapor-ui/icons'` | | `RemoteOutlineIcon` | `import { RemoteOutlineIcon } from '@vapor-ui/icons'` | | `ReplyOutlineIcon` | `import { ReplyOutlineIcon } from '@vapor-ui/icons'` | | `RestaurantOutlineIcon` | `import { RestaurantOutlineIcon } from '@vapor-ui/icons'` | | `ResultManagementOutlineIcon` | `import { ResultManagementOutlineIcon } from '@vapor-ui/icons'` | | `RouteOutlineIcon` | `import { RouteOutlineIcon } from '@vapor-ui/icons'` | | `RunOutlineIcon` | `import { RunOutlineIcon } from '@vapor-ui/icons'` | | `SaveAsOutlineIcon` | `import { SaveAsOutlineIcon } from '@vapor-ui/icons'` | | `SaveOutlineIcon` | `import { SaveOutlineIcon } from '@vapor-ui/icons'` | | `SavingOutlineIcon` | `import { SavingOutlineIcon } from '@vapor-ui/icons'` | | `SchoolOutlineIcon` | `import { SchoolOutlineIcon } from '@vapor-ui/icons'` | | `SearchOutlineIcon` | `import { SearchOutlineIcon } from '@vapor-ui/icons'` | | `SendOutlineIcon` | `import { SendOutlineIcon } from '@vapor-ui/icons'` | | `SettingOutlineIcon` | `import { SettingOutlineIcon } from '@vapor-ui/icons'` | | `ShareOutlineIcon` | `import { ShareOutlineIcon } from '@vapor-ui/icons'` | | `ShoppingCartOutlineIcon` | `import { ShoppingCartOutlineIcon } from '@vapor-ui/icons'` | | `ShortTextOutlineIcon` | `import { ShortTextOutlineIcon } from '@vapor-ui/icons'` | | `ShortcutOutlineIcon` | `import { ShortcutOutlineIcon } from '@vapor-ui/icons'` | | `SideNavOutlineIcon` | `import { SideNavOutlineIcon } from '@vapor-ui/icons'` | | `SignalPowerOutlineIcon` | `import { SignalPowerOutlineIcon } from '@vapor-ui/icons'` | | `SlashOutlineIcon` | `import { SlashOutlineIcon } from '@vapor-ui/icons'` | | `SoundOffOutlineIcon` | `import { SoundOffOutlineIcon } from '@vapor-ui/icons'` | | `SoundOnOutlineIcon` | `import { SoundOnOutlineIcon } from '@vapor-ui/icons'` | | `SpinnerOutlineIcon` | `import { SpinnerOutlineIcon } from '@vapor-ui/icons'` | | `SplitHorizontalOutlineIcon` | `import { SplitHorizontalOutlineIcon } from '@vapor-ui/icons'` | | `SplitVerticalOutlineIcon` | `import { SplitVerticalOutlineIcon } from '@vapor-ui/icons'` | | `StarOutlineIcon` | `import { StarOutlineIcon } from '@vapor-ui/icons'` | | `StepInOutlineIcon` | `import { StepInOutlineIcon } from '@vapor-ui/icons'` | | `StepOutOutlineIcon` | `import { StepOutOutlineIcon } from '@vapor-ui/icons'` | | `StepOverOutlineIcon` | `import { StepOverOutlineIcon } from '@vapor-ui/icons'` | | `StopOutlineIcon` | `import { StopOutlineIcon } from '@vapor-ui/icons'` | | `StruckOutlineIcon` | `import { StruckOutlineIcon } from '@vapor-ui/icons'` | | `StudentManagementOutlineIcon` | `import { StudentManagementOutlineIcon } from '@vapor-ui/icons'` | | `SyllabusOutlineIcon` | `import { SyllabusOutlineIcon } from '@vapor-ui/icons'` | | `TableFilterOutlineIcon` | `import { TableFilterOutlineIcon } from '@vapor-ui/icons'` | | `TableOutlineIcon` | `import { TableOutlineIcon } from '@vapor-ui/icons'` | | `TabletOutlineIcon` | `import { TabletOutlineIcon } from '@vapor-ui/icons'` | | `TerminalConnectOutlineIcon` | `import { TerminalConnectOutlineIcon } from '@vapor-ui/icons'` | | `TerminalOutlineIcon` | `import { TerminalOutlineIcon } from '@vapor-ui/icons'` | | `TerminalWindowOutlineIcon` | `import { TerminalWindowOutlineIcon } from '@vapor-ui/icons'` | | `TestOutlineIcon` | `import { TestOutlineIcon } from '@vapor-ui/icons'` | | `TextColorOutlineIcon` | `import { TextColorOutlineIcon } from '@vapor-ui/icons'` | | `TextOutlineIcon` | `import { TextOutlineIcon } from '@vapor-ui/icons'` | | `TextScanOutlineIcon` | `import { TextScanOutlineIcon } from '@vapor-ui/icons'` | | `TimeOutlineIcon` | `import { TimeOutlineIcon } from '@vapor-ui/icons'` | | `TransferOutlineIcon` | `import { TransferOutlineIcon } from '@vapor-ui/icons'` | | `TranslateOutlineIcon` | `import { TranslateOutlineIcon } from '@vapor-ui/icons'` | | `TrashOutlineIcon` | `import { TrashOutlineIcon } from '@vapor-ui/icons'` | | `UnderlineOutlineIcon` | `import { UnderlineOutlineIcon } from '@vapor-ui/icons'` | | `UndoOutlineIcon` | `import { UndoOutlineIcon } from '@vapor-ui/icons'` | | `UnlockOutlineIcon` | `import { UnlockOutlineIcon } from '@vapor-ui/icons'` | | `UploadOutlineIcon` | `import { UploadOutlineIcon } from '@vapor-ui/icons'` | | `UserCheckOutlineIcon` | `import { UserCheckOutlineIcon } from '@vapor-ui/icons'` | | `UserMoveOutlineIcon` | `import { UserMoveOutlineIcon } from '@vapor-ui/icons'` | | `UserOutlineIcon` | `import { UserOutlineIcon } from '@vapor-ui/icons'` | | `UserSearchOutlineIcon` | `import { UserSearchOutlineIcon } from '@vapor-ui/icons'` | | `VideocamOffOutlineIcon` | `import { VideocamOffOutlineIcon } from '@vapor-ui/icons'` | | `VideocamOnOutlineIcon` | `import { VideocamOnOutlineIcon } from '@vapor-ui/icons'` | | `ViewExpandOutlineIcon` | `import { ViewExpandOutlineIcon } from '@vapor-ui/icons'` | | `ViewModuleOutlineIcon` | `import { ViewModuleOutlineIcon } from '@vapor-ui/icons'` | | `ViewOffOutlineIcon` | `import { ViewOffOutlineIcon } from '@vapor-ui/icons'` | | `ViewOnOutlineIcon` | `import { ViewOnOutlineIcon } from '@vapor-ui/icons'` | | `ViewShrinkOutlineIcon` | `import { ViewShrinkOutlineIcon } from '@vapor-ui/icons'` | | `WarningOutlineIcon` | `import { WarningOutlineIcon } from '@vapor-ui/icons'` | | `WordSearchOutlineIcon` | `import { WordSearchOutlineIcon } from '@vapor-ui/icons'` | | `ZoomInOutlineIcon` | `import { ZoomInOutlineIcon } from '@vapor-ui/icons'` | | `ZoomOutOutlineIcon` | `import { ZoomOutOutlineIcon } from '@vapor-ui/icons'` | # Welcome, Vapor UI URL: /docs Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/index.mdx Vapor는 구름의 세 번째 디자인 시스템으로, 다양한 서브 패키지들로 구성되어 있습니다. 각 서브 패키지는 다음과 같은 역할을 수행합니다. *** title: Welcome, Vapor UI description: Vapor는 구름의 세 번째 디자인 시스템으로, 다양한 서브 패키지들로 구성되어 있습니다. 각 서브 패키지는 다음과 같은 역할을 수행합니다. ------------------------------------------------------------------------------------------- # Avatar URL: /docs/components/avatar Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/avatar.mdx Avatar는 사용자가 설정한 프로필 이미지 혹은 텍스트를 UI상에 나타냅니다. *** title: 'Avatar' site\_name: 'Avatar - Vapor Core' description: 'Avatar는 사용자가 설정한 프로필 이미지 혹은 텍스트를 UI상에 나타냅니다.' ----------------------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/default-avatar.tsx", "codeblock": true } ``` ## Property *** ### Size Avatar 사이즈는 sm, md, lg, xl 로 제공합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/avatar-size.tsx", "codeblock": true } ``` ### Shape Avatar 모양은 circle, square 로 제공합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/avatar-shape.tsx", "codeblock": true } ``` ## Examples *** ### Simple Usage Avatar.Simple을 사용한 가장 간단한 형태입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/avatar-simple.tsx", "codeblock": true } ``` ### Composition Pattern Avatar.Root, Avatar.Image, Avatar.Fallback을 조합한 패턴입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/avatar-composition.tsx", "codeblock": true } ``` ### Fallback Only 이미지 로드 실패 시 표시되는 Fallback 텍스트나 이니셜을 사용하는 패턴입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/avatar-fallback-only.tsx", "codeblock": true } ``` ### Size & Shape Variants 다양한 크기와 모양을 조합한 예시입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/avatar-variants.tsx", "codeblock": true } ``` ## Props Table *** ### Avatar.Root Avatar의 메인 컨테이너 컴포넌트입니다. size와 shape 속성을 제공하며, 모든 하위 컴포넌트에서 공통으로 사용할 수 있도록 컨텍스트를 제공합니다. | prop | type | default | description | | ----------- | ----------------------- | -------- | ------------------------------------------------------------------ | | `render` | `ReactElement,function` | `span` | 아바타를 렌더링할 때 사용할 커스텀 렌더링 요소입니다. | | `size` | `sm,md,lg,xl` | `md` | 아바타 컴포넌트의 크기를 조절합니다. | | `shape` | `circle,square` | `square` | 아바타 컴포넌트의 모양을 조절합니다. | | `alt` | `string` | `-` | 웹 접근성을 위한 아바타 이미지의 대체 텍스트입니다. | | `src` | `string` | `-` | 아바타 이미지의 소스 URL입니다. | | `delay` | `number` | `null` | 폴백을 표시하기 전의 지연 시간(밀리초)입니다. | | `children` | `ReactNode` | `null` | 자식 컴포넌트(Avatar.Image, Avatar.Fallback)입니다. | | `className` | `string,function` | `null` | 아바타의 최상위 요소에 적용할 CSS 클래스명입니다. 함수 형태로 전달하면 상태에 따른 동적 클래스 적용이 가능합니다. | ### Avatar.Image Avatar 이미지를 표시하는 컴포넌트입니다. src가 로드되지 않거나 오류가 발생할 경우 자동으로 Fallback 컴포넌트가 표시됩니다. | prop | type | default | description | | ----------------------- | ----------------------- | ------- | --------------------------------------------------------------------------------------- | | `render` | `ReactElement,function` | `img` | 이미지를 렌더링할 때 사용할 커스텀 렌더링 요소입니다. | | `src` | `string` | `-` | 표시할 이미지의 소스 URL입니다. Root에서 상속받습니다. | | `alt` | `string` | `-` | 이미지의 대체 텍스트입니다. Root에서 상속받습니다. | | `onLoadingStatusChange` | `function` | `-` | 이미지 로딩 상태 변경 시 호출되는 콜백 함수입니다. (status: 'loading' \| 'loaded' \| 'error') => void 형태입니다. | | `className` | `string,function` | `-` | 이미지에 적용할 CSS 클래스입니다. 함수 형태로 전달하면 상태에 따른 동적 클래스 적용이 가능합니다. | ### Avatar.Fallback 이미지가 로드되지 않을 때 표시되는 대체 컴포넌트입니다. alt 속성을 기반으로 자동으로 이니셜을 생성하고, Linear Congruential Generator 알고리즘을 사용해 일관된 배경 색상을 제공합니다. | prop | type | default | description | | ----------- | ----------------------- | ------- | -------------------------------------------------------- | | `render` | `ReactElement,function` | `span` | 폴백 콘텐츠를 렌더링할 때 사용할 커스텀 렌더링 요소입니다. | | `delay` | `number` | `-` | 폴백을 표시하기 전의 지연 시간(밀리초)입니다. 느린 연결에서만 표시되도록 지연시키는데 유용합니다. | | `children` | `ReactNode` | `-` | 이미지 로딩 실패 시 표시할 콘텐츠입니다. 기본적으로 alt에서 이니셜을 자동 생성합니다. | | `className` | `string,function` | `-` | 폴백에 적용할 CSS 클래스입니다. 함수 형태로 전달하면 상태에 따른 동적 클래스 적용이 가능합니다. | ### Avatar.Simple Avatar.Root, Avatar.Image, Avatar.Fallback을 하나로 결합한 단순화된 컴포넌트입니다. 복잡한 구성 없이 기본 Avatar 기능을 빠르게 사용할 수 있습니다. | prop | type | default | description | | ----------- | --------------- | -------- | -------------------------- | | `size` | `sm,md,lg,xl` | `md` | 아바타 컴포넌트의 크기를 조절합니다. | | `shape` | `circle,square` | `square` | 아바타 컴포넌트의 모양을 조절합니다. | | `src` | `string` | `-` | 아바타 이미지의 소스 URL입니다. | | `alt` | `string` | `-` | 아바타 이미지의 대체 텍스트입니다. | | `delay` | `number` | `-` | 폴백을 표시하기 전의 지연 시간(밀리초)입니다. | | `className` | `string` | `-` | 적용할 추가 CSS 클래스입니다. | # Badge URL: /docs/components/badge Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/badge.mdx Badge는 이미지, 컨텐츠 등의 상태 또는 분류를 시각적으로 표시합니다. *** title: 'Badge' site\_name: 'Badge - Vapor Core' description: 'Badge는 이미지, 컨텐츠 등의 상태 또는 분류를 시각적으로 표시합니다.' -------------------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/default-badge.tsx", "codeblock": true } ``` ## Property *** ### Color Badge 색상은 primary, success, warning, danger, contrast, hint 로 제공합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/badge-color.tsx", "codeblock": true } ``` ### Shape Badge 모양은 square, pill 로 제공합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/badge-shape.tsx", "codeblock": true } ``` ### Size Badge 사이즈는 sm, md, lg 로 제공합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/badge-size.tsx", "codeblock": true } ``` ## Props Table *** 이 컴포넌트는 `span` 요소를 기반으로, 표준 HTML 속성(`className`, `style` 등)을 지원합니다. | prop | type | default | description | | ------- | ---------------------------------------------- | --------- | ------------------------------------------------------------- | | `color` | `primary,hint,danger,success,warning,contrast` | `primary` | 배지의 색상(의미)을 설정합니다. 예컨대 success는 성공 상태를, danger는 오류 상태를 나타냅니다. | | `size` | `sm,md,lg` | `md` | 배지의 크기를 설정합니다. sm은 작은 크기, lg는 큰 크기를 의미합니다. | | `shape` | `square,pill` | `square` | 배지의 모양을 설정합니다. square는 둥근 사각형, pill은 완전히 둥근 알약 형태입니다. | # Breadcrumb URL: /docs/components/breadcrumb Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/breadcrumb.mdx 사용자가 현재 페이지의 위치를 파악하고 이전 페이지로 쉽게 이동할 수 있도록 도와주는 네비게이션 컴포넌트입니다. *** title: 'Breadcrumb' site\_name: 'Breadcrumb - Vapor Core' description: '사용자가 현재 페이지의 위치를 파악하고 이전 페이지로 쉽게 이동할 수 있도록 도와주는 네비게이션 컴포넌트입니다.' ----------------------------------------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/default-breadcrumb.tsx", "codeblock": true } ``` ## Property *** ### Size 브레드크럼 사이즈는 sm, md, lg, xl 로 제공합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/breadcrumb-size.tsx", "codeblock": true } ``` ### Current 현재 페이지를 나타내는 링크의 상태를 설정할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/breadcrumb-current.tsx", "codeblock": true } ``` ## Examples *** ### With Ellipsis 긴 네비게이션 경로에서 중간 단계를 생략 표시로 나타낸 패턴입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/breadcrumb-ellipsis.tsx", "codeblock": true } ``` ### Composition Pattern 브레드크럼 컴포넌트의 다양한 구성 패턴입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/breadcrumb-composition.tsx", "codeblock": true } ``` ## Props Table *** ### Breadcrumb.Root 브레드크럼의 메인 컨테이너 컴포넌트입니다. size 속성을 제공하며, 모든 하위 컴포넌트에서 공통으로 사용할 수 있도록 컨텍스트를 제공합니다. | prop | type | default | description | | ----------- | ----------------------- | ----------- | ------------------------------------------- | | `render` | `ReactElement,function` | `nav` | 브레드크럼을 렌더링할 때 사용할 커스텀 렌더링 요소입니다. | | `size` | `sm,md,lg,xl` | `md` | 브레드크럼의 크기를 설정합니다. 텍스트 크기와 아이콘 크기가 함께 조절됩니다. | | `className` | `string` | `undefined` | 추가적인 CSS 클래스를 적용합니다. | | `children` | `ReactNode` | `undefined` | 브레드크럼의 하위 컴포넌트들을 포함합니다. | ### Breadcrumb.List 브레드크럼 항목들을 담는 순서가 있는 리스트 컨테이너입니다. 의미적으로 올바른 구조를 위해 `
    ` 요소를 기반으로 합니다. | prop | type | default | description | | ----------- | ----------------------- | ----------- | ------------------------------ | | `render` | `ReactElement,function` | `ol` | 리스트를 렌더링할 때 사용할 커스텀 렌더링 요소입니다. | | `className` | `string` | `undefined` | 추가적인 CSS 클래스를 적용합니다. | | `children` | `ReactNode` | `undefined` | 브레드크럼 아이템들을 포함합니다. | ### Breadcrumb.Item 개별 브레드크럼 항목을 나타내는 컴포넌트입니다. 각각의 링크나 구분자를 감싸는 역할을 합니다. | prop | type | default | description | | ----------- | ----------------------- | ----------- | ------------------------------ | | `render` | `ReactElement,function` | `li` | 아이템을 렌더링할 때 사용할 커스텀 렌더링 요소입니다. | | `className` | `string` | `undefined` | 추가적인 CSS 클래스를 적용합니다. | | `children` | `ReactNode` | `undefined` | 브레드크럼 아이템의 내용을 포함합니다. | ### Breadcrumb.Link 브레드크럼 내의 클릭 가능한 링크 컴포넌트입니다. 현재 페이지인지 여부에 따라 시각적 스타일과 접근성 속성이 자동으로 조정됩니다. | prop | type | default | description | | ----------- | ----------------------- | ----------- | ---------------------------------------------------------- | | `render` | `ReactElement,function` | `a \| span` | 링크를 렌더링할 때 사용할 커스텀 렌더링 요소입니다. current prop에 따라 기본값이 달라집니다. | | `current` | `boolean` | `false` | 현재 페이지를 나타내는 링크인지 설정합니다. true일 경우 시각적으로 구분되어 표시됩니다. | | `href` | `string` | `undefined` | 링크의 목적지 URL을 설정합니다. | | `className` | `string` | `undefined` | 추가적인 CSS 클래스를 적용합니다. | | `children` | `ReactNode` | `undefined` | 링크의 텍스트 내용을 포함합니다. | ### Breadcrumb.Separator 브레드크럼 항목들 사이의 구분자를 표시하는 컴포넌트입니다. 기본적으로 슬래시(/) 아이콘을 사용하며, 커스텀 아이콘으로 변경할 수 있습니다. | prop | type | default | description | | ----------- | ----------------------- | ----------- | -------------------------------------------------- | | `render` | `ReactElement,function` | `li` | 구분자를 렌더링할 때 사용할 커스텀 렌더링 요소입니다. | | `className` | `string` | `undefined` | 추가적인 CSS 클래스를 적용합니다. | | `children` | `ReactNode` | `undefined` | 커스텀 구분자 아이콘을 제공할 수 있습니다. 기본값은 SlashOutlineIcon입니다. | ### Breadcrumb.Ellipsis 긴 네비게이션 경로에서 중간 단계를 생략할 때 사용하는 컴포넌트입니다. 기본적으로 점 3개(...) 아이콘을 표시하며, 커스텀 아이콘으로 변경할 수 있습니다. | prop | type | default | description | | ----------- | ----------------------- | ----------- | --------------------------------------------------------- | | `render` | `ReactElement,function` | `span` | 생략 표시를 렌더링할 때 사용할 커스텀 렌더링 요소입니다. | | `className` | `string` | `undefined` | 추가적인 CSS 클래스를 적용합니다. | | `children` | `ReactNode` | `undefined` | 커스텀 생략 표시 아이콘을 제공할 수 있습니다. 기본값은 MoreCommonOutlineIcon입니다. | # Button URL: /docs/components/button Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/button.mdx Button은 사용자가 주요 작업을 수행하도록 돕는 핵심 상호작용 요소입니다. *** title: 'Button' site\_name: 'Button - Vapor Core' description: 'Button은 사용자가 주요 작업을 수행하도록 돕는 핵심 상호작용 요소입니다.' ---------------------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/default-button.tsx", "codeblock": true } ``` ## Property *** ### Color Button 색상은 primary, secondary, success, warning, danger, contrast 로 제공합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/button-color.tsx", "codeblock": true } ``` ### Size Button 사이즈는 sm, md, lg, xl 로 제공합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/button-size.tsx", "codeblock": true } ``` ### Variant Button 스타일은 fill, outline, ghost 로 제공합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/button-variant.tsx", "codeblock": true } ``` ### Stretch `stretch`가 true일 경우 버튼이 컨테이너의 전체 너비를 차지합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/button-stretch.tsx", "codeblock": true } ``` ### Disabled `disabled` 속성을 사용하여 버튼을 비활성화할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/button-disabled.tsx", "codeblock": true } ``` ## Examples *** ### Button with Icon 아이콘과 함께 사용하는 버튼 예제입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/button-with-icon.tsx", "codeblock": true } ``` ## Props Table *** 이 컴포넌트는 `button` 요소를 기반으로, 표준 HTML 속성(`className`, `style` 등)을 지원합니다. | prop | type | default | description | | ----------- | --------------------------------------------------- | ----------- | -------------------------------- | | `render` | `ReactElement,function` | `button` | 버튼을 렌더링할 때 사용할 커스텀 렌더링 요소입니다. | | `color` | `primary,secondary,success,warning,danger,contrast` | `primary` | 버튼의 주 색상(의미)을 설정합니다. | | `size` | `sm,md,lg,xl` | `md` | 버튼의 크기를 설정합니다. | | `variant` | `fill,outline,ghost` | `fill` | 버튼의 스타일 변형을 선택합니다. | | `stretch` | `boolean` | `false` | true일 경우 버튼이 컨테이너의 전체 너비를 차지합니다. | | `disabled` | `boolean` | `false` | 버튼을 비활성화 상태로 만듭니다. | | `className` | `string` | `undefined` | 추가적인 CSS 클래스를 적용합니다. | | `children` | `ReactNode` | `undefined` | 버튼의 내용을 포함합니다. | | `type` | `button,submit,reset` | `button` | 버튼의 타입을 설정합니다. | | `onClick` | `function` | `undefined` | 버튼 클릭 시 호출되는 이벤트 핸들러입니다. | # Callout URL: /docs/components/callout Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/callout.mdx Callout은 중요한 정보를 시각적으로 강조하여 사용자에게 전달하는 메시지 컴포넌트입니다. *** title: 'Callout' site\_name: 'Callout - Vapor Core' description: 'Callout은 중요한 정보를 시각적으로 강조하여 사용자에게 전달하는 메시지 컴포넌트입니다.' ------------------------------------------------------------------ ```json doc-gen:file { "file": "./src/components/demo/examples/default-callout.tsx", "codeblock": true } ``` ## Property *** ### Color Callout 색상은 primary, success, warning, danger, hint, contrast 로 제공합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/callout-color.tsx", "codeblock": true } ``` ## Examples *** ### Callout with Icon 아이콘과 함께 사용하는 Callout 예제입니다. 아이콘은 `Callout.Icon`으로 감싸서 고정된 크기를 유지합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/callout-with-icon.tsx", "codeblock": true } ``` ## Props Table *** ### Callout.Root 이 컴포넌트는 `div` 요소를 기반으로, 표준 HTML 속성(`className`, `style` 등)을 지원합니다. | prop | type | default | description | | ----------- | ---------------------------------------------- | ----------- | ---------------------------------- | | `render` | `ReactElement,function` | `div` | Callout을 렌더링할 때 사용할 커스텀 렌더링 요소입니다. | | `color` | `primary,success,warning,danger,hint,contrast` | `primary` | Callout의 색상을 설정합니다. | | `className` | `string` | `undefined` | 추가적인 CSS 클래스를 적용합니다. | | `children` | `ReactNode` | `undefined` | Callout의 내용을 포함합니다. | ### Callout.Icon Callout 내에서 아이콘을 표시하는 데 사용되는 컴포넌트입니다. 아이콘의 크기와 위치를 적절히 조정하여 일관된 시각적 경험을 제공합니다. 이 컴포넌트는 `div` 요소를 기반으로, 표준 HTML 속성을 지원합니다. | prop | type | default | description | | ----------- | ----------------------- | ----------- | ------------------------------ | | `render` | `ReactElement,function` | `div` | 아이콘을 렌더링할 때 사용할 커스텀 렌더링 요소입니다. | | `className` | `string` | `undefined` | 추가적인 CSS 클래스를 적용합니다. | | `children` | `ReactNode` | `undefined` | 아이콘 컴포넌트를 포함합니다. | # Card URL: /docs/components/card Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/card.mdx Card는 이미지와 텍스트, 일부 기능 버튼을 포함한 컨테이너로 콘텐츠를 제공합니다. *** title: 'Card' site\_name: 'Card - Vapor Core' description: 'Card는 이미지와 텍스트, 일부 기능 버튼을 포함한 컨테이너로 콘텐츠를 제공합니다.' -------------------------------------------------------------- ```tsx import {Card} from '@vapor-ui/core'; export default function DefaultCard() { return ( Basic Template This is a Basic Template Footer ); } ``` ## Examples *** ### Simple Usage 기본적인 Card 사용법입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/card-basic.tsx", "codeblock": true } ``` ### Layout Card의 레이아웃은 Header, Body, Footer를 조합하여 다양한 구성으로 제공합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/card-layout.tsx", "codeblock": true } ``` ## Props Table *** ### Card.Root Card의 메인 컨테이너 컴포넌트입니다. 카드의 전체 레이아웃과 구조를 제공하며, 하위 컴포넌트들을 위한 컨테이너 역할을 합니다. 이 컴포넌트는 `div` 요소를 기반으로 합니다. | prop | type | default | description | | ----------- | ----------------------- | ----------- | -------------------------------- | | `render` | `ReactElement,function` | `div` | 카드를 렌더링할 때 사용할 커스텀 렌더링 요소입니다. | | `className` | `string` | `undefined` | 카드 루트 요소에 적용할 추가 CSS 클래스를 지정합니다. | | `children` | `ReactNode` | `undefined` | 카드에 표시할 콘텐츠입니다. | ### Card.Header Card의 헤더 영역을 표시하는 컴포넌트입니다. 제목, 부제목, 메타 정보 등을 배치하는 데 사용됩니다. 자동으로 하단 경계선이 적용됩니다. 이 컴포넌트는 `div` 요소를 기반으로 합니다. | prop | type | default | description | | ----------- | ----------------------- | ----------- | ----------------------------- | | `render` | `ReactElement,function` | `div` | 헤더를 렌더링할 때 사용할 커스텀 렌더링 요소입니다. | | `className` | `string` | `undefined` | 헤더 요소에 적용할 추가 CSS 클래스를 지정합니다. | | `children` | `ReactNode` | `undefined` | 헤더에 표시할 콘텐츠입니다. | ### Card.Body Card의 주요 콘텐츠 영역을 표시하는 컴포넌트입니다. 텍스트, 이미지, 설명 등 카드의 핵심 내용을 담는 데 사용됩니다. 이 컴포넌트는 `div` 요소를 기반으로 합니다. | prop | type | default | description | | ----------- | ----------------------- | ----------- | ----------------------------- | | `render` | `ReactElement,function` | `div` | 바디를 렌더링할 때 사용할 커스텀 렌더링 요소입니다. | | `className` | `string` | `undefined` | 바디 요소에 적용할 추가 CSS 클래스를 지정합니다. | | `children` | `ReactNode` | `undefined` | 바디에 표시할 콘텐츠입니다. | ### Card.Footer Card의 하단 영역을 표시하는 컴포넌트입니다. 액션 버튼, 링크, 추가 메타 정보 등을 배치하는 데 사용됩니다. 자동으로 상단 경계선이 적용됩니다. 이 컴포넌트는 `div` 요소를 기반으로 합니다. | prop | type | default | description | | ----------- | ----------------------- | ----------- | ----------------------------- | | `render` | `ReactElement,function` | `div` | 푸터를 렌더링할 때 사용할 커스텀 렌더링 요소입니다. | | `className` | `string` | `undefined` | 푸터 요소에 적용할 추가 CSS 클래스를 지정합니다. | | `children` | `ReactNode` | `undefined` | 푸터에 표시할 콘텐츠입니다. | # Checkbox URL: /docs/components/checkbox Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/checkbox.mdx Checkbox는 여러 항목 중 복수 선택을 가능하게 하는 입력 컴포넌트입니다. *** title: 'Checkbox' site\_name: 'Checkbox - Vapor Core' description: 'Checkbox는 여러 항목 중 복수 선택을 가능하게 하는 입력 컴포넌트입니다.' ----------------------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/default-checkbox.tsx", "codeblock": true } ``` ## Property *** ### Size Checkbox 사이즈는 md, lg 로 제공합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/checkbox-size.tsx", "codeblock": true } ``` ### Disabled 비활성화된 상태의 Checkbox입니다. 사용자가 상호작용할 수 없습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/checkbox-disabled.tsx", "codeblock": true } ``` ### Invalid 유효하지 않은 상태의 Checkbox입니다. 폼 검증 실패 시 사용됩니다. ```json doc-gen:file { "file": "./src/components/demo/examples/checkbox-invalid.tsx", "codeblock": true } ``` ### Indeterminate 부분적으로 선택된 상태의 Checkbox입니다. 하위 항목 중 일부만 선택되었을 때 사용됩니다. ```json doc-gen:file { "file": "./src/components/demo/examples/checkbox-indeterminate.tsx", "codeblock": true } ``` ### Read Only 사용자는 체크박스 상태를 변경할 수 없지만, 현재 상태를 확인할 수 있도록 허용하는 상태입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/checkbox-readonly.tsx", "codeblock": true } ``` ## Props Table *** ### Checkbox.Root Checkbox의 메인 컨테이너 컴포넌트입니다. Base UI의 Checkbox를 래핑하여 size, disabled, invalid 등의 속성을 제공하며, 체크, 미체크, 불확정 상태를 시각적으로 나타냅니다. 이 컴포넌트는 `button` 요소를 기반으로 합니다. | prop | type | default | description | | ----------------- | ----------------------- | ----------- | --------------------------------------------------------------------- | | `render` | `ReactElement,function` | `button` | 체크박스를 렌더링할 때 사용할 커스텀 렌더링 요소입니다. | | `checked` | `boolean,indeterminate` | `undefined` | 체크박스의 제어된 체크 상태입니다. onCheckedChange와 함께 사용해야 합니다. | | `defaultChecked` | `boolean,indeterminate` | `undefined` | 체크박스가 처음 렌더링될 때의 체크 상태입니다. 체크 상태를 제어할 필요가 없을 때 사용합니다. | | `onCheckedChange` | `function` | `undefined` | 체크박스의 체크 상태가 변경될 때 호출되는 이벤트 핸들러입니다. (checked: boolean) => void 형태입니다. | | `disabled` | `boolean` | `false` | true일 때 사용자가 체크박스와 상호작용하는 것을 방지합니다. | | `required` | `boolean` | `undefined` | true일 때 소유 폼을 제출하기 전에 사용자가 체크박스를 체크해야 함을 나타냅니다. | | `name` | `string` | `undefined` | 체크박스의 이름입니다. 소유 폼과 함께 이름/값 쌍의 일부로 제출됩니다. | | `value` | `string` | `on` | 이름과 함께 제출될 때 데이터로 제공되는 값입니다. | | `size` | `md,lg` | `md` | 체크박스의 크기를 설정합니다. | | `invalid` | `boolean` | `false` | 폼 유효성 검증 실패 등의 상태를 나타냅니다. | | `indeterminate` | `boolean` | `false` | 혼합(indeterminate) 상태를 표시합니다. 일부 선택된 경우를 나타낼 때 사용합니다. | | `readOnly` | `boolean` | `false` | true일 때 체크박스가 읽기 전용 상태가 되어 사용자 상호작용을 방지하지만 폼 제출에는 포함됩니다. | | `className` | `string` | `undefined` | 추가적인 CSS 클래스를 적용합니다. | | `children` | `ReactNode` | `undefined` | 체크박스의 내용을 포함합니다. 기본적으로 Checkbox.Indicator가 자동으로 포함됩니다. | ### Checkbox.Indicator 체크박스의 체크 상태를 시각적으로 표시하는 인디케이터 컴포넌트입니다. 체크됨/미체크됨/불확정 상태에 따라 적절한 아이콘을 표시합니다. Root 컴포넌트에서 자동으로 포함되므로 대부분의 경우 직접 사용할 필요가 없습니다. 이 컴포넌트는 `div` 요소를 기반으로 합니다. | prop | type | default | description | | ------------ | ----------------------- | ----------- | ------------------------------------------------------------------------- | | `render` | `ReactElement,function` | `div` | 체크박스 인디케이터를 렌더링할 때 사용할 커스텀 렌더링 요소입니다. | | `forceMount` | `boolean` | `undefined` | 더 정밀한 제어가 필요할 때 강제로 마운트하는 데 사용됩니다. React 애니메이션 라이브러리로 애니메이션을 제어할 때 유용합니다. | | `className` | `string` | `undefined` | 추가적인 CSS 클래스를 적용합니다. | # Collapsible URL: /docs/components/collapsible Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/collapsible.mdx Collapsible은 콘텐츠를 접었다 펼칠 수 있는 대화형 컴포넌트입니다. 아코디언이나 확장 가능한 섹션을 구현할 때 사용합니다. *** title: 'Collapsible' site\_name: 'Collapsible - Vapor Core' description: 'Collapsible은 콘텐츠를 접었다 펼칠 수 있는 대화형 컴포넌트입니다. 아코디언이나 확장 가능한 섹션을 구현할 때 사용합니다.' ---------------------------------------------------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/collapsible/default-collapsible.tsx", "codeblock": true } ``` ## Property *** ### Open State Collapsible의 열림/닫힘 상태를 제어할 수 있습니다. `defaultOpen`으로 초기 상태를 설정하거나, `open`과 `onOpenChange`로 완전히 제어할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/collapsible/collapsible-open-state.tsx", "codeblock": true } ``` ### Keep Mounted `keepMounted` 속성을 사용하여 패널이 닫힌 상태에서도 DOM에 유지할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/collapsible/collapsible-keep-mounted.tsx", "codeblock": true } ``` ### Disabled Collapsible을 비활성화하여 사용자 상호작용을 막을 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/collapsible/collapsible-disabled.tsx", "codeblock": true } ``` ## Props Table *** ### Collapsible.Root 이 컴포넌트는 `div` 요소를 기반으로, 표준 HTML 속성(`className`, `style` 등)을 지원합니다. | prop | type | default | description | | -------------- | ------------------- | ------- | ----------------------------------------------------- | | `open` | `boolean` | `-` | 콜랩시블의 제어된 열림 상태입니다. onOpenChange와 함께 사용해야 합니다. | | `defaultOpen` | `boolean` | `false` | 콜랩시블이 처음 렌더링될 때의 열림 상태입니다. 열림 상태를 제어할 필요가 없을 때 사용합니다. | | `onOpenChange` | `function` | `-` | 콜랩시블의 열림 상태가 변경될 때 호출되는 이벤트 핸들러입니다. | | `disabled` | `boolean` | `false` | 콜랩시블의 상호작용을 비활성화합니다. | | `render` | `ReactElement,null` | `-` | 커스텀 렌더링 요소를 지정합니다. | | `className` | `string` | `-` | 루트 요소에 적용할 추가 CSS 클래스입니다. | | `children` | `ReactNode` | `-` | 콜랩시블의 자식 컴포넌트들입니다. | ### Collapsible.Trigger 이 컴포넌트는 `button` 요소를 기반으로, 표준 HTML 속성(`onClick`, `disabled` 등)을 지원합니다. | prop | type | default | description | | ----------- | ------------------- | ------- | -------------------------- | | `render` | `ReactElement,null` | `-` | 커스텀 트리거 요소를 지정합니다. | | `className` | `string` | `-` | 트리거 요소에 적용할 추가 CSS 클래스입니다. | | `disabled` | `boolean` | `false` | 트리거를 비활성화합니다. | | `children` | `ReactNode` | `-` | 트리거의 자식 컴포넌트들입니다. | ### Collapsible.Panel 이 컴포넌트는 `div` 요소를 기반으로, 표준 HTML 속성(`className`, `style` 등)을 지원합니다. | prop | type | default | description | | ------------------ | ------------------- | ------- | --------------------------------------------------------- | | `keepMounted` | `boolean` | `false` | 패널이 닫힌 상태에서도 DOM에 유지할지 여부를 설정합니다. | | `hiddenUntilFound` | `boolean` | `false` | 브라우저의 페이지 내 검색이나 fragment navigation에서 콘텐츠를 찾을 수 있도록 합니다. | | `className` | `string` | `-` | 패널 요소에 적용할 추가 CSS 클래스입니다. | | `children` | `ReactNode` | `-` | 패널의 자식 컴포넌트들입니다. | | `render` | `ReactElement,null` | `-` | 커스텀 렌더링 요소를 지정합니다. | # Dialog URL: /docs/components/dialog Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/dialog.mdx Dialog는 페이지 위에 모달 형태로 정보를 표시하거나 작업을 수행하도록 하는 컴포넌트입니다. *** title: 'Dialog' site\_name: 'Dialog - Vapor Core' description: 'Dialog는 페이지 위에 모달 형태로 정보를 표시하거나 작업을 수행하도록 하는 컴포넌트입니다.' -------------------------------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/default-dialog.tsx", "codeblock": true } ``` ## Property *** ### Size Dialog 사이즈는 md, lg, xl로 제공합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/dialog-size.tsx", "codeblock": true } ``` ### Modal Behavior Dialog의 모달 동작을 제어할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/dialog-modal.tsx", "codeblock": true } ``` ## Examples *** ### Simple Usage 기본적인 Dialog 사용법입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/dialog-simple.tsx", "codeblock": true } ``` ### Composition Pattern Dialog.Root, Dialog.Trigger, Dialog.CombinedContent, Dialog.Header, Dialog.Body, Dialog.Footer를 조합한 패턴입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/dialog-composition.tsx", "codeblock": true } ``` ### Size & Modal Variants 다양한 크기와 모달 설정을 조합한 예시입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/dialog-variants.tsx", "codeblock": true } ``` ## Props Table *** ### Dialog.Root Dialog의 루트 컨테이너로, 다이얼로그의 상태와 동작을 관리합니다. 크기, 모달 동작, 열림/닫힘 상태를 제어할 수 있습니다. | prop | type | default | description | | -------------- | ---------------- | ------- | ----------------------------------------------------------------- | | `defaultOpen` | `boolean` | `null` | 다이얼로그의 초기 열림 상태를 설정합니다. 비제어 컴포넌트로 사용할 때 활용됩니다. | | `open` | `boolean` | `null` | 다이얼로그의 열림 상태를 제어합니다. 제어 컴포넌트로 사용할 때 onOpenChange와 함께 사용합니다. | | `onOpenChange` | `function` | `null` | 다이얼로그의 열림 상태가 변경될 때 호출되는 콜백 함수입니다. (open: boolean) => void | | `modal` | `boolean` | `true` | 모달 동작을 제어합니다. true일 때는 포커스 트랩이 활성화되고 배경과 상호작용이 차단됩니다. | | `dismissible` | `boolean` | `true` | ESC 키나 배경 클릭으로 다이얼로그를 닫을 수 있는지 설정합니다. closeOnClickOverlay로 매핑됩니다. | | `size` | `"md","lg","xl"` | `"md"` | 다이얼로그의 크기를 설정합니다. md(중간), lg(큰), xl(매우 큰) 크기를 제공합니다. | ### Dialog.Portal Dialog 콘텐츠를 document.body 또는 지정된 컨테이너에 렌더링합니다. 다이얼로그가 다른 요소들 위에 표시되도록 보장합니다. | prop | type | default | description | | ------------- | ------------- | --------------- | -------------------------------------- | | `keepMounted` | `boolean` | `false` | 다이얼로그가 닫혀있어도 DOM에 마운트된 상태로 유지할지 설정합니다. | | `container` | `HTMLElement` | `document.body` | 다이얼로그를 렌더링할 DOM 컨테이너를 지정합니다. | ### Dialog.Overlay Dialog의 배경 오버레이입니다. 다이얼로그 외부 영역을 어둡게 하고 클릭 이벤트를 처리합니다. | prop | type | default | description | | ------------- | -------------- | ------- | ----------------------------------- | | `render` | `ReactElement` | `div` | 오버레이를 렌더링할 때 사용할 커스텀 렌더링 요소입니다. | | `keepMounted` | `boolean` | `false` | 다이얼로그가 닫혀있어도 오버레이를 DOM에 유지할지 설정합니다. | | `className` | `string` | `null` | 오버레이 요소에 적용할 CSS 클래스명입니다. | ### Dialog.Content Dialog의 실제 콘텐츠 영역입니다. Portal과 Overlay를 별도로 구성해야 합니다. 세밀한 제어가 필요할 때 사용합니다. | prop | type | default | description | | -------------- | -------------- | ------- | -------------------------------------------------------- | | `render` | `ReactElement` | `div` | 콘텐츠를 렌더링할 때 사용할 커스텀 렌더링 요소입니다. | | `initialFocus` | `function` | `null` | 다이얼로그가 열릴 때 초기 포커스를 받을 요소를 반환하는 함수입니다. () => HTMLElement | | `finalFocus` | `function` | `null` | 다이얼로그가 닫힐 때 포커스를 이동시킬 요소를 반환하는 함수입니다. () => HTMLElement | | `className` | `string` | `null` | 콘텐츠 요소에 적용할 CSS 클래스명입니다. | ### Dialog.CombinedContent Portal, Overlay, Content가 통합된 편의 컴포넌트입니다. 대부분의 경우 이 컴포넌트를 사용하는 것을 권장합니다. | prop | type | default | description | | ----------- | ----------------- | ------- | ------------------------ | | `className` | `string` | `null` | 콘텐츠 요소에 적용할 CSS 클래스명입니다. | | `children` | `React.ReactNode` | `null` | 다이얼로그 내부에 렌더링할 콘텐츠입니다. | ### Dialog.Trigger Dialog를 여는 트리거 버튼입니다. render prop을 통해 커스텀 요소로 렌더링할 수 있습니다. | prop | type | default | description | | ----------- | -------------- | -------- | ------------------------------ | | `render` | `ReactElement` | `button` | 트리거를 렌더링할 때 사용할 커스텀 렌더링 요소입니다. | | `className` | `string` | `null` | 트리거 요소에 적용할 CSS 클래스명입니다. | ### Dialog.Close Dialog를 닫는 버튼입니다. 다이얼로그 내 어디든 배치할 수 있으며, render prop을 통해 커스텀 요소로 사용할 수 있습니다. | prop | type | default | description | | ----------- | -------------- | -------- | -------------------------------- | | `render` | `ReactElement` | `button` | 닫기 버튼을 렌더링할 때 사용할 커스텀 렌더링 요소입니다. | | `className` | `string` | `null` | 닫기 버튼에 적용할 CSS 클래스명입니다. | ### Dialog.Title Dialog의 제목입니다. 접근성을 위해 필수로 포함해야 하며, 스크린 리더가 다이얼로그를 식별할 때 사용됩니다. | prop | type | default | description | | ----------- | -------------- | ------- | ----------------------------- | | `render` | `ReactElement` | `h2` | 제목을 렌더링할 때 사용할 커스텀 렌더링 요소입니다. | | `className` | `string` | `null` | 제목 요소에 적용할 CSS 클래스명입니다. | ### Dialog.Description Dialog의 설명 텍스트입니다. 스크린 리더 사용자에게 추가 컨텍스트를 제공하기 위해 사용하는 것을 권장합니다. | prop | type | default | description | | ----------- | -------------- | ------- | ----------------------------- | | `render` | `ReactElement` | `p` | 설명을 렌더링할 때 사용할 커스텀 렌더링 요소입니다. | | `className` | `string` | `null` | 설명 요소에 적용할 CSS 클래스명입니다. | ### Dialog.Header Dialog의 상단 영역입니다. 일반적으로 Title과 Close 버튼을 배치합니다. | prop | type | default | description | | ----------- | ----------------- | ------- | --------------------------------------------- | | `render` | `ReactElement` | `div` | 헤더를 렌더링할 때 사용할 커스텀 렌더링 요소입니다. | | `className` | `string` | `null` | 헤더 영역에 적용할 CSS 클래스명입니다. | | `children` | `React.ReactNode` | `null` | 헤더 영역에 렌더링할 내용입니다. 보통 Title과 Close 버튼을 포함합니다. | ### Dialog.Body Dialog의 중앙 콘텐츠 영역입니다. Description과 주요 내용을 배치합니다. | prop | type | default | description | | ----------- | ----------------- | ------- | ----------------------------- | | `render` | `ReactElement` | `div` | 바디를 렌더링할 때 사용할 커스텀 렌더링 요소입니다. | | `className` | `string` | `null` | 바디 영역에 적용할 CSS 클래스명입니다. | | `children` | `React.ReactNode` | `null` | 바디 영역에 렌더링할 주요 콘텐츠입니다. | ### Dialog.Footer Dialog의 하단 영역입니다. 확인, 취소 등의 액션 버튼들을 배치합니다. | prop | type | default | description | | ----------- | ----------------- | ------- | ------------------------------------ | | `render` | `ReactElement` | `div` | 푸터를 렌더링할 때 사용할 커스텀 렌더링 요소입니다. | | `className` | `string` | `null` | 푸터 영역에 적용할 CSS 클래스명입니다. | | `children` | `React.ReactNode` | `null` | 푸터 영역에 렌더링할 내용입니다. 보통 액션 버튼들을 포함합니다. | # Field URL: /docs/components/field Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/field.mdx Field는 폼 요소들을 감싸는 컨테이너 컴포넌트로, 라벨, 설명, 에러 메시지, 성공 메시지 등을 제공합니다. *** title: Field site\_name: Field - Vapor Core description: Field는 폼 요소들을 감싸는 컨테이너 컴포넌트로, 라벨, 설명, 에러 메시지, 성공 메시지 등을 제공합니다. --------------------------------------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/field/default-field.tsx", "codeblock": true } ``` ## Property *** ### Invalid State `invalid` prop을 사용하여 필드의 유효하지 않은 상태를 표시할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/field/field-invalid.tsx", "codeblock": true } ``` ### Validation Mode `validationMode` prop을 사용하여 언제 검증을 수행할지 제어할 수 있습니다. `onChange`는 입력할 때마다, `onBlur`는 포커스를 잃을 때 검증을 수행합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/field/field-validation-mode.tsx", "codeblock": true } ``` ### Match `Field.Error`의 `match` prop을 사용하여 특정 조건에 따라 에러 메시지 표시를 제어할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/field/field-match.tsx", "codeblock": true } ``` ## Examples *** ### With Description Field.Description을 사용하여 필드에 대한 추가 설명을 제공할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/field/field-description.tsx", "codeblock": true } ``` ### With Validation Field.Error와 Field.Success를 사용하여 유효성 검사 결과를 표시할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/field/field-validation.tsx", "codeblock": true } ``` ### With Checkbox Checkbox 컴포넌트와 Field를 함께 사용하는 예제입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/field/field-checkbox.tsx", "codeblock": true } ``` ### With Switch Switch 컴포넌트와 Field를 함께 사용하는 예제입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/field/field-switch.tsx", "codeblock": true } ``` ### With RadioGroup RadioGroup과 Field를 함께 사용하여 선택지가 있는 필드를 만드는 예제입니다. ```tsx 'use client'; import { Field, Radio, RadioGroup } from '@vapor-ui/core'; export default function FieldRadioGroup() { return ( 성별
    남성
    여성
    기타
    개인정보 보호를 위해 선택사항입니다.     ); } ```     ### With Different Input Types 다양한 폼 컨트롤(TextInput, Checkbox, Switch, Select 등)과 Field를 함께 사용하는 예제입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/field/field-with-inputs.tsx", "codeblock": true } ``` ### Required Fields 필수 필드와 선택 필드를 구분하여 표시하는 예제입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/field/field-required.tsx", "codeblock": true } ``` ### Field States 다양한 필드 상태(일반, 오류, 성공, 비활성화)를 보여주는 예제입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/field/field-states.tsx", "codeblock": true } ``` ### Controlled Fields 제어 컴포넌트로 필드를 관리하고 실시간으로 상태를 표시하는 예제입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/field/field-controlled.tsx", "codeblock": true } ``` ### Disabled disabled 속성을 사용하여 비활성화된 필드를 만들 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/field/field-disabled.tsx", "codeblock": true } ``` ## Props Table *** ### Field.Root Field의 메인 컨테이너 컴포넌트입니다. 폼 필드의 기본 구조를 제공하며, 라벨, 입력 요소, 설명, 에러 메시지 등을 포함할 수 있습니다. | prop | type | default | description | | ------------------------ | ----------------------------- | ---------- | --------------------------------------------------------- | | `name` | `string` | | 필드의 고유한 이름을 설정합니다. 폼 제출 시 식별자로 사용됩니다. | | `disabled` | `boolean` | `false` | 필드와 내부 폼 컨트롤들을 비활성화합니다. | | `invalid` | `boolean` | | 필드가 유효하지 않은 상태임을 나타냅니다. | | `validate` | `function` | | 필드 값을 검증하는 함수를 설정합니다. | | `validationMode` | `'onBlur','onChange'` | `'onBlur'` | 유효성 검사가 실행되는 타이밍을 설정합니다. | | `validationDebounceTime` | `number` | `0` | 유효성 검사 실행 전 대기 시간(밀리초)을 설정합니다. | | `className` | `string,function` | | 필드 상태에 따라 적용할 CSS 클래스 또는 클래스를 반환하는 함수입니다. | | `render` | `React.ReactElement,function` | | 커스텀 렌더링 함수 또는 React 엘리먼트입니다. | | `children` | `React.ReactNode` | | 필드 내부의 컨텐츠입니다. Label, Description, Error, 폼 컨트롤 등을 포함합니다. | ### Field.Label 필드에 라벨을 제공하는 컴포넌트입니다. 자동으로 폼 컨트롤과 연결됩니다. | prop | type | default | description | | ----------- | ----------------------------- | ------- | ----------------------------------------- | | `children` | `React.ReactNode` | | 라벨의 텍스트 또는 내용입니다. | | `className` | `string,function` | | 필드 상태에 따라 적용할 CSS 클래스 또는 클래스를 반환하는 함수입니다. | | `render` | `React.ReactElement,function` | | 커스텀 렌더링 함수 또는 React 엘리먼트입니다. | ### Field.Description 필드에 대한 추가 설명을 제공하는 컴포넌트입니다. | prop | type | default | description | | ----------- | ----------------------------- | ------- | ----------------------------------------- | | `children` | `React.ReactNode` | | 설명 텍스트의 내용입니다. 필드에 대한 추가 정보를 제공합니다. | | `className` | `string,function` | | 필드 상태에 따라 적용할 CSS 클래스 또는 클래스를 반환하는 함수입니다. | | `render` | `React.ReactElement,function` | | 커스텀 렌더링 함수 또는 React 엘리먼트입니다. | ### Field.Error 필드 유효성 검사 실패 시 표시되는 오류 메시지 컴포넌트입니다. | prop | type | default | description | | ----------- | ----------------------------- | ------- | ------------------------------------------------------------------- | | `children` | `React.ReactNode` | | 에러 메시지의 내용입니다. | | `match` | `boolean,string,function` | | 에러가 표시될 조건을 설정합니다. boolean, 유효성 상태 문자열, 또는 조건을 판단하는 함수를 사용할 수 있습니다. | | `className` | `string,function` | | 필드 상태에 따라 적용할 CSS 클래스 또는 클래스를 반환하는 함수입니다. | | `render` | `React.ReactElement,function` | | 커스텀 렌더링 함수 또는 React 엘리먼트입니다. | ### Field.Success 필드 유효성 검사 성공 시 표시되는 성공 메시지 컴포넌트입니다. | prop | type | default | description | | ----------- | ----------------------------- | ------- | ----------------------------------------- | | `children` | `React.ReactNode` | | 성공 메시지의 내용입니다. 필드가 유효할 때만 표시됩니다. | | `className` | `string,function` | | 필드 상태에 따라 적용할 CSS 클래스 또는 클래스를 반환하는 함수입니다. | | `render` | `React.ReactElement,function` | | 커스텀 렌더링 함수 또는 React 엘리먼트입니다. | ### Field.Validity 필드의 유효성 상태에 따라 커스텀 내용을 표시할 수 있는 컴포넌트입니다. | prop | type | default | description | | ---------- | ---------- | ------- | --------------------------------------------------------------------------------- | | `children` | `function` | | 필드의 유효성 상태를 받아 내용을 반환하는 함수입니다. (validity: FieldValidityState) => ReactNode 형태입니다. | # IconButton URL: /docs/components/icon-button Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/icon-button.mdx IconButton은 특정 작업이나 기능을 나타내며, 텍스트 없이 아이콘만으로 명령을 전달하는 버튼입니다. *** title: 'IconButton' site\_name: 'IconButton - Vapor Core' description: 'IconButton은 특정 작업이나 기능을 나타내며, 텍스트 없이 아이콘만으로 명령을 전달하는 버튼입니다.' -------------------------------------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/default-icon-button.tsx", "codeblock": true } ``` ## Property *** ### Size IconButton 사이즈는 sm, md, lg, xl 로 제공합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/icon-button-size.tsx", "codeblock": true } ``` ### Color IconButton 색상은 primary, secondary, success, warning, danger, contrast 로 제공합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/icon-button-color.tsx", "codeblock": true } ``` ### Variant IconButton 스타일 변형은 fill, outline, ghost 로 제공합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/icon-button-variant.tsx", "codeblock": true } ``` ### Shape IconButton 모양은 square, circle 로 제공합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/icon-button-shape.tsx", "codeblock": true } ``` ### Disabled 비활성화된 상태의 IconButton입니다. 사용자가 상호작용할 수 없습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/icon-button-disabled.tsx", "codeblock": true } ``` ## Props Table *** IconButton은 아이콘만으로 작업을 수행하는 버튼 컴포넌트입니다. Button 컴포넌트를 확장하여 추가적인 shape 속성과 아이콘 전용 스타일링을 제공합니다. 접근성을 위해 적절한 `aria-label`을 반드시 제공해야 합니다. 이 컴포넌트는 `button` 요소를 기반으로 합니다. | prop | type | default | description | | ------------ | --------------------------------------------------- | ----------- | ------------------------------------------------------------ | | `render` | `ReactElement,function` | `button` | 아이콘 버튼을 렌더링할 때 사용할 커스텀 렌더링 요소입니다. | | `color` | `primary,secondary,success,warning,danger,contrast` | `primary` | 아이콘 버튼의 주 색상(의미)을 설정합니다. | | `size` | `sm,md,lg,xl` | `md` | 버튼 및 아이콘의 크기를 설정합니다. | | `variant` | `fill,outline,ghost` | `fill` | 버튼의 스타일 변형을 선택합니다. | | `shape` | `square,circle` | `square` | circle 경우 버튼이 완전히 원형이 됩니다. | | `disabled` | `boolean` | `false` | 버튼을 비활성화합니다. | | `aria-label` | `string` | `-` | 화면 읽기 전용 사용자에게 아이콘 버튼의 용도를 설명하는 텍스트입니다. 가시적 레이블이 없으므로 필수입니다. | | `className` | `string` | `undefined` | 추가적인 CSS 클래스를 적용합니다. | | `children` | `ReactNode` | `undefined` | 아이콘 버튼에 표시할 아이콘을 포함합니다. | # InputGroup URL: /docs/components/input-group Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/input-group.mdx InputGroup은 입력 필드(TextInput, Textarea)와 관련 요소들을 그룹화하여 문자 수 카운터와 같은 추가 기능을 제공합니다. *** title: 'InputGroup' site\_name: 'InputGroup - Vapor Core' description: 'InputGroup은 입력 필드(TextInput, Textarea)와 관련 요소들을 그룹화하여 문자 수 카운터와 같은 추가 기능을 제공합니다.' ----------------------------------------------------------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/default-input-group.tsx", "codeblock": true } ``` ## Examples *** ### Basic Usage InputGroup은 입력 컴포넌트(TextInput, Textarea)와 Counter를 조합하여 사용합니다. 입력 컴포넌트에 maxLength가 설정되면 자동으로 "현재글자수/최대글자수" 형태로 표시되고, maxLength가 없으면 현재 글자 수만 표시됩니다. ```json doc-gen:file { "file": "./src/components/demo/examples/input-group-basic.tsx", "codeblock": true } ``` ### With Textarea InputGroup은 Textarea와도 함께 사용할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/input-group-textarea.tsx", "codeblock": true } ``` ### Custom Counter Counter는 함수형 children을 지원하여 커스텀 카운터 UI를 구현할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/input-group-custom-counter.tsx", "codeblock": true } ``` ## Props Table *** ### InputGroup.Root InputGroup의 루트 컨테이너로, 입력 컴포넌트(TextInput, Textarea)와 Counter를 감싸는 래퍼 역할을 합니다. | prop | type | default | description | | ----------- | ----------------- | ------- | ------------------------------------------------------------------------------ | | `render` | `ReactElement` | `div` | 루트 요소를 렌더링할 때 사용할 커스텀 렌더링 prop입니다. | | `className` | `string` | `null` | 루트 요소에 적용할 CSS 클래스명입니다. | | `children` | `React.ReactNode` | `null` | InputGroup 내부에 렌더링할 자식 요소들입니다. Vapor UI의 TextInput, Textarea 컴포넌트를 포함할 수 있습니다. | ### InputGroup.Counter 문자 수를 표시하는 카운터 컴포넌트입니다. 함수형 children을 통해 커스텀 카운터를 구현할 수 있습니다. | prop | type | default | description | | ----------- | -------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------- | | `children` | `React.ReactNode,({ count, maxLength, value }: CounterRenderProps) => React.ReactNode` | `null` | 카운터 내용을 렌더링하는 children입니다. 함수형 children을 사용하면 count, maxLength, value를 받아 커스텀 카운터를 구현할 수 있습니다. | | `render` | `React.ReactElement` | `span` | 카운터 요소를 렌더링할 때 사용할 커스텀 렌더링 prop입니다. | | `className` | `string` | `null` | 카운터 요소에 적용할 CSS 클래스명입니다. | # Menu URL: /docs/components/menu Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/menu.mdx 드롭다운 메뉴와 컨텍스트 메뉴를 제공하는 컴포넌트입니다 *** title: 'Menu' site\_name: 'Menu - Vapor Core' description: '드롭다운 메뉴와 컨텍스트 메뉴를 제공하는 컴포넌트입니다' --------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/default-menu.tsx", "codeblock": true } ``` ## Property *** ### Positioning Menu의 표시 위치를 설정할 수 있습니다. ```tsx import { Button, Menu } from '@vapor-ui/core'; export default function MenuPositioning() { return (
    상단 메뉴} /> 상단 아이템 1 상단 아이템 2 상단 아이템 3 우측 메뉴} /> 우측 아이템 1 우측 아이템 2 우측 아이템 3 하단 메뉴} /> 하단 아이템 1 하단 아이템 2 하단 아이템 3 좌측 메뉴} /> 좌측 아이템 1 좌측 아이템 2 좌측 아이템 3
    ); } ```     ### Groups Menu 아이템을 그룹으로 구성할 수 있습니다. ```tsx import { Button, Menu } from '@vapor-ui/core'; export default function MenuGroups() { return ( 그룹 메뉴} /> 파일 새 파일 파일 열기 파일 저장 편집 복사 붙여넣기 잘라내기 도구 설정 도움말 ); } ``` ### Disabled Menu와 개별 아이템을 비활성화할 수 있습니다. ```tsx import { Button, Menu } from '@vapor-ui/core'; export default function MenuDisabled() { return (
    일반 메뉴} /> 활성 아이템 1 비활성 아이템 활성 아이템 2 비활성 아이템 2 활성 아이템 3 비활성 메뉴} /> 아이템 1 아이템 2 아이템 3
    ); } ```     ## Examples *** ### Checkbox Items 체크박스 형태의 메뉴 아이템을 사용할 수 있습니다. ```tsx import { Button, Menu } from '@vapor-ui/core'; import { useState } from 'react'; export default function MenuCheckbox() { const [showToolbar, setShowToolbar] = useState(true); const [showSidebar, setShowSidebar] = useState(false); const [showStatusbar, setShowStatusbar] = useState(true); return ( 보기 설정} /> 보기 옵션 툴바 표시 사이드바 표시 상태바 표시 ); } ``` ### Radio Items 라디오 버튼 형태의 메뉴 아이템을 사용할 수 있습니다. ```tsx import { Button, Menu } from '@vapor-ui/core'; import { useState } from 'react'; export default function MenuRadio() { const [fontSize, setFontSize] = useState('medium'); return ( 글꼴 크기} /> 글꼴 크기 선택 작게 (12px) 보통 (14px) 크게 (16px) 매우 크게 (18px) ); } ``` ### Submenu 서브메뉴를 구성할 수 있습니다. ```tsx import { Button, Menu } from '@vapor-ui/core'; export default function MenuSubmenu() { return ( 서브메뉴} /> 새 파일 파일 열기 최근 파일 document.txt presentation.pptx spreadsheet.xlsx 더 많은 파일... 내보내기 PDF로 내보내기 이미지로 내보내기 HTML로 내보내기 종료 ); } ``` ## Props Table *** ### Menu.Root Menu의 루트 컨테이너 컴포넌트입니다. 위치 관련 props와 Base UI Menu.Root의 모든 props를 지원합니다. | prop | type | default | description | | -------------------- | ------------------------------- | ------------------- | ------------------------------- | | `open` | `boolean` | `-` | 메뉴의 열림 상태를 제어합니다 (제어 모드). | | `defaultOpen` | `boolean` | `false` | 메뉴의 초기 열림 상태를 설정합니다. | | `onOpenChange` | `function` | `-` | 메뉴의 열림 상태가 변경될 때 호출되는 콜백 함수입니다. | | `disabled` | `boolean` | `false` | 메뉴 전체를 비활성화할지 여부를 설정합니다. | | `openOnHover` | `boolean` | `false` | 호버 시 메뉴를 열지 여부를 설정합니다. | | `delay` | `number` | `0` | 메뉴가 열리기 전 지연 시간을 밀리초 단위로 설정합니다. | | `closeDelay` | `number` | `0` | 메뉴가 닫히기 전 지연 시간을 밀리초 단위로 설정합니다. | | `side` | `top,right,bottom,left` | `bottom` | 메뉴가 표시될 위치를 설정합니다. | | `align` | `start,center,end` | `center` | 메뉴의 정렬을 설정합니다. | | `sideOffset` | `number` | `0` | 트리거와 메뉴 사이의 거리를 설정합니다. | | `alignOffset` | `number` | `0` | 정렬 축에서의 오프셋을 설정합니다. | | `anchor` | `Element,VirtualElement,null` | `null` | 메뉴의 위치를 계산할 기준 앵커 요소를 설정합니다. | | `arrowPadding` | `number` | `4` | 화살표와 콘텐츠 사이의 패딩을 설정합니다. | | `collisionAvoidance` | `boolean,object` | `{ align: 'none' }` | 충돌 회피 동작을 설정합니다. | | `collisionBoundary` | `Element,Array,string` | `clippingAncestors` | 충돌 감지를 위한 경계 요소를 설정합니다. | | `collisionPadding` | `number,object` | `0` | 충돌 경계와의 패딩을 설정합니다. | | `positionMethod` | `absolute,fixed` | `absolute` | 메뉴의 CSS 위치 지정 방법을 설정합니다. | | `sticky` | `partial,always` | `partial` | 앵커 요소에 대한 메뉴의 고정 동작을 설정합니다. | | `trackAnchor` | `boolean` | `true` | 앵커 요소의 움직임을 추적할지 여부를 설정합니다. | ### Menu.Trigger Menu를 트리거하는 컴포넌트입니다. | prop | type | default | description | | ---------- | ----------------------- | ------- | ------------------------------------------------- | | `disabled` | `boolean` | `-` | 트리거를 비활성화할지 여부를 설정합니다. Root의 disabled 상태를 상속받습니다. | | `render` | `ReactElement,function` | `-` | 커스텀 렌더링을 위한 요소나 함수를 설정합니다. | ### Menu.Portal Menu 콘텐츠를 DOM 트리의 다른 위치로 렌더링하는 컴포넌트입니다. | prop | type | default | description | | ------------- | ------------------ | --------------- | -------------------------------------- | | `container` | `Element,function` | `document.body` | 포털이 렌더링될 컨테이너 요소를 설정합니다. | | `keepMounted` | `boolean` | `false` | 닫힌 상태에서도 DOM에 마운트된 상태를 유지할지 여부를 설정합니다. | ### Menu.Content Menu의 실제 콘텐츠를 포함하는 컴포넌트입니다. 내장된 Positioner, Popup을 포함하며, 자동으로 위치가 조정됩니다. | prop | type | default | description | | ------------------- | --------------- | ------- | ------------------------------- | | `className` | `string` | `-` | 콘텐츠에 적용할 추가 CSS 클래스입니다. | | `children` | `ReactNode` | `-` | 메뉴 내부에 표시될 콘텐츠입니다. | | `style` | `CSSProperties` | `-` | 콘텐츠에 적용할 인라인 스타일입니다. | | `onPointerEnter` | `function` | `-` | 포인터가 콘텐츠 영역에 진입할 때 호출되는 함수입니다. | | `onPointerLeave` | `function` | `-` | 포인터가 콘텐츠 영역에서 벗어날 때 호출되는 함수입니다. | | `onEscapeKeyDown` | `function` | `-` | ESC 키를 눌렀을 때 호출되는 함수입니다. | | `onInteractOutside` | `function` | `-` | 메뉴 외부에서 상호작용할 때 호출되는 함수입니다. | ### Menu.Item 개별 메뉴 아이템 컴포넌트입니다. | prop | type | default | description | | -------------- | ----------------------- | ------- | ------------------------------------------------------- | | `disabled` | `boolean` | `false` | 개별 메뉴 아이템을 비활성화할지 여부를 설정합니다. Root의 disabled 상태를 상속받습니다. | | `closeOnClick` | `boolean` | `true` | 클릭 시 메뉴를 닫을지 여부를 설정합니다. | | `render` | `ReactElement,function` | `-` | 커스텀 렌더링을 위한 요소나 함수를 설정합니다. | | `className` | `string` | `-` | 아이템에 적용할 추가 CSS 클래스입니다. | ### Menu.Separator 메뉴 아이템들 사이의 구분선을 표시하는 컴포넌트입니다. | prop | type | default | description | | ----------- | -------- | ------- | ----------------------- | | `className` | `string` | `-` | 구분선에 적용할 추가 CSS 클래스입니다. | ### Menu.Group 메뉴 아이템들을 그룹화하는 컨테이너 컴포넌트입니다. | prop | type | default | description | | ----------- | ----------- | ------- | ---------------------- | | `className` | `string` | `-` | 그룹에 적용할 추가 CSS 클래스입니다. | | `children` | `ReactNode` | `-` | 그룹 내부에 포함될 콘텐츠입니다. | ### Menu.GroupLabel 메뉴 그룹의 라벨을 표시하는 컴포넌트입니다. | prop | type | default | description | | ----------- | ----------- | ------- | ------------------------- | | `className` | `string` | `-` | 그룹 라벨에 적용할 추가 CSS 클래스입니다. | | `children` | `ReactNode` | `-` | 그룹 라벨 텍스트입니다. | ### Menu.SubmenuRoot 서브메뉴의 루트 컨테이너 컴포넌트입니다. | prop | type | default | description | | ------------------ | ----------------------- | ------- | -------------------------------------------------- | | `open` | `boolean` | `-` | 서브메뉴의 열림 상태를 제어합니다 (제어 모드). | | `defaultOpen` | `boolean` | `false` | 서브메뉴의 초기 열림 상태를 설정합니다. | | `onOpenChange` | `function` | `-` | 서브메뉴의 열림 상태가 변경될 때 호출되는 콜백 함수입니다. | | `openOnHover` | `boolean` | `true` | 호버 시 서브메뉴를 열지 여부를 설정합니다. | | `delay` | `number` | `0` | 서브메뉴가 열리기 전 지연 시간을 밀리초 단위로 설정합니다. | | `closeDelay` | `number` | `0` | 서브메뉴가 닫히기 전 지연 시간을 밀리초 단위로 설정합니다. | | `closeParentOnEsc` | `boolean` | `false` | ESC 키를 눌렀을 때 부모 메뉴도 함께 닫을지 여부를 설정합니다. | | `disabled` | `boolean` | `false` | 서브메뉴를 비활성화할지 여부를 설정합니다. Root의 disabled 상태를 상속받습니다. | | `side` | `top,right,bottom,left` | `right` | 서브메뉴가 표시될 위치를 설정합니다. | | `align` | `start,center,end` | `start` | 서브메뉴의 정렬을 설정합니다. | | `sideOffset` | `number` | `0` | 트리거와 서브메뉴 사이의 거리를 설정합니다. | | `alignOffset` | `number` | `0` | 정렬 축에서의 오프셋을 설정합니다. | ### Menu.SubmenuContent 서브메뉴의 실제 콘텐츠를 포함하는 컴포넌트입니다. finalFocus가 자동으로 설정되어 서브메뉴가 닫힐 때 트리거로 포커스가 돌아갑니다. | prop | type | default | description | | ----------- | --------------- | ------- | ---------------------------- | | `className` | `string` | `-` | 서브메뉴 콘텐츠에 적용할 추가 CSS 클래스입니다. | | `children` | `ReactNode` | `-` | 서브메뉴 내부에 표시될 콘텐츠입니다. | | `style` | `CSSProperties` | `-` | 서브메뉴 콘텐츠에 적용할 인라인 스타일입니다. | ### Menu.SubmenuTriggerItem 서브메뉴를 트리거하는 메뉴 아이템 컴포넌트입니다. ChevronRightOutlineIcon이 자동으로 추가됩니다. | prop | type | default | description | | ----------- | ----------- | ------- | ----------------------------------------------------------------- | | `disabled` | `boolean` | `false` | 서브메뉴 트리거 아이템을 비활성화할지 여부를 설정합니다. SubmenuRoot의 disabled 상태를 상속받습니다. | | `className` | `string` | `-` | 서브메뉴 트리거 아이템에 적용할 추가 CSS 클래스입니다. | | `children` | `ReactNode` | `-` | 서브메뉴 트리거 아이템의 콘텐츠입니다. ChevronRightOutlineIcon이 자동으로 추가됩니다. | ### Menu.CheckboxItem 체크박스 형태의 메뉴 아이템 컴포넌트입니다. | prop | type | default | description | | ----------------- | ---------- | ------- | ------------------------------------------------------ | | `checked` | `boolean` | `false` | 체크박스 아이템의 체크 상태를 설정합니다. | | `defaultChecked` | `boolean` | `false` | 체크박스 아이템의 초기 체크 상태를 설정합니다. | | `onCheckedChange` | `function` | `-` | 체크 상태가 변경될 때 호출되는 콜백 함수입니다. | | `disabled` | `boolean` | `false` | 체크박스 아이템을 비활성화할지 여부를 설정합니다. Root의 disabled 상태를 상속받습니다. | | `closeOnClick` | `boolean` | `false` | 클릭 시 메뉴를 닫을지 여부를 설정합니다. | | `className` | `string` | `-` | 체크박스 아이템에 적용할 추가 CSS 클래스입니다. | ### Menu.RadioGroup 라디오 그룹 메뉴 컴포넌트입니다. | prop | type | default | description | | --------------- | ---------- | ------- | --------------------------- | | `value` | `string` | `-` | 선택된 라디오 아이템의 값을 설정합니다. | | `defaultValue` | `string` | `-` | 초기 선택된 라디오 아이템의 값을 설정합니다. | | `onValueChange` | `function` | `-` | 선택된 값이 변경될 때 호출되는 콜백 함수입니다. | ### Menu.RadioItem 라디오 아이템 메뉴 컴포넌트입니다. | prop | type | default | description | | -------------- | --------- | ------- | ----------------------------------------------------- | | `value` | `string` | `-` | 라디오 아이템의 값을 설정합니다. | | `disabled` | `boolean` | `false` | 라디오 아이템을 비활성화할지 여부를 설정합니다. Root의 disabled 상태를 상속받습니다. | | `closeOnClick` | `boolean` | `true` | 클릭 시 메뉴를 닫을지 여부를 설정합니다. | | `className` | `string` | `-` | 라디오 아이템에 적용할 추가 CSS 클래스입니다. | # MultiSelect URL: /docs/components/multi-select Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/multi-select.mdx MultiSelect는 사용자가 여러 옵션 중에서 다중 선택할 수 있는 드롭다운 컴포넌트입니다. 선택된 값들은 배지 형태로 표시되며, 태그 선택, 필터링, 카테고리 선택 등에 사용됩니다. *** title: 'MultiSelect' site\_name: 'MultiSelect - Vapor Core' description: 'MultiSelect는 사용자가 여러 옵션 중에서 다중 선택할 수 있는 드롭다운 컴포넌트입니다. 선택된 값들은 배지 형태로 표시되며, 태그 선택, 필터링, 카테고리 선택 등에 사용됩니다.' ----------------------------------------------------------------------------------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/multi-select/default-multi-select.tsx", "codeblock": true } ``` ## Property *** ### Size MultiSelect의 크기는 sm, md, lg, xl 로 제공합니다. 크기에 따라 선택된 값들의 배지 크기도 자동으로 조정됩니다. ```json doc-gen:file { "file": "./src/components/demo/examples/multi-select/multi-select-size.tsx", "codeblock": true } ``` ### Controlled State MultiSelect의 선택 상태를 외부에서 제어할 수 있습니다. 값은 배열 형태로 관리됩니다. ```json doc-gen:file { "file": "./src/components/demo/examples/multi-select/multi-select-controlled.tsx", "codeblock": true } ``` ### States MultiSelect의 다양한 상태(비활성화, 읽기 전용, 오류)를 설정할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/multi-select/multi-select-states.tsx", "codeblock": true } ``` ## Examples *** ### Items Configuration MultiSelect는 배열 형태와 객체 형태의 아이템 데이터를 모두 지원합니다. items prop을 사용하면 자동으로 값이 포맷팅되어 배지로 표시됩니다. ```json doc-gen:file { "file": "./src/components/demo/examples/multi-select/multi-select-items.tsx", "codeblock": true } ``` ### Grouping Options 관련된 옵션들을 그룹으로 묶어 구조화할 수 있습니다. Group과 GroupLabel, Separator를 사용하여 명확한 구조를 만들 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/multi-select/multi-select-grouping.tsx", "codeblock": true } ``` ### Custom Value Display MultiSelect.Value에 함수형 children을 제공하여 선택된 값들의 표시 방법을 커스터마이징할 수 있습니다. 기본적으로는 배지 형태로 표시되지만, 문자열이나 커스텀 컴포넌트로 변경할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/multi-select/multi-select-custom-value.tsx", "codeblock": true } ``` ## Props Table *** ### MultiSelect.Root MultiSelect의 루트 컨테이너로, 전체 MultiSelect 컴포넌트의 상태와 동작을 관리합니다. | prop | type | default | description | | --------------- | -------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------- | | `items` | `Array<{label: string, value: string}>,Record` | `null` | MultiSelect의 옵션 아이템들을 정의합니다. 배열 형태(label, value 속성을 가진 객체) 또는 객체 형태(키-값 쌍)로 제공할 수 있습니다. | | `placeholder` | `React.ReactNode` | `null` | 값이 선택되지 않았을 때 표시할 플레이스홀더 텍스트입니다. | | `size` | `'sm','md','lg','xl'` | `'md'` | MultiSelect의 크기를 설정합니다. 선택된 값들이 배지 형태로 표시될 때 크기도 함께 조정됩니다. | | `invalid` | `boolean` | `false` | MultiSelect가 유효하지 않은 상태임을 나타냅니다. true일 때 오류 스타일이 적용됩니다. | | `value` | `unknown[]` | `[]` | MultiSelect의 현재 선택된 값들의 배열입니다. 제어 컴포넌트로 사용할 때 필요합니다. | | `defaultValue` | `unknown[]` | `[]` | MultiSelect의 초기 선택 값들의 배열입니다. 비제어 컴포넌트로 사용할 때 설정합니다. | | `onValueChange` | `(value: unknown[], event?: Event) => void` | `null` | 선택된 값들이 변경될 때 호출되는 콜백 함수입니다. | | `disabled` | `boolean` | `false` | MultiSelect를 비활성화 상태로 만듭니다. | | `readOnly` | `boolean` | `false` | MultiSelect를 읽기 전용 상태로 만듭니다. 값을 변경할 수 없지만 포커스는 가능합니다. | | `open` | `boolean` | `false` | MultiSelect 드롭다운의 열림/닫힘 상태를 제어합니다. | | `defaultOpen` | `boolean` | `false` | MultiSelect 드롭다운의 초기 열림 상태를 설정합니다. | | `onOpenChange` | `(open: boolean, event?: Event) => void` | `null` | 드롭다운 열림 상태가 변경될 때 호출되는 콜백 함수입니다. | ### MultiSelect.Trigger MultiSelect 드롭다운을 여는 트리거 요소입니다. | prop | type | default | description | | -------------- | -------------------- | -------- | ----------------------------------- | | `render` | `React.ReactElement` | `button` | 트리거 요소를 렌더링할 때 사용할 커스텀 렌더링 prop입니다. | | `className` | `string` | `null` | 트리거 요소에 적용할 CSS 클래스명입니다. | | `nativeButton` | `boolean` | `true` | 네이티브 button 요소의 동작을 사용할지 여부를 설정합니다. | ### MultiSelect.Value 선택된 값들을 표시하는 컴포넌트입니다. 기본적으로 배지 형태로 표시되며, 함수형 children을 통해 커스텀 값 표시가 가능합니다. | prop | type | default | description | | ----------- | ------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- | | `children` | `React.ReactNode,(value: unknown[]) => React.ReactNode` | `null` | 선택된 값들을 표시하는 children입니다. 함수형 children을 사용하면 선택된 값들의 배열을 받아 커스텀 표시를 구현할 수 있습니다. 기본적으로 선택된 값들은 Badge 컴포넌트로 표시됩니다. | | `render` | `React.ReactElement` | `span` | 값 요소를 렌더링할 때 사용할 커스텀 렌더링 prop입니다. | | `className` | `string` | `null` | 값 요소에 적용할 CSS 클래스명입니다. | ### MultiSelect.Placeholder 값이 선택되지 않았을 때 표시되는 플레이스홀더 컴포넌트입니다. | prop | type | default | description | | ----------- | -------------------- | ------- | -------------------------------------- | | `render` | `React.ReactElement` | `span` | 플레이스홀더 요소를 렌더링할 때 사용할 커스텀 렌더링 prop입니다. | | `className` | `string` | `null` | 플레이스홀더 요소에 적용할 CSS 클래스명입니다. | ### MultiSelect.TriggerIcon 트리거 버튼의 드롭다운 아이콘을 표시하는 컴포넌트입니다. | prop | type | default | description | | ----------- | -------------------- | ------------------------ | ---------------------------------------------------- | | `children` | `React.ReactNode` | `ChevronDownOutlineIcon` | 트리거 아이콘으로 표시할 요소입니다. 기본값은 ChevronDownOutlineIcon입니다. | | `render` | `React.ReactElement` | `div` | 트리거 아이콘 요소를 렌더링할 때 사용할 커스텀 렌더링 prop입니다. | | `className` | `string` | `null` | 트리거 아이콘 요소에 적용할 CSS 클래스명입니다. | ### MultiSelect.Portal MultiSelect 드롭다운을 DOM의 다른 위치에 렌더링하는 포털 컴포넌트입니다. | prop | type | default | description | | ----------- | ------------------------------- | --------------- | -------------------- | | `container` | `HTMLElement,() => HTMLElement` | `document.body` | 포털이 렌더링될 컨테이너 요소입니다. | ### MultiSelect.Positioner MultiSelect 드롭다운의 위치를 설정하는 컴포넌트입니다. | prop | type | default | description | | ---------------------- | ------------------------------- | ---------- | ------------------------------- | | `side` | `'top','right','bottom','left'` | `'bottom'` | 드롭다운이 나타날 위치를 설정합니다. | | `align` | `'start','center','end'` | `'start'` | 드롭다운의 정렬 방향을 설정합니다. | | `sideOffset` | `number` | `4` | 트리거와 드롭다운 사이의 거리를 픽셀 단위로 설정합니다. | | `alignOffset` | `number` | `0` | 정렬 축에서의 오프셋을 픽셀 단위로 설정합니다. | | `alignItemWithTrigger` | `boolean` | `false` | 선택된 아이템을 트리거와 정렬할지 여부를 설정합니다. | | `className` | `string` | `null` | 포지셔너 요소에 적용할 CSS 클래스명입니다. | ### MultiSelect.Popup MultiSelect의 실제 드롭다운 팝업 영역입니다. | prop | type | default | description | | ----------- | -------------------- | ------- | ---------------------------------- | | `render` | `React.ReactElement` | `div` | 팝업 요소를 렌더링할 때 사용할 커스텀 렌더링 prop입니다. | | `className` | `string` | `null` | 팝업 요소에 적용할 CSS 클래스명입니다. | ### MultiSelect.Content MultiSelect의 드롭다운 콘텐츠를 담는 컨테이너입니다. Portal과 Positioner를 조합하여 구성됩니다. | prop | type | default | description | | ----------------- | ---------------------------- | ------- | ----------------------------------- | | `portalProps` | `MultiSelectPortalProps` | `null` | Portal 컴포넌트에 전달할 props입니다. | | `positionerProps` | `MultiSelectPositionerProps` | `null` | Positioner 컴포넌트에 전달할 props입니다. | | `render` | `React.ReactElement` | `div` | 콘텐츠 요소를 렌더링할 때 사용할 커스텀 렌더링 prop입니다. | | `className` | `string` | `null` | 콘텐츠 요소에 적용할 CSS 클래스명입니다. | ### MultiSelect.Item 개별 선택 옵션을 나타내는 컴포넌트입니다. 다중 선택이 가능합니다. | prop | type | default | description | | ----------- | -------------------- | ------- | ----------------------------------- | | `value` | `unknown` | `null` | 아이템의 값입니다. | | `render` | `React.ReactElement` | `div` | 아이템 요소를 렌더링할 때 사용할 커스텀 렌더링 prop입니다. | | `className` | `string` | `null` | 아이템 요소에 적용할 CSS 클래스명입니다. | | `children` | `React.ReactNode` | `null` | 아이템 내부에 렌더링할 콘텐츠입니다. | ### MultiSelect.ItemIndicator 선택된 아이템에 표시되는 인디케이터 아이콘 컴포넌트입니다. | prop | type | default | description | | ----------- | -------------------- | -------------------- | ------------------------------------------------------ | | `children` | `React.ReactNode` | `ConfirmOutlineIcon` | 선택된 아이템에 표시할 인디케이터 아이콘입니다. 기본값은 ConfirmOutlineIcon입니다. | | `render` | `React.ReactElement` | `span` | 인디케이터 요소를 렌더링할 때 사용할 커스텀 렌더링 prop입니다. | | `className` | `string` | `null` | 인디케이터 요소에 적용할 CSS 클래스명입니다. | ### MultiSelect.Group 관련된 아이템들을 그룹화하는 컴포넌트입니다. | prop | type | default | description | | ----------- | -------------------- | ------- | ---------------------------------- | | `render` | `React.ReactElement` | `div` | 그룹 요소를 렌더링할 때 사용할 커스텀 렌더링 prop입니다. | | `className` | `string` | `null` | 그룹 요소에 적용할 CSS 클래스명입니다. | | `children` | `React.ReactNode` | `null` | 그룹 내부에 렌더링할 콘텐츠입니다. | ### MultiSelect.GroupLabel 그룹의 라벨을 표시하는 컴포넌트입니다. | prop | type | default | description | | ----------- | -------------------- | ------- | ------------------------------------- | | `render` | `React.ReactElement` | `div` | 그룹 라벨 요소를 렌더링할 때 사용할 커스텀 렌더링 prop입니다. | | `className` | `string` | `null` | 그룹 라벨 요소에 적용할 CSS 클래스명입니다. | | `children` | `React.ReactNode` | `null` | 그룹 라벨에 표시할 텍스트 또는 요소입니다. | ### MultiSelect.Separator 그룹 간의 구분선을 표시하는 컴포넌트입니다. | prop | type | default | description | | ----------- | -------------------- | ------- | ----------------------------------- | | `render` | `React.ReactElement` | `div` | 구분선 요소를 렌더링할 때 사용할 커스텀 렌더링 prop입니다. | | `className` | `string` | `null` | 구분선 요소에 적용할 CSS 클래스명입니다. | # NavigationMenu URL: /docs/components/navigation-menu Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/navigation-menu.mdx 여러 콘텐츠 섹션 간에 전환할 수 있도록 돕는 요소로 클릭 시 페이지가 이동합니다. *** title: 'NavigationMenu' site\_name: 'NavigationMenu - Vapor Core' description: '여러 콘텐츠 섹션 간에 전환할 수 있도록 돕는 요소로 클릭 시 페이지가 이동합니다.' ------------------------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/default-navigation-menu.tsx", "codeblock": true } ``` ## Property *** ### Size NavigationMenu 사이즈는 sm, md, lg, xl로 제공합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/navigation-menu-size.tsx", "codeblock": true } ``` ### Direction NavigationMenu 방향은 horizontal, vertical로 제공합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/navigation-menu-direction.tsx", "codeblock": true } ``` ### Stretch NavigationMenu 항목의 너비를 컨텐츠 너비에 맞춰 늘릴지 여부를 결정하는 속성입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/navigation-menu-stretch.tsx", "codeblock": true } ``` ### Disabled NavigationMenu.Link의 비활성화 상태를 보여주는 예시입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/navigation-menu-disabled.tsx", "codeblock": true } ``` ### Selected NavigationMenu.Link의 선택된 상태를 보여주는 예시입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/navigation-menu-selected.tsx", "codeblock": true } ``` ## Examples *** ### Simple Usage NavigationMenu.LinkItem을 사용한 가장 간단한 형태입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/navigation-menu-simple.tsx", "codeblock": true } ``` ### With Icons Nav에 아이콘을 추가한 예시입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/navigation-menu-with-icon.tsx", "codeblock": true } ``` ### Composition Pattern NavigationMenu.Root, NavigationMenu.List, NavigationMenu.Item, NavigationMenu.Link를 조합한 패턴입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/navigation-menu-composition.tsx", "codeblock": true } ``` ## Props Table *** ### NavigationMenu.Root NavigationMenu의 메인 컨테이너 컴포넌트입니다. 네비게이션의 크기, 모양, 방향 등의 속성을 제공하며, 모든 하위 컴포넌트에서 공통으로 사용할 수 있도록 컨텍스트를 제공합니다. 이 컴포넌트는 `nav` 요소를 기반으로 합니다. | prop | type | default | description | | ------------------- | --------------------- | ------------ | ---------------------------------------------------------------------------- | | `defaultValue` | `string` | `-` | 초기 렌더링 시 활성화되어야 하는 메뉴 아이템의 값입니다. 값 상태를 제어할 필요가 없을 때 사용합니다. | | `value` | `string` | `-` | 활성화할 메뉴 아이템의 제어된 값입니다. onValueChange와 함께 사용해야 합니다. | | `onValueChange` | `function` | `-` | 값이 변경될 때 호출되는 이벤트 핸들러입니다. | | `delayDuration` | `number` | `200` | 마우스가 트리거에 진입한 시점부터 콘텐츠가 열릴 때까지의 지연 시간(밀리초)입니다. | | `skipDelayDuration` | `number` | `300` | 사용자가 다시 지연 없이 다른 트리거에 진입할 수 있는 시간(밀리초)입니다. | | `dir` | `ltr,rtl` | `-` | 해당하는 경우 메뉴의 읽기 방향입니다. 생략하면 DirectionProvider에서 전역적으로 상속받거나 LTR 읽기 모드로 가정합니다. | | `orientation` | `horizontal,vertical` | `horizontal` | 메뉴의 방향입니다. | | `aria-label` | `string` | `-` | 스크린 리더 사용자에게 네비게이션의 목적을 설명하는 접근성 레이블입니다. | | `direction` | `horizontal,vertical` | `horizontal` | 네비게이션 메뉴가 가로 또는 세로 방향으로 배치될지 결정합니다. | | `size` | `sm,md,lg,xl` | `md` | Nav.Link의 높이·타이포그래피 크기 등을 제어합니다. | | `stretch` | `boolean` | `false` | stretch가 true이면 Nav.List와 Nav.Item이 가용 공간을 가득 채웁니다. | | `disabled` | `boolean` | `false` | Nav.Link를 비활성화할지 여부입니다. | | `children` | `ReactNode` | `-` | 네비게이션 메뉴의 자식 컴포넌트들입니다. | ### NavigationMenu.List NavigationMenu의 리스트 컨테이너 컴포넌트입니다. 네비게이션 아이템들을 담는 리스트 역할을 합니다. 이 컴포넌트는 `ul` 요소를 기반으로 합니다. | prop | type | default | description | | ----------- | -------------- | ------- | ------------------------------------ | | `render` | `ReactElement` | `ul` | 네비게이션 리스트를 렌더링할 때 사용할 커스텀 렌더링 요소입니다. | | `className` | `string` | `-` | 리스트(ul)에 추가 클래스를 적용합니다. | | `children` | `ReactNode` | `-` | 리스트에 표시할 콘텐츠입니다. | ### NavigationMenu.Item NavigationMenu의 개별 아이템 컴포넌트입니다. 각각의 네비게이션 링크를 감싸는 리스트 아이템 역할을 합니다. 이 컴포넌트는 `li` 요소를 기반으로 합니다. | prop | type | default | description | | ----------- | -------------- | ------- | ---------------------------------------------------------------- | | `render` | `ReactElement` | `li` | 네비게이션 아이템을 렌더링할 때 사용할 커스텀 렌더링 요소입니다. | | `value` | `string` | `-` | 네비게이션 메뉴가 제어될 때 아이템을 활성 값과 연결하는 고유한 값입니다. 제어되지 않을 때는 자동으로 관리됩니다. | | `className` | `string` | `-` | 리스트 아이템(li)에 추가 클래스를 적용합니다. | | `children` | `ReactNode` | `-` | 아이템에 표시할 콘텐츠입니다. | ### NavigationMenu.Link NavigationMenu의 링크 컴포넌트입니다. 실제 네비게이션 링크를 표시하며, 선택됨 상태와 비활성화 상태를 관리합니다. 이 컴포넌트는 `a` 요소를 기반으로 합니다. | prop | type | default | description | | ---------- | -------------- | ------- | ----------------------------------- | | `render` | `ReactElement` | `a` | 네비게이션 링크를 렌더링할 때 사용할 커스텀 렌더링 요소입니다. | | `selected` | `boolean` | `false` | 현재 페이지와 일치하는 링크를 나타냅니다. | | `disabled` | `boolean` | `false` | 링크를 비활성화합니다. | | `href` | `string` | `-` | 링크 대상 URL입니다. | | `children` | `ReactNode` | `-` | 링크에 표시할 콘텐츠입니다. | ### NavigationMenu.LinkItem NavigationMenu.Item과 NavigationMenu.Link를 하나로 결합한 편의 컴포넌트입니다. 복잡한 구성 없이 기본 네비게이션 링크 기능을 빠르게 사용할 수 있습니다. | prop | type | default | description | | ----------- | -------------- | ------- | --------------------------------------- | | `render` | `ReactElement` | `li` | 네비게이션 링크 아이템을 렌더링할 때 사용할 커스텀 렌더링 요소입니다. | | `selected` | `boolean` | `false` | 현재 페이지와 일치하는 링크를 나타냅니다. | | `disabled` | `boolean` | `false` | 링크를 비활성화합니다. | | `href` | `string` | `-` | 링크 대상 URL입니다. | | `className` | `string` | `-` | Nav.LinkItem에 적용할 추가 클래스를 지정합니다. | | `children` | `ReactNode` | `-` | 링크 아이템에 표시할 콘텐츠입니다. | # Popover URL: /docs/components/popover Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/popover.mdx Popover는 트리거 요소 근처에 부가 정보나 상호작용 콘텐츠를 표시하는 오버레이 컴포넌트입니다. 툴팁, 메뉴, 폼, 상세 정보 등을 표시할 때 사용합니다. *** title: 'Popover' site\_name: 'Popover - Vapor Core' description: 'Popover는 트리거 요소 근처에 부가 정보나 상호작용 콘텐츠를 표시하는 오버레이 컴포넌트입니다. 툴팁, 메뉴, 폼, 상세 정보 등을 표시할 때 사용합니다.' ------------------------------------------------------------------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/popover/default-popover.tsx", "codeblock": true } ``` ## Property *** ### PositionerProps Popover가 나타날 위치와 정렬을 설정할 수 있습니다. 기본값은 'bottom'입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/popover/popover-positioning.tsx", "codeblock": true } ``` ### Controlled State Popover의 열림/닫힘 상태를 외부에서 제어할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/popover/popover-controlled.tsx", "codeblock": true } ``` ### Offset Popover와 트리거 간의 거리를 세밀하게 조정할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/popover/popover-offset.tsx", "codeblock": true } ``` ## Examples *** ### Content Variations 팝오버는 간단한 텍스트부터 복잡한 상호작용 요소까지 다양한 콘텐츠를 담을 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/popover/popover-content.tsx", "codeblock": true } ``` ## Props Table *** ### Popover.Root Popover의 루트 컨테이너로, 전체 Popover 컴포넌트의 상태와 동작을 관리합니다. | prop | type | default | description | | -------------- | --------------------------------------------------------- | ----------- | -------------------------------------------------------------------- | | `open` | `boolean` | `undefined` | 팝오버의 열림 상태를 제어합니다. 이 prop이 제공되면 컴포넌트가 제어 모드로 동작합니다. | | `defaultOpen` | `boolean` | `false` | 팝오버의 초기 열림 상태를 설정합니다. 비제어 모드에서만 사용됩니다. | | `onOpenChange` | `(open: boolean, event?: Event, reason?: string) => void` | `undefined` | 팝오버의 열림 상태가 변경될 때 호출되는 콜백 함수입니다. open 상태, 이벤트, 그리고 변경 이유를 인자로 받습니다. | | `modal` | `boolean,{ trapFocus?: boolean }` | `true` | 팝오버가 모달 형태로 동작할지 여부를 설정합니다. true일 때 배경을 클릭하면 팝오버가 닫히고 포커스 트랩이 적용됩니다. | | `openOnHover` | `boolean` | `false` | 마우스 호버 시 팝오버를 열지 여부를 설정합니다. | | `delay` | `number,{ open?: number; close?: number }` | `0` | 팝오버 열기/닫기 지연 시간을 밀리초 단위로 설정합니다. | ### Popover.Trigger Popover를 여는 트리거 요소입니다. | prop | type | default | description | | ---------- | ------------------------------------------------------------------------------------- | ----------- | --------------------------------------------------------------- | | `render` | `React.ReactElement,(props: TriggerProps, state: TriggerState) => React.ReactElement` | `undefined` | 트리거 요소를 렌더링하는 함수 또는 컴포넌트입니다. 함수로 제공될 경우 props와 state를 인자로 받습니다. | | `disabled` | `boolean` | `false` | 트리거 요소를 비활성화할지 여부를 설정합니다. | ### Popover.Content Popover의 실제 콘텐츠를 담는 컨테이너입니다. Portal과 Positioner를 조합하여 구성됩니다. | prop | type | default | description | | ----------------- | ------------------------ | ----------- | --------------------------------------------------------- | | `portalProps` | `PopoverPortalProps` | `undefined` | Portal 컴포넌트에 전달될 props입니다. 팝오버가 렌더링될 위치와 관련된 설정을 제어합니다. | | `positionerProps` | `PopoverPositionerProps` | `undefined` | Positioner 컴포넌트에 전달될 props입니다. 팝오버의 위치와 정렬에 관한 설정을 제어합니다. | | `className` | `string` | `undefined` | 팝오버 컨텐츠에 적용할 CSS 클래스명입니다. | ### Popover.Portal Popover를 DOM의 다른 위치에 렌더링하는 포털 컴포넌트입니다. | prop | type | default | description | | ------------- | ------------------------------------ | --------------- | -------------------------------------------------------------- | | `container` | `HTMLElement,() => HTMLElement,null` | `document.body` | 팝오버가 렌더링될 컨테이너 요소를 지정합니다. null을 전달하면 포탈을 사용하지 않고 인라인으로 렌더링합니다. | | `keepMounted` | `boolean` | `false` | 팝오버가 닫혀있을 때도 DOM에 마운트된 상태를 유지할지 여부를 설정합니다. | ### Popover.Positioner Popover의 위치를 설정하는 컴포넌트입니다. | prop | type | default | description | | -------------------- | ----------------------------------------------------------------------------------------------- | ---------- | ------------------------------------------------------------- | | `side` | `'top','right','bottom','left'` | `'bottom'` | 팝오버가 표시될 기본 방향을 설정합니다. 공간이 부족할 경우 자동으로 다른 방향으로 조정될 수 있습니다. | | `align` | `'start','center','end'` | `'center'` | 팝오버의 정렬 방향을 설정합니다. side 축에 수직인 축에서의 정렬을 제어합니다. | | `sideOffset` | `number,(side: Side) => number` | `8` | 트리거와 팝오버 사이의 거리(픽셀)를 설정합니다. 함수로 제공하면 방향에 따라 다른 값을 설정할 수 있습니다. | | `alignOffset` | `number,(side: Side) => number` | `0` | 정렬 축에서의 오프셋(픽셀)을 설정합니다. 양수는 end 방향으로, 음수는 start 방향으로 이동합니다. | | `collisionPadding` | `number,{ top?: number; right?: number; bottom?: number; left?: number }` | `8` | 충돌 감지 시 사용할 패딩 값을 설정합니다. 뷰포트 경계에서 이 값만큼 여백을 두고 충돌을 감지합니다. | | `collisionAvoidance` | `boolean,{ boundary?: HTMLElement; rootBoundary?: 'viewport' \| 'document'; padding?: number }` | `true` | 충돌 회피 동작을 설정합니다. false로 설정하면 충돌 감지를 비활성화합니다. | | `arrowPadding` | `number` | `4` | 화살표와 팝오버 모서리 사이의 최소 거리를 픽셀 단위로 설정합니다. | | `sticky` | `boolean,'partial'` | `false` | 팝오버가 트리거를 따라 이동할지 여부를 설정합니다. 'partial'로 설정하면 부분적으로만 따라갑니다. | ### Popover.Popup Popover의 실제 팝업 콘텐츠 영역입니다. | prop | type | default | description | | ----------- | --------------------------------------------------------------------------------- | ----------- | --------------------------- | | `className` | `string` | `undefined` | 팝오버 팝업에 적용할 CSS 클래스명입니다. | | `style` | `CSSProperties` | `undefined` | 팝오버 팝업에 적용할 인라인 스타일입니다. | | `render` | `React.ReactElement,(props: PopupProps, state: PopupState) => React.ReactElement` | `undefined` | 팝업 요소를 렌더링하는 함수 또는 컴포넌트입니다. | ### Popover.Title Popover의 제목을 표시하는 컴포넌트입니다. | prop | type | default | description | | -------- | -------------------------------------------------------------- | ----------- | --------------------------- | | `render` | `React.ReactElement,(props: TitleProps) => React.ReactElement` | `undefined` | 제목 요소를 렌더링하는 함수 또는 컴포넌트입니다. | ### Popover.Description Popover의 설명을 표시하는 컴포넌트입니다. | prop | type | default | description | | -------- | -------------------------------------------------------------------- | ----------- | --------------------------- | | `render` | `React.ReactElement,(props: DescriptionProps) => React.ReactElement` | `undefined` | 설명 요소를 렌더링하는 함수 또는 컴포넌트입니다. | ### Popover.Close Popover를 닫는 버튼 컴포넌트입니다. | prop | type | default | description | | -------- | -------------------------------------------------------------- | ----------- | --------------------------- | | `render` | `React.ReactElement,(props: CloseProps) => React.ReactElement` | `undefined` | 닫기 버튼을 렌더링하는 함수 또는 컴포넌트입니다. | ``` ``` # RadioGroup URL: /docs/components/radio-group Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/radio-group.mdx RadioGroup는 둘 또는 그 이상의 옵션 중 하나만 선택할 수 있도록 돕는 입력 컴포넌트입니다. *** title: 'RadioGroup' site\_name: 'RadioGroup - Vapor Core' description: 'RadioGroup는 둘 또는 그 이상의 옵션 중 하나만 선택할 수 있도록 돕는 입력 컴포넌트입니다.' ----------------------------------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/default-radio-group.tsx", "codeblock": true } ``` ## Property *** ### Size RadioGroup 사이즈는 md, lg로 제공합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/radio-group-size.tsx", "codeblock": true } ``` ### Orientation RadioGroup 방향은 vertical, horizontal로 제공합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/radio-group-direction.tsx", "codeblock": true } ``` ### Disabled 사용자가 상호작용할 수 없는 상태입니다. 액션을 수행하기 위한 특정 조건을 충족하지 않았거나 일시적으로 기능을 제한하려는 상황에서 사용합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/radio-group-disabled.tsx", "codeblock": true } ``` ### Read Only RadioGroup의 읽기 전용 상태입니다. 사용자가 값을 변경할 수 없지만 현재 선택된 상태를 확인할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/radio-readonly.tsx", "codeblock": true } ``` ## Examples *** ### Simple Usage 기본적인 RadioGroup 사용법입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/radio-group-simple.tsx", "codeblock": true } ``` ## Props Table *** ### RadioGroup.Root RadioGroup의 메인 컨테이너 컴포넌트입니다. 라디오 버튼 그룹의 크기, 방향, 상태 등의 속성을 제공하며, 모든 하위 컴포넌트에서 공통으로 사용할 수 있도록 컨텍스트를 제공합니다. | prop | type | default | description | | ---------------- | --------------------- | ------- | ---------------------------------------------------------------------------------- | | `render` | `ReactElement` | `div` | 라디오 그룹을 렌더링할 때 사용할 커스텀 렌더링 요소입니다. | | `defaultValue` | `string` | `-` | 초기 렌더링 시 체크되어야 하는 라디오 아이템의 값입니다. 라디오 아이템의 상태를 제어할 필요가 없을 때 사용합니다. | | `value` | `string` | `-` | 체크할 라디오 아이템의 제어된 값입니다. onValueChange와 함께 사용해야 합니다. | | `onValueChange` | `function` | `-` | 값이 변경될 때 호출되는 이벤트 핸들러입니다. | | `disabled` | `boolean` | `-` | true일 때 사용자가 라디오 아이템과 상호작용하는 것을 방지합니다. | | `name` | `string` | `-` | 그룹의 이름입니다. 소유하는 폼과 함께 name/value 쌍의 일부로 제출됩니다. | | `required` | `boolean` | `-` | true일 때 소유하는 폼이 제출되기 전에 사용자가 라디오 아이템을 체크해야 함을 나타냅니다. | | `orientation` | `horizontal,vertical` | `-` | 컴포넌트의 방향입니다. | | `dir` | `ltr,rtl` | `-` | 라디오 그룹의 읽기 방향입니다. 생략하면 DirectionProvider에서 전역적으로 상속받거나 LTR(왼쪽에서 오른쪽) 읽기 모드로 가정합니다. | | `loop` | `boolean` | `true` | true일 때 키보드 탐색이 마지막 아이템에서 첫 번째 아이템으로, 그 반대로도 순환합니다. | | `size` | `md,lg` | `md` | RadioGroup.Item 간의 간격 및 Control 크기를 조정합니다. | | `invalid` | `boolean` | `false` | 폼 유효성 검증 실패 등의 상태를 나타냅니다. | | `visuallyHidden` | `boolean` | `false` | Item의 레이블을 시각적으로 숨기지만 스크린리더에는 읽히도록 합니다. | ### RadioGroup.Label RadioGroup의 레이블 컴포넌트입니다. 모든 라디오 버튼을 하나로 설명할 수 있는 공통 제목에 해당합니다. | prop | type | default | description | | ---------- | -------------- | ------- | ---------------------------------- | | `render` | `ReactElement` | `label` | 라디오 레이블을 렌더링할 때 사용할 커스텀 렌더링 요소입니다. | | `htmlFor` | `string` | `-` | 레이블이 연결될 Control 요소의 id입니다. | | `children` | `ReactNode` | `-` | 레이블에 표시할 텍스트나 노드입니다. | # Radio URL: /docs/components/radio Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/radio.mdx Radio는 여러 옵션 중 하나만 선택할 수 있는 입력 컴포넌트입니다. 개별 라디오 버튼으로 사용되며 선택 상태를 시각적으로 표현합니다. *** title: 'Radio' site\_name: 'Radio - Vapor Core' description: 'Radio는 여러 옵션 중 하나만 선택할 수 있는 입력 컴포넌트입니다. 개별 라디오 버튼으로 사용되며 선택 상태를 시각적으로 표현합니다.' ------------------------------------------------------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/radio/default-radio.tsx", "codeblock": true } ``` ## Property *** ### Size Radio 버튼의 크기는 `md`와 `lg` 두 가지 크기로 제공합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/radio/radio-size.tsx", "codeblock": true } ``` ### States Radio는 다양한 상태를 지원하여 사용자 인터페이스에서 적절한 피드백을 제공합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/radio/radio-states.tsx", "codeblock": true } ``` ## Props Table *** ### Radio.Root Radio의 루트 컴포넌트로, 실제 라디오 버튼 요소를 렌더링합니다. 개별 라디오 선택 옵션을 제공합니다. | prop | type | default | description | | ----------- | -------------------- | ----------------- | ---------------------------------------------------------------------- | | `value` | `string,number,null` | `null` | 라디오 버튼의 값입니다. RadioGroup 내에서 선택된 값을 식별하는 데 사용됩니다. | | `size` | `"md","lg"` | `"md"` | 라디오 버튼의 크기를 설정합니다. | | `invalid` | `boolean` | `false` | 라디오 버튼이 유효하지 않은 상태인지 여부를 설정합니다. RadioGroup의 invalid 속성에 의해 상속될 수 있습니다. | | `disabled` | `boolean` | `false` | 라디오 버튼을 비활성화할지 여부를 설정합니다. | | `readOnly` | `boolean` | `false` | 라디오 버튼을 읽기 전용으로 설정할지 여부를 결정합니다. | | `required` | `boolean` | `false` | 라디오 버튼이 필수 선택 항목인지 여부를 설정합니다. | | `className` | `string` | `null` | 라디오 버튼 요소에 적용할 CSS 클래스명입니다. | | `render` | `ReactElement` | `button` | 라디오 버튼 요소를 렌더링할 때 사용할 커스텀 렌더링 prop입니다. | | `children` | `React.ReactNode` | `Radio.Indicator` | 라디오 버튼 내부에 렌더링할 자식 요소입니다. 기본적으로 Radio.Indicator가 렌더링됩니다. | ### Radio.Indicator 라디오 버튼의 선택 상태를 시각적으로 표시하는 인디케이터 컴포넌트입니다. | prop | type | default | description | | ----------- | -------------- | ------- | ----------------------------------------- | | `className` | `string` | `null` | 라디오 인디케이터 요소에 적용할 CSS 클래스명입니다. | | `render` | `ReactElement` | `div` | 라디오 인디케이터 요소를 렌더링할 때 사용할 커스텀 렌더링 prop입니다. | # Select URL: /docs/components/select Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/select.mdx Select는 사용자가 여러 옵션 중에서 하나를 선택할 수 있는 드롭다운 컴포넌트입니다. 폼 입력, 설정 선택, 필터링 등에 사용되며, 키보드 내비게이션과 접근성을 완벽하게 지원합니다. *** title: 'Select' site\_name: 'Select - Vapor Core' description: 'Select는 사용자가 여러 옵션 중에서 하나를 선택할 수 있는 드롭다운 컴포넌트입니다. 폼 입력, 설정 선택, 필터링 등에 사용되며, 키보드 내비게이션과 접근성을 완벽하게 지원합니다.' ---------------------------------------------------------------------------------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/select/default-select.tsx", "codeblock": true } ``` ## Property *** ### Size Select의 크기는 sm, md, lg, xl 로 제공합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/select/select-size.tsx", "codeblock": true } ``` ### Positioning Select 드롭다운이 나타날 위치를 설정할 수 있습니다. 기본값은 'bottom'입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/select/select-positioning.tsx", "codeblock": true } ``` ### Controlled State Select의 선택 상태를 외부에서 제어할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/select/select-controlled.tsx", "codeblock": true } ``` ### States Select의 다양한 상태(비활성화, 읽기 전용, 오류)를 설정할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/select/select-states.tsx", "codeblock": true } ``` ## Examples *** ### Items Configuration Select는 배열 형태와 객체 형태의 아이템 데이터를 모두 지원합니다. items prop을 사용하면 자동으로 값이 포맷팅됩니다. ```json doc-gen:file { "file": "./src/components/demo/examples/select/select-items.tsx", "codeblock": true } ``` ### Grouping Options 관련된 옵션들을 그룹으로 묶어 구조화할 수 있습니다. Group과 GroupLabel, Separator를 사용하여 명확한 구조를 만들 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/select/select-grouping.tsx", "codeblock": true } ``` ### Custom Value Display Select.Value에 함수형 children을 제공하여 선택된 값을 커스터마이징할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/select/select-custom-value.tsx", "codeblock": true } ``` ## Props Table *** ### Select.Root Select의 루트 컨테이너로, 전체 Select 컴포넌트의 상태와 동작을 관리합니다. | prop | type | default | description | | --------------- | -------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------- | | `items` | `Array<{label: string, value: string}>,Record` | `null` | Select의 옵션 아이템들을 정의합니다. 배열 형태(label, value 속성을 가진 객체) 또는 객체 형태(키-값 쌍)로 제공할 수 있습니다. | | `placeholder` | `React.ReactNode` | `null` | 값이 선택되지 않았을 때 표시할 플레이스홀더 텍스트입니다. | | `size` | `'sm','md','lg','xl'` | `'md'` | Select의 크기를 설정합니다. | | `invalid` | `boolean` | `false` | Select가 유효하지 않은 상태임을 나타냅니다. true일 때 오류 스타일이 적용됩니다. | | `value` | `unknown` | `null` | Select의 현재 선택된 값입니다. 제어 컴포넌트로 사용할 때 필요합니다. | | `defaultValue` | `unknown` | `null` | Select의 초기 선택 값입니다. 비제어 컴포넌트로 사용할 때 설정합니다. | | `onValueChange` | `(value: unknown, event?: Event) => void` | `null` | 값이 변경될 때 호출되는 콜백 함수입니다. | | `disabled` | `boolean` | `false` | Select를 비활성화 상태로 만듭니다. | | `readOnly` | `boolean` | `false` | Select를 읽기 전용 상태로 만듭니다. 값을 변경할 수 없지만 포커스는 가능합니다. | | `open` | `boolean` | `false` | Select 드롭다운의 열림/닫힘 상태를 제어합니다. | | `defaultOpen` | `boolean` | `false` | Select 드롭다운의 초기 열림 상태를 설정합니다. | | `onOpenChange` | `(open: boolean, event?: Event) => void` | `null` | 드롭다운 열림 상태가 변경될 때 호출되는 콜백 함수입니다. | ### Select.Trigger Select 드롭다운을 여는 트리거 요소입니다. | prop | type | default | description | | -------------- | -------------------- | -------- | ----------------------------------- | | `render` | `React.ReactElement` | `button` | 트리거 요소를 렌더링할 때 사용할 커스텀 렌더링 prop입니다. | | `className` | `string` | `null` | 트리거 요소에 적용할 CSS 클래스명입니다. | | `nativeButton` | `boolean` | `true` | 네이티브 button 요소의 동작을 사용할지 여부를 설정합니다. | ### Select.Value 선택된 값을 표시하는 컴포넌트입니다. 함수형 children을 통해 커스텀 값 표시가 가능합니다. | prop | type | default | description | | ----------- | ----------------------------------------------------- | ------- | ------------------------------------------------------------------------- | | `children` | `React.ReactNode,(value: unknown) => React.ReactNode` | `null` | 선택된 값을 표시하는 children입니다. 함수형 children을 사용하면 선택된 값을 받아 커스텀 표시를 구현할 수 있습니다. | | `render` | `React.ReactElement` | `span` | 값 요소를 렌더링할 때 사용할 커스텀 렌더링 prop입니다. | | `className` | `string` | `null` | 값 요소에 적용할 CSS 클래스명입니다. | ### Select.Placeholder 값이 선택되지 않았을 때 표시되는 플레이스홀더 컴포넌트입니다. | prop | type | default | description | | ----------- | -------------------- | ------- | -------------------------------------- | | `render` | `React.ReactElement` | `span` | 플레이스홀더 요소를 렌더링할 때 사용할 커스텀 렌더링 prop입니다. | | `className` | `string` | `null` | 플레이스홀더 요소에 적용할 CSS 클래스명입니다. | ### Select.TriggerIcon 트리거 버튼의 드롭다운 아이콘을 표시하는 컴포넌트입니다. | prop | type | default | description | | ----------- | -------------------- | ------------------------ | ---------------------------------------------------- | | `children` | `React.ReactNode` | `ChevronDownOutlineIcon` | 트리거 아이콘으로 표시할 요소입니다. 기본값은 ChevronDownOutlineIcon입니다. | | `render` | `React.ReactElement` | `div` | 트리거 아이콘 요소를 렌더링할 때 사용할 커스텀 렌더링 prop입니다. | | `className` | `string` | `null` | 트리거 아이콘 요소에 적용할 CSS 클래스명입니다. | ### Select.Portal Select 드롭다운을 DOM의 다른 위치에 렌더링하는 포털 컴포넌트입니다. | prop | type | default | description | | ----------- | ------------------------------- | --------------- | -------------------- | | `container` | `HTMLElement,() => HTMLElement` | `document.body` | 포털이 렌더링될 컨테이너 요소입니다. | ### Select.Positioner Select 드롭다운의 위치를 설정하는 컴포넌트입니다. | prop | type | default | description | | ---------------------- | ------------------------------- | ---------- | ------------------------------- | | `side` | `'top','right','bottom','left'` | `'bottom'` | 드롭다운이 나타날 위치를 설정합니다. | | `align` | `'start','center','end'` | `'start'` | 드롭다운의 정렬 방향을 설정합니다. | | `sideOffset` | `number` | `4` | 트리거와 드롭다운 사이의 거리를 픽셀 단위로 설정합니다. | | `alignOffset` | `number` | `0` | 정렬 축에서의 오프셋을 픽셀 단위로 설정합니다. | | `alignItemWithTrigger` | `boolean` | `false` | 선택된 아이템을 트리거와 정렬할지 여부를 설정합니다. | | `className` | `string` | `null` | 포지셔너 요소에 적용할 CSS 클래스명입니다. | ### Select.Popup Select의 실제 드롭다운 팝업 영역입니다. | prop | type | default | description | | ----------- | -------------------- | ------- | ---------------------------------- | | `render` | `React.ReactElement` | `div` | 팝업 요소를 렌더링할 때 사용할 커스텀 렌더링 prop입니다. | | `className` | `string` | `null` | 팝업 요소에 적용할 CSS 클래스명입니다. | ### Select.Content Select의 드롭다운 콘텐츠를 담는 컨테이너입니다. Portal과 Positioner를 조합하여 구성됩니다. | prop | type | default | description | | ----------------- | ----------------------- | ------- | ----------------------------------- | | `portalProps` | `SelectPortalProps` | `null` | Portal 컴포넌트에 전달할 props입니다. | | `positionerProps` | `SelectPositionerProps` | `null` | Positioner 컴포넌트에 전달할 props입니다. | | `render` | `React.ReactElement` | `div` | 콘텐츠 요소를 렌더링할 때 사용할 커스텀 렌더링 prop입니다. | | `className` | `string` | `null` | 콘텐츠 요소에 적용할 CSS 클래스명입니다. | ### Select.Item 개별 선택 옵션을 나타내는 컴포넌트입니다. | prop | type | default | description | | ----------- | -------------------- | ------- | ----------------------------------- | | `value` | `unknown` | `null` | 아이템의 값입니다. | | `render` | `React.ReactElement` | `div` | 아이템 요소를 렌더링할 때 사용할 커스텀 렌더링 prop입니다. | | `className` | `string` | `null` | 아이템 요소에 적용할 CSS 클래스명입니다. | | `children` | `React.ReactNode` | `null` | 아이템 내부에 렌더링할 콘텐츠입니다. | ### Select.ItemIndicator 선택된 아이템에 표시되는 인디케이터 아이콘 컴포넌트입니다. | prop | type | default | description | | ----------- | -------------------- | -------------------- | ------------------------------------------------------ | | `children` | `React.ReactNode` | `ConfirmOutlineIcon` | 선택된 아이템에 표시할 인디케이터 아이콘입니다. 기본값은 ConfirmOutlineIcon입니다. | | `render` | `React.ReactElement` | `span` | 인디케이터 요소를 렌더링할 때 사용할 커스텀 렌더링 prop입니다. | | `className` | `string` | `null` | 인디케이터 요소에 적용할 CSS 클래스명입니다. | ### Select.Group 관련된 아이템들을 그룹화하는 컴포넌트입니다. | prop | type | default | description | | ----------- | -------------------- | ------- | ---------------------------------- | | `render` | `React.ReactElement` | `div` | 그룹 요소를 렌더링할 때 사용할 커스텀 렌더링 prop입니다. | | `className` | `string` | `null` | 그룹 요소에 적용할 CSS 클래스명입니다. | | `children` | `React.ReactNode` | `null` | 그룹 내부에 렌더링할 콘텐츠입니다. | ### Select.GroupLabel 그룹의 라벨을 표시하는 컴포넌트입니다. | prop | type | default | description | | ----------- | -------------------- | ------- | ------------------------------------- | | `render` | `React.ReactElement` | `div` | 그룹 라벨 요소를 렌더링할 때 사용할 커스텀 렌더링 prop입니다. | | `className` | `string` | `null` | 그룹 라벨 요소에 적용할 CSS 클래스명입니다. | | `children` | `React.ReactNode` | `null` | 그룹 라벨에 표시할 텍스트 또는 요소입니다. | ### Select.Separator 그룹 간의 구분선을 표시하는 컴포넌트입니다. | prop | type | default | description | | ----------- | -------------------- | ------- | ----------------------------------- | | `render` | `React.ReactElement` | `div` | 구분선 요소를 렌더링할 때 사용할 커스텀 렌더링 prop입니다. | | `className` | `string` | `null` | 구분선 요소에 적용할 CSS 클래스명입니다. | # Sheet URL: /docs/components/sheet Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/sheet.mdx Sheet는 화면의 가장자리에서 슬라이드되어 나타나는 오버레이 컴포넌트입니다. 사이드바, 메뉴, 폼, 상세 정보 등을 표시할 때 사용합니다. *** title: 'Sheet' site\_name: 'Sheet - Vapor Core' description: 'Sheet는 화면의 가장자리에서 슬라이드되어 나타나는 오버레이 컴포넌트입니다. 사이드바, 메뉴, 폼, 상세 정보 등을 표시할 때 사용합니다.' --------------------------------------------------------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/sheet/default-sheet.tsx", "codeblock": true } ``` ## Property *** ### Side Sheet가 나타날 위치를 설정할 수 있습니다. 기본값은 'right'입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/sheet/sheet-side.tsx", "codeblock": true } ``` ### Controlled State Sheet의 열림/닫힘 상태를 외부에서 제어할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/sheet/sheet-controlled.tsx", "codeblock": true } ``` ### Keep Mounted Sheet가 닫혀도 DOM에서 제거되지 않고 유지되도록 설정할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/sheet/sheet-keep-mounted.tsx", "codeblock": true } ``` ## Examples *** ### Basic Usage Sheet는 다양한 용도로 활용할 수 있는 기본적인 오버레이 컴포넌트입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/sheet/sheet-simple.tsx", "codeblock": true } ``` ## Props Table *** ### Sheet.Root Sheet의 루트 컨테이너로, 전체 Sheet 컴포넌트의 상태와 동작을 관리합니다. | prop | type | default | description | | -------------- | ------------------------- | ------- | --------------------------------------- | | `open` | `boolean` | `null` | Sheet의 열림 상태를 제어합니다. 제어된 상태에서 사용됩니다. | | `defaultOpen` | `boolean` | `false` | Sheet의 초기 열림 상태입니다. 제어되지 않은 상태에서 사용됩니다. | | `onOpenChange` | `(open: boolean) => void` | `null` | Sheet의 열림 상태가 변경될 때 호출되는 콜백 함수입니다. | | `children` | `React.ReactNode` | `null` | Sheet 내부에 렌더링할 자식 요소들입니다. | ### Sheet.Trigger Sheet를 여는 트리거 요소입니다. | prop | type | default | description | | ----------- | -------------------- | -------- | ----------------------------------- | | `render` | `React.ReactElement` | `button` | 트리거 요소를 렌더링할 때 사용할 커스텀 렌더링 prop입니다. | | `className` | `string` | `null` | 트리거 요소에 적용할 CSS 클래스명입니다. | | `children` | `React.ReactNode` | `null` | 트리거 버튼 내부에 표시할 내용입니다. | ### Sheet.Content Sheet의 실제 콘텐츠를 담는 컨테이너입니다. Portal, Overlay, Positioner를 조합하여 구성됩니다. | prop | type | default | description | | ----------------- | ---------------------- | ------- | ------------------------------------------------------ | | `portalProps` | `SheetPortalProps` | `{}` | Portal 컴포넌트에 전달할 props입니다. keepMounted 옵션을 포함할 수 있습니다. | | `overlayProps` | `SheetOverlayProps` | `{}` | Overlay 컴포넌트에 전달할 props입니다. | | `positionerProps` | `SheetPositionerProps` | `{}` | Positioner 컴포넌트에 전달할 props입니다. side 옵션을 포함할 수 있습니다. | | `className` | `string` | `null` | Sheet 콘텐츠 요소에 적용할 CSS 클래스명입니다. | | `children` | `React.ReactNode` | `null` | Sheet 내부에 렌더링할 콘텐츠입니다. | ### Sheet.Portal Sheet를 DOM의 다른 위치에 렌더링하는 포털 컴포넌트입니다. | prop | type | default | description | | ------------- | ------------------------------- | --------------- | ------------------------------------- | | `keepMounted` | `boolean` | `false` | Sheet이 닫혀도 DOM에서 제거되지 않고 유지되도록 설정합니다. | | `container` | `HTMLElement,() => HTMLElement` | `document.body` | Portal이 렌더링될 컨테이너 요소를 지정합니다. | ### Sheet.Overlay Sheet 뒤의 배경 오버레이를 담당합니다. | prop | type | default | description | | ----------- | -------------------- | ------- | ------------------------------------ | | `render` | `React.ReactElement` | `div` | 오버레이 요소를 렌더링할 때 사용할 커스텀 렌더링 prop입니다. | | `className` | `string` | `null` | 오버레이 요소에 적용할 CSS 클래스명입니다. | ### Sheet.Popup Sheet의 실제 팝업 콘텐츠 영역입니다. | prop | type | default | description | | ----------- | -------------------- | ------- | ---------------------------------- | | `render` | `React.ReactElement` | `div` | 팝업 요소를 렌더링할 때 사용할 커스텀 렌더링 prop입니다. | | `className` | `string` | `null` | 팝업 요소에 적용할 CSS 클래스명입니다. | | `children` | `React.ReactNode` | `null` | 팝업 내부에 렌더링할 콘텐츠입니다. | ### Sheet.Positioner Sheet의 위치를 설정하는 컴포넌트입니다. | prop | type | default | description | | ----------- | ------------------------------- | --------- | ------------------------------------ | | `side` | `"top","right","bottom","left"` | `"right"` | Sheet가 나타날 화면의 위치를 설정합니다. | | `render` | `React.ReactElement` | `div` | 포지셔너 요소를 렌더링할 때 사용할 커스텀 렌더링 prop입니다. | | `className` | `string` | `null` | 포지셔너 요소에 적용할 CSS 클래스명입니다. | ### Sheet.Header Sheet의 헤더 영역을 담당합니다. | prop | type | default | description | | ----------- | -------------------- | ------- | ------------------------------------------------ | | `render` | `React.ReactElement` | `div` | 헤더 요소를 렌더링할 때 사용할 커스텀 렌더링 prop입니다. | | `className` | `string` | `null` | 헤더 요소에 적용할 CSS 클래스명입니다. | | `children` | `React.ReactNode` | `null` | 헤더 내부에 렌더링할 내용입니다. 일반적으로 Title과 Close 버튼을 포함합니다. | ### Sheet.Body Sheet의 본문 영역을 담당합니다. | prop | type | default | description | | ----------- | -------------------- | ------- | ---------------------------------- | | `render` | `React.ReactElement` | `div` | 본문 요소를 렌더링할 때 사용할 커스텀 렌더링 prop입니다. | | `className` | `string` | `null` | 본문 요소에 적용할 CSS 클래스명입니다. | | `children` | `React.ReactNode` | `null` | 본문 내부에 렌더링할 주요 콘텐츠입니다. | ### Sheet.Footer Sheet의 푸터 영역을 담당합니다. | prop | type | default | description | | ----------- | -------------------- | ------- | --------------------------------------- | | `render` | `React.ReactElement` | `div` | 푸터 요소를 렌더링할 때 사용할 커스텀 렌더링 prop입니다. | | `className` | `string` | `null` | 푸터 요소에 적용할 CSS 클래스명입니다. | | `children` | `React.ReactNode` | `null` | 푸터 내부에 렌더링할 내용입니다. 일반적으로 액션 버튼들을 포함합니다. | ### Sheet.Title Sheet의 제목을 표시하는 컴포넌트입니다. | prop | type | default | description | | ----------- | -------------------- | ------- | ---------------------------------- | | `render` | `React.ReactElement` | `h2` | 제목 요소를 렌더링할 때 사용할 커스텀 렌더링 prop입니다. | | `className` | `string` | `null` | 제목 요소에 적용할 CSS 클래스명입니다. | | `children` | `React.ReactNode` | `null` | Sheet의 제목 텍스트입니다. | ### Sheet.Description Sheet의 설명을 표시하는 컴포넌트입니다. | prop | type | default | description | | ----------- | -------------------- | ------- | ---------------------------------- | | `render` | `React.ReactElement` | `p` | 설명 요소를 렌더링할 때 사용할 커스텀 렌더링 prop입니다. | | `className` | `string` | `null` | 설명 요소에 적용할 CSS 클래스명입니다. | | `children` | `React.ReactNode` | `null` | Sheet의 설명 텍스트입니다. | ### Sheet.Close Sheet를 닫는 버튼 컴포넌트입니다. | prop | type | default | description | | ----------- | -------------------- | -------- | ------------------------------------- | | `render` | `React.ReactElement` | `button` | 닫기 버튼 요소를 렌더링할 때 사용할 커스텀 렌더링 prop입니다. | | `className` | `string` | `null` | 닫기 버튼 요소에 적용할 CSS 클래스명입니다. | | `children` | `React.ReactNode` | `null` | 닫기 버튼 내부에 표시할 내용입니다. | # Switch URL: /docs/components/switch Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/switch.mdx Switch는 사용자가 설정을 on/off로 전환할 수 있게 돕는 토글 컴포넌트입니다. *** title: 'Switch' site\_name: 'Switch - Vapor Core' description: 'Switch는 사용자가 설정을 on/off로 전환할 수 있게 돕는 토글 컴포넌트입니다.' --------------------------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/default-switch.tsx", "codeblock": true } ``` ## Property *** ### Size Switch 크기는 sm, md, lg 로 제공합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/switch-size.tsx", "codeblock": true } ``` ### Checked 기능이 활성화된 상태를 의미합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/switch-checked.tsx", "codeblock": true } ``` ### Disabled 사용자가 상호작용할 수 없는 상태입니다. 액션을 수행하기 위한 특정 조건을 충족하지 않았거나 일시적으로 기능을 제한하려는 상황에서 사용합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/switch-disabled.tsx", "codeblock": true } ``` ### Read Only 사용자는 스위치 상태를 변경할 수 없지만, 현재 상태를 확인할 수 있도록 허용하는 상태입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/switch-readonly.tsx", "codeblock": true } ``` ## Examples *** ### States Switch의 다양한 상태를 보여줍니다. ```json doc-gen:file { "file": "./src/components/demo/examples/switch-states.tsx", "codeblock": true } ``` ### Controlled 제어되는 Switch 컴포넌트의 사용 예시입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/switch-controlled.tsx", "codeblock": true } ``` ## Props Table *** ### Switch.Root Switch의 컴포넌트의 상태와 설정을 제공합니다. | prop | type | default | description | | ----------------- | -------------- | -------- | --------------------------------------------------------------- | | `render` | `ReactElement` | `button` | 스위치를 렌더링할 때 사용할 커스텀 렌더링 요소입니다. | | `defaultChecked` | `boolean` | `-` | 초기 렌더링 시 체크되어야 하는지 여부입니다. 스위치의 상태를 제어할 필요가 없을 때 사용합니다. | | `checked` | `boolean` | `-` | 체크된 상태의 제어된 상태입니다. onCheckedChange와 함께 사용해야 합니다. | | `onCheckedChange` | `function` | `-` | 스위치의 체크된 상태가 변경될 때 호출되는 이벤트 핸들러입니다. | | `disabled` | `boolean` | `-` | true일 때 사용자가 스위치와 상호작용하는 것을 방지합니다. | | `required` | `boolean` | `-` | true일 때 소유하는 폼이 제출되기 전에 사용자가 스위치를 체크해야 함을 나타냅니다. | | `name` | `string` | `-` | 스위치의 이름입니다. 소유하는 폼과 함께 name/value 쌍의 일부로 제출됩니다. | | `value` | `string` | `on` | 체크될 때 name과 함께 제출될 값입니다. | | `size` | `sm,md,lg` | `md` | 스위치의 크기를 설정합니다. | | `visuallyHidden` | `boolean` | `false` | 레이블을 시각적으로 숨깁니다. true 설정 시 레이블이 화면에 표시되지 않지만 스크린 리더는 읽을 수 있습니다. | | `readOnly` | `boolean` | `false` | true일 때 스위치가 읽기 전용 상태가 되어 사용자 상호작용을 방지하지만 폼 제출에는 포함됩니다. | # Tabs URL: /docs/components/tabs Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/tabs.mdx Tabs는 관련된 콘텐츠를 탭 형태로 구성하여 사용자가 쉽게 전환할 수 있도록 하는 컴포넌트입니다. 키보드 내비게이션, 접근성, 다양한 스타일 변형을 지원합니다. *** title: 'Tabs' site\_name: 'Tabs - Vapor Core' description: 'Tabs는 관련된 콘텐츠를 탭 형태로 구성하여 사용자가 쉽게 전환할 수 있도록 하는 컴포넌트입니다. 키보드 내비게이션, 접근성, 다양한 스타일 변형을 지원합니다.' --------------------------------------------------------------------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/tabs/default-tabs.tsx", "codeblock": true } ``` ## Property *** ### Size Tabs의 크기는 sm, md, lg, xl 로 제공합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/tabs/tabs-size.tsx", "codeblock": true } ``` ### Variant Tabs는 line과 plain 두 가지 스타일 변형을 제공합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/tabs/tabs-variant.tsx", "codeblock": true } ``` ### Orientation Tabs는 수평(horizontal)과 수직(vertical) 배치를 지원합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/tabs/tabs-orientation.tsx", "codeblock": true } ``` ### Controlled State Tabs의 활성 상태를 외부에서 제어할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/tabs/tabs-controlled.tsx", "codeblock": true } ``` ### States Tabs의 다양한 상태(개별 탭 비활성화, 전체 탭 그룹 비활성화)를 설정할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/tabs/tabs-states.tsx", "codeblock": true } ``` ## Examples *** ### Keyboard Navigation Tabs는 완전한 키보드 내비게이션을 지원합니다. 포커스 동작과 순환 내비게이션을 세밀하게 제어할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/tabs/tabs-keyboard.tsx", "codeblock": true } ``` ## Props Table *** ### Tabs.Root Tabs의 루트 컨테이너로, 전체 Tabs 컴포넌트의 상태와 동작을 관리합니다. | prop | type | default | description | | ----------------- | ------------------------- | -------------- | ------------------------------------------------------------------------- | | `variant` | `'line','plain'` | `'line'` | Tabs의 시각적 스타일을 설정합니다. 'line'은 하단에 보더가 있는 스타일, 'plain'은 심플한 스타일입니다. | | `size` | `'sm','md','lg','xl'` | `'md'` | Tabs의 크기를 설정합니다. | | `orientation` | `'horizontal','vertical'` | `'horizontal'` | 탭의 배치 방향을 설정합니다. horizontal은 가로, vertical은 세로 배치입니다. | | `disabled` | `boolean` | `false` | 모든 탭을 비활성화 상태로 만듭니다. | | `activateOnFocus` | `boolean` | `true` | 키보드로 포커스를 이동할 때 바로 탭을 활성화할지 여부를 설정합니다. false일 때는 Enter나 Space로 활성화해야 합니다. | | `loop` | `boolean` | `true` | 키보드 내비게이션에서 끝에 도달했을 때 처음으로 순환할지 여부를 설정합니다. | | `value` | `string` | `null` | 현재 활성화된 탭의 값입니다. 제어 컴포넌트로 사용할 때 필요합니다. | | `defaultValue` | `string` | `null` | 초기에 활성화할 탭의 값입니다. 비제어 컴포넌트로 사용할 때 설정합니다. | | `onValueChange` | `(value: string) => void` | `null` | 활성 탭이 변경될 때 호출되는 콜백 함수입니다. | | `className` | `string` | `null` | 루트 요소에 적용할 CSS 클래스명입니다. | ### Tabs.List 탭 트리거들을 담는 컨테이너입니다. 탭의 배치와 스타일을 관리합니다. | prop | type | default | description | | ----------- | ----------------- | ------- | ------------------------------------------- | | `className` | `string` | `null` | 탭 리스트 요소에 적용할 CSS 클래스명입니다. | | `children` | `React.ReactNode` | `null` | 탭 리스트 내부에 렌더링할 Trigger와 Indicator 컴포넌트들입니다. | ### Tabs.Trigger 개별 탭을 나타내는 버튼 컴포넌트입니다. 클릭하거나 키보드로 활성화할 수 있습니다. | prop | type | default | description | | ----------- | ----------------- | ------- | ------------------------------------- | | `value` | `string` | `null` | 탭 트리거의 고유 값입니다. 이 값으로 탭을 식별하고 활성화합니다. | | `disabled` | `boolean` | `false` | 개별 탭 트리거를 비활성화 상태로 만듭니다. | | `className` | `string` | `null` | 탭 트리거 요소에 적용할 CSS 클래스명입니다. | | `children` | `React.ReactNode` | `null` | 탭 트리거에 표시할 텍스트나 요소입니다. | ### Tabs.Indicator 현재 활성화된 탭을 시각적으로 표시하는 인디케이터입니다. 탭 전환 시 부드럽게 이동합니다. | prop | type | default | description | | ----------- | ----------------- | ------- | ------------------------------------------------------------- | | `className` | `string` | `null` | 탭 인디케이터 요소에 적용할 CSS 클래스명입니다. | | `children` | `React.ReactNode` | `null` | 인디케이터 내부에 렌더링할 커스텀 요소입니다. 기본적으로는 활성 탭을 표시하는 시각적 인디케이터가 표시됩니다. | ### Tabs.Panel 각 탭에 연결된 콘텐츠 패널입니다. 해당 탭이 활성화되었을 때만 표시됩니다. | prop | type | default | description | | ----------- | ----------------- | ------- | -------------------------------------------- | | `value` | `string` | `null` | 패널에 연결된 탭의 값입니다. 해당 탭이 활성화되었을 때 이 패널이 표시됩니다. | | `className` | `string` | `null` | 탭 패널 요소에 적용할 CSS 클래스명입니다. | | `children` | `React.ReactNode` | `null` | 탭 패널에 표시할 콘텐츠입니다. | # TextInput URL: /docs/components/text-input Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/text-input.mdx TextInput은 사용자가 데이터를 입력할 수 있도록 텍스트, 숫자 등 다양한 형식의 입력 필드를 제공합니다. *** title: 'TextInput' site\_name: 'TextInput - Vapor Core' description: 'TextInput은 사용자가 데이터를 입력할 수 있도록 텍스트, 숫자 등 다양한 형식의 입력 필드를 제공합니다.' ----------------------------------------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/default-text-input.tsx", "codeblock": true } ``` ## Property *** ### Size TextInput 크기는 sm, md, lg, xl 로 제공합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/text-input-size.tsx", "codeblock": true } ``` ### Type TextInput 타입은 text, email, password, url, tel, search 로 제공합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/text-input-type.tsx", "codeblock": true } ``` ### Disabled 사용자가 상호작용할 수 없는 상태입니다. 액션을 수행하기 위한 특정 조건을 충족하지 않았거나 일시적으로 기능을 제한하려는 상황에서 사용합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/text-input-disabled.tsx", "codeblock": true } ``` ### Invalid 유효하지 않은 상태(필수 항목 누락, 잘못된 입력 등)임을 나타냅니다. 사용자에게 시각적 피드백을 제공하여 올바른 입력을 유도할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/text-input-invalid.tsx", "codeblock": true } ``` ### Read Only 사용자는 값을 수정할 수 없지만, 텍스트를 복사하거나 읽을 수 있도록 허용하는 상태입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/text-input-readonly.tsx", "codeblock": true } ``` ## Examples *** ### States TextInput의 다양한 상태를 보여줍니다. ```json doc-gen:file { "file": "./src/components/demo/examples/text-input-states.tsx", "codeblock": true } ``` ## Props Table *** TextInput은 Base UI의 Input을 래핑한 단일 컴포넌트입니다. 다양한 텍스트 입력 타입을 지원하며, 제어형/비제어형 모두 사용할 수 있습니다. 이 컴포넌트는 `input` 요소를 기반으로 합니다. | prop | type | default | description | | --------------- | ------------------------------------ | ----------- | ----------------------------------------------------------------------- | | `render` | `ReactElement,function` | `input` | 텍스트 입력을 렌더링할 때 사용할 커스텀 렌더링 요소입니다. | | `type` | `text,email,password,url,tel,search` | `text` | 입력 필드의 HTML 타입을 지정합니다. | | `value` | `string` | `undefined` | 제어형 컴포넌트로 사용할 때 입력 값입니다. | | `defaultValue` | `string` | `''` | 비제어형 컴포넌트 초기 입력 값입니다. | | `onValueChange` | `function` | `undefined` | 입력 값이 변경될 때 호출되는 콜백 함수입니다. (value: string, event: Event) => void 형태입니다. | | `placeholder` | `string` | `undefined` | 입력 필드가 비어 있을 때 표시되는 안내 텍스트입니다. | | `size` | `sm,md,lg,xl` | `md` | 입력 필드의 크기를 설정합니다. | | `disabled` | `boolean` | `false` | 입력 필드를 비활성화합니다. | | `invalid` | `boolean` | `false` | 검증 오류 상태임을 나타냅니다. | | `readOnly` | `boolean` | `false` | 읽기 전용으로 설정하여 값 변경을 방지합니다. | | `required` | `boolean` | `false` | 필수 입력 필드임을 나타냅니다. | | `autoComplete` | `string` | `undefined` | 브라우저의 자동 완성 기능을 제어합니다. | | `autoFocus` | `boolean` | `false` | 페이지 로드 시 자동으로 포커스를 받을지 설정합니다. | | `maxLength` | `number` | `undefined` | 입력 가능한 최대 문자 수를 제한합니다. | | `minLength` | `number` | `undefined` | 입력 가능한 최소 문자 수를 제한합니다. | | `name` | `string` | `undefined` | 폼 제출 시 사용될 필드 이름입니다. | | `id` | `string` | `undefined` | 입력 필드의 고유 식별자입니다. | | `className` | `string` | `undefined` | 추가적인 CSS 클래스를 적용합니다. | | `onChange` | `function` | `undefined` | 입력 값 변경 시 호출되는 네이티브 이벤트 핸들러입니다. | | `onBlur` | `function` | `undefined` | 포커스를 잃었을 때 호출되는 이벤트 핸들러입니다. | | `onFocus` | `function` | `undefined` | 포커스를 받았을 때 호출되는 이벤트 핸들러입니다. | # Text URL: /docs/components/text Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/text.mdx Text 컴포넌트는 시멘틱 태그와 타이포그래피·색상 토큰을 조합하여 텍스트 스타일을 설정합니다. *** title: 'Text' site\_name: 'Text - Vapor Core' description: 'Text 컴포넌트는 시멘틱 태그와 타이포그래피·색상 토큰을 조합하여 텍스트 스타일을 설정합니다.' -------------------------------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/default-text.tsx", "codeblock": true } ``` ## Property *** ### Typography Typography prop을 사용하여 텍스트의 시각적 스타일을 지정할 수 있습니다. Display, Heading, Subtitle, Body, Code 등 다양한 텍스트 스타일이 제공됩니다. ```json doc-gen:file { "file": "./src/components/demo/examples/text-typography.tsx", "codeblock": true } ``` ### Foreground Foreground prop을 사용하여 텍스트의 색상을 지정할 수 있습니다. 브랜드 색상, 상태 색상, 중성 색상 등 다양한 색상 토큰이 제공됩니다. ```json doc-gen:file { "file": "./src/components/demo/examples/text-foreground.tsx", "codeblock": true } ``` ## Props Table *** 이 컴포넌트는 `span` 요소를 기반으로, 표준 HTML 속성(`className`, `style` 등)을 지원합니다. | prop | type | default | description | | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------------------------ | | `typography` | `display1,display2,display3,display4,heading1,heading2,heading3,heading4,heading5,heading6,subtitle1,subtitle2,body1,body2,body3,body4,code1,code2,undefined` | `body1` | 적용할 타이포그래피 스타일 토큰입니다. | | `foreground` | `primary,primary-200,secondary,secondary-200,success,success-200,warning,warning-200,danger,danger-200,hint,hint-200,contrast,contrast-200,normal,normal-100,accent,accent-200,undefined` | `normal` | 텍스트 색상을 지정하는 전경색 토큰입니다. | | `render` | `ReactElement` | `span` | 텍스트를 렌더링할 때 사용할 커스텀 렌더링 요소입니다. | | `children` | `React.ReactNode` | `null` | 텍스트 내용입니다. | # Textarea URL: /docs/components/textarea Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/textarea.mdx Textarea는 사용자가 여러 줄의 텍스트를 입력할 수 있도록 하는 텍스트 입력 필드를 제공합니다. *** title: 'Textarea' site\_name: 'Textarea - Vapor Core' description: 'Textarea는 사용자가 여러 줄의 텍스트를 입력할 수 있도록 하는 텍스트 입력 필드를 제공합니다.' ----------------------------------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/default-textarea.tsx", "codeblock": true } ``` ## Property *** ### Size Textarea 크기는 sm, md, lg, xl 로 제공합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/textarea-size.tsx", "codeblock": true } ``` ### Auto Resize 텍스트 내용에 따라 자동으로 높이가 조절되는 기능을 제공합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/textarea-auto-resize.tsx", "codeblock": true } ``` ### States Textarea의 다양한 상태를 보여줍니다. ```json doc-gen:file { "file": "./src/components/demo/examples/textarea-states.tsx", "codeblock": true } ``` ## Examples *** ### maxLength Textarea에 `maxLength` 속성을 추가하여 입력 가능한 최대 문자 수를 제한하는 기능을 제공합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/textarea-character-count.tsx", "codeblock": true } ``` ## Props Table *** ### Textarea 간단한 단일 컴포넌트로 사용할 수 있는 Textarea입니다. | prop | type | default | description | | --------------- | ----------------------- | ------- | ----------------------------------------------------------------------------------------- | | `render` | `ReactElement,function` | `-` | 다른 태그로 컴포넌트의 HTML 요소를 교체하거나 다른 컴포넌트와 합성할 수 있습니다. ReactElement 또는 렌더링할 요소를 반환하는 함수를 허용합니다. | | `value` | `string` | `-` | 텍스트 영역의 제어된 값입니다. onValueChange와 함께 사용해야 합니다. | | `defaultValue` | `string` | `-` | 텍스트 영역이 처음 렌더링될 때의 값입니다. 값을 제어할 필요가 없을 때 사용합니다. | | `onValueChange` | `function` | `-` | 텍스트 영역의 값이 변경될 때 호출되는 이벤트 핸들러입니다. | | `disabled` | `boolean` | `false` | true일 때 사용자가 텍스트 영역과 상호작용하는 것을 방지합니다. | | `readOnly` | `boolean` | `false` | true일 때 사용자가 값을 수정할 수 없지만 텍스트를 선택하고 복사할 수 있습니다. | | `invalid` | `boolean` | `false` | 폼 유효성 검증 실패 등의 상태를 나타냅니다. | | `placeholder` | `string` | `-` | 텍스트 영역이 비어있을 때 표시되는 힌트 텍스트입니다. | | `rows` | `number` | `-` | 텍스트 영역의 표시할 행 수를 지정합니다. | | `cols` | `number` | `-` | 텍스트 영역의 표시할 열 수를 지정합니다. | | `size` | `sm,md,lg,xl` | `md` | 텍스트 영역의 크기를 설정합니다. | | `autoResize` | `boolean` | `false` | 텍스트 내용에 따라 자동으로 높이가 조절되는지 설정합니다. | | `maxLength` | `number` | `-` | 입력 가능한 최대 문자 수를 제한합니다. | | `required` | `boolean` | `false` | 폼 필드가 필수인지 설정합니다. | # Tooltip URL: /docs/components/tooltip Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/tooltip.mdx 요소에 대한 추가 정보를 제공하는 툴팁 컴포넌트입니다 *** title: 'Tooltip' site\_name: 'Tooltip - Vapor Core' description: '요소에 대한 추가 정보를 제공하는 툴팁 컴포넌트입니다' -------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/default-tooltip.tsx", "codeblock": true } ``` ## Property *** ### Positioning Tooltip의 표시 위치를 설정할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/tooltip-positioning.tsx", "codeblock": true } ``` ### Alignment Tooltip의 정렬 위치를 조정할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/tooltip-alignment.tsx", "codeblock": true } ``` ### Delay Tooltip이 표시되는 지연 시간을 조정할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/tooltip-delay.tsx", "codeblock": true } ``` ### Offset Tooltip의 거리와 정렬 오프셋을 조정할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/tooltip-offset.tsx", "codeblock": true } ``` ## Examples *** ### Content Variations 다양한 형태의 툴팁 내용을 표시할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/tooltip-content.tsx", "codeblock": true } ``` ## Props Table *** ### Tooltip.Root Tooltip의 루트 컨테이너 컴포넌트입니다. 위치 관련 props와 Base UI Tooltip.Root의 모든 props를 지원합니다. | prop | type | default | description | | -------------------- | ------------------------------- | ------------------- | ------------------------------- | | `openOnClick` | `boolean` | `false` | 클릭 시 툴팁을 열지 여부를 설정합니다. | | `openOnHover` | `boolean` | `true` | 호버 시 툴팁을 열지 여부를 설정합니다. | | `openOnFocus` | `boolean` | `true` | 포커스 시 툴팁을 열지 여부를 설정합니다. | | `delay` | `number` | `0` | 툴팁이 열리기 전 지연 시간을 밀리초 단위로 설정합니다. | | `closeDelay` | `number` | `0` | 툴팁이 닫히기 전 지연 시간을 밀리초 단위로 설정합니다. | | `open` | `boolean` | `-` | 툴팁의 열림 상태를 제어합니다 (제어 모드). | | `defaultOpen` | `boolean` | `false` | 툴팁의 초기 열림 상태를 설정합니다. | | `onOpenChange` | `function` | `-` | 툴팁의 열림 상태가 변경될 때 호출되는 콜백 함수입니다. | | `disabled` | `boolean` | `false` | 툴팁을 비활성화할지 여부를 설정합니다. | | `side` | `top,right,bottom,left` | `top` | 툴팁이 표시될 위치를 설정합니다. | | `align` | `start,center,end` | `center` | 툴팁의 정렬을 설정합니다. | | `sideOffset` | `number` | `6` | 트리거와 툴팁 사이의 거리를 설정합니다. | | `alignOffset` | `number` | `0` | 정렬 축에서의 오프셋을 설정합니다. | | `anchor` | `Element,VirtualElement,null` | `null` | 툴팁의 위치를 계산할 기준 앵커 요소를 설정합니다. | | `arrowPadding` | `number` | `4` | 화살표와 콘텐츠 사이의 패딩을 설정합니다. | | `collisionAvoidance` | `boolean,object` | `{ align: 'none' }` | 충돌 회피 동작을 설정합니다. | | `collisionBoundary` | `Element,Array,string` | `clippingAncestors` | 충돌 감지를 위한 경계 요소를 설정합니다. | | `collisionPadding` | `number,object` | `0` | 충돌 경계와의 패딩을 설정합니다. | | `positionMethod` | `absolute,fixed` | `absolute` | 툴팁의 CSS 위치 지정 방법을 설정합니다. | | `sticky` | `partial,always` | `partial` | 앵커 요소에 대한 툴팁의 고정 동작을 설정합니다. | | `trackAnchor` | `boolean` | `true` | 앵커 요소의 움직임을 추적할지 여부를 설정합니다. | ### Tooltip.Trigger Tooltip을 트리거하는 컴포넌트입니다. | prop | type | default | description | | -------- | ----------------------- | ------- | -------------------------- | | `render` | `ReactElement,function` | `-` | 커스텀 렌더링을 위한 요소나 함수를 설정합니다. | ### Tooltip.Portal Tooltip 콘텐츠를 DOM 트리의 다른 위치로 렌더링하는 컴포넌트입니다. | prop | type | default | description | | ------------- | ------------------ | --------------- | -------------------------------------- | | `container` | `Element,function` | `document.body` | 포털이 렌더링될 컨테이너 요소를 설정합니다. | | `keepMounted` | `boolean` | `false` | 닫힌 상태에서도 DOM에 마운트된 상태를 유지할지 여부를 설정합니다. | ### Tooltip.Content Tooltip의 실제 콘텐츠를 포함하는 컴포넌트입니다. 내장된 Positioner, Popup, Arrow를 포함하며, 자동으로 화살표가 포함되어 위치에 따라 화살표 방향이 조정됩니다. | prop | type | default | description | | ------------------- | --------------- | ------- | ------------------------------- | | `className` | `string` | `-` | 콘텐츠에 적용할 추가 CSS 클래스입니다. | | `children` | `ReactNode` | `-` | 툴팁 내부에 표시될 콘텐츠입니다. | | `style` | `CSSProperties` | `-` | 콘텐츠에 적용할 인라인 스타일입니다. | | `onPointerEnter` | `function` | `-` | 포인터가 콘텐츠 영역에 진입할 때 호출되는 함수입니다. | | `onPointerLeave` | `function` | `-` | 포인터가 콘텐츠 영역에서 벗어날 때 호출되는 함수입니다. | | `onEscapeKeyDown` | `function` | `-` | ESC 키를 눌렀을 때 호출되는 함수입니다. | | `onInteractOutside` | `function` | `-` | 툴팁 외부에서 상호작용할 때 호출되는 함수입니다. | # Next.js - App Router URL: /docs/frameworks/next-js-app Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/frameworks/next-js-app.mdx Vapor UI 컴포넌트를 Nextjs app router와 사용하는 방법 *** title: 'Next.js - App Router' description: 'Vapor UI 컴포넌트를 Nextjs app router와 사용하는 방법' -------------------------------------------------------- ## Next.js - App Router Next.js 13의 app/ 디렉토리는 기본적으로 서버 컴포넌트를 사용합니다. Vapor UI 컴포넌트는 빌드 시점에 `use client`를 추가하므로 서버 컴포넌트에서 사용할 수 있습니다. ### 프로젝트 생성 먼저, Next.js 프로젝트를 생성합니다. 설치 과정에서 **App Router** 사용을 선택해 주세요. ```bash npx create-next-app@latest ``` ### 라이브러리 설치 프로젝트 디렉토리로 이동하여 VaporUI를 설치합니다. ```bash cd your-project-name ``` ```package-install npm install @vapor-ui/core @vapor-ui/icons ``` ### `next.config.ts` 설정 프로젝트의 루트 디렉토리에 있는 `next.config.ts` 파일을 열고, [`optimizePackageImports`](https://nextjs.org/docs/app/api-reference/config/next-config-js/optimizePackageImports) 옵션을 추가합니다. 이 설정은 `@vapor-ui/core` 라이브러리에서 사용하는 부분만 빌드에 포함시켜 **최종 번들 사이즈를 줄여줍니다.** ```typescript title="next.config.ts" import type { NextConfig } from 'next'; const nextConfig: NextConfig = { // Vapor UI 번들 최적화 설정 experimental: { optimizePackageImports: ['@vapor-ui/core', '@vapor-ui/icons'], }, }; export default nextConfig; ``` ### 컴포넌트 사용 예시 이제 페이지에서 Vapor UI 컴포넌트와 테마 전환 기능을 사용할 수 있습니다. ```tsx title="src/app/page.tsx" import { Card, Text } from '@vapor-ui/core'; export default function HomePage() { return (

    Welcome to Vapor UI!

     이것은 Next.js App Router와 함께 Vapor UI 컴포넌트를 사용하는 예시입니다.
    ); } ```     # Next.js - Pages Router URL: /docs/frameworks/next-js-pages Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/frameworks/next-js-pages.mdx Vapor UI 컴포넌트를 Nextjs Pages Router와 사용하는 방법 *** title: 'Next.js - Pages Router' description: 'Vapor UI 컴포넌트를 Nextjs Pages Router와 사용하는 방법' ---------------------------------------------------------- ## Next.js - Pages Router Next.js Pages Router는 전통적인 파일 시스템 기반 라우팅을 사용합니다. Vapor UI 컴포넌트는 Pages Router 환경에서도 완벽하게 작동합니다. ### 프로젝트 생성 먼저, Next.js 프로젝트를 생성합니다. Pages Router를 사용하도록 설정해주세요. ```bash npx create-next-app@latest ``` ### 라이브러리 설치 프로젝트 디렉토리로 이동하여 Vapor UI를 설치합니다. ```bash cd your-project-name ``` ```package-install npm install @vapor-ui/core @vapor-ui/icons ``` ### `next.config.ts` 설정 Pages Router에서는 `transpilePackages` 옵션을 사용하여 라이브러리를 트랜스파일합니다. ```typescript title="next.config.ts" import type { NextConfig } from 'next'; const nextConfig: NextConfig = { reactStrictMode: true, transpilePackages: ['@vapor-ui/core', '@vapor-ui/icons'], }; export default nextConfig; ``` ### 컴포넌트 사용 예시 이제 페이지에서 Vapor UI 컴포넌트와 테마 전환 기능을 사용할 수 있습니다. ```tsx title="pages/index.tsx" import { Card, Text } from '@vapor-ui/core'; export default function HomePage() { return (

    Welcome to Vapor UI!

     이것은 Next.js Pages Router와 함께 Vapor UI 컴포넌트를 사용하는 예시입니다.
    ); } ```     # React Router URL: /docs/frameworks/react-router Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/frameworks/react-router.mdx Vapor UI 컴포넌트를 React Router와 함께 사용하는 방법 *** title: 'React Router' description: 'Vapor UI 컴포넌트를 React Router와 함께 사용하는 방법' ------------------------------------------------------ ## React Router React Router는 React 애플리케이션에서 선언적 라우팅을 위한 표준 라이브러리입니다. SPA(Single Page Application)를 구축할 때 필수적인 도구입니다. ### 프로젝트 생성 Vite를 사용하여 React 프로젝트를 생성하고 React Router를 설치합니다. ```bash # 프로젝트 생성 npx create-react-router@latest my-react-router-app cd my-react-router-app ``` ### 라이브러리 설치 Vapor UI 패키지를 설치합니다. ```package-install npm install @vapor-ui/core @vapor-ui/icons ``` ### Vite 설정 Vite 설정 파일에서 Vapor UI 패키지가 SSR에서 올바르게 작동하도록 구성합니다. ```typescript title="vite.config.ts" import react from '@vitejs/plugin-react'; import { defineConfig } from 'vite'; export default defineConfig({ plugins: [react()], ssr: { noExternal: ['@vapor-ui/core', '@vapor-ui/icons'], }, }); ``` ### 컴포넌트 사용 예시 ```tsx title="pages/index.tsx" import { Card, Text } from '@vapor-ui/core'; export default function HomePage() { return (

    Welcome to Vapor UI!

     이것은 React Router와 함께 Vapor UI 컴포넌트를 사용하는 예시입니다.
    ); } ```     # Vite URL: /docs/frameworks/vite-react Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/frameworks/vite-react.mdx Vapor UI 컴포넌트를 Vite와 React에서 사용하는 방법 *** title: 'Vite' description: 'Vapor UI 컴포넌트를 Vite와 React에서 사용하는 방법' --------------------------------------------------- ## Vite + React Vite는 빠른 개발 서버와 최적화된 빌드를 제공하는 모던 프론트엔드 빌드 도구입니다. React와 함께 사용하면 뛰어난 개발자 경험을 제공합니다. ### 프로젝트 생성 Vite React 프로젝트를 생성하고 기본 의존성을 설치합니다. ```bash # Vite React 프로젝트 생성 (TypeScript 템플릿) npm create vite@latest # 프로젝트 폴더로 이동 cd my-vapor-vite-app # 기본 의존성 설치 npm install ``` ### 라이브러리 설치 Vapor UI 패키지를 설치합니다. ```package-install npm install @vapor-ui/core @vapor-ui/icons ``` ### Vite 설정 Vite 설정을 구성합니다. ```typescript title="vite.config.ts" import react from '@vitejs/plugin-react'; import { defineConfig } from 'vite'; // https://vite.dev/config/ export default defineConfig({ plugins: [react()], }); ``` ### 컴포넌트 사용 예시 ```tsx title="src/App.tsx" import { Card, Text } from '@vapor-ui/core'; export default function HomePage() { return (

    Welcome to Vapor UI!

     이것은 Vite와 React와 함께 Vapor UI 컴포넌트를 사용하는 예시입니다.
    ); } ```     # Installation URL: /docs/getting-started/installation Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/getting-started/installation.mdx Vapor UI 설치를 위한 가이드. *** title: Installation description: Vapor UI 설치를 위한 가이드. --------------------------------- 요구사항:
    • React 18 or later
    • Node.js 16 or later
    *** ## 패키지 설치 다음 중 하나의 패키지 매니저를 사용하여 Vapor UI를 설치하세요: ```package-install npm install @vapor-ui/core@latest @vapor-ui/icons@latest ``` *** ## 프레임워크별 설정 ### Next.js Next.js 프로젝트에서 Vapor UI를 설정하는 방법: #### 1. App Router (권장) `app/layout.tsx`에 스타일을 추가하세요: ```tsx import '@vapor-ui/core/styles.css'; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ); } ``` #### 2. Pages Router `pages/_app.tsx`에 스타일을 추가하세요: ```tsx import '@vapor-ui/core/styles.css'; import type { AppProps } from 'next/app'; export default function App({ Component, pageProps }: AppProps) { return ; } ``` ### Vite Vite 프로젝트에서 `src/main.tsx` 또는 `src/main.js`에 스타일을 추가하세요: ```tsx import React from 'react'; import ReactDOM from 'react-dom/client'; import '@vapor-ui/core/styles.css'; import App from './App.tsx'; ReactDOM.createRoot(document.getElementById('root')!).render( , ); ``` ### Create React App `src/index.js` 또는 `src/index.tsx`에 스타일을 추가하세요: ```tsx import React from 'react'; import ReactDOM from 'react-dom/client'; import '@vapor-ui/core/styles.css'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement); root.render( , ); ``` *** ## 컴포넌트 사용하기 이제 React 애플리케이션에서 Vapor UI 컴포넌트를 사용할 수 있습니다: ```json doc-gen:file { "file": "./src/components/demo/examples/assemble-component.tsx", "codeblock": true } ``` # LLMs.txt URL: /docs/getting-started/llms-txt Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/getting-started/llms-txt.mdx Cursor 등 AI 도구에서 Vapor Design System 문서를 활용하는 방법 *** title: LLMs.txt description: Cursor 등 AI 도구에서 Vapor Design System 문서를 활용하는 방법 ------------------------------------------------------------- ## LLMs.txt란 무엇인가? `LLMs.txt`는 Vapor Design System의 문서를 LLM(Large Language Model)이 잘 이해하도록 구조화한 텍스트 파일입니다. 컨텍스트 창(context window)이 제한된 AI 도구에서 핵심 정보를 빠르게 파악할 수 있게 돕습니다. *** ## 제공 파일 구성 | 파일명 | 설명 | | --------------- | ---------------------------------------------------------- | | `llms.txt` | 전체 라우트 및 카테고리 개요를 포함한 메인 인덱스 파일 | | `llms-full.txt` | Vapor Design System의 모든 문서(컴포넌트, 가이드, API 등)를 포함한 전체 문서 세트 | ### 메인 인덱스 * [`llms.txt`](/llms.txt) : 각 문서에 대한 요약과 링크가 포함되어 있으며, AI가 필요한 자료를 따라갈 수 있도록 구성됩니다 * [`llms-full.txt`](/llms-full.txt) : 모든 내용을 담아 큰 컨텍스트를 사용하는 워크플로우에 적합합니다 ### 세부 문서 * 가이드: [`/docs/getting-started/installation.mdx`](/docs/getting-started/installation.mdx): Vapor UI 설치를 위한 가이드. * 디자인 토큰 * [`/docs/tokens/color.mdx`](/docs/tokens/color.mdx): 디자인 토큰에 대한 상세 문서로, 색상 시스템을 정의합니다. * [`/docs/tokens/size.mdx`](/docs/tokens/size.mdx): 디자인 토큰에 대한 상세 문서로, 크기 및 여백을 정의합니다. * [`/docs/tokens/typography.mdx`](/docs/tokens/typography.mdx): 디자인 토큰에 대한 상세 문서로, 타이포그래피 시스템을 * 테마 변경: * [`/docs/getting-started/theming.mdx`](/docs/getting-started/theming.mdx): Next.js 앱에서 테마를 변경하는 방법에 대한 가이드. * 컴포넌트 * [`/docs/components/[component-name].mdx`](/docs/components/avatar.mdx): 컴포넌트별 상세 문서로, 각 컴포넌트의 사용법과 API를 포함합니다. (예: Avatar) *** ## AI 도구와 함께 사용하기 Cursor 등 LLM 기반 코드 도구에서 LLMs 텍스트 파일을 활용하려면 `@Docs` 기능을 사용하세요. [Cursor @Docs](https://docs.cursor.com/context/@-symbols/@-docs) # Overview URL: /docs/getting-started/overview Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/getting-started/overview.mdx Vapor는 구름의 세 번째 디자인 시스템으로, 일관된 UI와 개발 생산성을 위해 설계되었습니다. *** title: Overview description: Vapor는 구름의 세 번째 디자인 시스템으로, 일관된 UI와 개발 생산성을 위해 설계되었습니다. ------------------------------------------------------------------- ## Vapor Design System란? Vapor는 구름에서 개발한 통합 디자인 시스템으로, 다양한 제품과 서비스에 일관된 사용자 경험을 제공합니다. ### 주요 특징 * **모듈화**: Theme, Hooks, Icons, Core 등 서브 패키지로 구성 * **높은 커스터마이즈성**: 최소한의 제약, 최대한의 확장성 * **웹 접근성 준수**: A11Y, ARIA 속성, 키보드 네비게이션 등 기본 지원 * **유지보수 용이**: 재사용 가능한 토큰과 컴포넌트 구조 ### 목적 * 빠르고 일관된 UI 개발 지원 * 다양한 서비스 요구사항에 유연하게 대응 * 디자인과 개발 간의 효율적인 협업 촉진 *** ## Components # Releases URL: /docs/getting-started/releases Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/getting-started/releases.md 각 Vapor UI 릴리스의 Changelogs입니다. *** title: Releases description: 각 Vapor UI 릴리스의 Changelogs입니다. ------------------------------------------- ## 0.6.0 ### @vapor-ui/core #### Minor Changes * 4d7eb69: Add new Textarea component with auto-resize functionality * 4026b68: add field components * 4a9bad5: add new `MultiSelect` component * e64e867: change the overlay component interface * 3fff33e: add new `Select` component * d294454: remove label components' * b92cff1: add new `Collapsible` component * b78f3e1: add new `Tabs` component * 98dee18: Migrate `Nav` to `NavigationMenu` * 0880cf7: add new `Sheet` component * 1d2f506: migrate to `Base UI` * e1bf119: add inputgroup component * b4509b1: add new `Popover` component #### Patch Changes * 2651ee2: eidt tooltip offset * 6de8824: edit spacing style implementation * 1ea54c0: fix(Callout): add flex layout for icons and text alignment * Add display: 'flex' to align icons and text horizontally * Add alignItems: 'center' for vertical centering * Add gap spacing between icon and text content * Ensures consistent layout behavior with Button component * 1ba360b: add readonly props * 2b756c5: fix svg rendering issue on safari * 6d1a2e3: remove active style when provided readonly * 1f4ba60: prioritize focus style over hover * Updated dependencies \[450b324] * Updated dependencies \[2b756c5] * Updated dependencies \[e381247] * Updated dependencies \[3bfda49] * @vapor-ui/icons\@0.4.0 *** ## 0.5.0 ### @vapor-ui/core #### Minor Changes * df2dbc4: add new `Tooltip` component * fdbf49d: enhance token structure * 263874c: add new `Menu` component * 66a0032: add new `Breadcrumb` component #### Patch Changes * b498ae2: Fix RadioGroup indicator color to use white background instead of theme-dependent background normal * fe0d153: Align CSS variable naming with new build identifiers config * 7b1b889: remove hover state when used touchscreen * 74b7c97: add VComponentProps * 3611d89: style(Button): add no-wrap * 9188b0e: Enhance vanillaExtractPlugin identifiers for better debugging * 96c0f7a: add box-shadow tokens * Updated dependencies \[c4d0e8e] * Updated dependencies \[a156f82] * @vapor-ui/icons\@0.3.0 *** ## 0.4.0 ### @vapor-ui/core #### Minor Changes * 2ce16a6: refactor(build): Improve DX by Overhauling CSS Bundling Strategy * 482e447: feat: The CSS layer names have been changed to “theme,” “reset,” “components,” and “utilities.” * f5e6651: feat: Add Tailwind CSS v4 Preset #### Patch Changes * 0c6d39c: fix(RadioGroup): remove incorrectly injected props * a813633: fix(Text): Add foreground mixin to style entry point * 242d1e8: style(Badge): add center alignment * Updated dependencies \[30ebcde] * @vapor-ui/icons\@0.2.0 ### @vapor-ui/icons #### Minor Changes * e381247: Add new icons from Figma **New Symbol Icons:** `MediumIcon` **Also Updated:** * Symbol Icons: `FirefoxColorIcon` #### Patch Changes * 450b324: conditionally add CSS variables only when isCssVariable is true * 2b756c5: fix icon size * 3bfda49: Update icons from Figma **Updated Basic Icons:** `TerminalWindowOutlineIcon` *** ## 0.3.1 ### @vapor-ui/core #### Patch Changes * ca267e9: feat: Added primary color custom functionality *** ## 0.3.0 ### @vapor-ui/core #### Minor Changes * e139a7f: remove sprinkles on each components #### Patch Changes * 03655b1: fix(tsup): Correct CSS Layer Priority for vapor-components * 488c614: refactor: replace text sprinkles into mixins ### @vapor-ui/icons #### Minor Changes * c4d0e8e: Add new icons from Figma **New Basic Icons:** `LinearScaleOutlineIcon` **Also Updated:** * Basic Icons: `PlayIcon`, `ReplaceIcon`, `ClassIcon`, `ArrowUpOutlineIcon`, `ArrowDownOutlineIcon`, `TerminalOutlineIcon`, `ViewShrinkOutlineIcon`, `FolderSearchIcon`, `StarOutlineIcon`, `PriceOutlineIcon`, `HistoryOutlineIcon`, `CardsOutlineIcon`, `ZoomOutOutlineIcon`, `IntelliSensePropertyOutlineIcon`, `CorrectOutlineIcon`, `ChevronDoubleRightOutlineIcon`, `AutoCodeOutlineIcon`, `ChapterOutlineIcon` * Symbol Icons: `RstudioColorIcon` * a156f82: Add new icons from Figma **New Basic Icons:** `SidenavIcon` *** ## 0.2.1 ### @vapor-ui/core #### Patch Changes * 6749d80: fix(createThemeConfig): support RSC *** ## 0.2.0 ### @vapor-ui/core #### Minor Changes * 55f2f42: Callout: added new callout component * 4725a73: RadioGroup: add new component * 9f96e2c: Checkbox: Add New `Checkbox` Component * b59dd77: Switch: add new Switch component * 267a998: IconButton: remove @vapor-ui/icons for resolving storybook build error * d7c2714: fix: resolve circular dependency in vanilla-extract and improve tsup build #### Patch Changes * c5cd0fc: edit dialog & interaction animation functions * a0c1ff0: chore: tsup spliting disable * d7c2714: build(tsup): Optimize build system with per-component bundling ### @vapor-ui/icons #### Minor Changes * 30ebcde: feat: Add new icons and update existing icon components ## New Icons Added * `AlignJustifyOutlineIcon`, `CopyAsMarkdownOutlineIcon`, `IndentDecreaseOutlineIcon`, `SlotIcon`, `TextScanOutlineIcon` ## Updated Icons * Updated approximately 190 existing icons with refined SVG paths and improved rendering * Minor coordinate adjustments for better visual consistency * Enhanced clipPath definitions where needed *** ## 0.1.0 ### @vapor-ui/core #### Minor Changes * 68b001c: create avatar , badge , box , button , card , dialog , flex , grid , h-stack , icon-button, nav , text-input , text , theme-provider , v-stack #### Patch Changes * Updated dependencies \[68b001c] * @vapor-ui/hooks\@0.1.0 * @vapor-ui/icons\@0.1.0 ### @vapor-ui/hooks #### Minor Changes * 68b001c: create avatar , badge , box , button , card , dialog , flex , grid , h-stack , icon-button, nav , text-input , text , theme-provider , v-stack ### @vapor-ui/icons #### Minor Changes * 68b001c: create avatar , badge , box , button , card , dialog , flex , grid , h-stack , icon-button, nav , text-input , text , theme-provider , v-stack *** # Tailwind CSS v4 URL: /docs/getting-started/tailwindcss-v4 Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/getting-started/tailwindcss-v4.mdx Vapor UI를 Tailwind CSS v4 환경에 통합하는 방법을 안내합니다. *** title: Tailwind CSS v4 description: Vapor UI를 Tailwind CSS v4 환경에 통합하는 방법을 안내합니다. ---------------------------------------------------------- ## Quick Start 프로젝트의 메인 CSS 파일(예: `global.css`)에 아래 코드를 순서대로 복사하여 붙여넣으세요. ```css /* global.css */ /* 1. 파일 최상단에서 전체 Layer 순서를 정의합니다. */ @layer tw-theme, theme, reset, components, utilities, tw-utilities; @import '@vapor-ui/core/styles.css'; @import '@vapor-ui/core/tailwind.css'; /* 2. Tailwind와 Vapor UI 스타일을 불러옵니다. */ @import 'tailwindcss/theme.css' layer(tw-theme); @import 'tailwindcss/utilities.css' layer(tw-utilities); ``` 이 설정만으로 Vapor UI와 Tailwind CSS를 함께 사용하기 위한 모든 준비가 완료됩니다. ## Styling with Vapor Utility Classes `@vapor-ui/core/tailwind.css`를 추가하면 Vapor UI의 디자인 토큰을 활용하는 다양한 유틸리티 클래스를 사용할 수 있습니다. 모든 클래스는 `v-` 접두사를 가집니다. #### 테마 토큰 클래스 Vapor UI의 디자인 토큰은 `@theme` 규칙을 통해 Tailwind CSS의 네이티브 테마 시스템에 통합됩니다. 각 토큰은 `color`, `spacing`, `radius` 등과 같은 네임스페이스로 그룹화되어 있습니다. 사용법은 각 네임스페이스에 속한 토큰 이름에 `v-` 접두사를 붙여 Tailwind의 표준 유틸리티 클래스와 조합하면 됩니다. * **color 네임스페이스** * 토큰 예시: \`--color-v-blue-500, --color-v-red-300, --color-v-gray-900, ... * 사용 예시: `bg-v-blue-500`, `text-v-red-300`, `border-v-gray-900`, ... * **spacing 네임스페이스** * 토큰 예시: `--spacing-v-100`, `--spacing-v-200`, `--spacing-v-400`, ... * 사용 예시: `p-v-100`, `m-v-200`, `gap-v-400`, `w-v-400`, ...\` * **radius 네임스페이스** * 토큰 예시: `--radius-v-200`, `--radius-v-400`, ... * 사용 예시: `rounded-v-200`, `rounded-t-v-400`, ... * **font-weight 네임스페이스** * 토큰 예시: `--font-weight-v-400`, `--font-weight-v-700`, ... * 사용 예시: `font-v-400`, `font-v-700`, ... 각 네임스페이스와 조합할 수 있는 전체 유틸리티 클래스 목록(예: `bg-`, `p-`, `w-`, `h-`, `border-` 등)은 [Tailwind CSS 공식 문서](https://tailwindcss.com/docs/theme#theme-variable-namespaces) 에서 확인하실 수 있습니다. #### 시맨틱 유틸리티 클래스 '주요 배경색', '위험 상태 텍스트' 등 의미에 기반한 고유한 유틸리티 클래스도 제공합니다. 이 클래스들은 Vapor UI에만 존재하므로 아래 리스트를 통해 확인할 수 있습니다. **배경색 (Background Colors)** `bg-v-primary`, `bg-v-secondary`, `bg-v-success`, `bg-v-warning`, `bg-v-danger`, `bg-v-hint`, `bg-v-contrast`, `bg-v-normal`, `bg-v-normal-100`, `bg-v-normal-200` **글자색 (Text Colors)** `text-v-primary`, `text-v-primary-200`, `text-v-secondary`, `text-v-secondary-200`, `text-v-success`, `text-v-success-200`, `text-v-warning`, `text-v-warning-200`, `text-v-danger`, `text-v-danger-200`, `text-v-hint`, `text-v-hint-200`, `text-v-contrast`, `text-v-contrast-200`, `text-v-accent`, `text-v-normal`, `text-v-normal-100`, `text-v-logo` **테두리색 (Border Colors)** `border-v-primary`, `border-v-secondary`, `border-v-normal`, `border-v-success`, `border-v-warning`, `border-v-danger`, `border-v-hint`, `border-v-contrast` ## Core Concepts #### CSS Layer와 우선순위 Vapor UI와 Tailwind CSS의 통합은 CSS의 `@layer` 규칙을 기반으로 동작합니다. 'Quick Start'에서 설정한 코드는 다음과 같은 스타일 우선순위 계층을 만듭니다. **우선순위 (낮음 → 높음):** 1. `tw-theme`: Tailwind의 기본 테마 변수 2. `theme`: Vapor UI의 커스텀 테마 변수 3. `reset`: Vapor UI의 브라우저 스타일 초기화 4. `components`: Vapor UI 컴포넌트의 기본 스타일 5. `utilities`: Vapor UI의 보조 유틸리티 클래스 6. `tw-utilities`: Tailwind의 유틸리티 클래스 **(가장 높은 우선순위)** 이 구조의 핵심은 Tailwind 유틸리티(`tw-utilities`)가 항상 가장 높은 우선순위를 갖는 것입니다. 덕분에 개발자는 `className="bg-blue-500 text-white"`와 같은 Tailwind 클래스를 사용하여 Vapor UI 컴포넌트의 기본 스타일을 언제든지 쉽게 재정의할 수 있습니다. #### CSS Reset 정책 스타일 초기화(Reset)는 라이브러리 간 충돌이 발생하기 쉬운 부분이므로, Vapor UI의 정책을 이해하는 것이 중요합니다. 권장: Vapor UI의 자체 Reset 사용 Vapor UI는 `@layer reset`을 통해 자체적으로 필요한 최소한의 브라우저 스타일 초기화를 수행합니다. 따라서 **Tailwind CSS의 `preflight.css`를 별도로 불러오는 것을 권장하지 않습니다.**
    두 개의 Reset을 함께 사용하면 예상치 못한 스타일 충돌이 발생하거나, 일관성이 깨질 수 있습니다. 만약 프로젝트의 특정 요구사항으로 인해 Tailwind의 `preflight.css`를 반드시 사용해야 한다면, `@layer` 순서를 직접 제어하여 preflight가 Vapor UI의 reset보다 낮은 우선순위를 갖도록 설정해야 합니다. 예를 들어, 다음과 같이 순서를 조정할 수 있습니다. ```css /* globals.css (예시) */ @layer tw-theme, theme, tw-base, reset, components, utilities, tw-utilities; @import 'tailwindcss/theme.css' layer(tw-theme); @import 'tailwindcss/utilities.css' layer(tw-utilities); @import 'tailwindcss/preflight.css' layer(tw-base); /* 추가 */ @import '@vapor-ui/core/styles.css'; @import '@vapor-ui/core/tailwind.css'; ``` **참고** * [Tailwind Preflight](https://tailwindcss.com/docs/preflight)
    # Theming URL: /docs/getting-started/theming Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/getting-started/theming.mdx Vapor UI의 테마 시스템을 설정하고 커스터마이징하는 방법을 알아보세요. *** title: Theming description: Vapor UI의 테마 시스템을 설정하고 커스터마이징하는 방법을 알아보세요. ------------------------------------------------------- # Theming Vapor UI는 라이트 모드, 다크 모드, 그리고 시스템 설정에 동기화되는 테마를 손쉽게 지원합니다. 이 가이드를 통해 `ThemeProvider`를 설정하고 `useTheme` 훅을 사용하여 테마를 관리하는 방법을 알아보세요. ## 시작하기 ### 1. 패키지 설치 먼저, Vapor UI 핵심 패키지를 설치해야 합니다. ```package-install npm install @vapor-ui/core@latest ``` ### 2. `ThemeProvider` 설정 애플리케이션의 최상위(`root`)를 `ThemeProvider`로 감싸고, 필요한 스타일을 import 합니다. ```tsx title="app/layout.tsx" import { ThemeProvider } from '@vapor-ui/core'; import '@vapor-ui/core/dist/styles.css'; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ); } ``` Next.js와 같은 서버 사이드 렌더링(SSR) 환경에서는 `suppressHydrationWarning`을 `` 태그에 추가하는 것을 권장합니다. 이는 서버에서 렌더링한 테마와 클라이언트의 테마가 달라 발생할 수 있는 하이드레이션 경고를 방지해 줍니다. ## 사용법 `useTheme` 훅을 사용하여 현재 테마를 확인하고 변경할 수 있습니다. ```tsx title="components/theme-toggle.tsx" 'use client'; import { Button } from '@vapor-ui/components/ui/button'; import { useTheme } from '@vapor-ui/core'; export function ThemeToggle() { const { resolvedTheme, setTheme, mounted } = useTheme(); // SSR 환경에서 hydration 완료 전까지 로딩 상태 표시 if (!mounted) { return null; } return ( ); } ``` ## `useTheme` Hook `useTheme` 훅은 다음과 같은 유용한 값들을 반환합니다. | Key | Type | Description | | :-------------- | :--------------------------------------------------------------------------- | :------------------------------------------------------------------ | | `theme` | `'light' \| 'dark' \| 'system' \| undefined` | 현재 설정된 테마. SSR 환경에서 `mounted`가 `false`일 때는 `undefined`. | | `setTheme` | `(theme: 'light' \| 'dark' \| 'system' \| ((prev: Theme) => Theme)) => void` | 테마를 변경하는 함수. 함수형 업데이트도 지원하며 `localStorage`에 자동 저장됩니다. | | `themes` | `('light' \| 'dark' \| 'system')[]` | 사용 가능한 테마 목록. 항상 `['light', 'dark', 'system']`을 포함합니다. | | `resolvedTheme` | `'light' \| 'dark' \| undefined` | 실제로 적용된 테마. `theme`이 `'system'`일 때 현재 시스템 테마를 반영합니다. | | `systemTheme` | `'light' \| 'dark' \| undefined` | 현재 사용자의 시스템 테마. `theme`이 `'system'`일 때만 제공됩니다. | | `forcedTheme` | `'light' \| 'dark' \| 'system' \| undefined` | 강제로 적용된 테마. 설정되지 않았을 때는 `undefined`. | | `resetTheme` | `() => void` | 테마 설정을 기본값으로 초기화하고 `localStorage`에서 저장된 값을 제거합니다. | | `mounted` | `boolean` | ThemeProvider가 클라이언트에서 마운트되었는지 여부. SSR 환경에서 hydration 이슈 방지를 위해 사용. | ## `ThemeProvider` Props `ThemeProvider`에 전달할 수 있는 props는 다음과 같습니다. | Prop | Type | Default | Description | | :-------------------------- | :------------------------------ | :----------------- | :----------------------------------------------------------------------- | | `defaultTheme` | `'light' \| 'dark' \| 'system'` | `'system'` | 테마 동작을 결정합니다. `'light'`/`'dark'`는 고정 테마, `'system'`은 시스템 테마에 자동 동기화됩니다. | | `storageKey` | `string` | `'vapor-ui-theme'` | `localStorage`에 테마를 저장할 때 사용될 키. | | `forcedTheme` | `'light' \| 'dark' \| 'system'` | `undefined` | 특정 테마를 강제로 적용합니다. 이 값이 설정되면 다른 모든 테마 관련 설정을 무시합니다. | | `disableTransitionOnChange` | `boolean` | `false` | `true`일 경우, 테마 변경 시 발생하는 CSS 트랜지션을 비활성화합니다. | | `enableColorScheme` | `boolean` | `true` | `true`일 경우, `color-scheme` CSS 속성을 자동으로 설정하여 브라우저 UI(스크롤바 등)의 테마를 조정합니다. | | `nonce` | `string \| undefined` | `undefined` | CSP(Content Security Policy) nonce 값. 보안 정책이 적용된 환경에서 사용. | ## 로컬 테마 스코프 (ThemeScope) `ThemeScope` 컴포넌트를 사용하여 특정 영역에만 다른 테마를 적용할 수 있습니다. ```tsx title="components/theme-scope-example.tsx" import { Card } from '@vapor-ui/components/ui/card'; import { ThemeScope } from '@vapor-ui/core'; export function ThemeScopeExample() { return (
    전역 테마가 적용된 카드 다크 테마가 강제 적용된 카드 라이트 테마가 강제 적용된 카드
    ); } ``` ### Portal과 함께 사용하기 Portal 컴포넌트(Dialog, Popover, Tooltip 등)가 `ThemeScope`의 테마를 상속받으려면, Portal의 컨테이너를 `ThemeScope` 영역 내부 요소로 지정하면 됩니다. ```tsx
    {' '} {/* 어떤 요소든 가능 */} {/* 이 Portal은 다크 테마를 상속받음 */}
    ``` ### `ThemeScope` Props | Prop | Type | Description | | :------------ | :--------------------------- | :------------------------------- | | `forcedTheme` | `'light' \| 'dark'` | 해당 영역에 강제로 적용할 테마. | | `children` | `React.ReactNode` | 테마가 적용될 자식 컴포넌트들. | | `style` | `CSSProperties \| undefined` | 추가 스타일. `colorScheme`는 자동으로 설정됨. | ## 고급 사용법 ### SSR 및 Hydration 처리 서버 사이드 렌더링(SSR) 환경에서는 서버와 클라이언트 간 테마 정보 차이로 인한 hydration 오류가 발생할 수 있습니다. Vapor UI는 이를 자동으로 처리합니다: 1. **`mounted` 상태**: 클라이언트 마운트 완료 여부를 추적 2. **조건부 렌더링**: `mounted`가 `false`일 때는 안전한 기본값 사용 3. **자동 동기화**: 마운트 완료 후 실제 테마 값으로 업데이트 ### 테마 동작 방식 `defaultTheme` 설정에 따라 테마 동작이 결정됩니다: #### 고정 테마 (`'light'` 또는 `'dark'`) ```tsx ``` * 항상 지정된 테마로 고정됩니다 * 시스템 테마 변경을 무시합니다 * 사용자가 `setTheme('system')`으로 변경할 수는 있습니다 #### 시스템 동기화 (`'system'`) ```tsx ``` * 운영체제 테마 설정을 자동으로 감지합니다 * 시스템 테마 변경 시 자동으로 업데이트됩니다 내부적으로 `prefers-color-scheme` CSS 미디어 쿼리를 사용하여 실시간으로 변경사항을 감지합니다. ### 테마 적용 우선순위 테마는 다음 순서대로 적용됩니다: 1. **`forcedTheme`**: `ThemeProvider`에 설정된 강제 테마 (가장 높은 우선순위) 2. **`localStorage`**: `setTheme()` 호출로 사용자가 저장한 테마 (사용자 선택 존중) 3. **`defaultTheme`**: 초기 테마 설정 (`localStorage`에 저장된 값이 없을 때 사용) * `'light'`/`'dark'`: 해당 테마로 고정 * `'system'`: 시스템 테마에 동기화 ### 다중 탭 동기화 Vapor UI는 여러 브라우저 탭 간 테마 설정을 자동으로 동기화합니다. 한 탭에서 테마를 변경하면 같은 도메인의 다른 탭들도 자동으로 업데이트됩니다. ### TypeScript 지원 ```tsx import type { ThemeConfig, ThemeScopeProps, UseThemeProps } from '@vapor-ui/core'; // 시스템 테마에 자동 동기화 const systemConfig: ThemeConfig = { defaultTheme: 'system', }; // 라이트 테마로 고정 const lightConfig: ThemeConfig = { defaultTheme: 'light', }; const MyComponent = () => { const themeData: UseThemeProps = useTheme(); // ... }; ``` # Box URL: /docs/layout/box Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/layout/box.mdx 레이아웃과 스타일링을 위한 기본 컨테이너 컴포넌트입니다. 디자인 토큰을 활용한 간격, 색상, 크기 등의 속성을 제공합니다. *** title: 'Box' site\_name: 'Box - Vapor Core' description: '레이아웃과 스타일링을 위한 기본 컨테이너 컴포넌트입니다. 디자인 토큰을 활용한 간격, 색상, 크기 등의 속성을 제공합니다.' ----------------------------------------------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/default-box.tsx", "codeblock": true } ``` ## Property *** ### Display Types Box 컴포넌트는 다양한 디스플레이 타입을 지원하여 레이아웃을 유연하게 구성할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/box-display.tsx", "codeblock": true } ``` ### Background Color Box 컴포넌트는 시맨틱 색상과 팔레트 색상을 모두 지원합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/box-background.tsx", "codeblock": true } ``` ### Spacing 패딩과 마진 속성을 사용하여 요소의 내부 및 외부 여백을 조절할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/box-spacing.tsx", "codeblock": true } ``` ### Layout 플렉스박스 속성을 활용하여 다양한 레이아웃을 구성할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/box-layout.tsx", "codeblock": true } ``` ### Dimensions 너비와 높이를 설정하거나 최소/최대 크기 제약을 적용할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/box-dimensions.tsx", "codeblock": true } ``` ### Visual Styles 테두리 둥글기, 투명도, 텍스트 정렬 등의 시각적 속성을 제어할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/box-visual.tsx", "codeblock": true } ``` ## Props Table *** ### Box Box 컴포넌트는 `div` HTML 요소를 기반으로 하며, Sprinkles 시스템을 통해 디자인 토큰 기반의 스타일링 속성을 제공합니다. 모든 표준 HTML `div` 속성도 지원합니다. | prop | type | default | description | | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ------------------------------------------------------------------ | | `display` | `block,inline,flex,grid,none` | `block` | 요소의 디스플레이 유형을 설정합니다. | | `flexDirection` | `row,column,row-reverse,column-reverse` | `row` | 플렉스 컨테이너의 주축 방향을 설정합니다. | | `justifyContent` | `flex-start,center,flex-end,space-between,space-around,space-evenly` | `flex-start` | 플렉스 컨테이너의 주축 정렬 방식을 설정합니다. | | `alignItems` | `flex-start,center,flex-end,stretch,baseline` | `stretch` | 플렉스 컨테이너의 교차축 정렬 방식을 설정합니다. | | `gap` | `$000,$025,$050,$075,$100,$150,$175,$200,$225,$250,$300,$400,$500,$600,$700,$800,$900` | `$000` | 플렉스/그리드 컨테이너의 간격을 설정합니다. $ 접두어와 함께 사용합니다. | | `padding` | `$000,$025,$050,$075,$100,$150,$175,$200,$225,$250,$300,$400,$500,$600,$700,$800,$900` | `$000` | 요소의 내부 여백을 설정합니다. $ 접두어와 함께 사용합니다. | | `paddingX` | `$000,$025,$050,$075,$100,$150,$175,$200,$225,$250,$300,$400,$500,$600,$700,$800,$900` | `$000` | 요소의 좌우 내부 여백을 설정합니다. $ 접두어와 함께 사용합니다. | | `paddingY` | `$000,$025,$050,$075,$100,$150,$175,$200,$225,$250,$300,$400,$500,$600,$700,$800,$900` | `$000` | 요소의 상하 내부 여백을 설정합니다. $ 접두어와 함께 사용합니다. | | `margin` | `$000,$025,$050,$075,$100,$150,$175,$200,$225,$250,$300,$400,$500,$600,$700,$800,$900` | `$000` | 요소의 외부 여백을 설정합니다. $ 접두어와 함께 사용합니다. | | `marginX` | `$000,$025,$050,$075,$100,$150,$175,$200,$225,$250,$300,$400,$500,$600,$700,$800,$900` | `$000` | 요소의 좌우 외부 여백을 설정합니다. $ 접두어와 함께 사용합니다. | | `marginY` | `$000,$025,$050,$075,$100,$150,$175,$200,$225,$250,$300,$400,$500,$600,$700,$800,$900` | `$000` | 요소의 상하 외부 여백을 설정합니다. $ 접두어와 함께 사용합니다. | | `width` | `$025,$050,$075,$100,$150,$175,$200,$225,$250,$300,$400,$500,$600,$700,$800` | `auto` | 요소의 너비를 설정합니다. $ 접두어와 함께 사용합니다. | | `height` | `$025,$050,$075,$100,$150,$175,$200,$225,$250,$300,$400,$500,$600,$700,$800` | `auto` | 요소의 높이를 설정합니다. $ 접두어와 함께 사용합니다. | | `backgroundColor` | `$primary-100,$primary-200,$secondary-100,$secondary-200,$success-100,$success-200,$warning-100,$warning-200,$danger-100,$danger-200,$hint-100,$hint-200,$contrast-100,$contrast-200,$accent-100,$accent-200,$normal-100,$normal-200,$blue-050,$blue-100,$blue-200,$blue-300,$blue-400,$blue-500,$blue-600,$blue-700,$blue-800,$blue-900,$cyan-050,$cyan-100,$cyan-200,$cyan-300,$cyan-400,$cyan-500,$cyan-600,$cyan-700,$cyan-800,$cyan-900,$grape-050,$grape-100,$grape-200,$grape-300,$grape-400,$grape-500,$grape-600,$grape-700,$grape-800,$grape-900,$gray-000,$gray-050,$gray-100,$gray-200,$gray-300,$gray-400,$gray-500,$gray-600,$gray-700,$gray-800,$gray-900,$gray-950,$green-050,$green-100,$green-200,$green-300,$green-400,$green-500,$green-600,$green-700,$green-800,$green-900,$lime-050,$lime-100,$lime-200,$lime-300,$lime-400,$lime-500,$lime-600,$lime-700,$lime-800,$lime-900,$orange-050,$orange-100,$orange-200,$orange-300,$orange-400,$orange-500,$orange-600,$orange-700,$orange-800,$orange-900,$pink-050,$pink-100,$pink-200,$pink-300,$pink-400,$pink-500,$pink-600,$pink-700,$pink-800,$pink-900,$red-050,$red-100,$red-200,$red-300,$red-400,$red-500,$red-600,$red-700,$red-800,$red-900,$violet-050,$violet-100,$violet-200,$violet-300,$violet-400,$violet-500,$violet-600,$violet-700,$violet-800,$violet-900,$yellow-050,$yellow-100,$yellow-200,$yellow-300,$yellow-400,$yellow-500,$yellow-600,$yellow-700,$yellow-800,$yellow-900,$black,$white` | `transparent` | 요소의 배경색을 설정합니다. 시맨틱 색상(접두어 없음) 또는 팔레트/기본 색상($ 접두어 사용)을 사용할 수 있습니다. | | `color` | `$primary-100,$primary-200,$secondary-100,$secondary-200,$success-100,$success-200,$warning-100,$warning-200,$danger-100,$danger-200,$hint-100,$hint-200,$contrast-100,$contrast-200,$normal-100,$normal-200` | `inherit` | 요소의 텍스트 색상을 설정합니다. $ 접두어와 함께 사용합니다. | | `borderRadius` | `$000,$050,$100,$200,$300,$400,$500,$600,$700,$800,$900` | `$000` | 요소의 모서리 둥글기를 설정합니다. $ 접두어와 함께 사용합니다. | | `opacity` | `0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1` | `1` | 요소의 투명도를 설정합니다. | | `textAlign` | `left,center,right,justify` | `left` | 텍스트 정렬 방식을 설정합니다. | | `overflow` | `visible,hidden,scroll,auto` | `visible` | 콘텐츠 오버플로우 처리 방식을 설정합니다. | # Flex URL: /docs/layout/flex Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/layout/flex.mdx 플렉스박스 레이아웃을 쉽게 구현할 수 있는 컨테이너 컴포넌트입니다. Box 컴포넌트를 확장하여 플렉스 관련 기능을 제공합니다. *** title: 'Flex' site\_name: 'Flex - Vapor Core' description: '플렉스박스 레이아웃을 쉽게 구현할 수 있는 컨테이너 컴포넌트입니다. Box 컴포넌트를 확장하여 플렉스 관련 기능을 제공합니다.' ------------------------------------------------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/default-flex.tsx", "codeblock": true } ``` ## Examples *** ### Direction 플렉스 컨테이너의 주축 방향을 설정하여 항목들의 배치 방향을 제어할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/flex-direction.tsx", "codeblock": true } ``` ## Props Table *** Flex 컴포넌트는 Box 컴포넌트를 확장하므로 Box의 모든 Sprinkles 속성을 상속받습니다. 추가로 플렉스 관련 기능을 제공합니다. | prop | type | default | description | | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ----------------------------------------------------------- | | `inline` | `boolean` | `false` | true일 경우 inline-flex로 렌더링되어 다른 요소들과 같은 줄에 배치됩니다. | | `flexDirection` | `row,column,row-reverse,column-reverse` | `row` | 플렉스 컨테이너의 주축 방향을 설정합니다. | | `justifyContent` | `flex-start,center,flex-end,space-between,space-around,space-evenly` | `flex-start` | 플렉스 컨테이너의 주축을 따라 항목들의 정렬 방식을 설정합니다. | | `alignItems` | `flex-start,center,flex-end,stretch,baseline` | `stretch` | 플렉스 컨테이너의 교차축을 따라 항목들의 정렬 방식을 설정합니다. | | `gap` | `$000,$025,$050,$075,$100,$150,$175,$200,$225,$250,$300,$400,$500,$600,$700,$800,$900` | `$000` | 플렉스 항목들 사이의 간격을 설정합니다. $ 접두어와 함께 사용합니다. | | `padding` | `$000,$025,$050,$075,$100,$150,$175,$200,$225,$250,$300,$400,$500,$600,$700,$800,$900` | `$000` | 컨테이너의 내부 여백을 설정합니다. $ 접두어와 함께 사용합니다. | | `backgroundColor` | `primary,secondary,success,warning,danger,hint,contrast,normal,normal-100,normal-200,$blue-050,$blue-100,$blue-200,$blue-300,$blue-400,$blue-500,$blue-600,$blue-700,$blue-800,$blue-900,$gray-000,$gray-050,$gray-100,$gray-200,$gray-300,$gray-400,$gray-500,$gray-600,$gray-700,$gray-800,$gray-900,$gray-950,$green-050,$green-100,$green-200,$green-300,$green-400,$green-500,$green-600,$green-700,$green-800,$green-900,$orange-050,$orange-100,$orange-200,$orange-300,$orange-400,$orange-500,$orange-600,$orange-700,$orange-800,$orange-900,$black,$white` | `transparent` | 배경색을 설정합니다. 시맨틱 색상(접두어 없음) 또는 팔레트 색상($ 접두어 사용)을 사용할 수 있습니다. | | `borderRadius` | `$000,$050,$100,$200,$300,$400,$500,$600,$700,$800,$900` | `$000` | 모서리 둥글기를 설정합니다. $ 접두어와 함께 사용합니다. | # Grid URL: /docs/layout/grid Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/layout/grid.mdx 유연하고 강력한 CSS Grid 기반의 레이아웃 컴포넌트입니다 *** title: 'Grid' site\_name: 'Grid - Vapor Core' description: '유연하고 강력한 CSS Grid 기반의 레이아웃 컴포넌트입니다' ------------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/default-grid.tsx", "codeblock": true } ``` ## Property *** ### Template Grid의 행과 열 템플릿을 설정하여 레이아웃 구조를 정의할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/grid-template.tsx", "codeblock": true } ``` ### Flow Grid 아이템들의 자동 배치 방향을 설정할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/grid-flow.tsx", "codeblock": true } ``` ### Inline Grid를 인라인 요소로 표시할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/grid-inline.tsx", "codeblock": true } ``` ### Span Grid 아이템이 차지할 행이나 열의 개수를 설정할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/grid-span.tsx", "codeblock": true } ``` ## Examples *** ### Layout Patterns 일반적인 레이아웃 패턴들을 Grid로 구현할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/grid-layout.tsx", "codeblock": true } ``` ## Props Table *** ### Grid.Root Grid 컨테이너 역할을 하는 루트 컴포넌트입니다. | prop | type | default | description | | ----------------- | ----------------------------------- | ----------- | ----------------------------------------------------- | | `inline` | `boolean` | `false` | 그리드를 인라인 그리드로 표시할지 여부를 설정합니다. | | `templateRows` | `string` | `undefined` | 그리드의 행 템플릿을 정의합니다. (예: '1fr 1fr' 또는 'repeat(3, 1fr)') | | `templateColumns` | `string` | `undefined` | 그리드의 열 템플릿을 정의합니다. (예: '1fr 1fr' 또는 'repeat(3, 1fr)') | | `flow` | `row,column,row dense,column dense` | `row` | 그리드 아이템들의 자동 배치 흐름을 설정합니다. | ### Grid.Item Grid 아이템 역할을 하는 컴포넌트입니다. | prop | type | default | description | | --------- | -------- | ----------- | ----------------------------------------------- | | `rowSpan` | `string` | `undefined` | 그리드 아이템이 차지할 행의 개수를 설정합니다. (예: '2' 또는 'span 2') | | `colSpan` | `string` | `undefined` | 그리드 아이템이 차지할 열의 개수를 설정합니다. (예: '2' 또는 'span 2') | # HStack URL: /docs/layout/h-stack Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/layout/h-stack.mdx 수평으로 아이템들을 배치하는 레이아웃 컴포넌트입니다 *** title: 'HStack' site\_name: 'HStack - Vapor Core' description: '수평으로 아이템들을 배치하는 레이아웃 컴포넌트입니다' ------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/default-h-stack.tsx", "codeblock": true } ``` ## Property *** ### Reverse HStack의 아이템 순서를 역순으로 배치할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/h-stack-reverse.tsx", "codeblock": true } ``` ### Spacing HStack 아이템 간의 간격을 조정할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/h-stack-spacing.tsx", "codeblock": true } ``` ## Props Table *** ### HStack 이 컴포넌트는 Flex 컴포넌트를 기반으로 하며 수평 레이아웃에 최적화되어 있습니다. | prop | type | default | description | | --------- | --------- | ------- | ---------------------------- | | `reverse` | `boolean` | `false` | 스택의 방향을 역순으로 설정할지 여부를 결정합니다. | # VStack URL: /docs/layout/v-stack Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/layout/v-stack.mdx 수직으로 아이템들을 배치하는 레이아웃 컴포넌트입니다 *** title: 'VStack' site\_name: 'VStack - Vapor Core' description: '수직으로 아이템들을 배치하는 레이아웃 컴포넌트입니다' ------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/default-v-stack.tsx", "codeblock": true } ``` ## Property *** ### Reverse VStack의 아이템 순서를 역순으로 배치할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/v-stack-reverse.tsx", "codeblock": true } ``` ### Spacing VStack 아이템 간의 간격을 조정할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/v-stack-spacing.tsx", "codeblock": true } ``` ### Alignment VStack 아이템들의 수평 정렬을 조정할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/v-stack-alignment.tsx", "codeblock": true } ``` ### Justify Content VStack 아이템들의 수직 분산을 조정할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/v-stack-justify.tsx", "codeblock": true } ``` ## Props Table *** ### VStack 이 컴포넌트는 Flex 컴포넌트를 기반으로 하며 수직 레이아웃에 최적화되어 있습니다. | prop | type | default | description | | --------- | --------- | ------- | ---------------------------- | | `reverse` | `boolean` | `false` | 스택의 방향을 역순으로 설정할지 여부를 결정합니다. | # Color URL: /docs/tokens/color Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/tokens/color.mdx 컬러 토큰은 브랜드의 정체성과 사용자 경험을 지원하는 다양한 색상을 정의합니다. *** title: Color description: 컬러 토큰은 브랜드의 정체성과 사용자 경험을 지원하는 다양한 색상을 정의합니다. --------------------------------------------------------- | token | value | | --------------------------------------- | ---------- | | --vapor-color-black | #000000 | | --vapor-color-white | #ffffff | | --vapor-color-gray-100 | #e1e1e1 | | --vapor-color-gray-200 | #c6c6c6 | | --vapor-color-gray-300 | #a3a3a3 | | --vapor-color-gray-400 | #959595 | | --vapor-color-gray-500 | #767676 | | --vapor-color-gray-600 | #5d5d5d | | --vapor-color-gray-700 | #4c4c4c | | --vapor-color-gray-800 | #393939 | | --vapor-color-gray-900 | #262626 | | --vapor-color-gray-950 | #252730 | | --vapor-color-gray-000 | #ffffff | | --vapor-color-gray-050 | #f7f7f7 | | --vapor-color-gray-rgb-950 | 37, 39, 48 | | --vapor-color-red-100 | #ffd8d7 | | --vapor-color-red-200 | #ffb3b2 | | --vapor-color-red-300 | #fc7d7f | | --vapor-color-red-400 | #f8636a | | --vapor-color-red-500 | #d54049 | | --vapor-color-red-600 | #b12932 | | --vapor-color-red-700 | #971622 | | --vapor-color-red-800 | #79000c | | --vapor-color-red-900 | #560000 | | --vapor-color-red-050 | #fff5f4 | | --vapor-color-pink-100 | #ffd8e2 | | --vapor-color-pink-200 | #ffb1c6 | | --vapor-color-pink-300 | #f77ca3 | | --vapor-color-pink-400 | #f26394 | | --vapor-color-pink-500 | #ca4676 | | --vapor-color-pink-600 | #aa2d5d | | --vapor-color-pink-700 | #92194d | | --vapor-color-pink-800 | #760037 | | --vapor-color-pink-900 | #54001e | | --vapor-color-pink-050 | #fff5f7 | | --vapor-color-grape-100 | #f4d8fb | | --vapor-color-grape-200 | #e9b4f7 | | --vapor-color-grape-300 | #d883ef | | --vapor-color-grape-400 | #d06bea | | --vapor-color-grape-500 | #b148cb | | --vapor-color-grape-600 | #922fab | | --vapor-color-grape-700 | #7d1c94 | | --vapor-color-grape-800 | #640079 | | --vapor-color-grape-900 | #450059 | | --vapor-color-grape-050 | #fcf5fe | | --vapor-color-violet-100 | #e1deff | | --vapor-color-violet-200 | #c8bffe | | --vapor-color-violet-300 | #a796fa | | --vapor-color-violet-400 | #9a83f8 | | --vapor-color-violet-500 | #805ceb | | --vapor-color-violet-600 | #6843c8 | | --vapor-color-violet-700 | #5731b0 | | --vapor-color-violet-800 | #441a94 | | --vapor-color-violet-900 | #300077 | | --vapor-color-violet-050 | #f6f5ff | | --vapor-color-blue-100 | #cee3ff | | --vapor-color-blue-200 | #a4c9ff | | --vapor-color-blue-300 | #69a4ff | | --vapor-color-blue-400 | #4e94ff | | --vapor-color-blue-500 | #3174dc | | --vapor-color-blue-600 | #1d5aba | | --vapor-color-blue-700 | #0e47a3 | | --vapor-color-blue-800 | #003288 | | --vapor-color-blue-900 | #001b71 | | --vapor-color-blue-050 | #f1f7ff | | --vapor-color-cyan-100 | #c2e8f0 | | --vapor-color-cyan-200 | #84d2e2 | | --vapor-color-cyan-300 | #1cb3cb | | --vapor-color-cyan-400 | #17a3ba | | --vapor-color-cyan-500 | #0d8298 | | --vapor-color-cyan-600 | #04677b | | --vapor-color-cyan-700 | #005468 | | --vapor-color-cyan-800 | #003f51 | | --vapor-color-cyan-900 | #002a3c | | --vapor-color-cyan-050 | #eef9fb | | --vapor-color-green-100 | #cde8dd | | --vapor-color-green-200 | #9cd2bd | | --vapor-color-green-300 | #55b495 | | --vapor-color-green-400 | #28a784 | | --vapor-color-green-500 | #058765 | | --vapor-color-green-600 | #046b4c | | --vapor-color-green-700 | #01583c | | --vapor-color-green-800 | #004229 | | --vapor-color-green-900 | #002d16 | | --vapor-color-green-050 | #f0f8f5 | | --vapor-color-lime-100 | #c9eca8 | | --vapor-color-lime-200 | #9ad84a | | --vapor-color-lime-300 | #75b51f | | --vapor-color-lime-400 | #67a519 | | --vapor-color-lime-500 | #4c850e | | --vapor-color-lime-600 | #366a03 | | --vapor-color-lime-700 | #265700 | | --vapor-color-lime-800 | #114300 | | --vapor-color-lime-900 | #002e00 | | --vapor-color-lime-050 | #f1fae8 | | --vapor-color-yellow-100 | #ffdd95 | | --vapor-color-yellow-200 | #fbbd06 | | --vapor-color-yellow-300 | #d69902 | | --vapor-color-yellow-400 | #c58a01 | | --vapor-color-yellow-500 | #a26c01 | | --vapor-color-yellow-600 | #855300 | | --vapor-color-yellow-700 | #714100 | | --vapor-color-yellow-800 | #5b2d00 | | --vapor-color-yellow-900 | #461900 | | --vapor-color-yellow-050 | #fff7e7 | | --vapor-color-orange-100 | #ffd9c8 | | --vapor-color-orange-200 | #fcb797 | | --vapor-color-orange-300 | #f4864f | | --vapor-color-orange-400 | #ef6f25 | | --vapor-color-orange-500 | #cd4d0a | | --vapor-color-orange-600 | #ab3406 | | --vapor-color-orange-700 | #932103 | | --vapor-color-orange-800 | #780600 | | --vapor-color-orange-900 | #570000 | | --vapor-color-orange-050 | #fff6f1 | | --vapor-color-background-primary-100 | #cee3ff | | --vapor-color-background-primary-200 | #3174dc | | --vapor-color-background-secondary-100 | #f7f7f7 | | --vapor-color-background-secondary-200 | #e1e1e1 | | --vapor-color-background-success-100 | #cde8dd | | --vapor-color-background-success-200 | #058765 | | --vapor-color-background-warning-100 | #ffd9c8 | | --vapor-color-background-warning-200 | #cd4d0a | | --vapor-color-background-danger-100 | #ffd8d7 | | --vapor-color-background-danger-200 | #d54049 | | --vapor-color-background-hint-100 | #e1e1e1 | | --vapor-color-background-hint-200 | #5d5d5d | | --vapor-color-background-contrast-100 | #c6c6c6 | | --vapor-color-background-contrast-200 | #393939 | | --vapor-color-background-canvas | #ffffff | | --vapor-color-background-surface-100 | #ffffff | | --vapor-color-background-surface-200 | #f7f7f7 | | --vapor-color-foreground-primary-100 | #1d5aba | | --vapor-color-foreground-primary-200 | #0e47a3 | | --vapor-color-foreground-secondary-100 | #393939 | | --vapor-color-foreground-secondary-200 | #262626 | | --vapor-color-foreground-success-100 | #046b4c | | --vapor-color-foreground-success-200 | #01583c | | --vapor-color-foreground-warning-100 | #ab3406 | | --vapor-color-foreground-warning-200 | #932103 | | --vapor-color-foreground-danger-100 | #b12932 | | --vapor-color-foreground-danger-200 | #971622 | | --vapor-color-foreground-hint-100 | #5d5d5d | | --vapor-color-foreground-hint-200 | #4c4c4c | | --vapor-color-foreground-contrast-100 | #393939 | | --vapor-color-foreground-contrast-200 | #262626 | | --vapor-color-foreground-normal-100 | #4c4c4c | | --vapor-color-foreground-normal-200 | #262626 | | --vapor-color-border-normal | #e1e1e1 | | --vapor-color-border-primary | #3174dc | | --vapor-color-border-secondary | #c6c6c6 | | --vapor-color-border-success | #058765 | | --vapor-color-border-warning | #cd4d0a | | --vapor-color-border-danger | #d54049 | | --vapor-color-border-hint | #5d5d5d | | --vapor-color-border-contrast | #393939 | | --vapor-color-logo-normal | #262626 | | --vapor-color-button-foreground-primary | #ffffff | # Size URL: /docs/tokens/size Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/tokens/size.mdx 요소의 크기,여백과 관련된 값을 정의하여 일관된 디자인을 유지하는 데 도움을 줍니다. *** title: Size description: 요소의 크기,여백과 관련된 값을 정의하여 일관된 디자인을 유지하는 데 도움을 줍니다. ------------------------------------------------------------ | token | value | | ----------------------------- | -------- | | --vapor-size-borderRadius-000 | 0rem | | --vapor-size-borderRadius-050 | 0.125rem | | --vapor-size-borderRadius-100 | 0.25rem | | --vapor-size-borderRadius-200 | 0.375rem | | --vapor-size-borderRadius-300 | 0.5rem | | --vapor-size-borderRadius-400 | 0.75rem | | --vapor-size-borderRadius-500 | 1rem | | --vapor-size-borderRadius-600 | 1.25rem | | --vapor-size-borderRadius-700 | 1.5rem | | --vapor-size-borderRadius-800 | 2rem | | --vapor-size-borderRadius-900 | 2.5rem | | --vapor-size-space-000 | 0rem | | --vapor-size-space-025 | 0.125rem | | --vapor-size-space-050 | 0.25rem | | --vapor-size-space-075 | 0.375rem | | --vapor-size-space-100 | 0.5rem | | --vapor-size-space-150 | 0.75rem | | --vapor-size-space-175 | 0.875rem | | --vapor-size-space-200 | 1rem | | --vapor-size-space-225 | 1.125rem | | --vapor-size-space-250 | 1.25rem | | --vapor-size-space-300 | 1.5rem | | --vapor-size-space-400 | 2rem | | --vapor-size-space-500 | 2.5rem | | --vapor-size-space-600 | 3rem | | --vapor-size-space-700 | 3.5rem | | --vapor-size-space-800 | 4rem | | --vapor-size-space-900 | 4.5rem | | --vapor-size-dimension-025 | 0.125rem | | --vapor-size-dimension-050 | 0.25rem | | --vapor-size-dimension-075 | 0.375rem | | --vapor-size-dimension-100 | 0.5rem | | --vapor-size-dimension-150 | 0.75rem | | --vapor-size-dimension-175 | 0.875rem | | --vapor-size-dimension-200 | 1rem | | --vapor-size-dimension-225 | 1.125rem | | --vapor-size-dimension-250 | 1.25rem | | --vapor-size-dimension-300 | 1.5rem | | --vapor-size-dimension-400 | 2rem | | --vapor-size-dimension-500 | 2.5rem | | --vapor-size-dimension-600 | 3rem | | --vapor-size-dimension-700 | 3.5rem | | --vapor-size-dimension-800 | 4rem | # Typography URL: /docs/tokens/typography Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/tokens/typography.mdx 텍스트의 스타일과 형식을 정의하여 일관된 글꼴 사용과 가독성을 보장합니다. *** title: Typography description: 텍스트의 스타일과 형식을 정의하여 일관된 글꼴 사용과 가독성을 보장합니다. ------------------------------------------------------ | token | value | | ------------------------------------ | ---------- | | --vapor-typography-fontFamily-sans | Pretendard | | --vapor-typography-fontFamily-code | FiraCode | | --vapor-typography-fontSize-025 | 10px | | --vapor-typography-fontSize-050 | 12px | | --vapor-typography-fontSize-075 | 14px | | --vapor-typography-fontSize-100 | 16px | | --vapor-typography-fontSize-200 | 18px | | --vapor-typography-fontSize-300 | 20px | | --vapor-typography-fontSize-400 | 24px | | --vapor-typography-fontSize-500 | 32px | | --vapor-typography-fontSize-600 | 38px | | --vapor-typography-fontSize-700 | 48px | | --vapor-typography-fontSize-800 | 64px | | --vapor-typography-fontSize-900 | 80px | | --vapor-typography-fontSize-1000 | 120px | | --vapor-typography-fontWeight-400 | regular | | --vapor-typography-fontWeight-500 | medium | | --vapor-typography-fontWeight-700 | bold | | --vapor-typography-fontWeight-800 | extra-bold | | --vapor-typography-letterSpacing-000 | 0 | | --vapor-typography-letterSpacing-100 | -0.1px | | --vapor-typography-letterSpacing-200 | -0.2px | | --vapor-typography-letterSpacing-300 | -0.3px | | --vapor-typography-letterSpacing-400 | -0.4px | | --vapor-typography-lineHeight-025 | 14px | | --vapor-typography-lineHeight-050 | 18px | | --vapor-typography-lineHeight-075 | 22px | | --vapor-typography-lineHeight-100 | 24px | | --vapor-typography-lineHeight-200 | 26px | | --vapor-typography-lineHeight-300 | 30px | | --vapor-typography-lineHeight-400 | 36px | | --vapor-typography-lineHeight-500 | 48px | | --vapor-typography-lineHeight-600 | 56px | | --vapor-typography-lineHeight-700 | 62px | | --vapor-typography-lineHeight-800 | 84px | | --vapor-typography-lineHeight-900 | 104px | | --vapor-typography-lineHeight-1000 | 156px | # Form URL: /blocks/form Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/blocks/form.mdx 여러 개의 입력 단위를 하나로 묶어 사용자로부터 정보를 수집하는 폼 영역 *** title: Form description: 여러 개의 입력 단위를 하나로 묶어 사용자로부터 정보를 수집하는 폼 영역 previewImageUrl: /images/form-preview\.svg ------------------------------------------ ### Type: Login ```tsx import './login-form.css'; import { Button, Checkbox, Field, Form, HStack, TextInput, VStack } from '@vapor-ui/core'; export default function LoginForm() { return ( event.preventDefault()} />} > }> 이메일 이메일을 입력해주세요. 유효한 이메일 형식이 아닙니다. }> 비밀번호 8~16자, 대소문자 영문, 특수문자 포함 비밀번호를 입력해주세요. 유효한 비밀번호 형식이 아닙니다. }> 자동 로그인 ); } ``` ```css .input-label { color: var(--vapor-color-foreground-normal-100, #525463); font-size: var(--vapor-typography-fontSize-050, 0.75rem); font-weight: var(--vapor-typography-fontWeight-500); line-height: var(--vapor-typography-lineHeight-050, 1.125rem); /* 150% */ letter-spacing: var(--vapor-typography-letterSpacing-000, 0); } .checkbox-label { color: var(--vapor-color-foreground-normal-100, #2b2d36); font-size: var(--vapor-typography-fontSize-075, 0.875rem); font-weight: var(--vapor-typography-fontWeight-400); line-height: var(--vapor-typography-lineHeight-075, 1.375rem); /* 157.143% */ letter-spacing: var(--vapor-typography-letterSpacing-100, -0.00625rem); } .helper-text { color: var(--vapor-color-foreground-hint, #6c6e7e); font-size: var(--vapor-typography-fontSize-075, 0.875rem); font-weight: var(--vapor-typography-fontWeight-400); line-height: var(--vapor-typography-lineHeight-075, 1.375rem); /* 157.143% */ letter-spacing: var(--vapor-typography-letterSpacing-100, -0.00625rem); } ``` ### Type: SignUp ```tsx import './signup-form.css'; import { useState } from 'react'; import { Button, Checkbox, Field, Form, HStack, IconButton, Select, Text, TextInput, VStack, } from '@vapor-ui/core'; import { ChevronRightOutlineIcon } from '@vapor-ui/icons'; const jobs = [ { label: '개발자', value: 'developer' }, { label: '디자이너', value: 'designer' }, { label: '프로덕트 매니저', value: 'product-manager' }, { label: '기타', value: 'etc' }, ]; export default function SignupForm() { const [passwordCheck, setPasswordCheck] = useState(''); // const passwordCheck = useRef(''); return ( event.preventDefault()} />} > }> 이메일 이메일을 입력해주세요. 유효한 이메일 형식이 아닙니다. }> 비밀번호 { setPasswordCheck(value); }} required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[\W_]).{8,16}" /> 8~16자, 대소문자 영문, 숫자, 특수문자 포함 비밀번호를 입력해주세요. 유효한 비밀번호 형식이 아닙니다. }> 비밀번호 확인 8~16자, 대소문자 영문, 특수문자 포함 비밀번호를 입력해주세요. 비밀번호를 다시 확인해주세요. }> 이름 이름을 입력해주세요. }> 직업 {jobs.map((job) => ( {job.label} ))} }> 필수 약관에 모두 동의 }> 이용 약관 동의 }> 개인 정보 수집 이용 동의 이미 계정이 있으세요? ); } ``` ```css .input-label { color: var(--vapor-color-foreground-normal-100, #525463); font-size: var(--vapor-typography-fontSize-050, 0.75rem); font-weight: var(--vapor-typography-fontWeight-500); line-height: var(--vapor-typography-lineHeight-050, 1.125rem); /* 150% */ letter-spacing: var(--vapor-typography-letterSpacing-000, 0); } .checkbox-label { color: var(--vapor-color-foreground-normal-100, #2b2d36); font-size: var(--vapor-typography-fontSize-075, 0.875rem); font-weight: var(--vapor-typography-fontWeight-400); line-height: var(--vapor-typography-lineHeight-075, 1.375rem); /* 157.143% */ letter-spacing: var(--vapor-typography-letterSpacing-100, -0.00625rem); } .helper-text { color: var(--vapor-color-foreground-hint, #6c6e7e); font-size: var(--vapor-typography-fontSize-075, 0.875rem); font-weight: var(--vapor-typography-fontWeight-400); line-height: var(--vapor-typography-lineHeight-075, 1.375rem); /* 157.143% */ letter-spacing: var(--vapor-typography-letterSpacing-100, -0.00625rem); } ``` ### Type: Authentication ```tsx import { Children, cloneElement, isValidElement, useState } from 'react'; import './authentication-form.css'; import { Button, Field, Form, Select, TextInput, VStack } from '@vapor-ui/core'; const codes = { '+82': '🇰🇷 +82', '+1': '🇺🇸 +1', '+34': '🇪🇸 +34', '+33': '🇫🇷 +33', '+39': '🇮🇹 +39', '+44': '🇬🇧 +44', '+81': '🇯🇵 +81', '+86': '🇨🇳 +86', '+7': '🇷🇺 +7', }; export default function AuthenticationForm() { const [phoneNumber, setPhoneNumber] = useState(''); const handleChange = (e: React.ChangeEvent) => { setPhoneNumber(e.target.value); }; const regex = /^[0-9\s-()]{6,20}$/; return ( e.preventDefault()} />} > }> 핸드폰 번호 {Object.entries(codes).map(([value, label]) => ( {label} ))} 핸드폰 번호를 입력해주세요. 올바른 핸드폰 번호를 입력해주세요. }> 인증번호 인증번호를 입력해주세요. ); } interface GroupProps { attached?: boolean; children?: React.ReactNode; } const Group = ({ attached = false, children: childrenProp }: GroupProps) => { const children = Children.map(childrenProp, (child, index) => { if (!isValidElement(child)) return; return cloneElement(child as React.ReactElement, { style: { '--group-index': index, ...child.props.style }, ...(index === 0 ? { 'data-first-item': '' } : {}), ...(index === Children.count(childrenProp) - 1 ? { 'data-last-item': '' } : {}), }); }); return (
    {children}
    ); }; ``` ```css .input-label { color: var(--vapor-color-foreground-normal-100, #525463); font-size: var(--vapor-typography-fontSize-050, 0.75rem); font-weight: var(--vapor-typography-fontWeight-500); line-height: var(--vapor-typography-lineHeight-050, 1.125rem); /* 150% */ letter-spacing: var(--vapor-typography-letterSpacing-000, 0); } .group { display: flex; align-items: center; gap: 0; &.attached { & > [data-first-item] { border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; } & > [data-last-item] { border: 1px solid var(--vapor-color-border-normal, #d1d2d8); border-top-left-radius: 0; border-bottom-left-radius: 0; } & > *:not([data-first-item]):not([data-last-item]) { border: 1px solid var(--vapor-color-border-normal, #d1d2d8); border-right: none; border-radius: 0; } } } ```     ### Type: Research ```tsx import './research-form.css'; import { Button, Checkbox, Field, Form, HStack, MultiSelect, Radio, RadioGroup, Select, Switch, Text, TextInput, VStack, } from '@vapor-ui/core'; const jobs = [ { label: '프론트엔드 개발자', value: 'frontend-engineer' }, { label: '백엔드 개발자', value: 'backend-engineer' }, { label: '풀스택 개발자', value: 'fullstack-engineer' }, { label: '모바일 앱 개발자', value: 'app-engineer' }, { label: 'DevOps/클라우드 엔지니어', value: 'devops-engineer' }, ]; const stacks = [ { label: 'HTML/CSS', value: 'html-css' }, { label: 'JavaScript', value: 'javascript' }, { label: 'React', value: 'react' }, { label: 'Vue.js', value: 'vue' }, { label: 'Next.js', value: 'nextjs' }, ]; export default function ResearchForm() { return ( event.preventDefault()} />} > 기본 정보를 입력해주세요. }> 이름 이름을 입력해주세요. }> 직업 {jobs.map((job) => ( {job.label} ))} }> 스택 {stacks.map((stack) => ( {stack.label} ))} }> 만족도를 선택해주세요. } alignItems="center" gap="$100" className="radio-label" > 매우 만족 } alignItems="center" gap="$100" className="radio-label" > 매우 만족 } alignItems="center" gap="$100" className="radio-label" > 불만족 좋았던 강의는 무엇인가요? 중복 선택 가능 }> 멘토님 강연 능력 }> 주제(협업 및 커뮤니케이션 스킬) }> 전반적인 강의 내용 }> 세미나 자료 }> 기타 개인 정보 수신 동의 }> 서비스 메일 수신 동의 }> 이벤트성 광고 수신 동의 ); } ``` ```css .input-label { color: var(--vapor-color-foreground-normal-100, #525463); font-size: var(--vapor-typography-fontSize-050, 0.75rem); font-weight: var(--vapor-typography-fontWeight-500); line-height: var(--vapor-typography-lineHeight-050, 1.125rem); /* 150% */ letter-spacing: var(--vapor-typography-letterSpacing-000, 0); } .checkbox-label { color: var(--vapor-color-foreground-normal-100, #2b2d36); font-size: var(--vapor-typography-fontSize-075, 0.875rem); font-weight: var(--vapor-typography-fontWeight-400); line-height: var(--vapor-typography-lineHeight-075, 1.375rem); /* 157.143% */ letter-spacing: var(--vapor-typography-letterSpacing-100, -0.00625rem); } .radio-label { color: var(--vapor-color-foreground-normal-100, #2b2d36); font-size: var(--vapor-typography-fontSize-075, 0.875rem); font-weight: var(--vapor-typography-fontWeight-400); line-height: var(--vapor-typography-lineHeight-075, 1.375rem); /* 157.143% */ letter-spacing: var(--vapor-typography-letterSpacing-100, -0.00625rem); } ``` ### Type: Filter ```tsx import './filter-form.css'; import type { FormEvent } from 'react'; import { useCallback, useRef, useState } from 'react'; import { Box, Button, Checkbox, Collapsible, Field, Form, HStack, Radio, RadioGroup, Text, VStack, } from '@vapor-ui/core'; import { ChevronDownOutlineIcon, RefreshOutlineIcon } from '@vapor-ui/icons'; // 초기값 정의 type FormData = typeof FORM_SCHEME; const FORM_SCHEME = { view: 'recent', sort: { feedback: false, buttons: false, 'data-display': false, overlay: false, inputs: false, navigation: false, utils: false, }, packs: { 'goorm-dev/vapor-core': false, 'goorm-dev/vapor-component': false, 'vapor-ui/core': false, }, status: { active: false, inactive: false, draft: false }, tag: { ui: false, 'open-source': false, performance: false }, }; export default function FilterForm() { const formRef = useRef(null); const [formData, setFormData] = useState({ view: FORM_SCHEME.view, sort: { ...FORM_SCHEME.sort }, packs: { ...FORM_SCHEME.packs }, status: { ...FORM_SCHEME.status }, tag: { ...FORM_SCHEME.tag }, }); const getFieldValues = useCallback( (fieldName: T): FormData[T] => formData[fieldName], [formData], ); const updateFormData = useCallback( (fieldName: keyof FormData, key: string, checked: boolean) => { setFormData((prev) => { const field = prev[fieldName]; if (typeof field !== 'object') return prev; return { ...prev, [fieldName]: { ...field, [key]: checked } }; }); }, [], ); // 라디오 버튼 변경 핸들러 const handleRadioChange = useCallback((fieldName: keyof FormData, value: string) => { setFormData((prev) => ({ ...prev, [fieldName]: value })); }, []); // 체크박스 변경 핸들러 const handleCheckboxChange = useCallback( (fieldName: keyof FormData, key: string) => (checked: boolean) => { updateFormData(fieldName, key, checked); }, [updateFormData], ); const selectedSortCount = Object.values(getFieldValues('sort')).filter(Boolean).length; const handleReset = (event: FormEvent) => { event.preventDefault(); setFormData({ view: FORM_SCHEME.view, sort: { ...FORM_SCHEME.sort }, packs: { ...FORM_SCHEME.packs }, status: { ...FORM_SCHEME.status }, tag: { ...FORM_SCHEME.tag }, }); }; return ( } > Filter } border="none" marginY="$150" height="1px" width="100%" backgroundColor="$gray-300" /> View }> handleRadioChange('view', value as string) } > } gap="$100" alignItems="center" className="radio-label" > Recent } gap="$100" alignItems="center" className="radio-label" > Most Popular Sort {selectedSortCount} } > Feedback }> Buttons }> Data Display }> Overlay }> Inputs }> Navigation }> Utils Package } > goorm-dev/vapor-core }> goorm-dev/vapor-component }> vapor-ui/core Status } > Active }> Inactive }> Draft Tag } > UI }> Open Source }> Performance ); } ``` ```css .checkbox-label { color: var(--vapor-color-foreground-normal-100, #2b2d36); font-size: var(--vapor-typography-fontSize-075, 0.875rem); font-weight: var(--vapor-typography-fontWeight-400); line-height: var(--vapor-typography-lineHeight-075, 1.375rem); /* 157.143% */ letter-spacing: var(--vapor-typography-letterSpacing-100, -0.00625rem); } .radio-label { color: var(--vapor-color-foreground-normal-100, #2b2d36); font-size: var(--vapor-typography-fontSize-075, 0.875rem); font-weight: var(--vapor-typography-fontWeight-400); line-height: var(--vapor-typography-lineHeight-075, 1.375rem); /* 157.143% */ letter-spacing: var(--vapor-typography-letterSpacing-100, -0.00625rem); } .collapsible-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; transition: transform 150ms ease; } .trigger-icon { transition: transform 150ms ease; &:where([data-open] &) { transform: rotate(180deg); } &:where([data-closed] &) { transform: rotate(0); } } ``` ### Type: BottomSheetFilter ```tsx import './sheet-form.css'; import type { FormEvent } from 'react'; import { useCallback, useState } from 'react'; import { Button, Checkbox, Field, Form, HStack, Sheet, Tabs, VStack } from '@vapor-ui/core'; import { RefreshOutlineIcon } from '@vapor-ui/icons'; type FormData = typeof FORM_SCHEME; const FORM_SCHEME = { sort: { feedback: false, buttons: true, 'data-display': false, overlay: false, inputs: true, navigation: false, utils: false, }, packs: { 'goorm-dev/vapor-core': true, 'goorm-dev/vapor-component': false, 'vapor-ui/core': false, }, status: { active: true, inactive: false, draft: false, }, tag: { ui: true, 'open-source': false, performance: false, }, }; export default function SheetForm() { const [formData, setFormData] = useState(() => { return { sort: { ...FORM_SCHEME.sort }, packs: { ...FORM_SCHEME.packs }, status: { ...FORM_SCHEME.status }, tag: { ...FORM_SCHEME.tag }, }; }); const getFieldValues = useCallback( (fieldName: T): FormData[T] => formData[fieldName], [formData], ); const updateFormData = useCallback( (fieldName: keyof FormData, key: string, checked: boolean) => { setFormData((prev) => { const field = prev[fieldName]; if (typeof field !== 'object') return prev; return { ...prev, [fieldName]: { ...field, [key]: checked } }; }); }, [], ); const handleCheckboxChange = useCallback( (fieldName: keyof FormData, key: string) => (checked: boolean) => { updateFormData(fieldName, key, checked); }, [updateFormData], ); const handleReset = useCallback((event: FormEvent) => { event.preventDefault(); setFormData({ sort: { ...FORM_SCHEME.sort }, packs: { ...FORM_SCHEME.packs }, status: { ...FORM_SCHEME.status }, tag: { ...FORM_SCHEME.tag }, }); }, []); return ( } > }>Open Filter Filter Sort Package Status Tag {/* Sort */} } > Feedback } > Buttons } > Data Display } > Overlay } > Inputs } > Navigation } > Utils {/* Package */} } > goorm-dev/vapor-core } > goorm-dev/vapor-component } > vapor-ui/core {/* Status */} } > Active } > Inactive } > Draft {/* Tag */} } > UI } > Open Source } > Performance }> Apply ); } ``` ```css .checkbox-label { color: var(--vapor-color-foreground-normal-100, #2b2d36); font-size: var(--vapor-typography-fontSize-075, 0.875rem); font-weight: var(--vapor-typography-fontWeight-400); line-height: var(--vapor-typography-lineHeight-075, 1.375rem); /* 157.143% */ letter-spacing: var(--vapor-typography-letterSpacing-100, -0.00625rem); } .popup { border-top-left-radius: var(--vapor-size-borderRadius-300); border-top-right-radius: var(--vapor-size-borderRadius-300); } .tabs { height: 100%; } .tabs-list { padding-inline: 0; } .tabs-panel { padding-block: var(--vapor-size-space-200); } .header { padding: var(--vapor-size-space-250) var(--vapor-size-space-200) 0; } .body { padding-inline: var(--vapor-size-space-200); } .footer { gap: var(--vapor-size-space-100); padding-top: var(--vapor-size-space-100); } .refresh-button { flex-shrink: 0; } .apply-button { flex-shrink: 0; flex-grow: 1; } ``` # Navbar URL: /blocks/nav-bar Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/blocks/nav-bar.mdx 사용자의 액션에 대한 피드백 혹은 서비스에 대한 메시지를 제공할 때 사용할 수 있습니다. 상황에 따라 컬러와 좌측 아이콘, 닫기 버튼을 적절히 사용합니다. *** title: Navbar description: 사용자의 액션에 대한 피드백 혹은 서비스에 대한 메시지를 제공할 때 사용할 수 있습니다. 상황에 따라 컬러와 좌측 아이콘, 닫기 버튼을 적절히 사용합니다. previewImageUrl: /images/nav-bar-preview\.svg --------------------------------------------- ### Left Aligned Navbar ```tsx import './block.css'; import type { ComponentProps } from 'react'; import { Avatar, Collapsible, HStack, IconButton, NavigationMenu, Sheet } from '@vapor-ui/core'; import { BellOnIcon, ChevronDownOutlineIcon, CloseOutlineIcon, MenuOutlineIcon, } from '@vapor-ui/icons'; export default function Block1() { return ( Features Pricing Templates }> } > } > } > } > Features Container SBOM Pricing Templates ); } const LogoSvg = (props: ComponentProps<'svg'>) => { return ( ); }; ``` ```css .navbar-desktop { display: inherit; @media (max-width: 767px) { display: none; } } .navbar-mobile { display: none; @media (max-width: 767px) { display: inherit; } } .logo { flex-shrink: 0; } .vertical-navigation-menu { width: 100%; } .collapsible-trigger { width: 100%; justify-content: space-between; } .link-item { justify-content: flex-start; } .nested-link-item { justify-content: flex-start; padding-left: var(--vapor-size-space-250); } ``` ### Center Aligned Navbar ```tsx import './block.css'; import type { ComponentProps } from 'react'; import { Avatar, Collapsible, HStack, IconButton, NavigationMenu, Sheet } from '@vapor-ui/core'; import { BellOnIcon, ChevronDownOutlineIcon, CloseOutlineIcon, MenuOutlineIcon, } from '@vapor-ui/icons'; export default function Block2() { return ( Features Pricing Templates }> } > } > } > } > Features Container SBOM Pricing Templates ); } const LogoSvg = (props: ComponentProps<'svg'>) => { return ( ); }; ``` ```css .navbar-desktop { display: inherit; @media (max-width: 767px) { display: none; } } .navbar-mobile { display: none; @media (max-width: 767px) { display: inherit; } } .logo { flex-shrink: 0; } .vertical-navigation-menu { width: 100%; } .collapsible-trigger { width: 100%; justify-content: space-between; } .link-item { justify-content: flex-start; } .nested-link-item { justify-content: flex-start; padding-left: var(--vapor-size-space-250); } ``` ### Right Aligned Navbar ```tsx import './block.css'; import type { ComponentProps } from 'react'; import { Avatar, Collapsible, HStack, IconButton, NavigationMenu, Sheet } from '@vapor-ui/core'; import { BellOnIcon, ChevronDownOutlineIcon, CloseOutlineIcon, MenuOutlineIcon, } from '@vapor-ui/icons'; export default function Block3() { return ( Features Pricing Templates }> } > } > } > } > Features Container SBOM Pricing Templates ); } const LogoSvg = (props: ComponentProps<'svg'>) => { return ( ); }; ``` ```css .navbar-desktop { display: inherit; @media (max-width: 767px) { display: none; } } .navbar-mobile { display: none; @media (max-width: 767px) { display: inherit; } } .logo { flex-shrink: 0; } .vertical-navigation-menu { width: 100%; } .collapsible-trigger { width: 100%; justify-content: space-between; } .link-item { justify-content: flex-start; } .nested-link-item { justify-content: flex-start; padding-left: var(--vapor-size-space-250); } ``` ### Navbar with Login Button ```tsx import './block.css'; import type { ComponentProps } from 'react'; import { Button, Collapsible, HStack, IconButton, NavigationMenu, Sheet } from '@vapor-ui/core'; import { ChevronDownOutlineIcon, CloseOutlineIcon, MenuOutlineIcon } from '@vapor-ui/icons'; export default function Block4() { return ( Features Pricing Templates } > } > } > Features Container SBOM Pricing Templates ); } const LogoSvg = (props: ComponentProps<'svg'>) => { return ( ); }; ``` ```css .navbar-desktop { display: inherit; @media (max-width: 767px) { display: none; } } .navbar-mobile { display: none; @media (max-width: 767px) { display: inherit; } } .logo { flex-shrink: 0; } .vertical-navigation-menu { width: 100%; } .collapsible-trigger { width: 100%; justify-content: space-between; } .link-item { justify-content: flex-start; } .nested-link-item { justify-content: flex-start; padding-left: var(--vapor-size-space-250); } ``` ### Logo Centered Navbar ```tsx import './logo.css'; import type { ComponentProps } from 'react'; import { Button, HStack } from '@vapor-ui/core'; export default function Block5() { return ( ); } const LogoSvg = (props: ComponentProps<'svg'>) => { return ( ); }; ``` ```css .logo { flex-shrink: 0; } ``` ### Page Navigation Navbar ```tsx import './logo.css'; import type { ComponentProps } from 'react'; import { HStack, IconButton } from '@vapor-ui/core'; import { BackPageOutlineIcon, ForwardPageOutlineIcon } from '@vapor-ui/icons'; export default function Block6() { return ( ); } const LogoSvg = (props: ComponentProps<'svg'>) => { return ( ); }; ``` ```css .logo { flex-shrink: 0; } ```