Table of Contents
- 2022.08.16 ~ 2022.08.29
중고 물품을 사고 팔 수 있는 사이트
게시판의 CRUD와 채팅 기능으로 중고 마켓을 사용할 수 있습니다.
Yarn Berry의 Plug & Play 기능과 Workspace 기능을 함께 사용하고 있습니다.
따라서 처음 프로젝트를 실행하기 위해서 다음과 같은 작업이 필요할 수 있습니다.
먼저 yarn을 설치해야 합니다.
- npm
npm install yarn -g
- 레파지토리를 클론하세요
git clone https://github.com/woowa-techcamp-2022/web-kiosk-pyosh.git
- Yarn의 의존성들을 설치합니다.
yarn install
- VSCode에서 개발하고자 한다면 Yarn의 Typescript 라이브러리를 아래와 같이 적용해야 합니다. (Root Package.json에서 스크립트 지정을 해주었습니다)
yarn initVscode
Server와Client에서 동시에 사용하는 로직이나 타입들을 사용하기 위해서 빌드해야합니다. 아래와 같이Common워크스페이스를 빌드해주어야 합니다yarn common build
Server와Client에서 환경변수 설정을 해주어야 합니다. Server와 Client 파일에서 어떤 환경변수가 필요한지 선언하고 있으므로 확인하여 올바른 값을 추가하는 것이 좋겠습니다.- Github OAuth (Secret, ID)
- AWS S3 (IAM Access, Secret, Region, Bucket)
- MySQL Database
- JWT
- Socket Port
현재 위치에 해당하는 상품 목록들을 제공해줍니다.
위치 정보를 String으로 처리하고 있어 기본 값은 역삼동입니다.
- 상품을 클릭하면 상품의 상세 정보로 이동합니다.
- 자신의 상품이면 컨트롤 할 수 있는 버튼이 제공됩니다.
- 다른 사람의 상품이면 관심 목록에 추가할 수 있는 버튼이 제공됩니다.
| 초기 옵션 | 카테고리 |
|---|---|
 |
 |
Github OAuth를 통해서 유저 서비스를 제공하고 있습니다.
Github 정보 중 아이디, 프로필 사진을 이용해 회원가입과 로그인이 동시에 진행됩니다.
로그인에 성공하면 다음과 같이 메인 헤더에서 프로필 사진을 확인할 수 있습니다.
| 로그인 전 | 로그인 후 |
|---|---|
 |
 |
 |
 |
현재 위치는 String 값으로 지정되고 있습니다.
String 값을 Unique하게 사용하여 현재 위치들을 필터링합니다.
(따라서 철자 하나만 바뀌면 다른 지역으로 변경되는데, 이는 추후 변경되어야 할 사항입니다.)
| 변경 드롭다운 | 변경 후 | 설정 페이지 |
|---|---|---|
 |
 |
 |
| 생성 모달 | 확인 & 삭제할 수 있는 버튼 |
|---|---|
 |
 |
리스트에서 물품 아이템을 클릭하면 상세 물품을 볼 수 있습니다.
| 다른 사람의 상세 물품 | 자신의 상세 물품 |
|---|---|
 |
 |
현재 페이지에서
- 다른 사람의 상품을 하트를 눌러 관심 목록에 넣을 수 있습니다.
- 자신의 상품은 현재 어떤 상태인지 변경할 수 있습니다
| 관심 목록에 추가하기 | 상대방에게 문의하기 |
|---|---|
 |
 |
로그인 한 상태에서 메인 화면에서 오른쪽 위의 아이콘을 클릭하면 사용자와 관련된 기능들을 사용할 수 있습니다.
| 사용자 판매 물품 | 사용자 관심 물품 | 사용자의 채팅 목록 |
|---|---|---|
 |
 |
 |
상대방과의 실시간 채팅을 진행할 수 있습니다.
채팅을 확인하다가 다른 사람의 채팅이 오면 아래에 보이며 클릭하면 맨 아래로 이동합니다.
| 실시간 채팅 | 최근 채팅 확인 및 이동 |
|---|---|
 |
 |
