@jk-core/hooks/README.md

hooks for jk

# @jk-core/hooks

jk-core 프로젝트를 위한 React 커스텀 훅 모음입니다.

<br/>

## 설치
```bash
npm install @jk-core/hooks // npm 사용 가능
yarn add @jk-core/hooks // npm 대신 yarn 사용 가능
pnpm add @jk-core/hooks // npm 대신 pnpm 사용 가능
```

<br/>



## useIntersectionObserver

무한 스크롤을 구현하기 위한 Intersection Observer API를 사용하는 훅입니다.

<br/>

#### Props
- `parent` : 관찰할 대상 요소의 부모 요소
- `target`: 관찰할 대상 요소
- `callback`: () => void - 교차점 관찰 시 실행될 함수
- `options`: IntersectionObserver의 옵션

<br/>

#### 사용법

```typescript
import { useIntersectionObserver } from '@jk-core/hooks';
function MyComponent() {
const observerRef= useRef();
const parentRef= useRef();

const loadMoreItems = () => {
// 추가 아이템을 로드하는 로직
};

useIntersectionObserver({target: targetRef,callback:loadMoreItems, options:{root:parentRef.current, threshold:1, rootmargin: '5px'}});
return (
<div ref={parentRef}>
{/ 아이템 목록 /}
<div ref={observerRef}>로딩 중...</div>
</div>
);
};
```
<br/>
<br/>

## useInterectOutside

클릭한 위치가 요소 바깥인지 확인하는 훅입니다.

<br/>

#### Props
- `targetRef`: RefObject<HTMLElement> - 대상 요소의 ref
- `eventList`: string[] - 감지할 이벤트 목록
- `handler`: () => void - 요소 외부 클릭 시 실행될 함수

<br/>

#### 사용법

```typescript
import { useInterectOutside } from '@jk-core/hooks';
const MyComponent = () => {
const handleClickOutside = () => {
// 클릭한 위치가 요소 바깥일 때 실행되는 로직
};
const { ref } = useInterectOutside(handleClickOutside);
return <div ref={ref}>Click outside to trigger</div>;
};
```
<br/>
<br/>

## useMediaQuery

미디어 쿼리를 사용하여 화면 크기를 확인하는 훅입니다.

<br/>

#### Props
- `width`: number - 기준이 되는 화면 너비 (픽셀)


#### Return
- `boolean`: 현재 화면 크기가 지정된 너비보다 작은지 여부

<br/>

#### 사용법

```typescript
import { useMediaQuery } from '@jk-core/hooks';
const MyComponent = () => {
const isMobile = useMediaQuery(768);
return <div>{isMobile ? 'Mobile' : 'Desktop'}</div>;
};
``` 
<br/>
<br/>


## useHistory

브라우저의 history API를 사용하여 페이지 내비게이션을 관리하는 훅입니다.

<br/>

#### Return
- `push`: (path: string) => void - 현재 path에 가상의 path를 추가하는 함수 
- `back`: () => void - 이전 페이지로 이동하는 함수
<br/>

#### 사용법

```typescript
import { useHistory } from '@jk-core/hooks';
const MyComponent = () => {
const { push, back } = useHistory();
return (
<div>
<button onClick={() => push('/page1')}>Page 1</button>
<button onClick={() => back()}>Back</button>
</div>
);
};
```

<br/>
<br/>

## useHistoryEvent

브라우저의 history 이벤트를 관리하는 훅입니다.

<br/>

#### Props
- `listener`: (update: Update) => void - history 이벤트 처리 함수

#### Update 객체
- `action`: 'POP' | 'PUSH' | 'REPLACE' - 수행된 history 액션
- `location`: Location - 현재 location 객체

<br/>

#### 사용법

```typescript
import { useHistoryEvent } from '@jk-core/hooks';
const MyComponent = () => {

// history 이벤트 처리 로직
const handleHistoryEvent = ((update: Update) =>{
  if(event.action === 'PUSH') {
     // history push 이벤트 처리 로직
  }
  if(event.action === 'REPLACE') {
     // history replace 이벤트 처리 로직
  }
  if(event.action === 'POP') {
     // history pop 이벤트 처리 로직
  }
};

useHistoryEvent(handleHistoryEvent);
return <div>History Event Listener</div>;
};
```