goorm-dev · MaxLee-dev · Feb 6, 2026 · gemini-code-assist · Feb 6, 2026
@@ -73,6 +73,14 @@ FallbackPrimitive에 children을 전달하여 커스텀 fallback 콘텐츠를
 ```
 </Demo>
 
+## Anatomy
+
+---
+
+컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다.
+
+<ComponentExplorer name="avatar/anatomy-avatar" componentName="avatar" />
+
 ## Props Table
 
 ---

@@ -73,6 +73,14 @@ Breadcrumb의 크기를 설정합니다.
 ```
 </Demo>
 
+## Anatomy
+
+---
+
+컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다.
+
+<ComponentExplorer name="breadcrumb/anatomy-breadcrumb" componentName="breadcrumb" />
+
 ## Props Table
 
 ---

@@ -47,6 +47,14 @@ Callout의 역할에 따른 색상을 설정합니다.
 ```
 </Demo>
 
+## Anatomy
+
+---
+
+컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다.
+
+<ComponentExplorer name="callout/anatomy-callout" componentName="callout" />
+
 ## Props Table
 
 ---

@@ -30,6 +30,14 @@ description: 'Card는 이미지와 텍스트, 일부 기능 버튼을 포함한
 ```
 </Demo>
 
+## Anatomy
+
+---
+
+컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다.
+
+<ComponentExplorer name="card/anatomy-card" componentName="card" />
+
 ## Props Table
 
 ---

@@ -82,6 +82,14 @@ Checkbox의 크기를 설정합니다.
 ```
 </Demo>
 
+## Anatomy
+
+---
+
+컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다.
+
+<ComponentExplorer name="checkbox/anatomy-checkbox" componentName="checkbox" />
+
 ## Props Table
 
 ---

@@ -56,6 +56,14 @@ Collapsible의 비활성화 상태를 설정합니다.
 ```
 </Demo>
 
+## Anatomy
+
+---
+
+컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다.
+
+<ComponentExplorer name="collapsible/anatomy-collapsible" componentName="collapsible" />
+
 ## Props Table
 
 ---

@@ -125,6 +125,14 @@ Field의 비활성화 상태를 설정합니다.
 ```
 </Demo>
 
+## Anatomy
+
+---
+
+컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다.
+
+<ComponentExplorer name="field/anatomy-field" componentName="field" />
+
 ## Props Table
 
 ---

@@ -43,6 +43,14 @@ FloatingBar는 제어 형태로 사용되어, 여러 상태를 동시에 관리
 ```
 </Demo>
 
+## Anatomy
+
+---
+
+컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다.
+
+<ComponentExplorer name="floating-bar/anatomy-floating-bar" componentName="floating-bar" />
+
 ## Props Table
 
 ---

@@ -30,6 +30,14 @@ description: 'InputGroup은 입력 필드(TextInput, Textarea)와 관련 요소
 ```
 </Demo>
 
+## Anatomy
+
+---
+
+컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다.
+
+<ComponentExplorer name="input-group/anatomy-input-group" componentName="input-group" />
+
 ## Props Table
 
 ---

@@ -99,6 +99,14 @@ Submenu를 구성할 수 있습니다.
 ```
 </Demo>
 
+## Anatomy
+
+---
+
+컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다.
+
+<ComponentExplorer name="menu/anatomy-menu" componentName="menu" />
+
 ## Props Table
 
 ---

@@ -99,6 +99,14 @@ MultiSelect.Value에 함수형 children을 제공하여 선택된 값들의 표
 ```
 </Demo>
 
+## Anatomy
+
+---
+
+컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다.
+
+<ComponentExplorer name="multi-select/anatomy-multi-select" componentName="multi-select" />
+
 ## Props Table
 
 ---

@@ -112,6 +112,14 @@ NavigationMenu의 모든 프리셋 컴포넌트를 분리하여 사용합니다.
 ```
 </Demo>
 
+## Anatomy
+
+---
+
+컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다.
+
+<ComponentExplorer name="navigation-menu/anatomy-navigation-menu" componentName="navigation-menu" />
+
 ## Props Table
 
 ---

@@ -82,6 +82,14 @@ Pagination 컴포넌트를 제어 컴포넌트로 사용하는 예시입니다.
 ```
 </Demo>
 
+## Anatomy
+
+---
+
+컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다.
+
+<ComponentExplorer name="pagination/anatomy-pagination" componentName="pagination" />
+
 ---
 
 ### Pagination.Root

@@ -60,6 +60,14 @@ Popover와 트리거 간의 거리를 조정합니다.
 ```
 </Demo>
 
+## Anatomy
+
+---
+
+컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다.
+
+<ComponentExplorer name="popover/anatomy-popover" componentName="popover" />
+
 ## Props Table
 
 ---

@@ -86,6 +86,14 @@ Radio의 유연한 사용예시입니다.
 ```
 </Demo>
 
+## Anatomy
+
+---
+
+컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다.
+
+<ComponentExplorer name="radio/anatomy-radio" componentName="radio" />
+
 ## Props Table
 
 ---

@@ -112,6 +112,14 @@ Select.Value에 함수형 children을 제공하여 선택된 값을 커스터마
 ```
 </Demo>
 
