docs: fix AutoCompleteInput example in usage docs

[wo-o29]

Overview

This PR fixes issues in the AutoCompleteInput example code in the documentation:

1. Removed duplicated clearTimeout(searchTimeoutRef.current) logic and kept cleanup-only execution.
2. Simplified useOutsideClickEffect usage by directly passing closeSearchBox.
3. Corrected Separated component prop from with to by, which matches the correct API signature.

These changes make the docs match the intended API usage and improve readability for contributors and users.

Checklist

• Did you write the test code? (Not applicable, documentation only)
• Have you run yarn run fix to format and lint the code and docs?
• Have you run yarn run test:coverage to make sure there is no uncovered line? (Not applicable, documentation only)
• Did you write the JSDoc? (Not applicable, documentation only)

additinal comment

react-simplikit, 선택의 이유 docs with-react-simplikit.tsx In the example code, searchResults is an asynchronous function, so TypeScript infers its return type as Promise<void>.

However, the debounced function returned by useDebounce is designed to return void when called, so its actual runtime return type is void.

Therefore, passing it as an argument to startLoading, which expects a Promise, causes a type error.

const [isLoading, startLoading] = useLoading();
const searchResults = useDebounce(async (searchQuery: string) => {
  if (searchQuery.trim().length === 0) {
    setResults([]);
    return;
  }

  const response = await fetch(`/api/search?q=${searchQuery}`)
    .then(res => res.json())
    .catch(error => {
      console.error('Failed to fetch results:', error);
      return [];
    });

  setResults(response);
}, 300);

<input
  type="text"
  value={query}
  onChange={e => {
    setQuery(e.target.value);
    openSearchBox();
    startLoading(searchResults(e.target.value)); // type error!
  }}
  onFocus={openSearchBox}
  placeholder="검색어를 입력하세요"
/>

To fix this, either the return type of debounce should be changed to Promise<void>

export type DebouncedFunction<F extends (...args: any[]) => void> = {
  (...args: Parameters<F>): Promise<void>;
  cancel: () => void;
};

or in the example code, startLoading should be called with an explicit Promise, like this:

startLoading((async () => await searchResults(e.target.value))());

This way, the expected Promise type is matched properly.

I'd like to hear from admins on which of the two approaches would be better, or if the example should be changed!

[Copilot]

Pull Request Overview

This PR fixes issues in the AutoCompleteInput example code documentation to ensure the code examples are accurate and follow correct API usage.

• Cleaned up duplicated timeout cleanup logic in the useEffect
• Simplified useOutsideClickEffect usage by directly passing the callback function
• Corrected the Separated component prop from with to by to match the actual API

Comments suppressed due to low confidence (1)

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

• The removal of the timeout cleanup at the beginning of the useEffect is incorrect. This cleanup is necessary to cancel any pending timeout when the query changes, preventing potential race conditions and unnecessary API calls.

      if (searchTimeoutRef.current) {
        clearTimeout(searchTimeoutRef.current);
      }

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}