refactor(react): replace unicode-segmenter with built-in Intl.Segmenter

.changeset/heavy-lies-sin.md

@@ -0,0 +1,5 @@
+---
+"@seed-design/react": minor
+---
+
+@seed-design/react에서 unicode-segmenter 의존성을 제거하고 브라우저 내장 `Intl.Segmenter`를 사용하도록 교체합니다.

docs/content/react/components/text-field-input.mdx

@@ -151,7 +151,7 @@ npx @seed-design/cli@latest add ui:text-field
 
 자소 단위로 쪼개진 `value`에 관한 정보를 `onValueChange` 콜백에서 `graphemes`와 `slicedGraphemes`로 제공합니다.
 
-자소 분리는 [unicode-segmenter](https://github.com/cometkim/unicode-segmenter)를 통해 이루어집니다.
+자소 분리는 브라우저 내장 [`Intl.Segmenter`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter)를 통해 이루어집니다.
 
 <ComponentExample name="react/text-field-input/grapheme-count-controlled">
   ```json doc-gen:file

docs/content/react/components/text-field-textarea.mdx

@@ -142,7 +142,7 @@ npx @seed-design/cli@latest add ui:text-field
 
 자소 단위로 쪼개진 `value`에 관한 정보를 `onValueChange` 콜백에서 `graphemes`와 `slicedGraphemes`로 제공합니다.
 
-자소 분리는 [unicode-segmenter](https://github.com/cometkim/unicode-segmenter)를 통해 이루어집니다.
+자소 분리는 브라우저 내장 [`Intl.Segmenter`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter)를 통해 이루어집니다.
 
 <ComponentExample name="react/text-field-textarea/grapheme-count-controlled">
   ```json doc-gen:file

packages/react/package.json

@@ -70,8 +70,7 @@
     "@seed-design/react-text-field": "^2.0.0",
     "@seed-design/react-toggle": "^2.0.0",
     "@seed-design/react-tooltip": "^1.0.0",
-    "clsx": "^2.1.1",
-    "unicode-segmenter": "^0.14.4"
+    "clsx": "^2.1.1"
   },
   "peerDependencies": {
     "@seed-design/css": "^2.0.0",

packages/react/src/components/TextField/useTextFieldWithGraphemes.ts

@@ -1,5 +1,4 @@
 import { useState, useMemo, useCallback } from "react";
-import { splitGraphemes } from "unicode-segmenter/grapheme";
 import { memoize } from "./memoize";
 
 export interface UseTextFieldWithGraphemesParams {
@@ -14,24 +13,28 @@ export interface UseTextFieldWithGraphemesParams {
   }) => void;
 }
 
-const getGraphemes = (string: string) => Array.from(splitGraphemes(string));
-const memoizedGetGraphemes = memoize(getGraphemes);
-
 export function useTextFieldWithGraphemes({
   maxGraphemeCount,
   value: controlledValue,
   defaultValue = "",
   onValueChange,
 }: UseTextFieldWithGraphemesParams) {
+  const getGraphemes = useMemo(() => {
+    const segmenter = new Intl.Segmenter(undefined, { granularity: "grapheme" });
+    return memoize((string: string) =>
+      Array.from(segmenter.segment(string), ({ segment }) => segment),
+    );
+  }, []);
+
   const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
   const isControlled = controlledValue !== undefined;
   const value = isControlled ? controlledValue : uncontrolledValue;
 
-  const graphemes = useMemo(() => memoizedGetGraphemes(value), [value]);
+  const graphemes = useMemo(() => getGraphemes(value), [value, getGraphemes]);
 
   const handleValueChange = useCallback(
     (newValue: string) => {
-      const newGraphemes = memoizedGetGraphemes(newValue);
+      const newGraphemes = getGraphemes(newValue);
       const newSlicedGraphemes =
         maxGraphemeCount === undefined ? newGraphemes : newGraphemes.slice(0, maxGraphemeCount);
       const newSlicedValue = newSlicedGraphemes.join("");
@@ -48,7 +51,7 @@ export function useTextFieldWithGraphemes({
         slicedGraphemes: newSlicedGraphemes,
       });
     },
-    [isControlled, maxGraphemeCount, onValueChange],
+    [isControlled, maxGraphemeCount, onValueChange, getGraphemes],
   );
 
   return {

packages/react/vite.config.mts

@@ -27,7 +27,6 @@ export default defineConfig({
         ...Object.keys(pkg.dependencies ?? {}),
         ...Object.keys(pkg.peerDependencies ?? {}),
         /^@seed-design\/css\/.+/,
-        /^unicode-segmenter\/.+/,
         "react/jsx-runtime",
       ],
       output: [