+## Anatomy
+
+---
+
+컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다.
+
+<ComponentExplorer name="select/anatomy-select" componentName="select" />
+
 ## Props Table
 
 ---

@@ -73,6 +73,14 @@ Sheet가 닫혀도 DOM에서 제거되지 않고 유지되도록 설정합니다
 ```
 </Demo>
 
+## Anatomy
+
+---
+
+컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다.
+
+<ComponentExplorer name="sheet/anatomy-sheet" componentName="sheet" />
+
 ## Props Table
 
 ---

@@ -86,6 +86,14 @@ Switch의 비활성화 상태를 설정합니다.
 ```
 </Demo>
 
+## Anatomy
+
+---
+
+컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다.
+
+<ComponentExplorer name="switch/anatomy-switch" componentName="switch" />
+
 ## Props Table
 
 ---

@@ -18,6 +18,14 @@ Table 컴포넌트는 순수한 뷰(View) 역할에 집중하여 기본적인
 ```
 </Demo>
 
+## Anatomy
+
+---
+
+컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다.
+
+<ComponentExplorer name="table/anatomy-table" componentName="table" />
+
 ## Props Table
 
 ---

@@ -112,6 +112,14 @@ Tabs의 활성 상태를 외부에서 제어합니다.
 ```
 </Demo>
 
+## Anatomy
+
+---
+
+컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다.
+
+<ComponentExplorer name="tabs/anatomy-tabs" componentName="tabs" />
+
 ## Props Table
 
 ---

@@ -99,6 +99,14 @@ Toast 아이템을 완전히 커스텀할 수 있습니다.
 ```
 </Demo>
 
+## Anatomy
+
+---
+
+컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다.
+
+<ComponentExplorer name="toast/anatomy-toast" componentName="toast" />
+
 ## Props
 
 ### Toast.Provider

@@ -95,6 +95,14 @@ Tooltip의 거리와 정렬 오프셋을 조정할 수 있습니다.
 ```
 </Demo>
 
+## Anatomy
+
+---
+
+컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다.
+
+<ComponentExplorer name="tooltip/anatomy-tooltip" componentName="tooltip" />
+
 ## Props Table
 
 ---

@@ -86,6 +86,14 @@ Grid 아이템이 차지할 행이나 열의 개수를 설정할 수 있습니
 ```
 </Demo>
 
+## Anatomy
+
+---
+
+컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다.
+
+<ComponentExplorer name="grid/anatomy-grid" componentName="grid" />
+
 ## Props Table
 
 ---

@@ -0,0 +1,18 @@
+import { Avatar, Flex } from '@vapor-ui/core';
+
+import { VAPOR_LOGO_URL } from '~/constants/image-urls';
+
+export default function AnatomyAvatar() {
+    return (
+        <Flex gap="$200">
+            <Avatar.Root data-part="Root" alt="Vapor" src={VAPOR_LOGO_URL}>
+                <Avatar.ImagePrimitive data-part="ImagePrimitive" />
+                <Avatar.FallbackPrimitive data-part="FallbackPrimitive">V</Avatar.FallbackPrimitive>
+            </Avatar.Root>
+            <Avatar.Root data-part="Root">
+                <Avatar.ImagePrimitive data-part="ImagePrimitive" />
+                <Avatar.FallbackPrimitive data-part="FallbackPrimitive">V</Avatar.FallbackPrimitive>
+            </Avatar.Root>
+        </Flex>
+    );
+}
@@ -0,0 +1,27 @@
+import { Breadcrumb } from '@vapor-ui/core';
+
+export default function AnatomyBreadcrumb() {
+    return (
+        <Breadcrumb.RootPrimitive data-part="RootPrimitive">
+            <Breadcrumb.ListPrimitive data-part="ListPrimitive">
+                <Breadcrumb.ItemPrimitive data-part="ItemPrimitive">
+                    <Breadcrumb.LinkPrimitive data-part="LinkPrimitive" href="#">
+                        Home
+                    </Breadcrumb.LinkPrimitive>
+                </Breadcrumb.ItemPrimitive>
+                <Breadcrumb.Separator data-part="Separator" />
+                <Breadcrumb.ItemPrimitive>
+                    <Breadcrumb.LinkPrimitive href="#">Products</Breadcrumb.LinkPrimitive>
+                </Breadcrumb.ItemPrimitive>
+                <Breadcrumb.Separator />
+                <Breadcrumb.Ellipsis data-part="Ellipsis" />
+                <Breadcrumb.Separator />
+                <Breadcrumb.ItemPrimitive>
+                    <Breadcrumb.LinkPrimitive href="#" current>
+                        Details
+                    </Breadcrumb.LinkPrimitive>
+                </Breadcrumb.ItemPrimitive>
+            </Breadcrumb.ListPrimitive>
+        </Breadcrumb.RootPrimitive>
+    );
+}