docs: useSxToken

doc/docs/advanced/get-token-value.mdx

@@ -0,0 +1,30 @@
+---
+sidebar_position: 1
+---
+
+# Get token value with useSxToken
+
+To get individual token values for a theme, you can use the `useSxToken` hook.
+
+This is useful when it is cumbersome to get the style by passing `SxProps` to the `useSx` hook or when individual token values are needed.
+
+```tsx
+const MyView = (
+  {
+    disabled,
+    readonly
+  }:{
+    disabled?: boolean;
+    readonly?: boolean;
+  }) => {
+  const backgroundColor = useSxToken('colors', readonly || disabled ? 'gray500' : 'gray200');
+g
+  return <View style={{ backgroundColor }} />
+}
+```
+
+:::info
+To operate properly, you must use it in the Context inside `StyledSystemProvider` or pass the theme object as an option.
+
+Additionally, `undefined` is returned when attempting to reference a key that does not exist.
+:::

doc/docs/advanced/global-theme-value.mdx

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 1
+sidebar_position: 2
 title: Get Theme value in global
 ---
 

doc/i18n/ko/docusaurus-plugin-content-docs/current/advanced/get-token-value.mdx

@@ -0,0 +1,30 @@
+---
+sidebar_position: 1
+---
+
+# useSxToken를 이용해 토큰값 얻기
+
+테마의 개별적인 토큰 값을 얻으려면 `useSxToken` 훅을 사용할 수 있습니다.
+
+이는 `SxProps`를 `useSx` 훅에 전달해 style을 얻기 번거롭거나 개별적인 토큰 값이 필요할 때 유용합니다.
+
+```tsx
+const MyView = (
+  {
+    disabled,
+    readonly
+  }:{
+    disabled?: boolean;
+    readonly?: boolean;
+  }) => {
+  const backgroundColor = useSxToken('colors', readonly || disabled ? 'gray500' : 'gray200');
+
+  return <View style={{ backgroundColor }} />
+}
+```
+
+:::info
+`StyledSystemProvider`내부의 Context에서 사용하거나 옵션으로 테마 객체를 전달해야 정상적으로 동작합니다.
+
+또한, 존재하지 않는 키를 참조하려고 할 시에도 `undefined`가 반환됩니다.
+:::