{"_id":"@andychoi-eq4all/webglplayer2.1","name":"@andychoi-eq4all/webglplayer2.1","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@andychoi-eq4all/webglplayer2.1","version":"1.0.0","description":"webglplayer2.1","main":"dist/index.js","module":"dist/index.js","types":"dist/index.d.ts","exports":{"import":"./dist/index.js","require":"./dist/index.js","types":"./dist/index.d.ts"},"scripts":{"dev":"webpack --mode development","start":"webpack-dev-server --mode development --config webpack.config.dev.js","build":"webpack --mode production --config webpack.config.js","build:lib":"webpack --mode production --config webpack.config.lib.js","prepublishOnly":"npm run build:lib"},"repository":{"type":"git"},"author":"","license":"ISC","devDependencies":{"@babel/core":"^7.26.10","@babel/plugin-proposal-class-properties":"^7.18.6","@babel/plugin-proposal-object-rest-spread":"^7.18.9","@babel/preset-env":"^7.26.9","@babel/preset-react":"^7.26.3","@babel/preset-typescript":"^7.18.6","autoprefixer":"^10.4.21","babel-loader":"^9.2.1","clean-webpack-plugin":"^4.0.0","css-loader":"^6.11.0","css-minimizer-webpack-plugin":"^5.0.1","file-loader":"^6.2.0","html-webpack-plugin":"^5.5.3","mini-css-extract-plugin":"^2.7.6","postcss":"^8.5.3","postcss-loader":"^8.1.1","prettier":"^3.5.3","react":"^17.0.2","react-dom":"^17.0.2","style-loader":"^4.0.0","tailwindcss":"^3.4.17","url-loader":"^4.1.1","webpack":"^5.98.0","webpack-cli":"^5.1.4","webpack-dev-server":"^4.15.2"},"dependencies":{"dompurify":"^3.0.6","react-router-dom":"^6.14.2"},"peerDependencies":{"three":"^0.150.0"},"keywords":[],"_id":"@andychoi-eq4all/webglplayer2.1@1.0.0","gitHead":"21a33776a1b24544dba8f887cf8240b5583e3039","_nodeVersion":"20.16.0","_npmVersion":"10.7.0","dist":{"integrity":"sha512-we5IUSmLKo47IYDG5G2i9zgsGG5Krh3tSOAoKIrUSPwR4w2GaR6rCjK8ZED2FtmWKlqpVFeWPyoARqYi2xT0dg==","shasum":"2607cb92a17b2e94edefce2a6c96aa727e639135","tarball":"https://registry.npmjs.org/@andychoi-eq4all/webglplayer2.1/-/webglplayer2.1-1.0.0.tgz","fileCount":4,"unpackedSize":659764,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIHxpMhbzaejiXIue0VctpRTaroT4PlRuDF4dobSCn9cBAiEA3ICNM5kJBJj1bZsmCy+QMn08eEn38ryDFFTFzDDO5W0="}]},"_npmUser":{"name":"andychoi-eq4all","email":"andychoi@eq4all.co.kr","actor":{"name":"andychoi-eq4all","email":"andychoi@eq4all.co.kr","type":"user"}},"directories":{},"maintainers":[{"name":"andychoi-eq4all","email":"andychoi@eq4all.co.kr"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/webglplayer2.1_1.0.0_1751521585483_0.3858374498437285"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-03T05:46:25.367Z","1.0.0":"2025-07-03T05:46:25.745Z","modified":"2025-07-03T05:46:26.120Z"},"maintainers":[{"name":"andychoi-eq4all","email":"andychoi@eq4all.co.kr"}],"description":"webglplayer2.1","keywords":[],"repository":{"type":"git"},"license":"ISC","readme":"# 제주특별자치도 기상특보 알림 시스템\n\n![License](https://img.shields.io/badge/license-ISC-blue.svg)\n![Version](https://img.shields.io/badge/version-1.0.0-green.svg)\n![React](https://img.shields.io/badge/React-17.0.2-blue.svg)\n![Webpack](https://img.shields.io/badge/Webpack-5.98.0-blue.svg)\n\n## 📋 프로젝트 개요\n\n**jeju-weather-alert-system**은 제주특별자치도의 기상특보 및 폭염 특보에 따른 주의 당부사항을 수어로 안내하는 웹 애플리케이션입니다. 청각장애인들이 기상 특보 정보를 수어를 통해 쉽게 이해할 수 있도록 지원합니다.\n\n## 🌟 주요 기능\n\n### 🌦️ 기상 알림 시스템\n\n- **기상특보 알림**: 제주지역 기상특보 발효 시 주의사항 안내\n- **폭염특보 알림**: 폭염 특보 발효 시 건강관리 당부사항 제공\n- **실시간 수어 번역**: WebGL 기반 3D 아바타를 통한 수어 서비스\n\n### 🤟 수어 지원 기능\n\n- **수어 아바타**: WebGL 기반 3D 아바타를 통한 실시간 수어 번역\n- **수어 ID 재생**: 특정 수어 문장 ID를 통한 직접 재생 기능\n- **드래그 가능한 플레이어**: 사용자가 원하는 위치로 이동 가능\n\n## 🚀 기술 스택\n\n### Frontend\n\n- **React**: 17.0.2\n- **React Router DOM**: 6.14.2\n- **Tailwind CSS**: 3.4.17\n- **PostCSS**: 8.5.3\n\n### Build Tools\n\n- **Webpack**: 5.98.0\n- **Babel**: 7.26.x\n- **TypeScript**: 프리셋 지원\n\n### 보안 및 유틸리티\n\n- **DOMPurify**: 3.0.6 (XSS 방지)\n- **Prettier**: 3.5.3 (코드 포맷팅)\n\n## 📦 설치 및 실행\n\n### 사전 요구사항\n\n- Node.js (v14 이상)\n- npm 또는 yarn\n\n### 설치\n\n```bash\n# 프로젝트 클론\ngit clone [repository-url]\ncd webglplayer2.1_k-knowledge\n\n# 의존성 설치\nnpm install\n```\n\n### 개발 서버 실행\n\n```bash\n# 개발 모드로 실행\nnpm start\n\n# 또는 개발 빌드\nnpm run dev\n```\n\n개발 서버가 실행되면 `http://localhost:8080`에서 애플리케이션을 확인할 수 있습니다.\n\n### 프로덕션 빌드\n\n```bash\n# 프로덕션 빌드 생성\nnpm run build\n```\n\n## 🏗️ 프로젝트 구조\n\n```\nwebglplayer2.1_k-knowledge/\n├── src/\n│   ├── components/           # React 컴포넌트\n│   │   ├── AlertPage.js     # 기상특보 알림 페이지\n│   │   ├── PageWrapper.js   # 페이지 래퍼 컴포넌트\n│   │   └── WebGLPlayer.js   # WebGL 수어 플레이어\n│   ├── styles/              # CSS 스타일 파일\n│   │   └── globals.css\n│   ├── assets/              # 정적 자산\n│   ├── libs/                # WebGL 플레이어 라이브러리\n│   ├── userInterface.js     # WebGL 플레이어 초기화\n│   ├── index.js             # 메인 엔트리 포인트\n│   └── index.html           # HTML 템플릿\n├── webpack.config.js        # Webpack 설정 (프로덕션)\n├── webpack.config.dev.js    # Webpack 설정 (개발)\n├── tailwind.config.js       # Tailwind CSS 설정\n├── babel.config.json        # Babel 설정\n└── package.json            # 프로젝트 의존성\n```\n\n## 🎯 주요 컴포넌트\n\n### 핵심 컴포넌트\n\n- **AlertPage**: 제주 기상특보 알림 메시지 표시\n- **PageWrapper**: 애플리케이션 래퍼 및 라우팅 관리\n- **WebGLPlayer**: 3D 아바타 수어 플레이어\n\n### 특수 기능\n\n- **수어 ID 재생**: `sendSentenceIdToPlayer()` API를 통한 직접 수어 재생\n- **드래그 가능한 UI**: jQuery UI 기반 플레이어 위치 조정\n- **반응형 디자인**: Tailwind CSS 기반 모바일 최적화\n\n## 💻 사용법\n\n### 기본 기능\n\n1. 애플리케이션 실행 시 자동으로 기상특보 알림이 표시됩니다\n2. 각 알림 텍스트를 클릭하면 해당 내용이 수어로 재생됩니다\n3. 'WebGL 테스트' 버튼으로 수어 ID를 직접 재생할 수 있습니다\n\n### 수어 플레이어 API\n\n```javascript\n// 특정 수어 ID 재생\nwindow.webGLPlayer.sendSentenceIdToPlayer(\n  '수어ID',\n  (success) => console.log('재생 완료:', success),\n  ''\n)\n```\n\n## 🔧 설정 파일\n\n- `webpack.config.js`: 프로덕션 빌드 설정\n- `webpack.config.dev.js`: 개발 서버 설정\n- `tailwind.config.js`: Tailwind CSS 설정\n- `babel.config.json`: Babel 설정 (React, ES6+ 지원)\n\n## 📄 라이센스\n\n이 프로젝트는 ISC 라이센스 하에 배포됩니다.\n","readmeFilename":"README.md","_rev":"1-e079412d65eabf2d8995a8cf80f1374c"}