• 배포 URL : https://ssgssak.shop

• Test ID : test12

• Test PW : test001122

• 백엔드 저장소

1. 프로젝트 개요
2. 팀원 구성
3. 시스템 아키텍처
4. 기술 스택
5. 협업
6. ERD
7. 역할 분담
8. 구현 기능
9. 트러블 슈팅
10. 개선 목표
11. 프로젝트 후기

• 전체 기간 : 2024.02.21 ~ 2024.04.16
• 서비스 분석 및 설계 : 2024.02.21 ~ 2024.03.12
• UI 및 기능 개발 : 2024.03.13 ~ 2024.04.16

• 단순히 코드를 따라치는 클론코딩이 아닌 쓱닷컴 서비스 분석 및 DB 설계 과정을 거쳐 문서 작성 및 개발 프로세스를 익힘
• 프로젝트에 다양한 기술을 적용하여 새로운 기술들을 학습
• 팀 프로젝트를 통해 협업 툴 사용 및 협업 방식을 습득

Name	박태훈	박진영	박찬웅	김예진	서여진
Profile
Position	Backend (팀장)	Backend	Backend	Frontend	Frontend
Git	@hoontaepark	@icarus012832	@chanchanwoong	@venderjin	@Yeojinny

• Git Issue 및 Template 활용
  • 매번 PR 메시지 또는 컨벤션을 찾아보는 것이 비효율적으로 느껴져 템플릿 생성 후 일관성있는 이슈 생성 및 PR을 진행하였습니다.
  • 팀원들의 코드 변경사항을 쉽고 빠르게 이해하는데 도움이 되었습니다.
  

• Notion을 통한 문서관리 및 소통
  • 전반적인 프로젝트 관리(회고, 환경설정, 일정 등)
  • API 명세서 관리
  • 초반 API 문서관리에 소홀과 소통의 오류로 일관성없는 개발이 이루어졌습니다.(데이터 불일치로 인한 오류 등)
  • 해당 문제를 개선하기 위해 노션에서의 API 명세서 관리 방식을 도입하였습니다.
  • 백엔드 개발 진행 상황을 업데이트하고, 데이터를 명확하게 정의하였고, 👉배포완료 상태 확인 후 프론트 적용 및 테스트를 진행하였습니다.
  • 소통이 더욱 활발하고 편리해졌고, 잘못된 데이터로 개발하여 수정하는 비효율성을 줄일 수 있었습니다.

• 김예진

  • 홈, 공통컴포넌트(헤더, 푸터, 네비게이션 등), 검색 모달
  • 상품 리스트, 이벤트 및 베스트 상품 페이지 및 기능
  • 상품 키워드 검색, 카테고리 별 조회 페이지 및 기능
  • 회원 상품 좋아요 페이지 및 기능
  • 회원/비회원 상품 주문 페이지 및 기능

• 서여진

  • 로그인, 회원가입, 마이페이지
  • 배송지 관리 페이지 및 기능
  • 상품 상세 페이지 및 기능
  • 회원 장바구니 페이지 및 기능
  • 상품 리뷰 조회 및 회원 리뷰 기능

• 박태훈

  • 자동 배포 환경 구축
  • 카테고리 도메인
  • 주문 도메인

• 박진영

  • 상품 도메인(검색, 상세조회, 필터링)
  • 리뷰 도메인
  • 회원 장바구니 도메인

• 박찬웅

  • 스프링시큐리티 및 JWT 적용
  • oAuth 및 이메일 인증(Redis 활용)
  • 회원 도메인(로그인, 회원가입 등)
  • 회원 좋아요 도메인

• 스프링 시큐리티, JWT를 적용하여 구현하였습니다.
• 이메일 본인인증 구현(인증코드를 Redis에 저장 후 비교하는 방식)
• 주소검색 API 활용하여 주소를 입력하고, 아이디 중복확인, 아이디, 비밀번호, 이메일 유효성을 검증합니다.
• 통합회원만 존재하는 로직으로 소셜로그인 시 통합회원 가입 이력이 없는 경우 소셜 메일 계정으로 통합회원가입을 진행합니다.

회원가입

• 통합회원 및 소셜로그인(google)
• 로그인 검증 성공 시 백엔드에서 토큰을 발행합니다.
• 프론트에서 next-auth를 적용하여 세션에 토큰을 저장합니다.
• 아이디 저장 기능: 쿠키를 사용하여 로그인 버튼 클릭 시 아이디를 저장합니다.

로그인

• 스크롤에 따라 상단 헤더가 변경됩니다.
• 네비게이션, 슬라이드 배너를 구현하였습니다.
• 홈 화면에서 특가 및 베스트 상품 조회가 가능하며 해당 페이지로 이동할 수 있습니다.

• 키워드를 통한 상품 검색이 가능합니다.

상품 검색

