☕ Coffy

1️⃣ Overview

• 주니어 프론트엔드 엔지니어를 위한 코드 공유 서비스

• Code를 Copy해서 사용하는 Coffee 처럼 중독성 있는 프론트엔드 코드 공유 서비스(made by SSAFY Project 'SangleSangle' Team)

2️⃣ Project Schedule

3️⃣ Tech Stack & Architecture

📍 Frontend : Vue.js

📍 Backend : Spring Boot

📍 Database : MySQL

📍 Deploy : docker, Jenkins

📍 Development Enviornment : Windows 10, Node.js 12 or higher, Vue CLI 4 or higher, Apache 2.0

📍 Using Editor : Visual Studio Code

4️⃣ Quick Start

✔️ Requirement

• Node.js : 12 or higher
• Vue CLI : 4.0 or higher

✔️ Installation

$ cd front
$ npm install

✔️ Usage

$ npm run serve

✔️ Deploy URL

• https://k02b2021.p.ssafy.io/ 주소로 접속해서 볼 수 있습니다.

5️⃣ Homepage Configuration

(1) BEST Template TOP 6

• 메인 페이지에서 좋아요를 가장 많이 받은 상위 6개의 템플릿을 볼 수 있습니다.
• 하단의 Show More 버튼을 클릭하면 코드 목록 페이지로 이동해 더 많은 코드들을 볼 수 있습니다.

(2) 코드 작성 및 수정

• ☕​Coffy 서비스에서는 HTML, CSS, Javascript 언어를 제공하며 작성한 코드의 결과물을 실시간으로 미리 볼 수 있도록 미리보기 기능을 지원합니다.

(3) 코드(템플릿) 리스트

• ☕Coffy 서비스에서 다른 유저들이 만든 코드들을 좌측 메뉴의 Code 탭을 누르시면 보실 수 있습니다.

(4) 게임으로 익히는 CSS 지식

• CSS 관련 지식들을 간단한 게임을 통해 재미있게 학습할 수 있습니다.
• ☕Coffy 서비스에서 제작한 게임의 CSS 테마는 flex, text, grid, transition이 있으며 추후 새로운 컨텐츠를 추가할 계획입니다.
• 해당 게임 서비스는 로그인을 해야 이용 가능하며 차례대로 해결해야 다음 문제를 풀 수 있습니다. 그리고 해결한 문제는 문제 버튼이 파란색으로 바뀌게 됩니다.

• 해결한 문제에 접속하면 상단에 Solved로, 해결하지 못한 문제는 Unsolved로 표시됩니다.
• 문제를 풀다가 헷갈리거나 어려운 경우 힌트보러가기 버튼을 누르면 해당 문제와 관련된 힌트를 보실 수 있습니다.

(5) 클랜 기능

• 관심사가 비슷한 사람들끼리 클랜을 이뤄서 지식을 공유할 수 있습니다.
• 클랜 기능도 로그인을 해야 이용 가능하며 유저당 클랜은 하나만 가입 가능합니다.

(6) MY PAGE > Dashboard

• 로그인 후 좌측 메뉴에서 Dashboard 탭을 클릭하면 내가 좋아요를 준 템플릿과 내가 만든 템플릿 리스트를 한 번에 볼 수 있습니다.
• 또한 작성일자순, 이름순, 인기순으로 템플릿을 정렬해서 볼 수 있습니다.

(7) Dark mode, White Mode

• 또한 ☕ Coffy 에서는 다크 모드와 화이트 모드를 지원해서 사용자 취향에 맞도록 서비스 테마를 바꿀 수 있습니다.
• 좌측 메뉴의 상단에 dark 또는 white 텍스트를 클릭하면 다크 모드와 화이트 모드로 바뀌는 모습을 보실 수 있습니다.

• 뿐만 아니라 코드 부분도 어두운 테마와 밝은 테마를 설정할 수 있습니다.
• 코드를 작성하거나 수정하는 페이지에서는 우측 상단에 Dark Theme 또는 White Theme 버튼을 클릭할 때마다 코드 form의 테마가 바뀌는 모습을 보실 수 있습니다.

(8) About Page

• 좌측 메뉴에서 About 탭을 누르면 ☕ Coffy 서비스에서 제공하는 컨텐츠의 간략한 설명과 서비스를 만든 SangleSangle팀의 간략한 프로필을 볼 수 있습니다.
• 서비스를 사용하시다가 궁금한 점이 있으시면 이 페이지에 있는 저희 팀 멤버들에게 문의해주세요!

6️⃣ etc

• 프로젝트와 관련된 기타 자세한 사항들은 notion에 기록되어 있습니다.
  • https://www.notion.so/sanglesangle