docs: update code example and some contents

src/docs/en/intro.md

@@ -1,6 +1,6 @@
 # Introduction to react-simplikit
 
-How can we build React-based applications more safely and reliably? We defined the answer as 'writing React codes in a React-like way' and the answer really began to take shape through react-simplikit.
+How can we build React-based applications more safely and reliably? We defined the answer as 'writing React codes in a React-like way' and the answer really began to take shape through `react-simplikit`.
 
 `react-simplikit` is a lightweight yet powerful library that provides various useful tools in React environments. It is designed to respect React's design principles while improving the React development experience.
 
@@ -38,7 +38,7 @@ right-title="with-react-simplikit.tsx">
 <template #left>
 
 ```tsx
-// without react simplikit
+// without `react-simplikit`
 const texts = ['hello', 'react', 'world'];
 
 function Page() {
@@ -61,7 +61,7 @@ function Page() {
 <template #right>
 
 ```tsx
-// with react simplikit
+// with `react-simplikit`
 const texts = ['hello', 'react', 'world'];
 
 function Page() {

src/docs/en/why-react-simplikit-matters.md

@@ -24,8 +24,8 @@ Based on this, it guides developers to write more declarative React components.
 function AutoCompleteInput() {
   const [query, setQuery] = useState('');
   const [results, setResults] = useState<SearchResult[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [isOpen, setIsOpen] = useState(false);
+  const [isLoading, setLoading] = useState(false);
+  const [isOpen, setOpen] = useState(false);
   const searchTimeoutRef = useRef<NodeJS.Timeout>(null);
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -35,7 +35,7 @@ function AutoCompleteInput() {
         containerRef.current &&
         !containerRef.current.contains(e.target as Node)
       ) {
-        setIsOpen(false);
+        setOpen(false);
       }
     };
 
@@ -53,7 +53,7 @@ function AutoCompleteInput() {
       return;
     }
 
-    setIsLoading(true);
+    setLoading(true);
     searchTimeoutRef.current = setTimeout(async () => {
       try {
         const response = await fetch(`/api/search?q=${query}`);
@@ -62,7 +62,7 @@ function AutoCompleteInput() {
       } catch (error) {
         console.error('Failed to fetch results:', error);
       } finally {
-        setIsLoading(false);
+        setLoading(false);
       }
     }, 300);
 
@@ -80,9 +80,9 @@ function AutoCompleteInput() {
         value={query}
         onChange={e => {
           setQuery(e.target.value);
-          setIsOpen(true);
+          setOpen(true);
         }}
-        onFocus={() => setIsOpen(true)}
+        onFocus={() => setOpen(true)}
         placeholder="Enter search term"
       />
       {isOpen && (isLoading || results.length > 0) && (
@@ -95,7 +95,7 @@ function AutoCompleteInput() {
                 <div
                   onClick={() => {
                     setQuery(result.title);
-                    setIsOpen(false);
+                    setOpen(false);
                   }}
                 >
                   {result.title}

src/docs/ko/intro.md

@@ -38,7 +38,7 @@ right-title="with-react-simplikit.tsx">
 <template #left>
 
 ```tsx
-// without react simplikit
+// `react-simplikit`을 사용하지 않은 코드
 const texts = ['hello', 'react', 'world'];
 
 function Page() {
@@ -61,7 +61,7 @@ function Page() {
 <template #right>
 
 ```tsx
-// with react simplikit
+// `react-simplikit`을 사용한 코드
 const texts = ['hello', 'react', 'world'];
 
 function Page() {
@@ -87,7 +87,7 @@ function Page() {
 ```tsx
 function Page() {
   // useIntersectionObserver는 intersection을 감지하는 최소한의 기능을 제공하고,
-  // 감지 후 콜백, intersection 옵션은 외부로부터 주입 받습니다.
+  // 감지 후, 콜백과 intersection 옵션은 외부로부터 주입받아요.
   const ref = useIntersectionObserver<HTMLDivElement>(
     entry => {
       if (entry.isIntersecting) {

src/docs/ko/why-react-simplikit-matters.md

@@ -24,8 +24,8 @@
 function AutoCompleteInput() {
   const [query, setQuery] = useState('');
   const [results, setResults] = useState<SearchResult[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [isOpen, setIsOpen] = useState(false);
+  const [isLoading, setLoading] = useState(false);
+  const [isOpen, setOpen] = useState(false);
   const searchTimeoutRef = useRef<NodeJS.Timeout>(null);
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -35,7 +35,7 @@ function AutoCompleteInput() {
         containerRef.current &&
         !containerRef.current.contains(e.target as Node)
       ) {
-        setIsOpen(false);
+        setOpen(false);
       }
     };
 
@@ -53,7 +53,7 @@ function AutoCompleteInput() {
       return;
     }
 
-    setIsLoading(true);
+    setLoading(true);
     searchTimeoutRef.current = setTimeout(async () => {
       try {
         const response = await fetch(`/api/search?q=${query}`);
@@ -62,7 +62,7 @@ function AutoCompleteInput() {
       } catch (error) {
         console.error('Failed to fetch results:', error);
       } finally {
-        setIsLoading(false);
+        setLoading(false);
       }
     }, 300);
 
@@ -80,9 +80,9 @@ function AutoCompleteInput() {
         value={query}
         onChange={e => {
           setQuery(e.target.value);
-          setIsOpen(true);
+          setOpen(true);
         }}
-        onFocus={() => setIsOpen(true)}
+        onFocus={() => setOpen(true)}
         placeholder="검색어를 입력하세요"
       />
       {isOpen && (isLoading || results.length > 0) && (
@@ -95,7 +95,7 @@ function AutoCompleteInput() {
                 <div
                   onClick={() => {
                     setQuery(result.title);
-                    setIsOpen(false);
+                    setOpen(false);
                   }}
                 >
                   {result.title}