Components

이 프로젝트에서 실제로 쓰이는 컴포넌트만 정리했습니다. 새 UI가 필요할 때는 새로 만들기 전에 이 목록에서 재사용/확장할 수 있는지 먼저 확인하세요.

실제 사용 중인 컴포넌트

Buttons · Cards · Badges/Tags · Forms · Tables · CTA · Section Header

Buttons

button.js renderButtonLink() — variant: primary / outline / inverse / header (btn-fill 시스템 공용)

Primary Outline
Inverse (on dark) Header CTA

Cards

card.js renderCard() 기반 — 좌측: 기본 카드, 우측: content-card.js renderContentCard() (제품/실적/자료실 공용)

renderCard()

기본 카드(Base Card)

border-stone-200 · shadow-sm · hover:-translate-y-1 · radius 0 — 모든 카드형 컴포넌트의 기반입니다.

표준형 벨트 컨베이어
BEST

벨트 컨베이어

표준형 벨트 컨베이어

물류·식품·전자 산업 현장에 가장 널리 적용되는 기본형 벨트 컨베이어입니다.

물류식품표준형
규격
맞춤 제작
적용
물류/식품

Badges & Tags

content-card.js에서 쓰는 뱃지(브랜드 표시)와 태그(속성 chip)

BEST NEW
물류 식품 표준형

Forms

form/contact-form.js renderGeneralInquiryForm() — 고객센터 일반 문의 폼과 동일한 실제 컴포넌트(제출 시 안내 메시지만 표시)

첨부파일
파일을 선택해 주세요.
  • JPG, JPEG, PNG, PDF, DOCX 형식의 1개 파일만 첨부 가능합니다.
  • 첨부파일의 용량은 파일 10MB를 초과하실 수 없습니다.

Tables

legal.js(이용약관/개인정보처리방침)에서 쓰는 2열 표 패턴과 동일한 클래스 구성

항목 내용
수집 항목 회사명, 담당자명, 연락처, 이메일
보유 기간 문의 처리 완료 후 3년

CTA

카드/섹션에서 반복되는 CTA 패턴 — works-showcase__featured-cta(다크 필) / section-header 액션

자세히 보기
더 보기

Section Header

section-header.js renderSectionHeader() — variant: default / featured (actionVariant: square/pill 포함)

PRODUCTS

대표 제품군

산업 현장에 최적화된 컨베이어·자동화 설비 라인업을 확인하세요.

WORKS

납품 실적

대기업 생산 현장에 구축한 컨베이어 시스템 사례입니다.

Project

HANSUNG

Version

1.0.0

Stack

Tailwind CSS v4 · HTML5 · Vanilla JavaScript

Last Update

2026-07-18

Build

Tailwind CLI (minified) · No bundler · Static Hosting