삼삼오오 🥇

🛒 프로젝트 개요

프로젝트 팀명 : 스파로스 5기 삼삼오오 프로젝트 기간 : 2024.08.06 ~ 2024.10.01

프로젝트 소개 : 스타벅스 온라인 스토어에 대하여 기획, 설계, 개발, 배포 전 과정에 직접 하나하나 구현하는 것

💻 기획 배경

스타벅스 클론코딩 프로젝트는 현대적인 온라인 쇼핑 경험을 재현하고자 시작되었습니다. 실제 시장에서의 요구사항을 분석하여 사용자 중심의 플랫폼 구축을 목표로 하였습니다. 이 과정에서 스타벅스의 운영 방식과 고객 경험을 깊이 이해하고, 최신 기술을 적용해 보는 것이 주요 동기였습니다. 사용자 친화적인 인터페이스와 효율적인 시스템을 통해 소비자들이 더욱 쉽게 원하는 제품을 접할 수 있도록 하는 것이 이 프로젝트의 핵심입니다.

🥅 프로젝트 목표

본 프로젝트의 목표는 사용자에게 최적화된 쇼핑 경험을 제공하며, 효율적인 데이터 관리를 통해 상품 정보의 정확성과 신뢰성을 보장하는 것입니다. 또한, 직관적인 UI/UX 디자인을 통해 사용자 편의성을 극대화하고, 모든 개발 과정에서의 협업과 최신 기술 스택을 유지하여 실제 업계 표준에 부합하는 프로젝트 구현을 목표로 합니다.

2. 프로젝트 멤버

Name	김현진	오대관	서정원	권성현	정훈석
Position	팀장  백엔드	백엔드	백엔드	프론트엔드	프론트엔드
Git	Kimhyunjin4455	daegwan00	joungoni		AndreaStudy

3. 개발 환경 및 사용 기술

🔨 개발 언어 및 도구

• BE Spring boot(3.2.9) , IntelliJ(제일 최신 버전 작성)

• FE TypeScript(^5), Visual Studio Code(1.93.1)

  

• 공통

🛠 사용한 라이브러리 및 프레임워크

분류	기술 스택
Common	GitHub, Notion, Figma, Git-Flow
Back-end	JDK(17), gradle(버전 추가), ORM (JPA), Spring Security, swagger(3)
Front-end	Next.js(v14.2.6), TypeScript(^5), Node.js(22.6.0), npm(10.8.3)
CI/CD	AWS EC2, Nginx, Ubuntu(Ubuntu 20.04 LTS), Docker(27.2.0), Docker-compose(v2.5.0)
Database	MySQL(24.04.2), Redis(7.2.5)

🔧 서버 구성 및 데이터베이스

• 아키텍처 구조도

• erd

📋 Directory 구조도

• BE

