자격증 정보를 캘린더 형식으로 한 눈에 볼 수 있는 서비스. 일정 조회부터 관리까지!

소개 영상 유투브

개발환경: React.js, JavaSpring JPA, MySQL

🧙‍♂️만든사람들

럭키세븐 팀

이형창(팀장), 조성국(팀원), 김지영(팀원), 김혜민(팀원)

• Install and Usage

• 기획배경

• 기획

  • 와이어프레임
  • UI디자인
  • ERD

• 주요기능

• 기술스택

• 개발환경

  • Git flow 전략
  • 컨벤션

git clone을 한 후 Frontend와 Backend에서 아래와 같은 설정을 해주셔야 합니다.

$ yarn install
$ yarn start

• Spring IDE(ex. IntelliJ, sts, etc.)에 Backned 폴더를 프로젝트 Import.
• Gradle build

• 위의 문제로 사이트의 메인페이지인 자격증 캘린더를 통해 일정관리 및 상세 정보 확인을 가능하게 해준다.
• 사용자 중심의 UI 디자인으로 자격증 정보를 쉽게 확인하게 해준다.

🔗Figma에서 보기

• 아래와 같이 개발 전 화면 정의서(와이어프레임)을 만들어 봤습니다.

• 그 외 기타 페이지는 아래 실화면에서 확인 가능.

🔗ERDCloud에서 보기

• DB 구축을 위한 ERD도 짜 보았습니다.

🔗Google Spreadsheet 에서 보기

• 개발하기 앞서 개발할 기능 목록을 모두 정리하는 작업도 시행했습니다.

• 사용자 첫 화면은 홈페이지에 대한 설명과 로그인을 할 수 있는 페이지를 띄어줌.
  • 사용자 편의를 위한 홈페이지에 대한 설명
  • 첫 들어가기 페이지에서 바로 로그인 가능.

• 메인화면
  • 전체 자격증 일정 정보를 캘린더 형식으로 한눈에 확인 가능
  • 검색기능으로 원하는 자격증 조회 가능.

• 자격증에 대한 상세정보 조회 가능
  • 해당 자격증의 기본적인 정보(원서 접수일, 시험일 등) 조회 가능
  • 합격률 통계정보 조회 가능
  • 연령별 및 성별 지원자 수와 취득자 수 통계정보 조회 가능
  • 해당 자격증 즐겨찾기 가능.

• 자격증별 스터디 모집이나 정보 공유 등을 위한 게시판 구현
• 상단 탭 이동으로 편하게 게시판 분류 가능

• 자격증별로 채팅방을 구성해 해당 자격증에 대한 자유로운 이야기를 나눌 수 있게 구현

• Socket을 이용한 채팅기능과 채팅 정보 저장 및 관리 가능.

  • 채팅방

  

  • 채팅

• Frontend
  • React.js
  • Socket를 이용한 채팅
• Backend
  • JavaSpring JPA
• DB
  • MySQL

📓git flow 전략
📕git 컨벤션
🐘java 컨벤션 📌React 컨벤션

자격증닷컴.site