Giter VIP home page Giter VIP logo

avocado's Introduction

README

⭐  I. 서비스 소개

📌  1. Overview

저희 서비스는 사람들의 MBTI, 퍼스널 컬러, 나이, 성별 등을 고려하여 개인화된 상품을 추천하는 의류 쇼핑몰입니다.

사용자들은 일반적인 무작위 추천보다 개인화된 추천을 원하는 요구가 많다는 통계를 바탕으로 개발되었습니다.

📌  2. 기획 배경

저희 서비스는 소비자들이 의류를 구매할 때 개인의 취향과 스타일을 반영한 상품을 더욱 쉽게 찾을 수 있도록 돕기 위해 기획되었습니다. 많은 사람들은 유니크한 스타일과 개성을 추구하며, 대중적인 상품보다 자신을 표현할 수 있는 제품을 선호합니다. 또한, 개인화된 추천은 구매 결정을 도와주고, 더 나은 구매 경험을 제공하여 고객 충성도를 높이는 데에도 기여할 수 있습니다.

MBTI, 퍼스널 컬러, 나이, 성별 등의 정보는 개인의 취향과 스타일을 파악하는 데 도움을 주는 요소들입니다. MBTI는 성격 유형을 분석하여 각 유형에 어울리는 스타일과 디자인을 추천하는 데 활용될 수 있습니다. 퍼스널 컬러는 개인의 피부톤, 머리색, 눈색 등을 고려하여 어울리는 색상을 추천하는 데 사용됩니다. 이러한 정보들을 종합하여 개인의 특성에 맞는 상품을 제안하고, 개인화된 추천을 통해 사용자의 만족도를 높이고 더 나은 쇼핑 경험을 제공하는 것이 우리 서비스의 목표입니다.

개인화 추천은 사용자들에게 필요한 정보와 맞춤형 상품을 제공함으로써 구매 결정을 돕고, 쇼핑의 편리성과 만족도를 증진시킵니다. 이를 통해 우리 서비스는 고객들에게 더 나은 쇼핑 경험을 제공하고 의류 쇼핑몰의 경쟁력을 강화하는 것을 목표로 하고 있습니다.

📌  3. 서비스 컨텐츠

메인페이지 (좌: 비회원, 우: 회원)

Main_Guest.gif

Untitled

※ 비회원
개인정보가 없는 비회원 상태에서는 판매량에 따른 상품 추천을 제공받을 수 있습니다.

※ 회원
자신이 설정한 정보에 따라 개인화 추천 상품 및 광고를 제공받을 수 있습니다.

로그인 (좌: 구매자, 우: 판매자)

Login_Kakao.gif

Login_Store.gif

※ 구매자
구매자는 카카오톡을 이용한 간편로그인을 할 수 있습니다.

※ 판매자
판매자는 매장 관리, 광고 등 소비자와 다른 서비스를 제공받기 위해
서비스 자체 로그인을 할 수 있습니다.

상품 검색 (좌: 카테고리 검색, 우: 키워드 검색)

Search_Category.gif

Search_Keyword.gif

※ 카테고리 검색
원하는 품목을 선택하여 해당하는 카테고리의 상품들을 둘러볼 수 있습니다

※ 키워드 검색
키워드를 입력하는 도중 검색어를 추천받고
검색어에 해당하는 물건들을 찾아 볼 수 있습니다.

상품 목록 조회 (좌: 최근 본 상품, 우: 스토어별 상품)

Merchandise_Recent.gif

Merchandise_Store.gif

※ 최근 본 상품
유저가 최근에 어떤 상품들을 살펴보았는지 확인할 수 있습니다.

※ 스토어별 상품
스토어 별로 등록되어있는 상품들을 카테고리를 선택하여 확인할 수 있습니다.

광고 클릭 & 상품 상세정보 조회

Ad_Click.gif

Merchandise_Detail.gif

※ 광고 클릭
광고를 클릭하여 물품의 상세페이지로 이동하여 바로 해당 물품을 살펴볼 수 있습니다.

※ 상품 상세정보 조회
상품의 상세정보에서 어떤 특징을 가진 소비자들이 이 상품을 구매하였는지
또, 관련된 상품의 리스트를 확인할 수 있습니다.

결제 & 구매내역 조회

Payment.gif

History.gif

※ 결제
선택한 상품을 구매합니다.
주소입력창에서 kakaoAPI를 사용하여 자신의 주소지를 검색할 수 있고, 
카카오페이와 연동되어 있어 결제를 편리하게 진행할 수 있습니다.

※ 구매 목록
내가 구매한 상품들을 확인할 수 있습니다.

리뷰 & 장바구니

Review.gif

Cart.gif

※ 리뷰
구매자는 자신이 구매한 상품에 한하여 하나의 리뷰를 남길 수 있습니다.
리뷰는 별점 개수와 댓글 내용으로 구성되어 있습니다.

※ 장바구니
구매자는 상품을 장바구니에 담아두고 한 번에 결제할 수 있습니다.
수량, 사이즈를 선택할 수 있습니다.