• 대, 중, 소로 구분된 카테고리별 상품 목록 조회가 가능합니다.
• 소소분류 등 카테고리 구분이 추가되더라도 적용할 수 있도록 자기 참조를 적용하여 구조를 설계하였습니다.
• 카테고리 테이블과 상품 테이블 사이 중간테이블을 두어 카테고리별 상품을 조회합니다.
• 배송 타입별 필터링이 가능합니다.
• 베스트 상품은 주문 수량을 기준으로 구현하였습니다.

카테고리 조회

• 상품리스트, 상품 상세페이지에서 찜 클릭 시 회원의 좋아요 페이지에서 해당 상품을 조회할 수 있습니다.
• 특정 카테고리 찜 클릭 시 좋아요 페이지에서 해당 카테고리를 조회할 수 있습니다.

상품 찜

• 특정 상품을 장바구니에 추가할 수 있습니다.
• 장바구니 페이지에서 추가한 상품을 조회, 삭제할 수 있습니다.
• 장바구니 내 선택한 상품들의 금액을 계산합니다.
• 회원 기능은 토큰에서 UUID를 추출하여 식별하였습니다.

회원 장바구니

• 특정 상품의 상세 페이지에서 상품 주문할 수 있습니다.
• 배송 메시지 설정 및 수령인 정보를 수정할 수 있습니다.
• 주문 시 주문한 상품 수량에 따라 재고 수량을 반영시킵니다.

회원 주문

• 상품의 이미지, 상세 내용을 조회할 수 있습니다.
• 상품의 옵션을 선택할 수 있으며 옵션별 재고 수량 및 품절 여부를 확인할 수 있습니다.

• 상품의 상세 페이지에서 상품의 리뷰를 조회할 수 있습니다.
• 리뷰 전체 조회, 포토 리뷰 목록 조회가 가능합니다.
• 회원의 경우 주문 상품 구매확정 후 60일 이내의 상품에 대하여 리뷰 작성이 가능합니다.
• 리뷰 작성만 가능한 상태이며, 작성 가능한 리뷰조회/작성한 리뷰 조회/수정/삭제 기능은 추후 추가 예정입니다.
• s3를 적용하여 리뷰 이미지를 업로드합니다.

상품 리뷰 조회

• 회원의 배송지를 관리할 수 있습니다.(배송지 조회/추가/수정/삭제)
• 회원의 비밀번호를 변경할 수 있습니다.

• 리다이렉트 문제
  : 비회원 장바구니 페이지에서 로그인을 하면 로그인 후 장바구니 화면으로 이동 / 배송지 관리 페이지에서 배송지 추가 후 배송지 관리 페이지로 이동해야하지만, 장바구니 배송지 변경 페이지에서 배송지 추가를 한 후에는 장바구니 페이지로 돌아와야함.
  👉 처음에는 이부분을 고려하지 못했는데 특정 페이지로 돌아가야하는 경우 페이지 이동 시 callbackUrl을 함께 전달하고, callbackUrl이 있는 경우와 없는 경우로 구분하여 라우팅을 진행하여 해결

• 전역 모달 생성
  : 상품 리뷰 페이지 구현 시 하위 컴포넌트마다 다양한 형태의 모달이 필요해지면서 각 하위 컴포넌트마다 모달을 조건부로 관리해야했고, 하나의 컴포넌트에 모달이 여러개인 경우 관리해야하는 state가 늘어남.
  👉 전역 모달 컴포넌트를 생성 후 리코일을 통해 모달 상태 관리를 하고 모달 관련 hook을 생성하여 각 컴포넌트에서 편리하게 사용.
  👉 그때그때 모달의 title, content를 설정

• 간편 로그인 시, 기존 회원인 경우 매칭 문제
  : 일반 회원가입을 한 사람이 간편 로그인을 진행했을 때, 기존 회원 정보와 매칭 필요성을 발견(기존 회원의 정보 유실 및 DB 자원 낭비 방지) 간편 로그인 진행 시, 반환되는 SNS 아이디를 1차적으로 확인
  👉 없으면 간편 로그인에 사용한 이메일이 일치하는 회원이 있는 지 2차 확인을 진행
  👉 이메일의 경우 고유함으로 기존 회원으로 매칭이 가능
  👉 위 방식으로 기존 일반 계정의 회원이 간편 로그인을 하더라도 매칭되어 정보 유실을 방지

• Recoil을 통한 상태관리 및 성능 개선

  • Recoil을 도입하기 전 props depth가 깊어지면서 상태관리의 어려움이 있었고, 전달받은 상위 컴포넌트의 state 변경 시 하위 모든 컴포넌트의 리렌더링을 유발하는 문제가 있음.
  • 장바구니 기능 구현 중 전역 상태관리를 위해 뒤늦게 Recoil을 도입하면서 상태관리의 중요성을 느꼈음.
  • 추후 지나친 Prop Drilling이 있는 컴포넌트에 Recoil을 적용하여 상태(atom)를 구독하는 컴포넌트만 업데이트함으로써 불필요한 렌더링을 방지하여 성능을 개선할 예정.