📔src
    ├──📔main
    │   │               
    │   ├──📔java
    │   │   └──📔com
    │   │       └──📔starbucks3355
    │   │           └──📔starbucksServer
    │   │               ├──📔auth
    │   │               │   ├──📔controller
    │   │               │   ├──📔dto
    │   │               │   ├──📔entity
    │   │               │   ├──📔repository
    │   │               │   ├──📔service
    │   │               │   └──📔vo
    │   │               |
    │   │               ├──📔category
    │   │               │   ├──📔controller
    │   │               │   ├──📔dto
    │   │               │   ├──📔entity
    │   │               │   ├──📔repository
    │   │               │   ├──📔service
    │   │               │   └──📔vo
    │   │               │
    │   │               ├──📔common
    │   │               │   ├──📔config
    │   │               │   ├──📔entity
    │   │               │   ├──📔exception
    │   │               │   ├──📔jwt
    │   │               │   ├──📔provider
    │   │               │   ├──📔s3
    │   │               │   └──📔utils
    │   │               │
    │   │               ├──📔domainCart
    │   │               │   ├──📔controller
    │   │               │   ├──📔dto
    │   │               │   ├──📔entity
    │   │               │   ├──📔repository
    │   │               │   ├──📔service
    │   │               │   └──📔vo
    │   │               │
    │   │               ├──📔domainCoupon
    │   │               │   ├──📔controller
    │   │               │   ├──📔dto
    │   │               │   ├──📔entity
    │   │               │   ├──📔repository
    │   │               │   ├──📔service
    │   │               │   └──📔vo
    │   │               │
    │   │               ├──📔domainImage
    │   │               │   ├──📔controller
    │   │               │   ├──📔dto
    │   │               │   ├──📔entity
    │   │               │   ├──📔repository
    │   │               │   ├──📔service
    │   │               │   └──📔vo
    │   │               │
    │   │               ├──📔domainMember
    │   │               │   ├──📔controller
    │   │               │   ├──📔dto
    │   │               │   ├──📔entity
    │   │               │   ├──📔repository
    │   │               │   ├──📔service
    │   │               │   └──📔vo
    │   │               │
    │   │               ├──📔domainOrder
    │   │               │   ├──📔controller
    │   │               │   ├──📔dto
    │   │               │   ├──📔entity
    │   │               │   ├──📔repository
    │   │               │   ├──📔service
    │   │               │   └──📔vo
    │   │               │
    │   │               ├──📔domainProduct
    │   │               │   ├──📔controller
    │   │               │   ├──📔dto
    │   │               │   ├──📔entity
    │   │               │   ├──📔repository
    │   │               │   ├──📔service
    │   │               │   └──📔vo
    │   │               │
    │   │               ├──📔domainPromotion
    │   │               │   ├──📔controller
    │   │               │   ├──📔dto
    │   │               │   ├──📔entity
    │   │               │   ├──📔repository
    │   │               │   ├──📔service
    │   │               │   └──📔vo
    │   │               │
    │   │               ├──📔domainReview
    │   │               │   ├──📔controller
    │   │               │   ├──📔dto
    │   │               │   ├──📔entity
    │   │               │   ├──📔repository
    │   │               │   ├──📔service
    │   │               │   └──📔vo
    │   │               │
    │   │               ├──📔shipping
    │   │               │   ├──📔controller
    │   │               │   ├──📔dto
    │   │               │   ├──📔entity
    │   │               │   ├──📔repository
    │   │               │   ├──📔service
    │   │               │   └──📔vo
    │   │               │
    │   │               ├──📔vendor
    │   │                   ├──📔controller
    │   │                   ├──📔dto
    │   │                   ├──📔entity
    │   │                   ├──📔repository
    │   │                   ├──📔service
    │   │                   └──📔vo
    │   │                   
    │   └──📔resources
    └──📔test

• FE

📂public
|---📂assets      # 정적 이미지 파일
📂src
|---📂actions     # API fetch 함수
|---📂app         # 라우팅 관련 파일
|---📂components  # 공통 컴포넌트
|---📂config      # 라우터
|---📂context     # Session Context
|---📂datas       # 정적인 데이터
|---📂lib         # shadcn 관련 util 파일
|---📂providers   # Session, Scroll 주입하는 파일
\---📂types       # typeSciprt 관련 파일

4. 기능 소개

⚙️ 기능 소개

1. 회원가입/로그인 : next-auth를 이용한 로그인·로그아웃, 회원가입, 아이디 찾기, 비밀번호 재설정 기능
2. 마이페이지 : 나의 주문내역, 받은 선물, 쿠폰, 배송지, 리뷰 관리 기능
3. 배송지 관리 페이지: 배송관련 생성, 수정, 삭제, 기존 배송지 변경, 배송지 정보 수집 동의 토글 기능
4. 장바구니 : 회원/비회원 장바구니 기능. 비회원의 경우 쿠키를 발급하여 쿠키 value로 장바구니 관리. 비회원으로 장바구니 추가후 로그인시 담아뒀던 상품 회원 장바구니로 옮겨짐
5. 찜하기 : 단일상품, 특가, 브랜드, 카테고리 중, 소 찜하기 기능
6. 카테고리 : 카테고리별로 상품이 보여지고, 정렬기능과 필터링 기능 사용 가능
7. 검색 : 키워드 위주의 검색 기능
8. 구매 : 바로구매 및 장바구니 구매를 통해 상품 구매
9. 배송 : 배송 상태 확인
10. 리뷰 : 구매한 상품 리뷰 기능

개발 후기

