range slider guideline

daangn · Mar 14, 2024 · a660391 · a660391
1 parent a532744
commit a660391
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 1 deletion.
diff --git a/docs/content/component/range-slider/rangeslider-guideline-do.png b/docs/content/component/range-slider/rangeslider-guideline-do.png
diff --git a/docs/content/component/range-slider/rangeslider-guideline-dont-label-bottom.png b/docs/content/component/range-slider/rangeslider-guideline-dont-label-bottom.png
diff --git a/docs/content/component/range-slider/rangeslider-guideline-use-label.png b/docs/content/component/range-slider/rangeslider-guideline-use-label.png
diff --git a/docs/content/component/range-slider/usage.mdx b/docs/content/component/range-slider/usage.mdx
@@ -100,4 +100,46 @@ slug: /component/range-slider/usage
 
 ## 가이드라인
 
-Working In Progress
+### Do / Don't
+
+<br />
+
+<DoDontLayout>
+  <DoBox>
+    <DoImage>
+      ![rangeslider guideline](./rangeslider-guideline-use-label.png)
+    </DoImage>
+    <DoText>
+      Label과 함께 사용하여 유저가 Range Slider의 목적과 선택된 값을 명확히 알
+      수 있도록 합니다.
+    </DoText>
+  </DoBox>
+  <DontBox>
+    <DontImage>
+      ![rangeslider guideline](./rangeslider-guideline-dont-label-bottom.png)
+    </DontImage>
+    <DontText>
+      Handle의 위치에 따라 움직이는 Label을 사용할 경우, Handle 아래에 배치하지
+      않습니다. Range Slider 조작시 손가락에 가려져 선택된 값을 파악하기
+      어렵습니다.
+    </DontText>
+  </DontBox>
+</DoDontLayout>
+<br />
+<DoDontLayout>
+  <DoBox>
+    <DoImage>
+      ![rangeslider guideline](./rangeslider-guideline-do-2.png)
+    </DoImage>
+    <DoText>Marker는 간결하게 작성합니다.</DoText>
+  </DoBox>
+  <DontBox>
+    <DontImage>
+      ![rangeslider guideline](./rangeslider-guideline-dont-2.png)
+    </DontImage>
+    <DontText>
+      Marker가 길어지지 않도록 유의합니다. 유저가 Tick의 위치를 파악하기 어려울
+      수 있습니다.
+    </DontText>
+  </DontBox>
+</DoDontLayout>