Components๊ฐœ์š”

Components

์„ ์–ธ์ ์ด๊ณ  ํƒ€์ž… ์•ˆ์ „ํ•œ React ์ปดํฌ๋„ŒํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

ํฌํ•จ๋œ ์ปดํฌ๋„ŒํŠธ

UI ์ปดํฌ๋„ŒํŠธ

  • InViewTrigger - Intersection Observer ๊ธฐ๋ฐ˜ ๋ทฐํฌํŠธ ๊ฐ์ง€
  • SuspenseBoundary - Suspense + ErrorBoundary ํ†ตํ•ฉ

ํŠน์ง•

  • โœ… ์„ ์–ธ์  API์™€ ๊ฐ€๋ฒผ์šด ๋ฒˆ๋“ค
  • โœ… React ์™ธ ์˜์กด์„ฑ ์—†์Œ (zero-deps)
  • โœ… Strict TypeScript ์ง€์›
  • โœ… Tree-shaking ๊ฐ€๋Šฅํ•œ ESM ๋ฒˆ๋“ค

์„ค์น˜

npm install @frontend-toolkit-js/components
# or
pnpm add @frontend-toolkit-js/components

๋น ๋ฅธ ์‹œ์ž‘

import {
  InViewTrigger,
  SuspenseBoundary,
} from '@frontend-toolkit-js/components';
 
function Example() {
  return (
    <SuspenseBoundary
      pendingFallback={<Spinner />}
      errorFallback={<ErrorState />}
    >
      <InViewTrigger onInView={() => console.log('๋ณด์ž„!')}>
        <Article />
      </InViewTrigger>
    </SuspenseBoundary>
  );
}