차량 입출차 관리 시스템 (TMS Embed Web)

모바일 웹 기반의 차량 입출차 관리 시스템으로, QR 코드를 통한 효율적인 차량 관리가 가능합니다.

🚀 주요 기능

• 차량 정보 입력: 차량번호, 기사 이름, 기사 전화번호 입력
• 입출차 구분: 입차/출차 선택 기능
• 개인정보 동의: 개인정보 수집 및 활용 동의 절차
• QR 코드 생성: 입력된 정보를 바탕으로 QR 코드 자동 생성
• 모바일 최적화: 반응형 디자인으로 모바일 환경에 최적화
• 화면 밝기 안내: QR 코드 스캔을 위한 화면 밝기 조절 안내

🛠️ 기술 스택

• Frontend: React 19 + TypeScript + Vite
• Styling: Tailwind CSS
• Form Management: React Hook Form + Zod
• QR Code: qrcode.js
• Icons: Lucide React

📱 모바일 최적화

• 반응형 디자인 (모바일 우선)
• 터치 친화적 UI/UX
• PWA 지원 (Progressive Web App)
• 화면 밝기 조절 안내 기능

🚀 시작하기

설치

npm install

개발 서버 실행

npm run dev

빌드

npm run build

미리보기

npm run preview

📋 사용 방법

1. 차량 정보 입력

   • 차량번호 (예: 12가3456)
   • 기사 이름
   • 기사 전화번호 (예: 010-1234-5678)
   • 입차/출차 구분 선택

2. 개인정보 동의

   • 개인정보 수집 및 활용 동의 약관 확인
   • 동의 체크박스 선택

3. QR 코드 생성 및 표시

   • 입력된 정보를 바탕으로 QR 코드 자동 생성
   • QR 코드를 스캔하여 입출차 처리

🔧 화면 밝기 조절

웹 브라우저 보안 정책상 직접적인 화면 밝기 조절은 불가능합니다. 대신:

• QR 코드 표시 시 화면 밝기 조절 안내 메시지 표시
• QR 코드 대비도 최적화 (흰 배경, 검은 QR코드)
• 충분한 크기로 QR코드 표시

📁 프로젝트 구조

src/
├── components/          # 재사용 가능한 컴포넌트
│   ├── VehicleForm.tsx     # 차량 정보 입력 폼
│   ├── PrivacyConsent.tsx  # 개인정보 동의 컴포넌트
│   └── QRCodeDisplay.tsx   # QR 코드 표시 컴포넌트
├── data/               # 정적 데이터
│   └── privacyPolicy.ts    # 개인정보 약관
├── types/              # TypeScript 타입 정의
│   └── index.ts
├── utils/              # 유틸리티 함수
│   ├── validation.ts       # 폼 검증 스키마
│   └── qrCode.ts          # QR 코드 생성 유틸리티
├── App.tsx             # 메인 앱 컴포넌트
├── main.tsx           # 앱 진입점
└── index.css          # 글로벌 스타일

🎨 UI/UX 특징

• 모바일 우선 설계: 320px 이상의 모든 모바일 기기 지원
• 직관적인 인터페이스: 단계별 안내와 명확한 버튼 배치
• 접근성 고려: 키보드 네비게이션 및 스크린 리더 지원
• 한국어 최적화: Pretendard 폰트 사용

🔒 보안 및 개인정보

• 개인정보 수집 및 활용에 대한 명시적 동의
• 클라이언트 사이드 QR 코드 생성 (서버 전송 없음)
• 입력 데이터 검증 및 오류 처리

📱 PWA 지원

• 모바일 앱과 유사한 사용자 경험
• 홈 화면에 추가 가능
• 오프라인에서도 기본 기능 사용 가능

🚀 배포

빌드된 파일은 dist 폴더에 생성되며, 정적 웹 서버에 배포할 수 있습니다.

npm run build
# dist 폴더의 내용을 웹 서버에 업로드

📄 라이선스

이 프로젝트는 MIT 라이선스 하에 있습니다.