상품 찜꽁 (좌: 상품 상세, 우: 상품 리스트)

Wishlist_Detail.gif

Wishlist_Simple.gif

※ 상품 상세정보에서 찜꽁
상품 상세정보를 확인하는 도중에 찜을 할 수 있습니다.

※ 상품 리스트에서 찜꽁
상품 목록을 구경하는 도중에 찜을 할 수 있습니다.

스냅샷 (좌: 스냅샷 목록, 우: 스냅샷 등록)

Snapshot_List.gif

Snapshot_Post.gif

※ 스냅샷 목록
자신 및 다른 사람들이 등록한 코디 스냅샷을 확인할 수 있습니다.
마음에 드는 스냅샷에 좋아요를 표시할 수 있고,
스냅샷 주인이 착용한 옷의 정보를 확인할 수 있습니다.

※ 스냅샷 등록
자신의 코디를 게시할 수 있습니다.
자신이 스냅샷을 찍기 위해 입었던 코디 중 AVOCADO에서 구매한 물품이 있다면
물품 정보를 같이 첨부할 수 있습니다.

(판매자 기능) 판매 통계 & 상품 관리

Statistics.gif

Manage_Merchandise.gif

※ 판매 통계
판매자는 자신이 판매하고 있는 상품들의 통계를 확인할 수 있습니다.
확인 가능한 통계는 다음과 같습니다.
1. 판매하는 상품의 개수, 조회수 및 판매수
2. 스토어의 매출
3. 상품을 구매한 사람들의 퍼스널컬러 분포
4. 상품을 구매한 사람들의 연령대 분포
5. 상품을 구매한 사람들의 MBTI 분포
6. 상품을 구매한 사람들의 성별 분포

※ 상품 관리
자신이 판매하고 있는 상품 목록을 확인할 수 있으며,
각 상품에 대해 하나의 광고를 게시할 수 있습니다.

(판매자 기능) 광고 등록 & 광고 통계

Ad_Post.gif

Ad_Statistics.gif

※ 광고 등록
상품에 맞는 광고 이미지를 등록하고 
타겟으로 하는 소비자의 특징을 선택하여 광고를 등록할 수 있습니다.
광고는 해당 소비자들에게 더 자주 등장하게됩니다.

※ 광고 통계
광고 통계를 확인하여 등록한 광고가 얼마나 효과적이었는 지 확인합니다.
노출, 클릭, 광고로 이어진 판매 량이 어떻게 되는 지 보고 자신만의 광고 전략을 세울 수 있습니다.

에러페이지

Untitled

Untitled

⭐  II. 서비스 아키텍처

📌  서비스 구조

Untitled

Untitled

📌  ERD

Untitled

  • 모든 서버의 테이블을 합한 경우의 ERD
  • MSA 구조로 각 서버마다 필요한 테이블의 컬럼만 갖고 있는 스키마를 따로 바라봤음
  • Kafka를 통해 서버간 통신을 하여 DB 데이터 동기화

📌 기술 스택

※ Frontend

node.js v18.16.0 LTS
npm v9.5.1
Next.js v13.3.1
Redux Toolkit v1.9.5
Next Redux Wrapper v8.1.0
MUI v5.12.2
ESLint v2.4.0
Prettier v9.12.0
React Material UI Carousel
React-chart-2
notistack
react-cookie
josnwebtoken v8.5.1
react-intersection-observer


※ Backend - User server

Java 17
Spring Boot (3.0.6, Kotlin)
Spring Boot Webflux
Kotlin Coroutine
R2dbc MySQL

DB
	- MySQL


※ Backend - Search server

Java 11
Spring Boot (2.7.11, Java)
Spring Data Elasticsearch 8.7.0

DB
	- Elasticsearch 7.17.1

※ Backend - Product server

Java 11
Spring Boot (2.7.9, Java)
JPA
QueryDSL 5.0.0

DB
	- MySQL
	- Redis

※ Backend - Statistics server

Java 11
Spring Boot (2.7.11, Java)
JPA
MyBatis 2.1.3
QueryDSL 5.0.0

DB
	- MySQL
	- Redis

※ Backend - Payment server

Java 11
Spring Boot (2.7.9, Java)
JPA
Redisson 3.17.0

DB
	- MySQL
	- Redis

※ Backend - Community server

Java 11
Spring Boot (2.7.11, Java)
MyBatis 2.1.3

DB
	- MySQL

※ Backend - Streaming server

Java 11
Spring Boot (2.7.11, Java)
Kafka Streams 3.1.2

※ Backend - Commercial server

Java 11
Spring Boot (2.7.11, Java)
JPA

DB
	- MySQL

※ Infra, etc

AWS EKS
Jenkins
Argocd
Helm
Kustomize
Strimzi Kafka Operator

⭐  III. 주요 기술

