-
주제 및 선정 배경:
QR 주문은 사용자가 더 편리하게 주문하고 매장이 효율적으로 운영될 수 있도록 도와주는 기술입니다.
빠르게 변화하는 소비 트렌드에 맞춰 실질적으로 활용 가능한 시스템을 구현하고자 이 주제를 선정하게 되었습니다. -
목적:
QR 주문을 통해 손님이 편리하게 주문하고 매장을 더 쉽게 관리할 수 있도록 만들고자 하였습니다.
간단하면서도 실용적인 시스템으로 모두가 만족할 수 있는 서비스를 제공하려는 의도를 담아 기획하게 되었습니다. -
핵심 기능:
FreeOrder의 핵심 기능은 QR 코드 기반의 셀프 주문과 POS에서의 실시간 메뉴 업데이트 및 주문 접수 알림입니다.
- QR 코드를 스캔하여 메뉴 주문 가능
- 주문 정보 확인 및 실시간 상태 업데이트
- 사용자 친화적인 인터페이스 제공
- 결제 기능
- 매장 내 주문 및 결제 관리
- 판매 데이터 조회 및 통계 제공
- 관리자 페이지를 통한 매장 운영 지원
- 주문 내역 관리
- 매출 통계 확인
-
Backend:
Java, Spring Boot, Spring MVC, Spring Security, RESTful API -
Frontend:
HTML, CSS, JavaScript, React -
Database:
MySQL -
Real-Time Communication:
WebSocket -
Cloud Deployment:
AWS -
Version Control:
Git, GitHub
QR 오더 및 POS 시스템 구현을 위한 요구사항 정의서입니다.
💳 ** 요구사항 정의서**
시스템의 세부 기능과 역할을 명시한 문서입니다.
각 시스템별 주요 기능과 세부 사항은 아래에서 확인할 수 있습니다.
QR 코드를 활용한 주문 및 관리 시스템의 세부 기능입니다.
🖼️ **QR 기능 주요 기능 (클릭하여 자세히 보기)**
QR 기능 주요 항목:
-
주문 접수: QR 코드 스캔 시 사용자가 메뉴를 확인하고 주문할 수 있도록 설계.
-
사용자 맞춤형 서비스: 사용자 데이터 기반으로 이벤트 제공.
-
관리 기능: QR 코드를 통한 주문 상태 관리 및 알림 전송.
매장에서의 결제 및 데이터 관리 시스템의 세부 기능입니다.
🖼️ **POS 기능 주요 기능 (클릭하여 자세히 보기)**
POS 기능 주요 항목:
-
결제 처리: 다양한 결제 방식(카드, 현금, 간편 결제) 지원 및 영수증 발행.
-
데이터 통계: 일별/월별 매출 통계 자동 생성 및 관리자 페이지 제공.
-
POS 관리: 상품, 카테고리, 옵션 등 CRUD 기능.
시스템에서 사용하는 주요 데이터베이스 테이블의 구조와 역할을 정의합니다.
📜 **테이블 정의서:**
| 사진 | 이름 | 역할 및 담당 |
|---|---|---|
 |
김동진 | 프로젝트 매니저 프로젝트 진행 및 관리 팀 커뮤니케이션 조율 |
 |
배순영 | Spring Boot 기반 Backend 및 데이터베이스 설계 서버 설계 및 DB 구조 설계 API 설계 및 구현 |
 |
이동현 | React 기반 Frontend 개발 및 UI/UX 디자인 화면 설계 및 구현 사용자 경험 최적화 |
 |
유지현 | WebSocket 기반 실시간 통신 및 결제 기능 구현 실시간 통신 시스템 구현 결제 시스템 설계 및 구현 |
 |
박호영 | drag & drop 기능 구현 및 관리자 페이지 설계 drag & drop 기능 구현 관리자 페이지 UI/UX 설계 |
- 개발 툴: VS Code
- 협업 도구: Notion, Figma, GitHub
- QR 코드를 통해 빠르고 간편하게 주문 가능
- 주문 상태를 실시간으로 확인 가능
🎬 **QR 수행 결과**
- 매장 내 모든 주문을 실시간으로 관리
- 판매 데이터 통계 및 매출 보고서 제공
🎬 **POS 수행 결과**
이번 프로젝트를 통해 React의 컴포넌트 기반 설계와 상태 관리의 중요성을 깊이 이해하고, 비동기 처리 및 UI 구현 능력을 향상시켰습니다. 짧은 시간동안 부족했던 부분을 학습과 실습으로 보완하며 기술적 자신감과 성장의 발판을 마련한 값진 경험이었습니다.
리액트의 강점을 알게된 시간이였고, 웹소켓 부분을 리액트로 변환하면서 많은 이슈가 있었는데 대부분 라이브러리의 버전이 바뀌면서 사용법이 바뀐부분이였습니다. 라이브러리 활용법에 대해 많은 공부가 되었고 사용하는 언어와 라이브러리들의 버전 관리가 중요하다는걸 깨달았습니다.
이번 프로젝트에서 저는 기존 MVC를 RESTful API와 React로 전환하며 클라이언트-서버 간 데이터 흐름을 최적화하는 데 집중했습니다. React 프로젝트를 진행하며 상태관리를 효율적으로 구현하고, 비동기 데이터 처리를 안정적으로 처리했습니다. 또한, RESTful API를 재설계하여 구조를 직관적으로 개선하고 UI 컴포넌트를 향상시켰습니다. 프로젝트를 통해 React의 컴포넌트 설계와 상태 관리의 중요성을 이해했습니다.
이번 프로젝트에서는 기존 Thymleaf를 제거하고 React를 도입하면서 컴포넌트 기반 설계의 중요성을 깊이 체감할 수 있었습니다. 이를 통해 React가 제공하는 효율성과 유연함을 더욱 잘 이해하게 되었습니다. 다만, 컴포넌트 간 상태 전달과 최적화 측면에서 미흡한 부분이 있었고, 이를 보완하기 위해 관련 자료를 탐구하고 실습을 거듭하며 더 나은 방식을 찾아가고자 노력했습니다. 프로젝트를 성공적으로 마무리하며 큰 성취감을 느낄 수 있었고, 이번 경험이 앞으로의 성장에 귀중한 밑거름이 될 것이라고 확신합니다. 앞으로도 다양한 프로젝트를 통해 실력을 쌓고, 더 나은 결과물을 만들어내기 위해 꾸준히 노력하겠습니다.
이번 프로젝트를 통해 컴포넌트 기반 아키텍처인 React의 활용을 이해할 수 있는 계기가 되었습니다. React의 Hooks를 활용해 promotion과 notice의 등록, 조회, 수정, 삭제 기능을 구현했으며, 조건부 렌더링을 적용해 상황에 따라 적합한 조회 정보를 동적으로 출력하였습니다. 이를 통해 React의 컴포넌트 구조와 상태 관리의 효율성을 실무에 적용할 수 있는 능력을 키울 수 있었습니다.
이번 프로젝트를 통해 React를 활용한 컴포넌트 기반 설계와 상태 관리의 중요성을 이해하였고, 생명주기 메서드를 활용한 동적인 UI 구현 경험을 쌓았습니다. 또한, React로 비동기 처리와 드래그 앤 드롭 기능을 직접 구현하면서 기술적으로 한 단계 성장했으며, 프론트엔드 개발에 대한 자신감도 크게 향상되었습니다.