☕ 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 제공
• 로그인 시 Dashboard 에서 자신이 작성한 템플릿와 찜한 템플릿을 볼 수 있습니다.
• dark <-> white 기능으로 테마 색상을 변경할 수 있습니다.
• 하단의 Show More 버튼을 클릭하면 코드 목록 페이지로 이동해 더 많은 코드들을 볼 수 있습니다.

(2) 코드 작성

• Sidebar의 try it! 탭 클릭 시 이동할 수 있습니다.
• HTML, CSS, Javascript 언어를 사용해서 만든 템플릿을 실시간으로 미리 볼 수 있습니다.
• 저장 기능을 통해 자신이 작성한 코드를 보관할 수 있습니다.

(3) 코드 목록

• Sidebar의 Code 탭 클릭 시 이동할 수 있습니다.
• 다른 사람들이 공유한 코드를 볼 수 있습니다.
• 제목, 내용을 기반으로 검색이 가능하도록 구현하였습니다.

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

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

• 소개와 힌트를 제공하여 게임을 진행하는데에 도움을 주었습니다.

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

(5) 클랜 기능

• Sidebar의 Clan 탭 클릭 시 이동할 수 있습니다.
• 전체 클랜 목록을 제공하여 원하는 클랜에 지원할 수 있도록 하였습니다.

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

(6) Introduction

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

6️⃣ etc

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