광고지구 프로젝트는 소비자와 판매자를 위한 이커머스 환경을 구현하고,
디지털 마케팅 툴을 활용해 효과적인 이커머스 웹 플랫폼을 기획해보자는 의견에서 출발하였습니다.
사이트 보러가기(id: testuser / password: aaa1111!)
현재 해당사이트는 운영중이지 않습니다.
- 다양한 정보부터 매출 전략까지 한눈에 보기 쉽도록 대시보드 기능을 제공해요.
- 상품의 옵션과 상세한 상품 정보를 에디터로 작성해 더욱 간편한 상품 등록이 가능해요.
- 간편하게 상품별 키워드를 등록하고 입찰시스템을 통해 상품의 상위노출이 가능해요.
- 상품별 3개월 매출 성과를 보고서로 간편하게 확인할 수 있어요.
- 에러 및 알림 메시지 toast UI 공통 처리하여 일관성 유지
- 현재 선택된 필터를 UI에 표시하여 유저 편의성 향상
- 테이블 헤더에 info tooltip, 원화 및 숫자 단위 표시를 제공해 사용성 개선
- 클릭 동작이 경고 및 주의가 필요한 액션일 경우 모달을 사용하여 이중 확인
- 동일한 QueryKey로 받아오는 데이터를 custom hook으로 모아 이전보다 쉽게 데이터를 관리하고, 변경사항이 발생했을 때 쉽게 유지보수할 수 있도록 개선
- 폴더 구조를 개선해 공통 컴포넌트를 모듈화하여 컴포넌트 재사용성을 높임
- Axios Response Type을 지정해 서버로부터 fetching 해온 데이터의 타입을 사전에 체크
- protectedRoute를 통해 대시보드 페이지 진입시 페이지 보안 강화 및 공통 리다이렉트 처리
- 단일 페이지에서 여러 쿼리를 사용할 때, useQueries를 사용하여 쿼리 처리의 동시성을 극대화
- queryString을 사용하여 동적인 필터링 데이터의 상태 관리 유지
- 좌측 슬라이드에 광고배너를 확인할 수 있어요.
[회원가입]
- 가입할 때는 필수 정보를 모두 기입하고 검증을 거쳐야 가입할 수 있어요.
- 아이디,비밀번호는 실시간으로 유효성 검사를 진행해요.
- 가입에 성공하면 로그인 페이지로 이동하며 상단의 토스트 메세지로 회원가입을 확인할 수 있어요.
[로그인& 아이디/비밀번호 찾기]
- 로그인에 성공하면 메인페이지로 넘어가요.
- 로그인에 실패하면 상단의 토스트 메세지로 로그인 실패의 이유를 확인할 수 있어요.
- 지구샵 바로가기를 선택하면 구매자 사이트로 이동할 수 있어요.
- 아이디가 기억나지 않을 때는 상호명과 사업자 아이디를 통해 간편하게 아이디를 찾을 수 있어요.
- 비밀번호가 기억나지 않을 때는 가입할 때 입력한 아이디와 사업자번호를 인증한 후 새로운 비밀번호로 변경할 수 있어요.
- 좌측 아코디언 광고배너를 통해 광고지구에 대해 알아볼 수 있어요.
- 배송 신규주문과 전월 판매한 매출액 , 현재 노출중인 상품의 전체 수를 간편하게 확인할 수 있어요.
- 현재 구매자 페이지에서 가장 검색량이 많은 키워드 순위를 실시간으로 확인 가능해요.
- 키워드 광고로 등록된 상품의 3개월 광고 요약 보고서 차트데이터로 유입패턴을 확인할 수 있어요.
- 비즈머니를 버튼하나로 간편하게 금액충전 할 수 있어요.
- 한 페이지당 최대 10개의 배송상품 데이터를 확인할 수 있어요.
- 주문 접수 기간 & 상품 & 배송상태 를 다중필터링을 통해 배송관련 상품을 나눠서 확인할 수 있어요.
- 배송 리스트 현황들을 csv 파일로 다운로드하여 엑셀로도 배송상태 관리가 가능해요.
- 테이블에 전체 선택 버튼을 추가하여, 단일 및 전체 배송 상품의 주문 확정을 간편하게 설정할 수 있어요.
- 상품에 대한 기본 정보, 옵션 정보 등을 간편하게 입력할 수 있어요.
- 상품을 상세히 설명할 수 있는 이미지나 텍스트 정보를 에디터로 쉽게 편집할 수 있어요.
- 상품에 대한 필수 정보를 모두 입력했을 때만 상품을 등록하거나 수정할 수 있어요.
- 상품을 삭제할 때는 확인 모달로 한번 더 확인 후 삭제할 수 있어요.
- 한 페이지당 최대 10개의 배송상품 데이터를 확인할 수 있어요.
- 각 상품의 노출 여부를 선택하여 구매자(지구샵) 사이트에서 노출을 조절할 수 있어요.
- 개별 상품 및 모든 상품을 한꺼번에 삭제할 수 있어요.
- 한 페이지당 최대 10개의 키워드 데이터를 확인할 수 있어요.
- 상품별 최대 20개 키워드 데이터 제공해요.
- 개별 키워드 및 모든 키워드를 한꺼번에 삭제할 수 있어요.
- 툴팁을 통해 해당 목록의 설명을 간편하게 확인할 수 있어요.
- 수정버튼을 통해 키워드 상품 노출과 광고 수정이 가능해요.
[키워드 등록 및 광고설정]
- 노출 없이 키워드만 등록 시 상품이 구매자(지구샵)에 노출되지 않아요.
- 노출 설정 후 키워드만 등록 시 상품이 구매자(지구샵)에 노출돼요.
- 노출 설정 후 예상 순위 선택 시 순위별 입찰 예상 최소 금액을 바로 확인할 수 있어요.
- 입찰 예상 최소 금액 이상 입력 시 해당 등수로 광고가 진행돼요.
- 개월 수 & 상품별 다중필터링을 통해 광고 보고서를 확인할 수 있어요.
- 단일 상품에 대한 키워드별 매출 데이터 테이블을 제공해요.
- 최대 3개월의동안 유저가 구매자(지구샵)에서 검색한 상품의 키워드별 상품 클릭 횟수를 차트를 통해 한번에 확인할 수 있어요.
- 툴팁을 통해 해당 목록의 설명을 간편하게 확인할 수 있어요.
| 분류 | 스택 |
| 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/whl5105/Team-adEarth-admin-v2.0.git
# Enter in directory:
$ cd Team-adEarth-admin-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 |