/Cobook

Primary LanguageVue

Welcome to Co-book

co-book

코북 (Co-book) 웹사이트

🏠 Homepage


👨‍👩‍👦팀원소개

image-20200821014555676

Soo Min Hwang

Chae Lin Shin

Sun Hwan Park

Hyo Jin Lim

Da Hun Jeong


📆 프로젝트 개요

  • 진행 기간: 2020.07.13 ~ 2020.08.21
  • 목표
    • 독서활동을 손쉽게 기록하고,
    • 다른 사람들과 공유하고 싶은 사람,
    • 꾸준히 책읽고 싶은 사람,
    • 책과 사람 모두 만나고 싶은 사람,
    • 책모임을 더 쉽게 관리하고 활동 내용을 정리하고 싶은 사람
    • ⭐ 이 모든 사람들을 위한 웹사이트 만들기
  • 웹사이트 이름: Cobook (코북)
    • 책 읽는 사람들을 위한 SNS 커뮤니티 & 모임 매칭 서비스
  • 슬로건: '책 읽는 사람들의 소셜 살롱, 코북'
  • 캐릭터: 책 읽는 거북이, 코북이
    • 귀여운 캐릭터 활용해 서비스 사용의 친근감 제고

📒 Tech Log

1주차
2주차
3주차
4주차
5주차
6주차
Convention
Proposal
Wireframe
Video Plan & Proposal

🔧 Tech Stack

image-20200821125320577

Front 자세히 살펴보기
  • Vue: 2.6.11
  • Vue CLI: 4.3.1
  • Vuex: 3.4.0
  • Vuetify: 2.2.11
  • SweetAlert2: 9.17.1
  • chart.js: 3.6.5
  • firebase: 7.17.1
  • axios: 0.19.2
Back 자세히 살펴보기
  • Swagger: 2.9.2
  • Spring Boot
  • Spring Security
  • Spring Jenkins
  • NGINX
  • E2C

⚙️ Install and Usage

Frontend

  • frontend 폴더로 들어와 필요한 패키지를 설치합니다.

    • $ npm i

  • frontend 폴더 (vue 프로젝트)를 실행합니다.

    • $ npm run serve

Backend

  • Java (Open JDK 14)를 설치합니다.
  • Maven을 설치합니다.
  • VS Code 및 관련 Spring Boot Extension Pack 설치합니다.
  • Docker를 설치합니다.

Maria DB 컨테이너 실행

  • docker run --name-db -p 3306:3306 -e MYSQL_ROOT_PASSWORD={패스워드} -d mariddb

    • 패스워드를 칠 때는, 대괄호를 지우고 칩니다.

  • docker exec -it maria-db mysql -u root -p

    • docker를 켜고, maria-db를 실행하기 위한 코드입니다.

DB 테이블 생성

  • DB 테이블을 생성합니다.

✨개발목표

3가지 가치를 통해 책 읽는 사람, 읽고 싶은 사람들을 위한 웹사이트 구현

image-20200821125233557

편리성을 위한 '피드'

  • 리뷰들을 한눈에 모아보고, 다른 사람들과 소통할 수 있습니다.

연결을 위한 '북클럽'

  • 책을 읽은 후 느낀 감동 혹은 재미를 공유하고 싶나요?

  • 온라인 책모임을 매칭하여 사용자들이 같은 책을 읽고 함께 이야기를 나눌 수 있습니다.

정리를 위한 '서재'

  • 본인의 독서 리뷰, 북클럽, 통계 등을 쉽게 관리할 수 있는 나만의 서재를 제공합니다.

⭐️ 주요 기능

Feed

유저들의 책 리뷰 게시물을 모아 놓은 공간

  • Feed
    • 팔로우한 유저가 작성한 책 리뷰 게시물 확인
    • 책 리뷰의 긴 '텍스트 형태'보다는 이를 요약하는 이미지 위주의 게시물 노출
      • 이미지 Hover시 평점, 한줄평, 닉네임 확인 가능 (사용자 interaction 증가)
  • 상세 리뷰
    • 책의 형태로 제공되며, 책에 대한 기본 정보와 유저가 작성한 리뷰 확인
    • 한줄 평 뿐만 아니라 동일한 책에 대한 다른 유저의 리뷰 노출
    • 댓글 작성 가능
    • 태그, 좋아요, 북마크, 공유하기 기능

Book

  • 책에 대한 줄거리 및 상세 정보 확인
  • 코북 유저들의 리뷰 한 눈에 확인

BookClub

책 모임 매칭 서비스, 클럽

  • BookClub

    정기적으로 책모임을 갖는 하나의 그룹

    • 내가 선호하는 장르를 기반으로 현재 모집 중인 클럽 찾기 가능

    • 클럽 멤버, 클럽 설명, 주요 장르, 위치 (온라인/오프라인) 확인 가능

  • BookClub Event

    클럽 안에서 진행되는 정기적인, 한 번의 책 모임

    • 리딩에 참여할 멤버, 멤버 개개인이 해당 책에 대해 작성한 리뷰, 리딩에서 진행될 질문지 확인 가능
    • 온라인으로 진행할 경우, Webex를 통한 온라인 독서모임 지원

Oneday Event

클럽과 관계없이 진행되는 일회성 책모임

  • 내가 선호하는 장르를 기반으로 현재 모집중인 원데이 이벤트 찾기 가능

  • 원데이 이벤트에 참여할 멤버, 개개인이 해당 책에 대해 작성한 리뷰, 원데이 이벤트에서 진행될 질문지 확인 가능

  • 온라인으로 진행할 경우, Webex를 통한 온라인 독서모임 지원

Profile

독서 활동 관리 서비스

  • 내가 작성한 책 리뷰 확인
  • 내가 가입한 북클럽 및 참여중인 북클럽/원데이 이벤트 확인
  • 내가 북마크한 게시물 확인
  • 나의 독서 활동을 캘린더와 통계를 통해 확인
  • 팔로우와 팔로워를 통한 유저간의 소통

Search

검색 서비스

  • Review 검색 결과: 한줄평 및 태그로 검색 가능
  • User 검색 결과: 닉네임으로 검색 가능
  • Book 검색 결과: 도서명, 저자, 장르로 검색 가능
  • Book Club 검색 결과: 북클럽 이름, 장르로 검색 가능
  • Oneday Event 검색 결과: 원데이 이벤트 이름, 장르로 검색 가능

👀 페이지 소개

Feed

피드

인기 리뷰, 팔로잉한 유저들의 리뷰, 관심 장르 리뷰로 구성

인기 리뷰

image-20200821011602176

팔로잉한 유저들의 리뷰, 관심 장르 리뷰

image-20200821011727582

팔로우 하는 유저가 없을 때

image-20200821010239098

내가 선호하는 장르에 리뷰가 작성되지 않았을 때

image-20200821011217351

피드 Hover시 효과

image-20200821012126556

리뷰 상세 페이지

image-20200821012202114


Book

책 상세 페이지

image-20200821012306356


BookClub

북클럽 리스트

image-20200821012343074

북클럽 생성 및 수정

image-20200821012413399

북클럽 상세 페이지

image-20200821012530792

북클럽 이벤트 상세 페이지

image-20200821012605909


Oneday Event

원데이이벤트 리스트

image-20200821012625323

원데이이벤트 생성 및 수정

image-20200821012639626

원데이이벤트 상세 페이지

image-20200821012718413


Profile

리뷰

image-20200821012742721

북클럽/이벤트

image-20200821012759619

북마크

image-20200821012817519

일정/통계

캘린더

image-20200821012923267

통계

image-20200821012944203


🎞 최종산출물