💻 김현진 저에게는 첫 팀프로젝트였습니다. 팀장을 맡으며 협업 과정에서 가장 중요한 것이 소통이라는것을 깨닫고 협업에 대한 많은 것을 배워나갈 수 있었습니다. 그간 공부하고 토이프로젝트로 진행했었던 백엔드 관련 지식을 이번 프로젝트에 쏟아낼 수 있었고 매일 과정에 몰입하는 이 경험이 저에게는 너무나도 만족스러웠습니다. QueryDsl을 학습하고 적용하였으며 조금 더 가독성이 좋은 코드를 만들기 위해 고민하였으며, api 처리 기술, 리팩토링의 중요성과 개발 과정에 못지 않게 기획 과정 또한 중요하다는 것을 이번 과정을 통해 깨달을 수 있었습니다. 이번 프로젝트는 앞으로의 좋은 발판이 될 것이라고 자신합니다.

🍀 오대관  스타벅스 프로젝트 리빌딩을 통해 많은 경험을 하였습니다. 특히 제가 부족하다고 느꼈던 API 설계, 데이터베이스 구조화 등 관련된 기술을 경험 할 수 있는 좋은 기회였습니다. 처음 경험해본 인프라, ci/cd 전반적인 인프라의 흐름을 알 수 있었습니다. 또한 협업과 관련해서 처음이였는데 깃 허브 사용과 코드 리뷰등 팀원들과 소통하는 방법을 배웠습니다. 처음으로 하는 대규모 프로젝트 였어서 개인적인 시간까지 포기하면서 공부를 하고 개발을 하였는데 다시 돌이켜보면 너무 부담감을 가지고 했던 것 같습니다. 다음 프로젝트를 할때는 부담감을 좀 내려놓고 임해야겠습니다.

🎸 서정원 본 프로젝트를 통해 IT 기획 능력과 백엔드 개발 능력을 기를 수 있어 유익했습니다. 또한, 막연히 가지고 있던 개발에 대한 두려움을 극복할 수 있었던 시간이었습니다. auth 도메인을 맡아 구현하며 시큐리티 흐름을 파악할 수 있었고, 웹에서 필수적인 인증 절차를 개발할 수 있어 뿌듯했습니다. 개발이 진행될수록 효율적인 코드를 위해 고민하는 과정 역시 성장에 밑거름이 되었습니다. 이 경험을 발전시켜 이후 참여하게 될 프로젝트에서는 전체적인 흐름을 총괄하는 PM이자 개발자로 기여하고 싶습니다.

🐬 권성현  이때까지 팀 프로젝트를 진행하며 웹 프론트엔드로서 참여해왔지만, React.js가 아닌 Next를 사용하는 것은 처음이었습니다. 개발 초반에는 Client Side Rendering이 아닌 Server Side Rendering에 대해 잘 이해하지 못했었는데, 개발이 어느정도 진행되고 난 후에는 server component와 client component를 적절하게 사용할 수 있게 되었습니다. 스타벅스를 확장 가능한 이커머스 형태로 구현하게 되면서, 기존 스타벅스 온라인스토어보다 규모가 커지게 되어 제한된 기간 내에 많은 기능을 구현하진 못한 것 같아 아쉬움이 남습니다.

✨ 정훈석   처음에는 클론 코딩이라 생각하며 쉽게 생각했지만, 기획단계부터 확장성을 고려하며 기획하고 설계를 하다보니 많은 것을 배울 수 있었던 프로젝트 였습니다. 특히 사용하는 기술에 대해 왜 사용하는 것인지에 대한 고민을 하고 그것을 이해하려고 하였습니다. 이러한 과정을 통해서 한 단계 더 개발자로서 나아갈 수 있었던 경험을 얻게 되었습니다. 하지만 Next를 제대로 처음 사용하는 과정에서 React에서 Client Component를 쓰는 습관들이 남아 있어 구현하는 과정에 많은 시간을 쏟게 되어 처음 기획했던 모든 것들에 대해 완성하지 못해 아쉽지만, 프로젝트를 하며 많은 것을 배운 것 같아 생각에 많이 남는 프로젝트였습니다.

앞으로

• Back

• Front

  • 메인페이지: Swiper를 통한 기획전 이미지 캐러셀 기능
  • 상품상세페이지: 상세 페이지 내 탭(정보, 리뷰, 추천상품)을 통한 섹션 이동 기능
  • 무한스크롤: 상품 목록 조회, 리뷰 목록 조회 시 무한스크롤 기능