grunfeld를 소개합니다

Grunfeld는 React 애플리케이션에서 대화상자(모달, 알림, 확인 등)를 쉽고 일관되게 관리할 수 있게 해 주는 경량 라이브러리입니다. 번거로운 상태 관리나 복잡한 제어 흐름 없이, 몇 줄의 선언적 코드로 사용자 인터랙션을 위한 대화상자를 띄우고 결과를 받아 처리할 수 있도록 설계되었습니다.

핵심 목표는 단순성, 접근성, 그리고 확장성입니다. 포커스 트래핑, 키보드 닫기, ARIA 속성 등 접근성 고려 사항을 기본으로 지원하며, 여러 개의 모달 스택 처리, 애니메이션 훅 연동, 그리고 커스텀 컴포넌트로 외형과 동작을 쉽게 바꿀 수 있습니다. Promise 기반 API를 제공해 비동기 흐름(예: 확인 대화상자에서 사용자의 결정을 기다림)을 자연스럽게 처리할 수 있습니다.

또한 TypeScript 친화적인 타입 정의를 제공하여 컴파일 타임에 안전하게 사용하도록 돕고, Context/Provider 패턴을 통해 애플리케이션 전역에서 일관된 대화상자 동작을 유지할 수 있습니다. 서버사이드 렌더링(SSR) 환경에서는 안전하게 폴백 UI를 렌더링하도록 설계되어 클라이언트 전용 로직과 잘 구분됩니다. 짧은 코드로 복잡한 대화상자 시나리오를 구현하면서도 접근성과 유지보수성을 놓치지 않으려는 팀에 적합합니다.

설치 방법#

grunfeld는 아래의 다양한 방법으로 설치할 수 있습니다.

install.sh

npm install @ilokesto/grunfeld
pnpm add @ilokesto/grunfeld
yarn add @ilokesto/grunfeld
bun add @ilokesto/grunfeld

빠른 시작#

앱의 최상위에 GrunfeldProvider를 추가하세요:

import { GrunfeldProvider } from "@ilokesto/grunfeld";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <GrunfeldProvider>
      <Component {...pageProps} />
    </GrunfeldProvider>
  );
}

기본 사용법#

간단한 확인 대화상자를 생성하고 사용자의 응답을 받을 수 있습니다. grunfeld.add() 메서드는 Promise를 반환하므로 async/await를 사용하여 사용자의 선택을 기다릴 수 있습니다.

import { grunfeld } from "@ilokesto/grunfeld";

export default function YourComponent() {
  const showConfirmDialog = async () => {
    const result = await grunfeld.add<boolean>((removeWith) => ({
      element: (
        <div>
          <p>Are you sure you want to delete this?</p>
          <button onClick={() => removeWith(true)}>Confirm</button>
          <button onClick={() => removeWith(false)}>Cancel</button>
        </div>
      ),
      position: "center",
      dismissCallback: () => console.log("Dialog closed"),
    }));

    if (result) {
      console.log("User confirmed the action");
    } else {
      console.log("User canceled the action");
    }
  };

  return <button onClick={showConfirmDialog}>Open confirm dialog</button>;
}