거미손

클라이밍계의 Solved.ac

목차

• 프로젝트 개요
• 프로젝트 소개
• 주요기능
• 기술스택
• 역할
• 문서
  

프로젝트 개요

진행 기간

2021.08.30 ~ 2021.10.08

목표

• 각기 다른 클라이밍장의 레벨을 통합
• 사용자의 실력을 우리만의 레벨로 표시 및 랭킹 확인
• 문제 풀이 영상 확인

🎬유튜브 영상

📑개발 노션

🖥거미손 이용하기

• PC/모바일(모바일 메인)

프로젝트 소개

거미손은 클라이밍장들의 서로 다른 레벨 1가지 기준으로 통합합니다. 또한 사용자 랭킹을 확인할 수 있습니다.

클라이밍이란?

클라이밍은 손과 발만을 이용해 벽을 따라 이동하는 스포츠입니다.

홀드


레벨

• 홀드란?

  • 암벽을 등반하기 위해 발로 밟거나 손으로 잡는 돌 (검정 홀드)

• 레벨이란?

  • 색상 테이프를 이용해서 난이도를 표시 (핑크 레벨)

• 문제란?

  • 등반 시 사용할 수 있는 홀드의 집합 (검정 홀드 핑크 레벨 문제 등반 중)
  • 검은색 문제를 풀 때는 검은색 홀드만 사용가능

문제점

• 클라이밍장마다 난이도를 표시하는 색상의 종류, 순서가 달라서 난이도를 한 눈에 파악하기 어렵습니다.

출처: https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=pdongsoo&logNo=221907551709

기대효과

• 각기 다른 클라이밍장의 레벨을 통합하고 우리만의 레벨로 표시함으로써 가보지 않은 클라이밍장의 난이도 쉽게 알 수 있습니다.
• 사용자의 실력을 우리만의 레벨로 표시하고 랭킹을 확인할 수 있어 경쟁심을 유발하여 더욱 재미있게 다른 클라이머들과 클라이밍을 즐길 수 있습니다.
• 정답 영상을 손쉽게 찾을 수 있도록 다른 사람들의 클라이밍 문제 풀이 영상 확인이 가능합니다.

티어

• 거미손 서비스만의 레벨
• Bronze < Silver < Gold < Platinum < Diamond < Master
• 4 < 3 < 2 < 1

기술 스택

Front-end

• HTML5, CSS3, JS(ES6)
• Bootstrap4
• Vue.js 2.6.12, Vuex 3.5.1
• Visual Studio Code

Back-end

• Java 1.8
• Spring Boot 2.5.4, Spring MVC, Spring Data JPA
• JPA, Hibernate, JPQL, QueryDSL
• Redis 6.2.5
• Gradle 7.1.1
• MySQL 8.0
• Intellij, Eclipse STS

DevOps

• AWS EC2
• Nginx
• Jenkins

Collaboration

• Jira
• Git, Gitlab, Sourcetree, GithubDesktop
• Mattermost
• Notion

설치 및 실행

1. 깃 레포지토리 클론

   git clone [주소]

2. frontend 폴더로 이동 후 node_modules 설치

   npm i

3. 프론트의 index.js에서 백엔드 주소 변경

4. 백의 application.yml에서 spring.datasource.url 및 redis host 변경

5. frontend backend/gumison에서 실행

   npm run serve
   ./gradlew clean bootJar

역할

이현정(BE, FE)

• 사용자 검색
• 클라이밍장 검색

김민기(BE, FE)

• 전체랭킹
• 특정 사용자 랭킹
• 경험치
• Redis

김민지(BE, FE)

• 로그인
• 마이페이지
• JWT

김용훈(BE, FE)

• 사용자 정보 조회
• 해결한 문제 목록 조회
• Jenkins

손동우(BE, FE)

• 해결한 문제 등록
• 문제의 레벨 변경 기여
• Hadoop

문서

DB ERD

ERD Cloud

디렉토리 구조

Front-End

Back-End

배포 방법

배포문서

컨벤션

컨벤션문서

Persona/Scenario

Notion

Flowhart

Miro

Wireframe

Figma

기술명세서

Google Sheet

API 명세서

Google Sheet