CarStoreApi 완성본 (기능 설명)
CarSotreApi에 대한 소개 및 기능 설명을 포스팅 하려고 한다.
이번 포스팅에서는 사진으로 전반적인 기능을 보여주고
다음 포스팅에서는 모든 기능을 다뤄 보면서 시연영상을 포스팅할 예정이다.
전체적인 주요 기능은 다음과 같다.
로그인
국산/수입 차량 분류
통합검색 -> 검색조건 (작성자, 차량명, 지역)
회사별 분류/ 지역, 회사별 차량 분류
상세페이지 (다중 이미지 업로드)
글 수정, 삭제, 찜하기, 댓글 추가/수정/삭제
글 쓰기 (로그인 시 가능)
마이페이지 - 찜목록, 판매중인 차량 한눈에 보기
찜목록 상세보기, 판매중인차량 상세보기
회원정보수정 - 닉네임 중복확인, 연락처, 비밀번호 변경
로그아웃
회원가입 (email, 닉네임 중복확인)
푸터영역 (홈, 찜목록, 깃허브, 유튜브, 인스타, 블로그)
우선 비로그인 상태의 홈화면부터 보자
비로그인 상태에서 글쓰기, 댓글기능을 제외한 기능을 사용할 수 있으며 그 외의 기능은 로그인 시 나타나도록 설계하였다.
차량에 대한 상세보기, 검색, 분류별 차량은 모두 볼 수 있다.
왼쪽 상단의 '국산' 버튼을 누르면 국산 회사 차량들이 메뉴에 나타나게 되고 국산차량만 나오게 된다.
'수입'버튼 활성화 시에는 메뉴에도 수입 회사들과 차량들이 나타난다.
통합검색 기능으로 검색조건을 '차량명'으로 설정해두고 '제네시스'차량을 검색한 결과 CarStoreApi의 모든 제네시스 차량이 한번에 보여진다. 검색조건에는 차량명, 작성자, 지역이 있고 사용자가 원하는 검색조건과 키워드로 쉽게 차량을 검색할 수 있다.
왼쪽의 메뉴중 회사별 차량을 한번에 볼 수 있는데 '제네시스' 회사를 세분화 하여 'g80'차량만 나오게 하도록 조건을 활성화 하였다.
여기서 메뉴의 상단에 지역선택을 할 수 있는데 지역을 대구로 선택해보면
위의 사진처럼 제네시스G80의 대구지역 차량을 찾을 수 있다!
게시글을 클릭하여들어온 차량 상세보기 페이지이다.
로그인시 자신의 글은 수정, 삭제가 가능하며 로그인 시에만 찜하기, 댓글입력이 가능하다.
게시글은 로그인 후 글쓰기를 통해 추가가 되며 게시글 사진은 여러장 추가하여 보는것이 가능하다.
로그인 후 사용하는 기능들에 대해서 소개해 보겠다.
로그인시 오른쪽 상단에 마이페이지, 로그아웃 버튼이 나오게 되고
글쓰기, 자신이 쓴 글, 댓글을 수정 삭제가 가능하게 된다.
마이페이지 버튼을 누르면 회원정보 수정, 나의 찜목록, 판매중인 차량을 한눈에 볼 수 있으며
한페이지에 다 보여주기 위해 주요정보(차량이름 약자, 가격, 조회수, 댓글수)만 나오게 하였다.
자세히, 전체보기 버튼을 이용하여 세부정보를 확인 할수 있게 하였다.
마이페이지에서 '나의 찜목록' 자세히 버튼을 누르면 위시리스트가 나오는데 여기서 자신이 찜한 차량들을 연식, 주행거리, 지역, 가격 정보를 이용해 바로 비교해 볼수 있도록 설계 하였다. 여기서 찜목록 삭제도 가능하다.
다시 마이페이지로 돌아와 '판매중인 차량목록' 전체보기 버튼을 누르면 자신이 올린 차량들만 볼 수있는 게시판 형태를 보여준다.
마이페이지의 '회원정보 수정' 버튼을 누르면 닉네임, 연락처를 변경 할 수 있는데 닉네임은 중복확인을 통해 변경이 가능하고 이름, email,지역은 변경이 불가능하다.
완료 버튼 옆의 비밀번호 변경 버튼을 눌러 비밀번호 수정이 따로 가능하다!
로그아웃은 마이페이지 및 마이페이지에 연결된 router를 제외한 곳에서 모두 가능하며 연결된 곳에서는 로그아웃 버튼을 숨겨 놓았다.
로그아웃을 하고 회원가입 폼을 확인해보자
로그아웃 후 로그인 버튼을 누르면 나오는 로그인 페이지이다.
회원가입 버튼을 누르면 회원가입 폼이 나오고 email, 닉네임 중복검사를 통해 회원가입이 가능하다.
password는 입력한 두번의 password가 일치하여야 회원가입이 된다.
글쓰기 기능에서는 작성자, 지역이 store에 저장된 정보로 자동으로 입력이 되어있고 차량작성시 필요한 모든 정보를 입력하도록 한다. 썸네일 이미지는 1개만 선택가능하고 게시글 이미지는 여러개 선택이 되며 다중 업로드 기능을 가지고 있다.
마지막으로 푸터영역에는 차례대로 홈, 찜목록, 깃허브, 유튜브, 인스타그램, 블로그로 연동되는 링크를 가지고 있으며 모든 영역에 표시되도록 하였다.
이로써 전반적인 기능들에 대한 소개를 해보았고 다음 포스팅에서 직접 기능을 다뤄보며
시연하는 영상을 가져와 포스팅 할 예정이다!