재고 위치 찾기 도구

Stock Locator Tool은 React 컴포넌트로, 특정 제조사 부품 번호에 대한 실시간 가격 및 재고 현황(재고 수량, 구간별 가격, 유통업체 링크)을 표시하며, Octopart API를 기반으로 동작합니다. 제품 페이지, 조달 도구 또는 모든 React 애플리케이션에 임베드할 수 있습니다.

사전 준비 사항

• React 프로젝트

• supply.domain 범위를 가진 OAuth 2.0 액세스 토큰 – 직접 API 쿼리에 사용하는 것과 동일한 토큰입니다(참조: Authorization)

설치

npm i @altiumnexar/stock-locator-tool

기본 사용법

import { StockLocatorTool } from "@altiumnexar/stock-locator-tool";

function MyPage() {
  return (
    <StockLocatorTool
      searchParameters={{ token: "YOUR_ACCESS_TOKEN" }}
    />
  );
}

이 설정은 사용자가 아무 MPN이나 입력해 실시간 오퍼와 재고를 확인할 수 있는 전체 검색 인터페이스를 렌더링합니다.

단일 부품 모드

부품을 미리 채우고 검색창을 숨기려면(제품 상세 페이지에서 유용함):

<StockLocatorTool
  searchParameters={{
    token: "YOUR_ACCESS_TOKEN",
    q: "LM358DR",
    disableSearch: true,
  }}
/>

토큰 처리

액세스 토큰은 24시간 후 만료됩니다. 개발 중에는 일시적으로 토큰을 하드코딩해도 됩니다. 프로덕션 환경에서는 client_credentials grant를 통해 백엔드에서 토큰을 가져오고, 만료 전에 갱신하세요. Client Secret은 클라이언트 측 코드에 절대 노출하지 마세요.

추가 참고 자료

GitHub 저장소에는 사용 가능한 모든 props가 문서화되어 있습니다.

• searchParameters – 지역, 통화, 인증됨/재고 있음 필터, 검색창 표시 여부, 오퍼 개수 제한 등

• styles – 라이트/다크 테마, 글꼴, 전체 사용자 지정 색상 토큰 참조

• hideColumns – 오퍼 테이블에 표시할 열 제어