https://github.com/pathcosmos/tms-embed-web
tms-embed-web
https://github.com/pathcosmos/tms-embed-web
Last synced: 21 days ago
JSON representation
tms-embed-web
- Host: GitHub
- URL: https://github.com/pathcosmos/tms-embed-web
- Owner: pathcosmos
- Created: 2025-09-18T14:37:49.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-09-30T06:33:24.000Z (9 months ago)
- Last Synced: 2025-09-30T08:33:49.652Z (9 months ago)
- Language: TypeScript
- Size: 355 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 차량 입출차 관리 시스템 (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)
- 화면 밝기 조절 안내 기능
## 🚀 시작하기
### 설치
```bash
npm install
```
### 개발 서버 실행
```bash
npm run dev
```
### 빌드
```bash
npm run build
```
### 미리보기
```bash
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` 폴더에 생성되며, 정적 웹 서버에 배포할 수 있습니다.
```bash
npm run build
# dist 폴더의 내용을 웹 서버에 업로드
```
## 📄 라이선스
이 프로젝트는 MIT 라이선스 하에 있습니다.