광고지구 프로젝트는 소비자와 판매자를 위한 이커머스 환경을 구현하고,
디지털 마케팅 툴을 활용해 효과적인 이커머스 웹 플랫폼을 기획해보자는 의견에서 출발하였습니다.
사이트 보러가기(id: testuser / password: aaa1111!)
현재 해당사이트는 운영중이지 않습니다.
🔗 판매자 gitHub 보러가기 | 📒 팀 노션 | 📚 개발일지 | 🎨 UI | 🤝 Convention
- 실제 이커머스와 동일한 쇼핑 경험을 할 수 있어요.
- 검색 창에 원하는 상품이나 키워드를 입력하면 키워드 광고가 등록된 상품을 순위별로 확인할 수 있어요.
- 마이페이지에서 주문 상품에 대한 정보를 상세하게 확인하고 관리할 수 있어요.
[회원가입]
- 가입할 때는 필수 정보를 모두 기입하고 검증을 거쳐야 가입할 수 있어요.
- 기본 프로필 이미지를 제공하며, 원하는 이미지로도 등록할 수 있어요.
- 아이디, 비밀번호는 실시간으로 유효성 검사를 하며, 주소는 다음 API를 이용해 간편히 검색할 수 있어요.
- 가입에 성공하면 상단의 토스트 메세지로 확인할 수 있어요.
[로그인& 아이디/비밀번호 찾기]
- 로그인에 성공하면 메인페이지로 넘어가요.
- 로그인에 실패하면 상단의 토스트 메세지로 로그인 실패의 이유를 확인할 수 있어요.
- 아이디가 기억나지 않을 때는 가입할 때 입력한 개인정보를 통해 간편하게 아이디를 찾을 수 있어요.
- 비밀번호가 기억나지 않을 때는 가입할 때 입력한 개인정보로 인증한 후 새로운 비밀번호로 변경할 수 있어요.
- 메인 홈 상단에는 상품의 홍보 배너를 슬라이드 형태로 제공해요.
- 누적 판매량이 6순위에 드는 베스트 상품을 구경할 수 있어요.
- 새롭게 등록된 상품 9개의 신 상품을 구경할 수 있어요.
- 상단의 네비게이션 바의 장보기 버튼으로 커서를 옮기면 상품 카테고리를 드롭다운 메뉴로 확인할 수 있고, 클릭하면 상품 카테고리별로 상품 목록을 구경할 수 있어요.
- 상품 목록은 인기순, 등록순으로 정렬할 수 있어요.
- 상품마다 리뷰와 좋아요 개수를 확인할 수 있고, 마음에 드는 상품은 ‘좋아요’를 클릭해두고 마이페이지에서 확인도 가능해요.
- 신 상품이나 세일 상품은 상품에 붙은 배지로 확인하기가 쉬워요.
- 상단의 네비게이션 바의 검색 창에 원하는 상품이나 키워드를 입력하면 검색 결과 페이지로 넘어가요.
- 검색 결과 중 광고 키워드가 등록된 상품은 광고 배지가 붙어 있고, 입찰 순위대로 상품 목록을 확인할 수 있어요.
- 상품에 대한 상세 정보와 다른 고객이 등록한 리뷰를 확인할 수 있어요.
- 상품의 옵션이나 수량을 설정한 후 상품을 구매하거나 장바구니에 담아둘 수 있어요.(단, 상품 수량이나 옵션이 선택되지 않은 상태에서는 구매나 장바구니 담아두기가 불가능해요.)
- 상품이 마음에 들면 좋아요를 선택하고 마이페이지에서 확인할 수 있어요
- 장바구니에 담긴 상품의 수량을 변경하거나 옵션을 수정할 수 있어요.
- 원하지 않은 상품은 선택해서 장바구니에서 삭제할 수 있어요.
- 상품 개별 주문을 할 수 있고, 여러 상품을 선택해 총 주문 금액을 바로 확인하고 주문할 수도 있어요.
- 결제할 상품의 정보와 총 주문 금액, 배송지 정보, 결제 수단 등을 확인할 수 있어요.
- 배송정보는 기본 배송지, 이전에 주문했던 배송지, 신규 배송지 중 선택해서 이용할 수 있어요.
- 결제에 필요한 정보를 모두 입력하고, 전체 동의 후 결제하기 버튼을 누르면 상단의 토스트 메세지와 함께 결제 완료 페이지로 넘어가요.
[주문조회]
- 사용자가 주문한 정보를 간편하게 확인할 수 있어요
- 주문한 상품을 클릭하면 배송지 정보와 결제금액이 확인가능해요.
- 주문한 상품의 배송상태를(주문완료, 주문확인,배송중,배송완료) 바로 확인 할 수 있어요.
[주문취소]
- 배송 출발전 제품이라면 주문취소가 가능해요.
- 여러개상품을 주문했다면 개별로 주문삭제가 가능해요.
- 주문취소시 실시간으로 환불금액을 확인할 수 있어요
- 주문취소가 접수되면 토스트 메세지로 알려줘요.
- 상품을 둘러보며 좋아요한 상품을 한눈에 확인할 수 있어요.
- 위시리스트 삭제가 바로 가능해요.
- 상품 선택시 상품 상세페이지를 확인할 수 있어요.
- 상단에 좋아요를 누른 상품의 총 갯수를 바로 확인할 수 있어요.
- 주문취소한 내역을 한번에 확인할수 있어요.
- 취소상품의 상세내역에서 주문했던내역과 취소내역을 함께 확인할 수 있어요.
구매자와 판매자 프로젝트를 진행하면서 경험한 기술적 어려움, 새로운 기술과 개념에 대한 공부 내용을 담고 있습니다.
- 효율적인 페이지 라우팅 구현해보기! with. Outlet
- 이미지 업로드 구현 전략, FE or BE
- Git Action을 사용하여 배포 속도 향상시키기
- Pagination 과 Infinite Scroll은 어떻게 구현할 수 있을까?
- 독립적인 DOM 노드로 렌더링하기. with React Portal
- URL Parameter를 활용한 데이터 필터링 개선
광고지구팀은 기존 버전(v1.0)의 서비스에 대한 문제점을 보완하고 성능을 개선하기 위해 현재 버전(v2.0)으로 리팩토링을 진행하였습니다. 아래 내용은 리팩토링 진행 후 개선된 사항들을 담고 있습니다.
- 에러 및 알림 메시지를 공통 Toast UI로 처리하여 인터페이스의 일관성 유지
- Skeleton UI를 적용해 유저 반응성 향상
- 유저 편의성을 고려해 회원가입 시, 기본 프로필 이미지 제공
- React-router-dom의 ScrollRestoration 컴포넌트를 사용한 scroll top 처리로 사용성 개선
- 정렬과 페이지 처리를 query string으로 변경하여 뒤로 가기 시에도 유저가 선택한 필터가 유지되도록 개선
- 동일한 QueryKey로 받아온 데이터를 custom hook으로 모듈화해 데이터 관리와 유지보수가 용이하도록 개선
- 폴더 구조를 개선하고 컴포넌트를 모듈화하여 재사용성을 높임
- Axios Response Type을 미리 지정해 데이터 타입 사전 체크
- 유저 권한 속성을 추가한 라우터 정보를 목록화하고 선택적 렌더링을 적용해 유저 권한별 접근이 제어되는 웹으로 개선
- 이미지를 lazy loading 하고 압축률이 높은 이미지 형식(WebP)으로 변환하여 웹 성능을 최적화
- 상품 목록 정렬과 pagination의 페이지 처리를 state에서 query string으로 변경
- React Portal을 사용해 독립적인 Modal DOM 선언
| 분류 | 스택 |
| FrontEnd |
|
| BackEnd |
|
| Infra |
|
| Collaboration |
|
- master : 제품으로 출시될 수 있는 브랜치
- hotfix : 출시 버전에서 발생한 버그를 수정 하는 브랜치
- develop : 다음 출시 버전을 개발하는 브랜치
- feature : 기능을 개발하는 브랜치
- refactoring develop : 코드 리팩토링 작업을 수행하는 브랜치
- refactoring feature : 리팩토링 과정에서 해당 기능에 수행하는 브랜치
# Move to your workspace
cd your-workspace
# Clone this repository:
$ git clone https://github.com/ad-earth/client-v2.0.git
# Enter in directory:
$ cd client-v2.0
# Install dependencies:
$ yarn install
# Run the development server:
$ yarn start
# Open the project in your browser
$ http://localhost:3000| FrontEnd | FrontEnd | FrontEnd | BackEnd |
 |
 |
 |
 |
| 최수인 | 이담 | 해솔 | 김다희 |
| @whl5105 | @damiiya | @sol-pine | @huitopia |