Buyk

소개

중고차 거래 앱은 많지만 오토바이 거래 앱은 없고 앞으로 스마트 모빌리티 등 바이크 시장이 커지는 것을 공략하여 기획된 서비스입니다.

처음 서비스를 기획할때는 스마트폰이 주된 환경으로 기획이 되었고, 웹을 확장하게 되었습니다. 2년전 기술부족으로 인해서 구현을 하지 못했었습니다. 전에 구현하지 못했던 프로젝트들을 다시 만들어 보자라는 취지에서 개발하게 되었습니다. 서버는 Django-REST-Framework를 사용해 기존에 있던 코드를 참고하여 구현하였고, Vue.js를 사용해서 클라이언트 서버를 구축했습니다. Vuex를 사용하여 상태관리를 하였고, 더 좋은 자바스크립트 코드를 사용하고자 노력했습니다.

시연 영상

링크

환경

• Mac Catalina 10.15.5
• Chrome
• 최소 권장 화면 크기 : 1024px

기술 스택

• Vue.js 2.9.3
  • vue-carousel
• WebPack 3.6.0
• axios
• js-cookie
• Vuex
• SCSS

기능

Index Page

• 검색어 박스
  • 최근 검색어 5개를 확인할 수 있다.
  • 검색하고 싶은 바이크 타입을 찾을 수 있다.
• 최근 본 매물
  • localStorage를 이용하여 최근에 확인한 매물을 확인 할 수 있게 만들었다.
• 검색기능을 구현하지 못했기 때문에 검색을 누르면 자동으로 List 페이지로 넘어간다.

User

• 토큰을 이용해서 사용자 인증을 한다.
• User
  • 사용자의 로그인 여부에 따라 Header가 바뀐다.
  • 서비스를 처음 시작할때, 쿠키에 있는 값을 가져와 자동로그인을 해준다.
  • 로그아웃 버튼을 만들지 못해서 로그인을 했을 때, Username을 누르면 로그아웃이 된다.

List Page

• 실시간 매물
  • BuyK에 등록되어있는 최근의 매물을 볼 수가 있다.
• Filter
  • 각 filter 값을 지정하면 실시간 매물에 바로 적용이 된다.
  • filter 값을 로컬 localStorage을 이용해서 저장을 하고 사용자가 다시 List 페이지로오면 전에 사용했던 filter 값을 사용할 수 있게 만들었다.
  • 최대 최소값은 서로 간섭하지 못하게 개발하였다.

Detail Page

• localStorage
• 사용자가 Detail Page에 접속을 하면 자동으로 localStorage에 매물값을 저장을 하고, 찾지못했을 경우에는 localStorage에서 해당 매물을 삭제한다.

Useritem Page

• 판매중인 오토바이
  • 사용자가 등록한 오토바이를 보여준다.
  • 삭제 버튼을 누르면 해당 매물이 삭제가 된다.
  • 수정기능은 개발하지 못했다.
• 최근 본 매물
  • localStorage에 있는 최근 본 매물 데이터를 불러와 사용자에게 보여준다.

Register

• progress
  • 사용자가 등록을 진행하는 상황에 맞춰 progress를 보여준다.
• 진행
  • 사용자가 입력을 하지 않으면 다음으로 넘어갈 수 없다.
• 세부사항
  • 이미지는 여러개 동시에 올릴 수 있으며, 미리보기를 제공한다.
  • 실수로 올라간 이미지는 삭제할 수 있다.
  • 판매금액과 주행거리는 자동으로 ,처리와 숫자처리를 해준다.

이슈

• mixin과 veriables파일을 전역으로 불러오지 못하는 이슈
  • 사용하는 파일마다 index.scss를 import해서 사용하는 것으로 임시 해결
• 검색창 포커싱이 안풀리는 이슈
  • 입력창을 다시 토글하는 것으로 해결
• 장고의 서버시간과 자바스크립트에서 사용하는 시간이 달라서 -전 표시에 이슈가 있음
• vue의 배열 변경 감지로 Register 페이지에 특정한 값들이 전달이 안되는 이슈
  • 알수없는 코드로 실행이 되서 못찾았던 이슈, 코드를 다시 읽으면서 찾게 되었음
  • map 함수도 사용하면 배열 변경감지가 일어나는 것 같음. 로직 변경으로 해결
• 필터에서 글자를 누르면 토글이 안되는 오류
  • 자식 노드에 id값을 줘서 임시 해결
• Detail Page에서 payment_method에 있는 데이터를 로딩하지 못해서 발생하는 오류
  • payment_method state를 따로 생성해서 임시로 해결

구현 못함

• double slide를 구현하고 싶었으나 값에따라 스타일 시트를 바꾸는 문제를 해결하지 못함
  • input[type:number]으로 구현함
• 검색어를 넘겨서 검색하는 기능 서버쪽에서 구현을 못했기 때문에 구현하지 못함
• 수정하기 매물 수정하기 기능을 구현하지 못함
  • 이미지를 재배치하는 문제를 해결하지 못함