🧱 폴더 구조 설계

packages/
└── hooks/
    ├── dist/              ← CJS 빌드 결과물 **(npm run build 했을 때만)**
    ├── esm/               ← ESM 빌드 결과물 **(npm run build 했을 때만)**
    ├── src/               ← 소스 코드 
		│    ├── libs/         ← 🔁 재사용 가능한 훅(hooks)들을 모아두는 폴더
		     └── index.ts      ← 📦 훅들을 한 번에 export 하는 엔트리 파일
    ├── .gitignore         ← 다들 알죠?
    ├── package.json       ← 라이브러리 메타 정보 및 빌드 스크립트
    ├── tsconfig.json      ← CJS용 TypeScript 설정
    └── tsconfig.esm.json  ← ESM용 TypeScript 설정
└── components/

✅ react라는 이름으로 디렉토리를 분리한 이유는, 추후 vue, solid 등의 다른 플랫폼용 라이브러리도 함께 관리할 수 있도록 확장성을 고려했기 때문입니다.

hooks와 components로만 분리를 진행했습니다! 우선 react 환경에만 집중을 하는게 좋다고 느꼈습니다! (feat. 범태)

📦 초기 라이브러리 세팅

• npm init을 통해 기본 설정을 생성합니다.
• vite 기반 설정도 가능하지만, 현재는 가볍고 단순한 tsc 기반 빌드로 설정합니다.
• vite로 초기 세팅해서 하면 안돼?
• 그런데 왜 지금은 vite 기반 설정으로 안 했어?

npm install --save-dev typescript tslib react

📁 소스 디렉토리 구성

src/libs/useBooleanState.ts (예시)

import { useState, useCallback } from "react";

type UseBooleanStateReturn = [
  value: boolean,
  setTrue: () => void,
  setFalse: () => void,
  toggle: () => void
];

/**
 * useBooleanState 훅은 boolean 상태를 제어하는 튜플을 반환합니다.
 *
 * @returns [value, setTrue, setFalse, toggle]
 */
export function useBooleanState(initial: boolean = false): UseBooleanStateReturn {
  const [value, setValue] = useState(initial);

  const setTrue = useCallback(() => setValue(true), []);
  const setFalse = useCallback(() => setValue(false), []);
  const toggle = useCallback(() => setValue((v) => !v), []);

  return [value, setTrue, setFalse, toggle];
}