AWS S3, CloudFront, Route53 배포 / Github Actions CICD 구축
git clone https://github.com/ad-earth/admin-v2.0.git
npm install
npm start
2023/02/28 ~ v2.0 리팩토링 시작
- 키워드 클릭 광고를 적용한 이커머스 플랫폼
- 기존 키워드 클릭 광고주 페이지의 문제점들을 개선해 광고 입찰에 꼭 필요한 기능들만 선별하여 제공함으로써 사용자의 경험을 개선
- 편리하고 간편한 서비스를 광고주들에게 제공함으로써 신규 광고주 유입 효과 기대
- 에러 및 알림 메시지 toast UI 공통 처리하여 일관성 유지
- 현재 선택된 필터를 UI에 표시하여 유저 편의성 향상
- 테이블 헤더에 info tooltip, 원화 및 숫자 단위 표시를 제공해 사용성 개선
- 클릭 동작이 경고 및 주의가 필요한 액션일 경우 모달을 사용하여 이중 확인
- 동일한 QueryKey로 받아오는 데이터를 custom hook으로 모아 이전보다 쉽게 데이터를 관리하고, 변경사항이 발생했을 때 쉽게 유지보수할 수 있도록 개선
- 폴더 구조를 개선해 공통 컴포넌트를 모듈화하여 컴포넌트 재사용성을 높임
- Axios Response Type을 지정해 서버로부터 fetching 해온 데이터의 타입을 사전에 체크
- protectedRoute를 통해 대시보드 페이지 진입시 페이지 보안 강화 및 공통 리다이렉트 처리
- 단일 페이지에서 여러 쿼리를 사용할 때, useQueries를 사용하여 쿼리 처리의 동시성을 극대화
- queryString을 사용하여 동적인 필터링 데이터의 상태 관리 유지
| 회원가입 및 로그인 페이지 | 계정 찾기 페이지 |
|---|---|
 |
 |
| ▪︎ 슬라이드 광고배너 제공 ▪︎ 회원가입 시, 아이디 & 사업자번호 & 연락처 중복검사 ▪︎ 회원가입과 로그인 시, 실시간 유효성 검사 |
▪︎ 상호명과 사업자번호 입력 시, 기존 아이디 확인 ▪︎ 아이디와 사업자번호 입력 시, 새로운 비밀번호로 재설정 |
| 메인 페이지 | 배송 관리 페이지 |
|---|---|
 |
 |
| ▪︎ 아코디언 광고배너 제공 ▪︎ 신규주문 & 전원매출액 & 노출상품 수 & 광고 키워드 순위 실시간 확인 ▪︎ 3개월 광고 요약 보고서 차트데이터 제공 ▪︎ 비즈머니 금액 확인 및 충전 |
▪︎ 페이지당 최대 10개의 배송상품 데이터 제공 ▪︎ 기간 & 상품 & 배송상태 다중 필터링 ▪︎ 단일 & 전체 배송상품 주문확정 ▪︎ 배송 리스트 현황 csv 파일 다운로드 |
| 상품 등록 & 수정 페이지 | 상품 관리 페이지 |
|---|---|
 |
 |
| ▪︎ 상품 등록 & 수정 & 삭제 기능 제공 ▪︎ 상품 등록 & 수정 시 필수 입력사항에 대한 유효성 검사 |
▪︎ 페이지당 최대 10개의 카테고리 별 상품 데이터 제공 ▪︎ 상품 노출 여부 선택 수정 ▪︎ 상품 단일 & 전체 삭제 |
| 광고 관리 페이지 | 광고 보고서 페이지 |
|---|---|
 |
 |
| ▪︎ 상품별 최대 20개 키워드 데이터 제공 ▪︎ 키워드 단일 & 전체 삭제 ▪︎ 키워드 광고등록, 키워드 광고수정 |
▪︎ 기간, 상품 다중 필터링 ▪︎ 최대 3개월의 키워드별 클릭 수 & 매출 전환 수 area chart 제공 ▪︎ 단일 상품에 대한 키워드별 매출 데이터 테이블 제공 |
- React, TypeScript
- React-Query, Recoil, Axios
- Sass