📘 Poble Web Reference
This repository is a web reference project for the Poble POS system. It was independently created as a practical reference and is being handed over with the intention of being helpful to the Poble team.
🚀 Tech Stack
- Framework: Next.js 15.1.0
- Language: TypeScript 5
- Styling: Tailwind CSS 3.4.17
- Animations: Framer Motion 11.15.0
- Icons: Lucide React 0.562.0
📦 Installation & Running
Install dependencies
npm install
Run development server
npm run dev
The development server runs at http://localhost:3010.
Production build
npm run build
npm start
📁 Project Structure
poble-web-reference/
├── src/
│ ├── app/ # Next.js App Router pages
│ │ ├── about/ # Company introduction
│ │ ├── admin/ # Admin pages (WIP)
│ │ ├── hardware/ # Hardware information
│ │ ├── pricing/ # Pricing information
│ │ ├── privacy/ # Privacy policy
│ │ └── terms/ # Terms of service
│ ├── components/ # Reusable components
│ ├── config/ # Configuration files
│ ├── context/ # React Context
│ └── data/ # Static data
├── public/ # Static assets
│ └── images/ # Image assets
└── package.json # Project dependencies
🎨 Design System
Color Palette
- Gold:
#F9C835 (Primary brand color)
- Charcoal:
#2A2A2A (Dark background)
- Cream:
#FFFDF9 (Light background)
Fonts
- Body / Headings: Albert Sans
- Logo: Outfit
🔧 Key Features
- ✅ Responsive design
- ✅ Dark / Light mode support
- ✅ SEO optimized
- ✅ Motion & animation effects
- ⚠️ Admin pages (work in progress)
⚠️ Admin Pages (Work in Progress)
The admin pages are currently in development and are included as a structural reference only. They are not production-ready and may require additional implementation, testing, and security hardening before use.
📝 Access & Usage
This repository is intended for internal use by the Poble team. Poble may use, modify, deploy, and operate this project as part of its commercial website and services. External distribution or reuse by third parties is not permitted.
🖼 Brand Assets & Images
All Poble logos, brand assets, and visual identity elements used in this project are the property of Poble and are included for internal reference purposes only. Some placeholder images or references may have been automatically included during development for layout and testing purposes. These do not imply any affiliation, endorsement, or commercial intent, and should be reviewed or replaced before production use.
👥 Maintenance & Handover
This project was independently created as a web reference and is being handed over with the intention of being helpful to the Poble team. If the team finds it valuable, it may be used internally and further developed at the team’s discretion. Future changes and enhancements will be planned and prioritised by the Poble team.
📘 Poble Web Reference (한글)
본 저장소는 Poble POS 시스템을 위한 웹 레퍼런스 프로젝트입니다. 개인적으로 제작된 레퍼런스로, Poble 팀에 도움이 되기를 바라는 취지로 이관됩니다.
🚀 기술 스택
- Framework: Next.js 15.1.0
- Language: TypeScript 5
- Styling: Tailwind CSS 3.4.17
- Animations: Framer Motion 11.15.0
- Icons: Lucide React 0.562.0
📦 설치 및 실행
의존성 설치
npm install
개발 서버 실행
npm run dev
개발 서버는 http://localhost:3010 에서 실행됩니다.
프로덕션 빌드
npm run build
npm start
📁 프로젝트 구조
poble-web-reference/
├── src/
│ ├── app/ # Next.js App Router 페이지
│ │ ├── about/ # 회사 소개
│ │ ├── admin/ # 관리자 페이지 (개발 중)
│ │ ├── hardware/ # 하드웨어 정보
│ │ ├── pricing/ # 가격 정보
│ │ ├── privacy/ # 개인정보처리방침
│ │ └── terms/ # 이용약관
│ ├── components/ # 재사용 가능한 컴포넌트
│ ├── config/ # 설정 파일
│ ├── context/ # React Context
│ └── data/ # 정적 데이터
├── public/ # 정적 파일
│ └── images/ # 이미지 자산
└── package.json # 프로젝트 의존성
🎨 디자인 시스템
컬러 팔레트
- Gold:
#F9C835 (브랜드 메인 컬러)
- Charcoal:
#2A2A2A (다크 배경)
- Cream:
#FFFDF9 (라이트 배경)
폰트
- 본문 / 헤딩: Albert Sans
- 로고: Outfit
🔧 주요 기능
- ✅ 반응형 디자인
- ✅ 다크 / 라이트 모드 지원
- ✅ SEO 최적화
- ✅ 애니메이션 효과
- ⚠️ 관리자 페이지 (개발 중)
⚠️ 관리자 페이지 (개발 중)
관리자 페이지는 현재 개발 중 상태이며, 구조 및 방향 참고용으로 포함되어 있습니다. 실제 운영 환경에서는 추가 개발, 테스트 및 보안 강화가 필요합니다.
📝 사용 범위
본 저장소는 Poble 팀 내부 사용 목적으로 제공됩니다. Poble는 본 프로젝트를 자사 웹사이트 및 상업적 서비스의 일부로 자유롭게 배포·운영·수정할 수 있습니다. 외부 제3자의 무단 배포 또는 재사용은 허용되지 않습니다.
🖼 브랜드 자산 및 이미지
본 프로젝트에 사용된 Poble 로고, 브랜드 자산 및 비주얼 아이덴티티는 모두 Poble의 자산이며, 내부 참고 용도로만 포함되어 있습니다. 개발 과정에서 레이아웃 및 테스트 목적으로 일부 임시 이미지 또는 자동 삽입된 자료가 포함될 수 있습니다. 이는 특정 업체와의 제휴, 홍보, 상업적 의도를 의미하지 않으며, 실제 운영 전 검토 또는 교체가 필요합니다.
👥 유지보수 및 이관
본 프로젝트는 개인적으로 제작된 웹 레퍼런스로, Poble 팀에 도움이 되기를 바라는 취지로 이관됩니다. 팀에서 가치 있다고 판단할 경우, 내부 용도로 활용하거나 추가 개발을 진행할 수 있습니다. 향후 변경 사항 및 기능 확장은 Poble 팀의 판단과 우선순위에 따라 계획됩니다.
