@tobenetworks/gtgear-components

GTGear 브랜드 사이트용 Web Components 라이브러리

📦 설치

NPM

npm install @tobenetworks/gtgear-components

CDN

<script type="module" src="https://unpkg.com/@tobenetworks/gtgear-components/dist/gtgear-components/gtgear-components.esm.js"></script>

🧩 컴포넌트

| 컴포넌트 | 태그 | 설명 | |---------|------|------| | 정품등록 | <gt-product-register> | 시리얼 기반 정품등록 + 수동등록 + 조회 | | A/S 접수 | <gt-as-form> | A/S·교환·반품 접수 (Zendesk 연동) | | 1:1 문의 | <gt-contact-form> | 이메일 문의 접수 (Zendesk 연동) |

🚀 사용법

정품등록

<gt-product-register
  brand-code="0021"
  brand-name="Fanatec"
  guide-text="정품등록 안내 문구..."
></gt-product-register>

| Prop | 타입 | 필수 | 설명 | |------|------|------|------| | brand-code | string | ✅ | 브랜드 코드 | | brand-name | string | ✅ | 브랜드명 (약관 표시용) | | guide-text | string | - | 상단 안내 문구 | | logo-src | string | - | 로고 이미지 경로 |

A/S 접수

<gt-as-form
  brand-code="0021"
  brand-name="Fanatec"
></gt-as-form>

| Prop | 타입 | 필수 | 설명 | |------|------|------|------| | brand-code | string | ✅ | 브랜드 코드 (제품 목록 조회용) | | brand-name | string | - | 브랜드명 (기본: 지티기어) |

1:1 문의

<gt-contact-form
  brand-code="0021"
  brand-name="Fanatec"
></gt-contact-form>

| Prop | 타입 | 필수 | 설명 | |------|------|------|------| | brand-code | string | - | 브랜드 코드 | | brand-name | string | - | 브랜드명 (기본: Fanatec) | | upload-endpoint | string | - | 파일 업로드 API URL | | submit-endpoint | string | - | 문의 접수 API URL |

🔌 Backend API

컴포넌트가 사용하는 API 엔드포인트입니다.

api.tbnws.co.kr

| Method | Endpoint | 설명 | |--------|----------|------| | GET | /api/serial/warranty/open/getSerializableGoodsList | 제품 목록 조회 | | POST | /api/serial/warranty/open/register | 정품등록 | | POST | /api/serial/warranty/open/manual | 수동 정품등록 | | GET | /api/serial/warranty/open/find | 정품등록 조회 | | POST | /api/b2ccrm/as/upload | 첨부파일 업로드 |

support.gtgear.co.kr

| Method | Endpoint | 설명 | |--------|----------|------| | POST | /zendesk | A/S 접수 (Zendesk 티켓) | | POST | /wpRegistEnquire | 1:1 문의 접수 |

🏷️ 브랜드 코드

| 코드 | 브랜드 | |------|--------| | 0021 | Fanatec | | 0022 | MOZA |

📋 Framework 통합

React

import '@tobenetworks/gtgear-components/dist/gtgear-components/gtgear-components.esm.js';

function App() {
  return (
    <gt-product-register
      brand-code="0021"
      brand-name="Fanatec"
    />
  );
}

Vue

<template>
  <gt-product-register
    brand-code="0021"
    brand-name="Fanatec"
  />
</template>

<script setup>
import '@tobenetworks/gtgear-components/dist/gtgear-components/gtgear-components.esm.js';
</script>

Astro

---
// astro.config.mjs에서 customElements 설정 필요
---
<script>
  import '@tobenetworks/gtgear-components/dist/gtgear-components/gtgear-components.esm.js';
</script>

<gt-product-register
  brand-code="0021"
  brand-name="Fanatec"
/>

📝 License

MIT © Tobe Networks Global