• 베스트 상품 조회 기능 개선

  • 현재 상품 테이블에 주문 수량을 카운트하는 방식은 상품 테이블을 매번 업데이트해야하고, 주문이 동시에 몰리는 경우 DB와 서버에 부하가 발생할 수 있는 구조임.
  • 추후 집계서버를 따로 구성하고 일괄처리, EDA 방식으로 이벤트가 발생하면 자동으로 베스트 상품을 갱신하는 구조로 개선할 예정.

• 비회원 기능, 상품 필터링 기능 확대 등 전반적인 미구현 기능 구현 검토

클론코딩이라고 해서 단순히 따라치기만 하면 된다고 생각했지만 전혀 아니였습니다. 어느 한 서비스의 비즈니스로직, 요구사항, ERD, 화면구성 등 모든 요소들을 하나씩 똑같이 해야했기때문에 굉장히 어려웠습니다. 아키텍처의 중요성, 쿼리DSL을 쓰는이유, JPA, Ec2, CICD를 사용하는 이유등 개발에 관한 지식들을 한달동안 많이 배울수 있어서 굉장히 도움이 많이되었습니다. 소통부재로 인해 API 주소를 잘못적거나 Request Body에 넣는 값들을 오해해서 잘못 코딩을 하는등 소통의 중요성도 배울수 있는 기회였습니다. 이번프로젝트를 통해 전보다 더 많은 기술적 지식을 얻게 되는 중요한 시간이였습니다. 마지막으로 프로젝트를 성공적으로 마무리 짓는 데 기여해주신 팀원분들에게 감사드립니다.

클론 코딩 프로젝트를 통해 대규모 실제 서비스의 복잡성을 직접 경험할 수 있었습니다. 다양한 기술 스택과 프레임워크, 라이브러리를 활용하며 기술 역량을 넓힐 수 있었고, 협업 도구와 프로세스를 실습해봄으로써 실무 프로젝트 협업 능력을 기를 수 있었습니다. 무엇보다 사용자 요구사항 반영, 보안, 성능, 유지보수 등 실제 서비스 운영에 필요한 고려사항을 배울 수 있었던 점이 큰 배움이었습니다. 단순 CRUD 기능 구현을 넘어 실무에서 마주할 수 있는 다양한 이슈와 복잡성을 경험할 수 있었던 소중한 경험이었습니다.

기존 미용실 예약 서비스를 구현한 경험이 있습니다. 그러나 이전과는 다른 기술과 아키텍처를 적용하면서 고민도 많이 하고 그 과정에서 배우는 것이 굉장히 많았습니다. Jmeter로 개발한 서버를 테스트해보고 어떤 점이 부족한지 직접 확인하고 개선해보는 경험은 든든히 받혀주는 팀원들이 없었다면 못 해볼 귀한 경험 이었습니다. 또한, 깃 플로우와 Organization으로 프로젝트 관리하여 협업 방식을 경험 및 발전할 수 있었습니다. 저에게 SSG.com 클론코딩은 버릴 것이 없는 충만한 시간이었습니다. 감사합니다.

지금까지 진행했던 프로젝트 중 가장 다양한 페이지와 기능구현을 경험한 프로젝트였습니다. 때문에 개발 진행 과정에서 상태관리와 재사용 컴포넌트의 중요성을 크게 느낄 수 있었습니다. 그리고 프로젝트 결과물 완성에 초점을 두기보다는 Next.js, Recoil, TailwindCSS등 처음 도입해 보는 기술을 온전하게 배우며 성장하는 것에 집중할 수 있었던 기간이었습니다.

클론 코딩 개발에 앞서 약 2주가 넘는 기간 동안 쓱닷컴 서비스를 분석하고 이벤트 스토밍, DB 설계 과정 등을 거치면서 개발자라면 단순히 개발만 하는 것이 아니라 기능 구현에 앞서 체계적인 설계가 중요하고, 서비스 관련 이해도, 문서 작성 능력 또한 중요하다는 것을 알게 되었습니다. 실제 개발 기간은 약 한 달 정도로 혼자라면 이렇게 다양한 기능들을 구현하지 못했을 텐데, 협업을 통해 다양한 기능 구현을 경험할 수 있었고, 백엔드와 소통의 중요성도 많이 느꼈습니다. Next.js, Tailwind 모두 처음 접해보는 기술이었는데 바로 프로젝트에 적용해보면서 빠르게 기술을 학습할 수 있었습니다. 이번 프로젝트를 통해 배운 내용을 바탕으로 2차 프로젝트에서는 상태관리, 컴포넌트화에 더욱 신경써서 개발하고자 합니다. 쓱싹팀 고생 많으셨습니다🤍 2차 프로젝트도 화이팅!!