@tobenetworks/as-form

A/S 신청 폼 Web Component for GTGear brands (Fanatec, MozaRacing, etc.)

Features

• 📝 3-Step Form: 약관 동의 → 폼 작성 → 완료
• 🔍 정품등록 조회 연동
• 📦 제품 목록 API 연동
• 📍 다음 주소 API 연동
• ✅ 실시간 유효성 검사
• 📎 파일 첨부 지원
• 🎨 Shadow DOM 스타일 캡슐화

Installation

NPM

npm install @tobenetworks/as-form

CDN

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

Usage

HTML

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

React

import '@tobenetworks/as-form';

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

Vue

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

<script>
import '@tobenetworks/as-form';
</script>

Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | brand-code | string | - | 브랜드 코드 (제품 목록 조회, 정품등록 조회에 사용) | | brand-name | string | '지티기어' | 브랜드명 (표시용) |

Form Steps

Step 1: 약관 동의

• A/S 규정 확인
• 교환/반품 규정 확인
• 전체 동의 시 다음 단계 진행

Step 2: 폼 작성

• 신청 유형: A/S / 교환 / 반품 탭 선택
• 고객 정보: 이름, 연락처, 이메일, 주소
• 제품 정보: 제품 선택, 시리얼 번호, 사용환경, 구매 정보
• 신청 정보: 증상/내용, 첨부파일

Step 3: 완료

• 접수 완료 안내
• 고객센터 연락처 표시

API Endpoints

컴포넌트는 다음 API들과 연동됩니다:

| 기능 | Endpoint | |------|----------| | 제품 목록 | GET api.tbnws.co.kr/api/serial/warranty/open/getSerializableGoodsList | | 정품등록 조회 | GET api.tbnws.co.kr/api/serial/warranty/open/find | | 파일 업로드 | POST admin.tbnws.com/upload/forum | | A/S 접수 | POST support.gtgear.co.kr/zendesk |

Development

# Install dependencies
npm install

# Start dev server
npm start

# Build for production
npm run build

# Run tests
npm test

Browser Support

• Chrome 60+
• Firefox 63+
• Safari 10.1+
• Edge 79+

License

MIT