🥕 팀명 : Default

Please visit our Notion page

👀 서비스 소개

• 서비스명:
  • Vscode 테마 추천 서비스
• 서비스설명:
  • 사용자가 선호하는 컬러와 이미지를 입력 받아 해당 컬러 및 이미지 내부 컬러와 유사한 컬러를 가지는 Vscode 테마 추천 서비스

📅 프로젝트 기간

• 2022.08.16 ~ 2022.09.07 (3주)

⭐ 주요 기능

🎥 시연 영상

⭐색상 기반 테마 추천

• 유저는 메인페이지에서 Color Select 버튼을 통해 색상 선택 화면으로 이동할 수 있음.
• 색상 선택 페이지에서 5개의 선호 컬러 및 자신의 주 사용 언어를 선택하고 버튼을 클릭하면 해당 색상과 유사한 색상을 가진 테마 8개를 추천 받을 수 있음
• 추천 받은 페이지에서 테마 이름을 클릭하면 테마 상세보기 페이지로 이동함

색상 기반 테마 추천 알고리즘 상세 설명

⭐이미지 기반 테마 추천

• 유저는 메인페이지에서 Select image 버튼을 통해 로컬에 저장된 자신이 좋아하는 이미지를 선택할 수 있음.
• 이미지 선택 후 자신의 주 사용 언어를 선택하고 버튼을 클릭하면 이미지 내부에 주요 색상 5종과 유사한 색상을 가진 테마 8개를 추천 받을 수 있음.
• 추천 받은 페이지에서 테마 이름을 클릭하면 테마 상세보기 페이지로 이동함.

이미지 기반 테마 추천 알고리즘 상세 설명

로그인, 로그아웃

• 사용자가 가입한 아이디와 비밀변호를 정확히 입력하면 로그인 할 수 있음
• 가입하지 않은 아이디 입력 혹은 비밀번호를 정확히 입력하지 않을 시 경고 창을 띄우며 입력란을 초기화함
• 카카오 API를 이용하여 간편 로그인 기능 구현
• 카카오로 간편 로그인한 회원은 자동으로 회원 가입됨
• 로그인한 회원의 회원 정보는 세션에 저장되어 유지되며 로그아웃 버튼을 클릭시 세션을 초기화하며 로그아웃 됨

회원가입

• 사용자는 아이디, 패스워드, 닉네임을 입력하면 회원가입 할 수 있음
• 이미 가입된 아이디, 패스워드와 패스워드 확인이 일치하게 입력하지 않을 시 혹은 입력 값 중 하나라도 공백을 입력한다면 각각 알림창을 띄워 사용자의 올바른 입력을 유도함

커뮤니티 게시판

• 커뮤니티 게시판은 인기글 게시판, 언어별(Python, Java, Html...) 게시판으로 구분됨
• 인기글 게시판은 전체 게시글을 조회수별로 정렬하여 보여줌, 언어별 게시판은 해당 카테고리별 게시글을 시간순으로 정렬하여 보여줌
• 게시판에서 게시글 제목을 클릭하면 게시글 상세보기 페이지로 이동하며 게시글에 좋아요를 누를 수 있음
• 로그인한 회원은 글 쓰기 및 자신이 쓴 글에 대한 수정, 삭제 권한을 가짐.
• 로그인한 회원은 댓글 쓰기 및 자신이 쓴 댓글에 대한 삭제 권한을 가짐.
• 게시판은 한번에 최대 20개의 게시글을 볼 수 있으며 더 많은 게시글을 보기 위해서는 페이지를 통해 이동해야함
• 유저는 한 화면상에서 최대 5개의 페이지를 클릭할 수 있고, 버튼을 통해 한번에 +-5페이지를 이동할 수 있음

테마 게시판

• 테마 게시판은 Vscode에서 제공하는 테마 플러그인 설치시 적용할 수 있는 테마들을 테마 이름으로 구분된 형태로 확인할 수 있음.
• 테마 게시판에서 테마 이름을 클릭시 테마 상세보기 페이지로 이동함.
• 테마 상세보기 페이지는 기본적으로 테마 제작자, 테마 설치 횟수 유저들의 좋아요 개수등을 확인 할 수 있음
• 테마 상세보기 페이지에서 유저는 언어별, 폰트별 다른 테마 적용화면을 확인할 수 있음
• 테마 상세보기 페이지에서 유저는 좋아요 버튼을 통해 테마에 좋아요를 누를 수 있으며 이미 한번 좋아요한 테마에 좋아요를 클릭시 좋아요 취소됨.
• 테마 상세보기 페이지에서 유저는 인스톨 버튼을 통해 테마 설치 페이지로 이동할 수 있음.
• 테마 게시판은 한번에 최대 16개의 게시글을 볼 수 있으며 더 많은 게시글을 보기 위해서는 페이지를 통해 이동해야함
• 유저는 한 화면상에서 최대 5개의 페이지를 클릭할 수 있고, 버튼을 통해 한번에 +-5페이지를 이동할 수 있음.

마이 페이지

• 로그인한 사용자는 헤더의 메뉴를 통해 마이 페이지로 이동할 수 있음.
• 회원가입을 통해 가입한 회원은 마이페이지에서 닉네임과 패스워드를 수정할 수 있으며 회원 탈퇴 할 수 있음. 카카오 로그인한 회원은 마이페이지에서 회원 탈퇴만 가능함.
• 회원은 마이페이지 좌측 버튼을 통해 자신이 좋아요한 테마 및 작성한 게시글을 볼 수 있음.
• 좋아요한 테마는 한번에 최대 4개의 테마를 보여주며 더 많은 테마에 좋아요를 했을 시 하단의 버튼을 누르면 더 많은 테마를 확인 할 수 있으며 테마명을 클릭하면 테마 상세보기 페이지로 이동함
• 작성한 게시글은 제목, 작성일자, 조회수, 좋아요 수 등의 간략한 정보를 확인 할 수 있으며, 제목을 클릭시 상세보기 페이지로 이동함

테마 검색 기능

• 사용자는 메인페이지의 검색란에서 키워드를 통해 해당 키워드를 가진 테마를 검색 할 수 있음.
• 해당 키워드를 가진 테마가 있다면 최대 8종류가 보여지고 테마명을 클릭하면 테마 상세보기 페이지로 이동할 수 있음

익스텐션

• 사용자는 메인페이지 하단에서 Vscode의 유용한 익스텐션 정보를 확인 할 수 있음.
• 익스텐션 아이콘을 클릭 시 설치 페이지로 이동함

관리자 페이지

• 관리자 아이디로 로그인 시 헤더에서 관리자 페이지로 이동할 수 있음.
• 관리자는 모든 유저에 대한 삭제 권한을 가지며 유저 삭제를 할 수 있음.

⛏ 기술스택

구분	내용
사용언어
프론트앤드
백앤드
서버환경
개발도구
데이터베이스
라이브러리
협업도구

📌 시스템 아키텍처(구조) 예시

📌 서비스 흐름도

📌 E-R Diagram

👨‍👩‍👦‍👦 팀원 역할

정충근	안지수	강성훈	양서현	김은지	김화영
• 기능개발 총괄	• 화면개발 총괄	• DB설계 및 관리	• 화면개발 서브 • 기능개발 서브	• 화면개발 서브 • 기능개발 서브	• 화면개발 서브 • 기능개발 서브
github	github	github	github	github	github