option-help bubble

daangn · Jun 18, 2023 · e82c647 · e82c647
1 parent 0d596c2
commit e82c647
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 1 deletion.
diff --git a/docs/content/component/help-bubble/helpbubble-options-closetrigger.png b/docs/content/component/help-bubble/helpbubble-options-closetrigger.png
diff --git a/docs/content/component/help-bubble/helpbubble-options-modal.png b/docs/content/component/help-bubble/helpbubble-options-modal.png
diff --git a/docs/content/component/help-bubble/helpbubble-options-offset.png b/docs/content/component/help-bubble/helpbubble-options-offset.png
diff --git a/docs/content/component/help-bubble/helpbubble-options-placement.png b/docs/content/component/help-bubble/helpbubble-options-placement.png
diff --git a/docs/content/component/help-bubble/usage.mdx b/docs/content/component/help-bubble/usage.mdx
@@ -4,7 +4,7 @@ slug: /component/help-bubble/usage
 
 ## 구조도
 
-<Anatomy>![menu FAB usage anatomy](./anatomy.png)</Anatomy>
+<Anatomy>![help bubble usage anatomy](./anatomy.png)</Anatomy>
 
 1. Trigger
 2. Anchor
@@ -16,6 +16,59 @@ slug: /component/help-bubble/usage
 
 ## 옵션
 
+<HalfCard>
+  <HalfCardImageCell>
+    ![helpbubble options text](./helpbubble-options-placement.png)
+  </HalfCardImageCell>
+  <HalfCardDescriptionCell>
+    <HalfCardDescriptionTitle>Placement</HalfCardDescriptionTitle>
+    <HalfCardDescription>
+      Help Bubble은 Trigger를 기준으로 위치를 지정합니다. 다양한 Placement
+      옵션을 적절히 배치하여, 유저가 최대한 편리하게 정보를 이해하고 접근할 수
+      있도록 도와줍니다.
+    </HalfCardDescription>
+  </HalfCardDescriptionCell>
+</HalfCard>
+
+<HalfCard>
+  <HalfCardImageCell>
+    ![helpbubble options offset](./helpbubble-options-offset.png)
+  </HalfCardImageCell>
+  <HalfCardDescriptionCell>
+    <HalfCardDescriptionTitle>Offset</HalfCardDescriptionTitle>
+    <HalfCardDescription>
+      Offset은 Help Bubble과 Trigger 사이의 거리 값입니다. 기본값은 8입니다.
+    </HalfCardDescription>
+  </HalfCardDescriptionCell>
+</HalfCard>
+
+<HalfCard>
+  <HalfCardImageCell>
+    ![helpbubble options modal](./helpbubble-options-modal.png)
+  </HalfCardImageCell>
+  <HalfCardDescriptionCell>
+    <HalfCardDescriptionTitle>Modal</HalfCardDescriptionTitle>
+    <HalfCardDescription>
+      Modal 옵션은 Backdrop 여부에 따라 제공합니다. 유저의 화면을 일시적으로
+      멈춘 뒤 전달해야 하는 중요한 정보인 경우에 해당 옵션을 사용합니다.
+    </HalfCardDescription>
+  </HalfCardDescriptionCell>
+</HalfCard>
+
+<HalfCard>
+  <HalfCardImageCell>
+    ![helpbubble options closetrigger](./helpbubble-options-closetrigger.png)
+  </HalfCardImageCell>
+  <HalfCardDescriptionCell>
+    <HalfCardDescriptionTitle>Close Trigger</HalfCardDescriptionTitle>
+    <HalfCardDescription>
+      Help Bubble은 Close trigger를 가질 수 있습니다. 유저가 Help Bubble의
+      내용을 모두 읽었거나, 더 이상 필요하지 않을 때 Close trigger를 통해 닫을
+      수 있습니다.
+    </HalfCardDescription>
+  </HalfCardDescriptionCell>
+</HalfCard>
+
 ### 옵션 테이블
 
 | 속성                      | 값                                                                                                                                           | 기본값         |