feat(useIsBrowser): add useIsBrowser hook

src/hooks/useIsBrowser/index.ts

@@ -0,0 +1 @@
+export { useIsBrowser } from './useIsBrowser.ts'; 

src/hooks/useIsBrowser/ko/useIsBrowser.md

@@ -0,0 +1,36 @@
+# useIsBrowser
+
+`useIsBrowser`는 코드가 브라우저 환경에서 실행 중인지 감지하는 리액트 훅이에요.
+
+`window`나 `document` 객체에 접근하는 것과 같이 브라우저에서만 실행되어야 하는 코드를 조건부로 실행하는 데 유용해요.
+
+## 인터페이스
+
+```ts
+function useIsBrowser(): boolean;
+```
+
+### 반환 값
+
+<Interface
+  name=""
+  type="boolean"
+  description="브라우저 환경에서 실행 중이면 <code>true</code>, 서버 환경에서 실행 중이면 <code>false</code>예요."
+/>
+
+## 예시
+
+```tsx
+import { useIsBrowser } from 'react-simplikit';
+
+function Component() {
+  const isBrowser = useIsBrowser();
+
+  return (
+    <div>
+      <p>실행 환경: {isBrowser ? '브라우저' : '서버'}</p>
+      {isBrowser && <p>이 내용은 브라우저에서만 렌더링돼요</p>}
+    </div>
+  );
+}
+```

src/hooks/useIsBrowser/useIsBrowser.md

@@ -0,0 +1,36 @@
+# useIsBrowser
+
+`useIsBrowser` is a React hook that detects whether the code is running in a browser environment.
+
+This is useful for conditionally running code that should only execute in a browser, such as accessing the `window` or `document` objects.
+
+## Interface
+
+```ts
+function useIsBrowser(): boolean;
+```
+
+### Return Value
+
+<Interface
+  name=""
+  type="boolean"
+  description="<code>true</code> if running in a browser environment, <code>false</code> if running in a server environment."
+/>
+
+## Example
+
+```tsx
+import { useIsBrowser } from 'react-simplikit';
+
+function Component() {
+  const isBrowser = useIsBrowser();
+
+  return (
+    <div>
+      <p>Running in: {isBrowser ? 'Browser' : 'Server'}</p>
+      {isBrowser && <p>This content only renders in the browser</p>}
+    </div>
+  );
+}
+```

src/hooks/useIsBrowser/useIsBrowser.spec.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vitest';
+
+import { renderHookSSR } from '../../_internal/test-utils/renderHookSSR.tsx';
+
+import { useIsBrowser } from './useIsBrowser.ts';
+
+describe('useIsBrowser', () => {
+  it('returns false on server side rendering', () => {
+    const result = renderHookSSR.serverOnly(() => useIsBrowser());
+
+    expect(result.current).toBe(false);
+  });
+
+  it('returns true on client side', async () => {
+    const { result } = await renderHookSSR(() => useIsBrowser());
+
+    expect(result.current).toBe(true);
+  });
+}); 

src/hooks/useIsBrowser/useIsBrowser.ts

@@ -0,0 +1,26 @@
+/**
+ * @description
+ * `useIsBrowser` is a React hook that detects whether the code is running in a browser environment.
+ * 
+ * This is useful for conditionally running code that should only execute in a browser,
+ * such as accessing the `window` or `document` objects.
+ * 
+ * @returns {boolean} `true` if running in a browser environment, `false` if running in a server environment.
+ * 
+ * @example
+ * import { useIsBrowser } from 'react-simplikit';
+ * 
+ * function Component() {
+ *   const isBrowser = useIsBrowser();
+ * 
+ *   return (
+ *     <div>
+ *       <p>Running in: {isBrowser ? 'Browser' : 'Server'}</p>
+ *       {isBrowser && <p>This content only renders in the browser</p>}
+ *     </div>
+ *   );
+ * }
+ */
+export function useIsBrowser(): boolean {
+  return typeof window !== 'undefined';
+}

src/index.ts

@@ -9,6 +9,7 @@ export { useImpressionRef } from './hooks/useImpressionRef/index.ts';
 export { useInputState } from './hooks/useInputState/index.ts';
 export { useIntersectionObserver } from './hooks/useIntersectionObserver/index.ts';
 export { useInterval } from './hooks/useInterval/index.ts';
+export { useIsBrowser } from './hooks/useIsBrowser/index.ts';
 export { useLoading } from './hooks/useLoading/index.ts';
 export { useOutsideClickEffect } from './hooks/useOutsideClickEffect/index.ts';
 export { usePreservedCallback } from './hooks/usePreservedCallback/index.ts';