📌  1. FE 주요 기술

  • Next.js를 이용한 서버사이드 렌더링(SSR)으로 로딩 시간 단축, 검색엔진 최적화(SEO), 웹 성능 최적화(코드 스플리팅, 레이지 로딩)
  • Next-Redux-Wrapper 와 RTK, RTK Query를 이용하여 Next.js에서 서버와 브라우저의 상태를 일치시켜 상태 관리를 용이성 제고
  • TypeScript를 활용하여 타입 안정성을 제고하고, 디버깅 및 팀 작업에서의 편의성을 향상시킴
  • Next.js의 서버와 브라우저의 상태를 고려하여 Access Token 및 Refresh Token을 활용한 로그인 상태 관리 구현
  • 토큰을 쿠키에 보관하고, RTK 쿼리의 fetchBaseQuery를 커스텀하여 브라우저 단에서 토큰 상태 검증 및 최신화를 구현
  • 브라우저에서 api 요청을 보낼 때는 물론 Next.js의 특징인 서버사이드렌더링 과정에서도 페이지 생성 시 토큰의 유효성을 검증하고 최신화할 수 있도록 구현

📌  2. No Offset

  • 일반적으로 페이징 구현 시 사용하는 offset 키워드는 성능적 단점이 존재

    → [offset, offset + limit) 범위의 데이터만 가져오는 것이 아니라 [1, offset + limit)을 모두 가져온 뒤 [1, offset) 만큼 제거하는 것이므로 페이지가 커질수록 비효율적

  • offset 위치의 데이터를 찾은 뒤 해당 데이터부터 limit 개의 데이터를 가져와 성능 개선

📌  3. Redis Cache

  • 판매자 관리 페이지에 진입할 때마다 매번 다음과 같은 데이터를 조회해야 함
    1. 매출액
    2. 판매한 상품의 개수
    3. 판매중인 상품 종류의 개수
    4. 판매중인 상품의 조회수 총합
    5. 구매자 분포 (퍼스널컬러, MBTI, 연령대, 성별)
  • Redis를 캐시로 사용하여 불필요한 계산 최적화

📌  4. 동시성 제어

  • 결제 승인 시 재고에 대한 동시성 문제를 Redisson의 Distributed Lock을 사용해 제어

📌  5. Elastic Search

  • 역색인 개념이 활용된 Elasticsearch를 사용하여 검색 성능 향상

📌  6. Spring Framework Reactive Stack

  • User Server에 적용

  • Reactive Stack은 event loop, non-blocking 모델을 기반으로 하여, 더 적은 하드웨어 리소스로 높은 동시성을 처리할 수 있음

  • 이는 Spring MVC에서는 지원하지 않으므로, Spring Web Flux를 이용해야 함

  • 하지만 Reactive Stream의 경우, 직관에서 많이 벗어나는 코드 구조를 사용해야 함

    → Kotlin Coroutine을 사용해 코드를 작성하면, 직관성 높은 코드를 작성할 수 있음

📌  7. Kafka Streams

  • 광고 노출 스트림(KTable)과 클릭 스트림(KStream)의 조인을 통한 click-through-rate 계산

⭐  IV. 협업 툴

📎 1. Git

📌  브랜치

git checkout -b S08P31A506-92-install-jenkins
  • Jira에서 생성한 에픽이나 작업의 번호를 말머리로 사용하여 브랜치 생성
  • Jira 작업 번호 뒤에 작업 설명을 간결히 기술

📌  커밋 메시지

git commit -m "S08P31A506-92 [feat | fix | docs | refactor | test | chore | style] install jenkins"

📎  2. Jira

  • Jira 컨벤션

    • 기본 단위를 Epic으로 잡고 Task 및 Story로 나누어 작성하였습니다.
    • 경우에 따라 Task를 sub-task로 나누어 작업했습니다.

  • 협업사항 및 결과

    • 월요일 아침마다 회의를 통해 금주에 해야 할 작업을 논의해 분배하였고, 금요일 오후마다 완료된 작업사항을 공유하며 차주의 작업 분배를 개선했습니다.
    • Story Point는 세분화된 관리를 위해 2, 3을 위주로 할당했습니다.
    • 번다운 차트를 통해 개발이 유난히 더뎠던 부분이 있다면 그 이유와 개선사항을 분석하기도 했습니다.

📎  3. Notion

  • 금주 공지사항 또는 이슈 공유

    Untitled

  • 팀원 간 유용한 팁 공유

    Untitled

  • API 명세

📎  4. Scrum Meeting

  • 매일 아침 스크럼 회의 실시
  • 각 팀원 및 팀 전체의 작업 진행 현황 확인
  • 어제 한 일과 오늘 할 일을 서로 이야기하고 노션에 작성
  • 팀원 간 작업 내용 이해 및 프로젝트 진행을 확인함으로써 작업 안정성 향상 및 효율성 제고

⭐  V. 팀원

이름 역할
전인덕 Infra
김범식 Frontend, UX / UI
오현규 Frontend, UX / UI
김도원 Backend
윤재휘 Backend
임혜진 Backend, 캐글 데이터 전처리

avocado's People

Contributors

hwihwi523 avatar hjlim7831 avatar kimbeomsick avatar indeokiya avatar uyk1 avatar hiver93 avatar

Watchers

avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.