suminpixel-widget-test

React 기반의 위젯 앱 패키지입니다. Emotion, Jotai, React Query를 활용하여 상태 관리와 스타일링, 데이터 패칭을 효율적으로 처리합니다. Vite로 빌드하며, npm에 배포되어 외부 프로젝트에서 손쉽게 사용할 수 있습니다.

주요 기술 스택

• React: UI 개발
• Emotion: CSS-in-JS 스타일링
• Jotai: 전역 상태 관리
• React Query: 서버 상태 및 데이터 패칭
• Vite: 번들러 및 빌드 도구

설치 방법

npm install @suminmon/widget-test
# 또는
yarn add @suminmon/widget-test

사용법

1. React 컴포넌트로 사용

설치 후, 아래와 같이 위젯을 임포트하여 사용할 수 있습니다:

import { Widget } from '@suminmon/widget-test';

function App() {
  return (
    <div>
      <Widget />
    </div>
  );
}

export default App;

2. Web Component로 사용 (React 16/비React 환경)

빌드된 widget-element.umd.js 파일을 <script>로 불러온 뒤, HTML에서 <widget-element></widget-element>로 사용할 수 있습니다.

<script src="widget-element.umd.js"></script>
<widget-element></widget-element>

props(예: onDrop) 전달은 JS property로 할당해야 합니다:

const el = document.querySelector('widget-element');
el.onDrop = (element, customValue) => {
  console.log('드롭된 element:', element);
  console.log('커스텀 값:', customValue);
};

개발 및 빌드

개발 서버 실행

npm run dev

빌드

npm run build

빌드 결과물 확인

npm run preview

배포 (npm)

1. package.json의 name, version, main, module 등 정보를 확인하세요.
2. 빌드 후 아래 명령어로 배포합니다:

npm publish --access public

참고: npm에 최초 배포 시 npm login이 필요할 수 있습니다.

예제

import { Widget } from '@suminmon/widget-test';

function Example() {
  return <Widget someProp="value" />;
}

라이선스

MIT

Widget 컴포넌트 기능 명세

드래그 앤 드롭 핸들러 지원

• 핸들러(props)로 외부에서 element와 customValue를 받아 드롭할 수 있습니다.
• 사용자는 onDrop props를 통해 드롭 이벤트를 처리할 수 있습니다.
• 드롭 시, 드롭된 element(HTMLElement)와 customValue(옵셔널)가 onDrop 함수의 인자로 전달됩니다.
• 기본적으로 onDrop에서 element와 customValue를 console.log로 출력하는 기능이 포함되어 있습니다.

Props 타입

type WidgetProps = {
  /**
   * 드롭 이벤트 발생 시 호출됩니다.
   * @param element 드롭된 HTMLElement
   * @param customValue (옵셔널) 사용자 정의 값
   */
  onDrop: (element: HTMLElement, customValue?: any) => void;
};

사용 예시

import { Widget } from '@suminmon/widget-test';

function App() {
  return (
    <Widget
      onDrop={(element, customValue) => {
        console.log('드롭된 element:', element);
        console.log('커스텀 값:', customValue);
      }}
    />
  );
}

export { Widget } from "./Widget";