- 회원가입 페이지
1-1. 필수 정보(이름, 아이디, 비밀번호) 입력 판단
1-2. 아이디 중복 검사 - 로그인 페이지
2-1. 회원정보 비교 후 로그인 성공/실패 여부 판단 - 리뷰 게시판 페이지
3-1. 내용/제목 기준 검색 기능
3-2. 게시글 추가, 수정, 조회 기능
3-3. 페이지 이동 기능 - 상품 검색 페이지
4-1. 상품 검색 및 찜 목록 추가 기능
4-2. 페이지 이동 기능 - 찜 목록 페이지
5-1. 카테고리 별 검색 기능
5-2. 장바구니 담기 및 찜 목록 삭제 기능
5-3. 수량 선택 기능 - 장바구니 페이지
6-1. 장바구니 목록 조회 및 총 가격 조회
6-2. 결제정보 유효성 검사 및 결제 가능 여부 판단 - 구매 내역 페이지
7-1. 전체 구매 데이터 시각화
7-2. 카테고리별 세부 구매 내역 조회
7-3. 결제 정보 및 상세 정보 조회
7-4. 기간별 결제 정보 검색 기능
- 필수 정보 입력 판단
API 호출시 필수 정보인 이름, 아이디, 비밀번호의 입력 여부 확인
- 아이디 중복 검사
가입된 아이디값을 확인하여 중복된 값이 있는지 확인
선택 요구사항은 없어도 가입 가능
- 로그인 여부에 따른 페이지 접속 차단
로그인을 하지 않은 경우 회원가입 페이지를 제외하고 모두 접속을 차단합니다.
- 로그인 성공/실패 여부 판단
로그인 성공시 상품 검색 페이지로 이동
- 검색 기능
제목, 내용을 기준으로 게시판 글 검색 가능
검색시 페이지 기능 오류 (검색 API 호출시 검색 결과가 하나의 배열 데이터로 들어와 데이터의 양을 조절할 수 없다고 판단하여 해결책이 없다고 생각함)
- 게시글 추가, 수정, 조회 기능
게시글 추가
게시글 수정
게시글 조회
이전엔 바로 조회수가 올라가도록 했지만 이렇게 되면 page가 다시 그려지면서 게시글 상세 내역 모달이 사라지게되는 문제가 발생하여 조회수 카운트를 바로 적용하지 않고 페이지 이동같이 이후에 업데이트 되도록 수정
- 페이지 이동 기능
이전 Toy Project의 내용과 동일 (구매 -> 찜으로 변경)
- 카테고리별 검색 기능
찜목록에 등록된 데이터를 바탕으로 카테고리1을 선택하도록 하고 카테고리1이 선택되면 그 카테고리안에 속한 카테고리2를 선택할 수 있도록 구현 카테고리 1만 선택후 검색하면 선택한 카테고리1에 속하는 데이터 모두 출력, 즉, 점점 검색범위를 줄일 수 있음
옵션 초기화 클릭시 검색 옵션 초기화 (전체 찜목록 조회)
- 수량 선택 및 장바구니 담기
수량을 선택 후 담기를 누르면 장바구니에 선택한 수량만큼 추가되어 물건이 담김
- 찜목록 삭제
- 장바구니 목록 조회
찜 목록 페이지에서 담은 아이템 목록 조회
- 유효성 검사
받는사람, 성함: 숫자 방지
전화번호, 카드번호: 문자 방지, 입력 갯수 제한
배송지 주소: 주소1(마지막 글자 시/도 판단), 주소3(마지막 글자 호 판단)
카드 선택: 카드 미선택 판단
MM/YY: Month(문자 방지, 입력 01-12로 제한), Year(현재 년도보다 이전 년도 입력 제한)
- 구매 데이터 차트
전체 구매데이터 시각화 및 카테고리 클릭시 카테고리 별 결제 내역 조회
- 기간별 결제 내역 검색 기능
시작과 끝 기간을 지정하면 그 기간안에 속하는 결제 내역 검색
- 짧은 시간안에 여러 페이지를 제작하느라 세세한 기능까지 구현하진 못해 아쉬움이 많이 있다.
- Redux를 사용하지 않았고 스타일링도 reactStrap만으로 한 점이 아쉽다.
- 차트 구현시 recharts라이브러리를 사용하였는데 API호출을 통해 받아온 데이터를 원하는 모양으로 가공하여 차트에 적용하였고, 화면상에는 잘 그려졌지만 콘솔창에는 원인 모를 에러가 발생하였다.
- 로그인 유/무에 따라 페이지 접근을 막을때 애초에 클릭조차 안되도록 구현했다면 유저가 좀 더 매끄럽게 서비스를 이용할 수 있을 것 같다.
- 로그인 처리 과정은 수업을 통해 구현한 내용이라 이때 사용한 react-cookie에 대해 아직 미숙하다. 한번 로그인 기능을 스스로 구현해 보면 좋을 것 같다.
- 이외에도 화면을 촬영하면서 발견한 몇가지 버그들이 있는데 모두 고치지 못해 아쉬움이 있다.