{"id":29820376,"url":"https://github.com/kiwowki/grandtote-frontend","last_synced_at":"2025-09-04T19:22:40.135Z","repository":{"id":306843294,"uuid":"1027365247","full_name":"kiwowki/grandtote-frontend","owner":"kiwowki","description":"Grand Tote 프론트엔드 README 전용 리포지토리입니다.","archived":false,"fork":false,"pushed_at":"2025-07-27T23:16:23.000Z","size":3227,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-28T01:09:22.416Z","etag":null,"topics":["ably","bottomsheet","carusel","cdn","i18n","jwt-authentication","kyc","nginx","stylescope","validation","vue3"],"latest_commit_sha":null,"homepage":"https://alpha-test.grandtotes.net:18080/","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kiwowki.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-27T21:49:45.000Z","updated_at":"2025-07-27T23:19:39.000Z","dependencies_parsed_at":"2025-07-28T01:23:53.200Z","dependency_job_id":null,"html_url":"https://github.com/kiwowki/grandtote-frontend","commit_stats":null,"previous_names":["kiwowki/grandtote-frontend"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/kiwowki/grandtote-frontend","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiwowki%2Fgrandtote-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiwowki%2Fgrandtote-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiwowki%2Fgrandtote-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiwowki%2Fgrandtote-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kiwowki","download_url":"https://codeload.github.com/kiwowki/grandtote-frontend/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiwowki%2Fgrandtote-frontend/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267600093,"owners_count":24113712,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ably","bottomsheet","carusel","cdn","i18n","jwt-authentication","kyc","nginx","stylescope","validation","vue3"],"created_at":"2025-07-28T23:00:33.618Z","updated_at":"2025-07-28T23:01:53.247Z","avatar_url":"https://github.com/kiwowki.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# GrandTote Horse Racing Bet Platform\nVue 3 기반 다국어 실시간 경마 베팅 웹 앱 입니다.\n\n![메인 화면](./screenshots/screenshot01.png)\n\n\n## 목차 (Table of Contents)\n- [프로젝트 개요](#프로젝트-개요-overview)\n- [아키텍처](#아키텍처-architecture)\n- [주요 기능](#주요-기능-features)\n- [기술적 하이라이트](#기술적-하이라이트)\n- [기술 스택](#기술-스택-tech-stack)\n- [프로젝트 구조](#프로젝트-구조)\n- [API \u0026 문서화](#api--문서화)\n- [UI/UX 협업](#uiux-협업)\n\n\n## 프로젝트 개요 (Overview)\n- 목표: 글로벌 사용자에게 직관적이고 신뢰성 높은 실시간 베팅 경험 제공  \n- 대상 사용자: 카자흐스탄·러시아·영미권 경마 베터\n\n\n## 아키텍처 (Architecture)\n```\n[Vue 3 SPA]\n    │ axios/http-client\n    ▼\n[Java Spring REST API] ←─ Nginx ─→ [Static CDN]\n    │\n    ├─ JWT 인증 (Access/Refresh)\n    ├─ 쿠폰·KYC·베팅·히스토리 로직\n    └─ Ably Pub/Sub (실시간 채팅·배당률)\n    │\n   Database \u0026 Cache\n```\n\n\n## 주요 기능 (Features)\n- 실시간·녹화 경주 영상 플레이어\n- 다국어(i18n) 지원 (KZ·RU·EN)\n- Ably 채팅, Swiper Carousel\n- 쿠폰·KYC 인증, 배팅·입출금·히스토리, 이벤트 포인트\n- 보안 로그인 (Access/Refresh Token)\n- 관리자 사이트 (쿠폰·회원·환불·채팅 관리)\n\n\n## 기술적 하이라이트 (Technical Highlights)\n- **API 호출 최적화**  \n  - Bet History: 중복 호출 제거 및 캐싱 도입으로 응답 시간 12s → 4s 단축  \n  - Calendar: 월별 데이터 한번만 로드하도록 로직 개선 (같은 월 내 재호출 방지)  \n- **인증·보안**  \n  - JWT Access/Refresh Token 자동 갱신 및 만료 처리  \n  - 만료 시 무감지 로그아웃, HTTP‑Only 쿠키 스토리지 준비 완료  \n- **실시간 기능**  \n  - Ably 채팅 → Top‑Bets 실시간 갱신  \n  - Live race rate, Tote UK 베팅 로직 분리·통합 토글  \n- **Mobile Bottom‑Sheet Modals**  \n  Deposit, Withdrawal, Profile 등 주요 모달을 vue‑bottom‑sheet로 구현해  \n  · 드래그 투 클로즈/오픈  \n  · 동적 높이 자동 조정  \n  · 웹/모바일 모두 일관된 UX 제공\n- **Form Validation \u0026 Error Handling**  \n  · 최소/최대 충전액, KYC 입력값, 주소·이메일·비밀번호 유효성 검사  \n  · 필드 단위 실시간 검증 메시지  \n  · API 오류(1507, 1505 등) 대응용 커스텀 얼럿  \n\n\n## 기술 스택 (Tech Stack)\n- Frontend: Vue 3 Composition API, `\u003cstyle scoped\u003e` CSS, i18n(translation.json)\n- 채팅: Ably\n- UI 컴포넌트: Swiper Carousel, Custom Video Player\n- 인증·보안: JWT Access/Refresh Token\n- 배포: CDN, Nginx\n\n## 프로젝트 구조\n```\n├─ public/ # 정적 자산\n│ └─ cdn/ # CDN 호스팅 파일\n└─ src/ # 소스 코드\n├─ ably/ # Ably 실시간 모듈\n├─ api/ # 도메인별 REST API 호출 래퍼\n├─ components/ # 재사용 컴포넌트\n├─ constants/ # 전역 상수\n├─ font/ # 폰트 파일\n├─ locale/ # i18n 번역 리소스\n├─ router/ # Vue Router 설정\n├─ service/ # 공통 서비스 로직\n│ └─ api-service.js # axios.create()로 baseURL 세팅\n├─ store/ # 전역 상태 관리 (Pinia/Vuex)\n├─ util/ # 유틸리티 함수\n└─ views/ # 각 페이지 컴포넌트\n```\n\n\n## API \u0026 문서화 (API \u0026 Documentation)\n- **Swagger**: 백엔드에서 auto‑generated된 Swagger UI로 모든 REST API를 직관적으로 탐색·호출  \n- **Postman**: Postman Collection 제공, 개발·테스트·CI 파이프라인에 바로 연동 가능  \n\n\n## UI/UX 협업\n- **Figma 프로토타입**  \n  디자이너와 실시간 피드백 → 모바일/데스크톱 화면 일관성 보장  \n- **Responsive Design**  \n  · Swiper Carousel·Custom Video Player  \n  · 모든 모달·팝업 `backdrop-filter: blur()`  \n  · 하단 시트 및 GNB 드로워 적용\n\n\n## Upcoming Enhancements\n이 리포지토리에서는 다음 기능을 개인 프로젝트로 새롭게 구현하여 코드와 데모를 공개할 예정입니다.\n\n- Swiper Carousel 배너  \n- Custom Video Player UI  \n- Mobile Bottom‑Sheet Modal  \n- Form Validation \u0026 Error Handling  \n- 다국어(i18n) 스위처  \n- 간단한 배팅 히스토리 페이지  \n- 캘린더 컴포넌트 등","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkiwowki%2Fgrandtote-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkiwowki%2Fgrandtote-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkiwowki%2Fgrandtote-frontend/lists"}