Skip to content

오늘도 평화로운 우아나라 - 박민수 & 표석훈

Notifications You must be signed in to change notification settings

pyo-sh/web-fleamarket-07

 
 

Repository files navigation

Logo

Web-FleaMarket-07

2022년 우아한테크캠프 5기 중고거래
Notion docs »

박민수 표석훈

View Demo · Report Bug · Request Feature

Table of Contents
  1. About The Project
  2. Getting Started
  3. UIs
  4. ERD

About The Project

  • 2022.08.16 ~ 2022.08.29

중고 물품을 사고 팔 수 있는 사이트

게시판의 CRUD와 채팅 기능으로 중고 마켓을 사용할 수 있습니다.

(back to top)

Skills With

  • TypeScript

  • SocketIO

  • Notion

  • Github

Front-End

  • React

Back-End

  • NestJS

  • NodeJS

(back to top)


Getting Started

Yarn Berry의 Plug & Play 기능과 Workspace 기능을 함께 사용하고 있습니다.

따라서 처음 프로젝트를 실행하기 위해서 다음과 같은 작업이 필요할 수 있습니다.

Prerequisites

먼저 yarn을 설치해야 합니다.

  • npm
    npm install yarn -g

Installation

  1. 레파지토리를 클론하세요
    git clone https://github.com/woowa-techcamp-2022/web-kiosk-pyosh.git
  2. Yarn의 의존성들을 설치합니다.
    yarn install
  3. VSCode에서 개발하고자 한다면 Yarn의 Typescript 라이브러리를 아래와 같이 적용해야 합니다. (Root Package.json에서 스크립트 지정을 해주었습니다)
    yarn initVscode
  4. ServerClient에서 동시에 사용하는 로직이나 타입들을 사용하기 위해서 빌드해야합니다. 아래와 같이 Common 워크스페이스를 빌드해주어야 합니다
    yarn common build
  5. ServerClient에서 환경변수 설정을 해주어야 합니다. ServerClient 파일에서 어떤 환경변수가 필요한지 선언하고 있으므로 확인하여 올바른 값을 추가하는 것이 좋겠습니다.
    • Github OAuth (Secret, ID)
    • AWS S3 (IAM Access, Secret, Region, Bucket)
    • MySQL Database
    • JWT
    • Socket Port

(back to top)


UIs

Main

현재 위치에 해당하는 상품 목록들을 제공해줍니다.

위치 정보를 String으로 처리하고 있어 기본 값은 역삼동입니다.

  • 상품을 클릭하면 상품의 상세 정보로 이동합니다.
  • 자신의 상품이면 컨트롤 할 수 있는 버튼이 제공됩니다.
  • 다른 사람의 상품이면 관심 목록에 추가할 수 있는 버튼이 제공됩니다.
초기 옵션 카테고리
image image

(back to top)

Login

Github OAuth를 통해서 유저 서비스를 제공하고 있습니다.

Github 정보 중 아이디, 프로필 사진을 이용해 회원가입과 로그인이 동시에 진행됩니다.

로그인에 성공하면 다음과 같이 메인 헤더에서 프로필 사진을 확인할 수 있습니다.

로그인 전 로그인 후
image image
image image

(back to top)

Location

현재 위치는 String 값으로 지정되고 있습니다.

String 값을 Unique하게 사용하여 현재 위치들을 필터링합니다.

(따라서 철자 하나만 바뀌면 다른 지역으로 변경되는데, 이는 추후 변경되어야 할 사항입니다.)

변경 드롭다운 변경 후 설정 페이지
image image image
생성 모달 확인 & 삭제할 수 있는 버튼
image image

(back to top)

Products

리스트에서 물품 아이템을 클릭하면 상세 물품을 볼 수 있습니다.

다른 사람의 상세 물품 자신의 상세 물품
image image

현재 페이지에서

  • 다른 사람의 상품을 하트를 눌러 관심 목록에 넣을 수 있습니다.
  • 자신의 상품은 현재 어떤 상태인지 변경할 수 있습니다
관심 목록에 추가하기 상대방에게 문의하기
ezgif com-gif-maker (1) ezgif com-gif-maker (2)

Menus

로그인 한 상태에서 메인 화면에서 오른쪽 위의 아이콘을 클릭하면 사용자와 관련된 기능들을 사용할 수 있습니다.

사용자 판매 물품 사용자 관심 물품 사용자의 채팅 목록
image image image

Chats

상대방과의 실시간 채팅을 진행할 수 있습니다.

채팅을 확인하다가 다른 사람의 채팅이 오면 아래에 보이며 클릭하면 맨 아래로 이동합니다.

실시간 채팅 최근 채팅 확인 및 이동
image image

ERD

(back to top)

About

오늘도 평화로운 우아나라 - 박민수 & 표석훈

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 99.3%
  • Other 0.7%