- 배포 도메인: (https://doseoro.taewoongjung.xyz)
- Backend: Express, Passport, AWS EC2, Route53, Multer
- Frontend: JavaScript, HTML, CSS, Bootstrap
- Database: Sequelize, mysql
- .env가 필요하므로 파일은 저한테 요청해주세요.
- 1번을 따라 .env 파일을 받으시면 터미널에 "npm i" 치고 엔터 후 "npx sequelize db:create"를 치고 엔터를 눌러주세요.
- 그 다음으로 " localhost:1000 "로 들어가시면 됩니다.
- .env에 있는 DB_SECRET은 MySQL 비밀번호이므로 유저님의 비밀번호를 적어 넣으시면 됩니다.
이 프로젝트의 목적은 책을 전문으로 다루는 중고거래 website제작이다. 이용자 본인이 있는 위치를 기반으로 한 직거래와 택배를 이용한 거래의 두 가지 방식을 다 채택한다. 단순한 판매, 구매 뿐만이 아니라 무료 나눔, 커뮤니티 등의 기능을 추가하고, 기존 사이트에 없던 구매의사를 표현할 수 있는 기능도 추가하였다. 다양한 형태의 거래를 시행하고 커뮤니티를 통한 사용자들읠 정보 공유와 고객 문의를 이용한 웹사이트의 수정, 보완을 할 수 있다. 본 프로젝트는 이처럼 다양한 형태의 중고거래 구현을 목표로 한다.
이용자는 도서명, 저자, 출판사를 중심으로 다양한 형태의 중고거래를 검색할 수 있으며, 카테고리 별로도 거래 현황을 볼 수 있다. 판매 외에도 구매자가 원하는 도서를 게시판에 올려 구매자 위주로의 거래가 활발하게 이루어질 수 있다. 또한 커뮤니티 게시글을 통한 도서의 정보를 다양하게 공유할 수 있으며, 이동경로에 따라 다양한 위치에서의 거래가 가능해 폭넓은 양의 직거래가 가능하다는점을 기대한다. 궁극적으로는 COVID-19 이후로 높아진 수요의 중고거래와 도서를 이용하여 또 다른 경제유통의 장을 열 수 있는 효과가 있다.
- public
- css - css files
- img - image files
- js - script files
- routes - router files
- views - HTML and nunjucks files
- config - Setting for linking sequelize and mysql
- models - sequelize table
- passport - passport strategy
| 번호 | 기능명 | 설명 |
|---|---|---|
| 1 | 팝니다 | 중고 도서를 판매할 수 있다. |
| 2 | 삽니다 | 도서 판매 요청 글을 남겨 판매자를 구할 수 있다. |
| 3 | 무료 나눔 | 책을 무료로 나눌 수 있다. |
| 4 | 커뮤니티 | 도서 후기, 궁금증 등을 글로 남겨 사용자 간의 소통이 가능하다. |
| 5 | 검색 옵션 | 도서명, 저자, 출판사 설정을 통해 원하는 도서를 검색할 수 있다. |
| 6 | 메인 베너 | 페이지 사용법, 추천도서를 확인할 수 있다. |
| 7 | 로그인 | 카카오, 구글 연동 로그인, 회원가입, ID 찾기, PW 찾기가 가능하다. |
| 8 | ID 찾기 | 가입 시 기입한 전화번호를 입력하면 아이디를 알려준다. |
| 9 | PW 찾기 | 닉네임과 보안 질문에 올바른 답을 입력하면 비밀번호 변경 페이지로 넘어간다. |
| 10 | 도서 목록 | 도서 사진, 도서 제목, 가격, 거래 지역이 노출되고 사진을 클릭하면 자세한 내용을 확인 할 수 있다. |
| 11 | 정렬 필터 | 내 위치를 기준으로 지역 범위를 설정하여 글을 검색할 수 있다. |
| 12 | 관심 상품 | 관심 상품으로 등록해 마이페이지에서 한 번에 조회할 수 있다. |
| 13 | 거래 문의 | 판매글 하단의 댓글을 통해 거래 문의가 가능하다. |
| 14 | 거래 현황 | 모든 거래 게시글에 대해 거래 완료 설정을 할 수 있고 거래 완료로 변경 시 댓글 작성자 중에 거래자를 선택하도록 한다. |
| 15 | 도서 등록 | 도서 사진, 제목, 저자, 출판사, 가격, 카테고리, 손상도, 흔적, 추가 정보, 거래방법을 입력해 판매 혹은 나눔 글을 등록할 수 있다. |
| 16 | 고객 문의 | 홈페이지 오류, 불편사항 등을 접수할 수 있다. |
| 17 | 마이페이지 | 판매내역, 구매내역, 관심 상품, 프로필 확인과 지역 설정, 고객 문의가 가능하다. |
| 18 | 판매내역 | 판매 현황(판매중 / 예약중 / 판매완료)에 따른 판매 도서를 확인할 수 있다. |
| 19 | 구매내역 | 거래한 도서를 확인할 수 있고 거래후기 작성이 가능하다. |
| 20 | 프로필 | 닉네임, 아이디, 비밀번호, 지역, 거래 후기 내용을 확인할 수 있다. |
| 21 | 지역 설정 | gps를 이용하여 거래 지역을 설정할 수 있다. |
| 번호 | 기능명 | 제안내용 | 변경사항 |
|---|---|---|---|
| 1 | 분야별 게시판 | 카테고리를 기준으로 도서를 조회할 수 있는 메뉴 | 불필요한 기능으로 판단하여 삭제 |
| 2 | 게시판 정렬 필터 | 내지역/ 모든 지역/ 가격 순/ 최신 순 필터를 설정해 게시글 정렬 | 게시판이 아닌 도서 검색에서 지역 범위를 선택할 수 있도록 변경 |
| 3 | 판매내역, 구매내역 메뉴 | 작성한 글과 거래 목록을 확인할 수 있는 메뉴 | 작성한 글은 '내가 쓴 글' 메뉴, 거래 목록은 '거래 내역' 메뉴로 변경 |
| 4 | 조회수 | 제안 내용 없음 | 각 게시글에 조회 수 측정 기능 추가 |
| 5 | 댓글 | 댓글을 통해 거래함 | 더 원활한 소통을 위해 댓글에 추가 댓글을 작성할 수 있는 대댓글 기능 추가 |
| 6 | 프로필 메뉴 | 마이페이지 > 프로필에서 닉네임, 아이디, 지역, 거래 후기 확인 가능 | 마이페이지에서 거래 지역 설정 가능, 프로필 메뉴 삭제 |
| 7 | 거래 후기 | 거래 완료 시 거래 후기 작성 가능 | 개발 시간 부족으로 제외 |
| 8 | 커뮤니티 게시판 세부 카테고리 | 유저들이 도서를 서로 추천해주고 생각을 공유하는 장을 제공 | 자유/ 서평/ 추천/ 질문 4가지의 세부 카테고리 추가 |
| 9 | 알림 | 좋아요, 댓글, 대댓글이 자신의 게시물에 적용되면 자신에게 알림이 오는 기능 | 내 게시글에 댓글이 달리거나 관심 상품으로 설정 시 알림 |
| 10 | 메인 페이지 구성 | 베너 + 최신 도서 4개로 구성 | 베너 + 팝니다, 삽니다, 무료나눔 게시판 최신 등록 글 4개로 변경 |
| 11 | 메인 페이지 베너 | 최신 등록 글, 이용 매너, 인기글 | 도서로 이용 매너, 인기글로 변경 |
| 번호 | 파일명 | 설명 | 기능 |
|---|---|---|---|
| 1 | config | 프로젝트 설정을 담당한다. | DB설정/타임존/pool 설정 |
| 번호 | 파일명 | 설명 | 기능 |
|---|---|---|---|
| 1 | auth.js | 모든 인증을 담당하고 있는 라우터들의 모임이다. | 회원가입, 로그인, 아이디 비밀번호 찾기 |
| 2 | comment.js | 팝니다, 삽니다, 무료나눔, 커뮤니티 게시판에 해당되는 댓글, 대댓글의 수정 삭제를 담당하고 있는 라우터들의 모임이다. | 대댓글 수정 삭제 |
| 3 | customer.js | 고객문의에 해당되는 기능을 담당하고 있는 라우터들의 모임이다. | 고객문의 등록/삭제/들어가기/수정, 댓글 대댓글 등록/수정/삭제 |
| 4 | free_community.js | 무료나눔에 해당되는 기능을 담당하고 있는 라우터들의 모임이다. | 무료나눔 등록/삭제/들어가기/수정, 댓글 대댓글 등록 |
| 5 | index.js | 초기화면에 들어갈 기능들, 팝니다 카테고리에 있는 기능을 담당하고 있는 라우터들의 모임이다. | 슬라이드 베너 물품 선정, 로그인 회원가입 거래내역 마이페이지 들어가기, 팝니다에 댓글 대댓글 등록/책 등록/좋아요 |
| 6 | middlewares.js | 로그인이 되었는지 안되어 있는지 확인하는 미들웨어의 모임이다. | 로그인 되어 있는지 아닌지 확인 |
| 7 | mpfunc.js | 마이페이지에 있는 기능을 하고 있는 라우터들의 모임이다. | 마이페이지에서 판매내역 삭제/수정, 자신 위치 등록 |
| 8 | notification.js | 알림 기능을 담당하고 있는 라우터들의 모임이다. | 각각의 게시판에서 자신의 게시물에 달리는 댓글/대댓글/좋아요 정보가 알림창에 등록됨, 해당 알림을 클릭하면 해당 화면으로 이동(이동 후 사라짐), '모두삭제' 버튼을 누르면 모든 알림 삭제 |
| 9 | pages.js | 모든 화면을 렌더를 당담하는 기능을 하는 라우터들의 모임이다. | 판매 책/무료나눔/구매 책/커뮤니티/판매내역/관심상품/작성글 목록/아이디찾기/비밀번호찾기/비밀번호변경/검색결과/고객문의 페이지 렌더링 |
| 10 | search.js | 카테고리 검색을 담당하는 기능을 하는 라우터가 있다. | 게시물명/책 제목/책 저자명/출판사명/커뮤니티 제목/전체 카테고리 검색 |
| 11 | searchLoggedIn.js | 로그인 후 카테고리 검색과 거리별 검색을 담당하는 라우터가 있다. | 게시물명/책 제목/책 저자명/출판사명/커뮤니티 제목/전체 카테고리로 검색 + 동/시/도/모든 지역 으로 검색 |
| 12 | trade.js | 팝니다, 삽니다 게시판 물품들을 거래할 때 댓글과 대댓글에 구매적용을 담당하고 있는 라우터들의 모임이다. | 팝니다/삽니다 댓글 대댓글에 구매하기 적용 |
| 13 | wannabuy.js | 삽니다에 해당되는 기능을 담당하고 있는 라우터들의 모임이다. | 삽니다 등록/삭제/(마이페이지에서)삭제/수정/들어가기/댓글 대댓글 등록 |
| 번호 | 파일명 | 설명 및 기능 |
|---|---|---|
| 1 | index.js | MySQL과 Node와 sequelize를 연결을 담당한다. |
| 2 | community.js | communities 스키마를 설정한다. |
| 3 | complain.js | complains 스키마를 설정한다. |
| 4 | book.js | books 스키마를 설정한다. |
| 5 | post.js | posts 스키마를 설정한다. |
| 6 | user.js | users 스키마를 설정한다. |
| 7 | who.js | whose 스키마를 설정한다. |
| 번호 | 파일명 | 설명 | 기능 |
|---|---|---|---|
| 1 | index.js | serializeUser와 deserializeUser가 있다. | 세션에 저장할 값들 설정하는 serializeUser와 브라우저로 부터 온 세션쿠키를 보고 아이디를 확인하여 req.user를 만드는 deserializeUser역할을 한다. |
| 2 | google.js | 구글로 로그인 하는 담당을 한다. | 구글이 대신 인증 |
| 3 | kakao.js | 카카오로 로그인 하는 담당을 한다. | 카카오가 대신 인증 |
| 4 | local.js | 로컬로 로그인 하는 담당을 한다. | 이메일과 비밀번호로 |
| 번호 | 파일명 | 설명 및 기능 |
|---|---|---|
| 1 | areaRange.js | 설정한 지역 범위에 해당하는 게시글을 조회 |
| 2 | changePostingHistory.js | 글 작성 내역을 카테고리별로 표시 |
| 3 | checkFormat.js | 회원가입 페이지에서 비밀번호 일치 여부 확인 및 핸드폰 번호 포맷을 적용 |
| 4 | ckboxLimit.js | 게시글 작성 시 선택할 수 있는 옵션의 갯수를 지정 |
| 5 | notionEvent.js | 알림 클릭 시 알림 창을 popup 함 |
| 6 | popGuide.js | 글 작성에서 등록된 사용자의 위치가 없으면 안내 문구를 표시 |
| 7 | previewPost.js previewPost2.js |
등록한 사진의 미리 보기를 제공 |
| 8 | showTradeList.js | 판매, 구매 내역을 카테고리별로 표시 |
| 9 | timestamp.js | 작성시간과 현재 시간을 계산해 timestamp를 표시 |
| 10 | topNav.js | 페이지 하단의 footer |
| 11 | userLocation.js | Geolocation API로 사용자 위치를 받아 지도에 표시 |
| 번호 | 파일명 | 설명 |
|---|---|---|
| 1 | bookRequest.html | 삽니다 포스팅 리스트를 표시함 |
| 2 | buyDetail.html | 삽니다 상세 페이지 |
| 3 | changePW.html | PW 변경 페이지 |
| 4 | community.html | 커뮤니티 포스팅 리스트 페이지 |
| 5 | communityDetail.html | 커뮤니티 포스팅 리스트를 표시함 |
| 6 | csDetail.html | 고객문의 상세 페이지 |
| 7 | csList.html | 고객문의 포스팅 리스트를 표시함 |
| 8 | donationBoard.html | 무료나눔 포스팅 리스트를 표시함 |
| 9 | edit_buyDetail.html | 삽니다 게시글 수정 페이지 |
| 10 | edit_commuDetail.html | 커뮤니티 게시글 수정 페이지 |
| 11 | edit_freeDetail.html | 무료나눔 게시글 수정 페이지 |
| 12 | edit_saleDetail.html | 팝니다 게시글 수정 페이지 |
| 13 | error.html | 에러 메세지 |
| 14 | findID.html | ID 찾기 페이지 |
| 15 | findPW.html | PW 찾기 페이지 |
| 16 | index.html | 메인 페이지 |
| 17 | likedProduct.html | 관심 상품 페이지 |
| 18 | login.html | 로그인 페이지 |
| 19 | myPage.html | 마이페이지 |
| 20 | myPostingList.html | 내가 쓴 글 페이지 |
| 21 | registCommunity.html | 커뮤니티 글 등록 페이지 |
| 22 | registDonation.html | 무료나눔 글 등록 페이지 |
| 23 | registerBook.html | 팝니다 글 등록 페이지 |
| 24 | registRequest.html | 삽니다 글 등록 페이지 |
| 25 | saleBoard.html | 팝니다 포스팅 리스트를 표시함 |
| 26 | saleDetail.html | 팝니다 상세 페이지 |
| 27 | searchBox.html | 비로그인 페이지 상단의 검색 바, 메뉴 리스트 |
| 28 | searchBoxLoggedIn.html | 로그인 한 경우 페이지 상단의 검색 바, 메뉴 리스트 |
| 29 | searchList.html | 검색 결과 페이지 |
| 30 | signup.html | 회원가입 페이지 |
| 31 | topNavbar.html | 페이지 상단의 도서로 마크, 알림, 메뉴 |
| 32 | topNavbar2.html | 상세 페이지 상단의 도서로 마크, 알림, 메뉴 |
| 33 | tradeHistory.html | 거래내역 페이지 |
| 번호 | 파일명 | 설명 및 기능 |
|---|---|---|
| 1 | app.js | 모든 라우터, 환경설정 을 담당하고 있는 서버의 센터 |
| 2 | server.js | 프로젝트 시작 백앤드(배포용) |
| 3 | package.js | 프로젝트에서 사용된 모듈들 관리 |
| 4 | .env | 프로그램에 필요한 각종 비밀번호가 들어있는 |
-
가격 순, 최신순 필터 적용
-
거래 후기
-
프로필 변경
※ 원하시는 테이블을 클릭하시면 링크로 이동합니다.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent