👀 프로젝트 소개
👨👨👦👦 팀원 소개
🔧 기술 스택
🚀 핵심 기능
🚀 기능 시연 영상
⭐ ER 다이어그램
⭐ 시스템 구조도
⚙️ 프로젝트 실행 방법
💎 라이 센스
Shinsegae Inc, Spharos GHBT팀의 스타벅스 클론 코딩 프로젝트입니다.
스타벅스 모바일 앱의 온라인 스토어를 구현하였습니다.
배포중
|
|
|
|
|
|
| 송지혜 | 송윤서 | 김태근 | 남광후 | 박준석 | 신현채 |
| 팀장 FE | 팀원 FE | 팀원 BE | 팀원 BE | 팀원 BE | 팀원 BE |
| 퍼블리시 검색, 필터링 Auth(FE) 공유하기 (카카오 API) 사이드 메뉴바 |
퍼블리시 장바구니 결제하기 (카카오 API) 배송지 |
SpringSecurity Auth 이메일 배송지 스타벅스 카드 결제 구현 (카카오API) |
SpringSecurity Auth(FE) 인프라 구축 장바구니 |
상품 카테고리 검색, 필터링 DB 이중화 구현 및 배포 데이터 구축 |
쿠폰 장바구니 결제 구현 (카카오API) |
- 스타벅스 온라인 스토어 회원가입/로그인/로그아웃 하기
- 스타벅스 온라인 스토어 상품 조회하기
- 스타벅스 온라인 스토어 상품 필터 및 검색하기
- 스타벅스 온라인 스토어 상품 공유하기
- 스타벅스 온라인 스토어 상품 장바구니에 담기
- 스타벅스 온라인 스토어 결제하기(카카오페이)
| 🖤 회원 가입 🖤 | 🖤 무한스크롤 🖤 | 🖤 검색 🖤 | ||
|---|---|---|---|---|
 |
 |
 |
| 🖤 공유하기 🖤 | 🖤 장바구니 🖤 | 🖤 결제 하기 🖤 | ||
|---|---|---|---|---|
 |
 |
 |
프론트엔드 프로젝트를 실행하기 전 아래 항목들을 실행해주세요.
- KAKAO-MESSAGE API를 이용하기 위해 카카오 개발자문서를 참고하여 javaScriptKey를 준비해야합니다.
| environment | description |
| {YOUR_JAVASCRIPT_KEY} | 카카오 개발자 App Javascript key를 입력해주세요 |
- 환경 변수를 바탕으로 .env.dev 파일을 생성합니다.
. . .
NEXT_PUBLIC_RUN_MODE=dev
RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED=false
KAKAO_API_KEY={YOUR_JAVASCRIPT_KEY}
. . .
- 위의 과정을 마치고 프로그램을 실행합니다.
npm install
npm run dev
백엔드 프로젝트를 실행하기 전 아래 항목들을 실행해주세요.
- DataBase(MySQL, Redis)가 실행되고 있어야 합니다.
- MySQL Replication 설정이 되어 있어야 합니다. 여기를 참고
- KAKAO-PAY API를 이용하기 위해 카카오 개발자문서를 참고하여 cid, adminKey를 준비해야합니다.
- SMTP를 이용하기 위해, 구글 계정(이메일 전송자)를 준비해야합니다.
| environment | description |
| {YOUR_DB_SCHEMA} | MY SQL DB Schema 이름을 입력해주세요 |
| {YOUR_MYSQL_USERNAME} | MY SQL 사용자 이름을 입력해주세요 |
| {YOUR_MYSQL_PASSWORD} | MY SQL 사용자의 비밀번호를 입력해주세요 |
| {YOUR_GOOGLE_EMAIL}} | 이메일 전송자로써 사용할 구글 계정을 입력해주세요 |
| {YOUR_GOOGLE_PASSWORD} | Window 앱 비밀번호를 생성하여 입력해주세요 |
| {YOUR_JWT_SECRET_KEY} | JWT SECRET KEY 값을 512Bits 이상 생성해주세요 |
| {YOUR_STORE_CID} | 가맹점 코드, 제휴를 통해 발급, 결제 유형과 단위 정의, 10자리를 입력해주세요 |
| {YOUR_KAKAO_DEV_ADMIN_KEY} | 카카오 개발자 App admin key를 입력해주세요 |
- 환경 변수를 바탕으로 application.yml 파일을 생성합니다.
spring:
main:
allow-bean-definition-overriding: true
datasource:
write:
driver-class-name: com.mysql.cj.jdbc.Driver
jdbc-url: jdbc:mysql://localhost:3306/{YOUR_DB_SCHEMA}?serverTimezone=Asia/Seoul&characterEncoding=UTF-8
username: {YOUR_MYSQL_USERNAME}
password: {YOUR_MYSQL_PASSWORD}
read:
driver-class-name: com.mysql.cj.jdbc.Driver
jdbc-url: jdbc:mysql://localhost:3306/{YOUR_DB_SCHEMA}?serverTimezone=Asia/Seoul&characterEncoding=UTF-8
username: {MYSQL_YOUR_USERNAME}
password: {MYSQL_YOUR_PASSWORD}
redis:
host: localhost
port: 6379
jpa:
database-platform: org.hibernate.dialect.MySQL5InnoDBDialect
properties:
hibernate:
format_sql: true
hibernate:
ddl-auto: update #처음 프로젝트를 실행하실 땐 create를 해주세요.
show-sql: true
mail:
host: smtp.gmail.com
port: 587
username: {YOUR_GOOGLE_EMAIL}
password: {YOUR_GOOGLE_PASSWORD}
properties:
mail:
smtp:
starttls:
enable: true
auth: true
springDoc:
swagger-ui:
path: /swagger-ui.html
groups-order: DESC
operationsSorter: method
disable-swagger-default-url: true
display-request-duration: true
api-docs:
path: /api-docs
jwt:
secret: {YOUR_JWT_SECRET_KEY}
kakaopay:
cid: {YOUR_STORE_CID} # "TC0ONETIME" 개발자 모드 권장
secret: {YOUR_KAKAO_DEV_ADMIN_KEY}
- 위의 과정을 마치고 프로그램을 실행합니다.