바닐라_마켓_기획

당근을 클론하여 VM(Vanilla Market)을 구현한다. 원래는 Vending Machine 이었을 텐데

도전과제

• VanillaJS를 사용하여 React를 구현한다. 이걸 모르고 React를 쓰는 건 짜파게티를 끓이면서 요리사를 칭하는 것. / 이게 뭔 소리야

  

• 그거 알아요? Vanilla에는 평범한 이라는 뜻이 있대요... 저희 도전 과제는 평범한 거죠.

기술 스택

각자 선호하는, 또는 도전하고 싶은 기술 스택을 나열하고, Fix 된 것을 위로 올리도록 한다.

Fixed 🛠️

• VanillaJS : Typescript를 사용하되 프레임워크는 일체 사용하지 않는다.
• OAuth : 회원가입 및 로그인을 구현하기 위해 사용한다.
• node, express : 서버를 구현하기 위해 사용한다.
• npm, git : version 관리를 위해 사용한다.
• prettier, webpack, babel, ESLint : 코드의 가독성 및 호환을 위해 사용한다.
• mysql, workbench : user 및 게시글 등의 정보를 저장하기 위해 사용한다.

Unfixed

• Elastic search + kibana : 서버의 트래픽 및 로그를 분석하기 위해 사용한다.
• Docker : 위의 툴들을 실행하기 위해서 사용한다.
• Websocket : 실시간 채팅을 구현하기 위해서 사용한다.

명세서

Main page

1. Header
   • logo를 클릭 시 redirect가 되도록 한다.
   • scroll을 내려도 header와 검색 창은 유지되도록 한다.
   • 검색 API를 구현한다. 검색은 지역 및 제목 ,내용을 검색할 수 있도록 한다.
     • 가능하다면 지역 기반으로 한다.
2. section
   • 화면에는 큰 사이즈의 배너 여러 개와, 인기 매물 (또는 인근의 매물)을 띄워준다.
3. footer
   • 위 모습과 동일하게 구현한다. 각각의 태그들은 다른 page로 이동시킨다.

Search Page

1. header
   • header는 이전의 명세와 동일하다.
2. section
   • 검색된 내용이 지역이면 동네 업체만을 보여준다.
   • 검색된 내용이 사물이면 중고 거래를 위에, 동네 업체를 아래에 보여준다.
   • 두 내용 모두, 아래에는 동네 정보를 보여준다.
   • 동네 업체, 중고 거래, 동네 정보 모두 아이템을 지니며, 클릭 시 상세 페이지로 이동한다.
   • section은 더 보기 버튼을 통해서 표시된 내용물을 늘릴 수 있다.

상세 페이지

• 상세 페이지는 중고 거래와 업체 정보 2개로 나뉜다. 중고 거래와 업체 정보의 UI가 다르니 주의.
• 상세 페이지 중 업체 정보의 내용은 아래와 같다.
  • 작성자 이름 (작성자의 지역)
  • 작성자 온도
  • 제목
  • 내용 (작성한 게시글의 내용)
  • 작성된 시간 (ex. 8시간 전)
  • 제품의 카테고리
  • 작성자의 위치 (거래 가능한 위치)
  • 전화번호
  • 그 외 레이블
  • 사진, 이미지 정보
  • 스크롤을 내리면 댓글 대신 후기와 메뉴판이 나온다.
  • 작성자가 저장한 위치를 토대로, 지도에 표시를 해준다. 찾아오시는 길 참고.
  • 아래에는 추천 업체 등이 표시된다. (선택)

• 상세 페이지 중 중고 거래의 내용은 아래와 같다.
  • 작성자 정보
    • 작성자의 이름, 주소, 온도 등이 표시된다.
  • 게시글 정보
    • 제목
    • 내용
    • 가격
    • 채팅, 관심, 조회수가 표시된다.
    • 댓글(선택)

작성 페이지

• 작성 페이지는 모바일 상에 있으므로, 해당 이미지를 첨부.