daseuls / we_record

🍦Team WE-RECORD

✅ 프로젝트 소개

• 프로젝트 개요: WE-RECORD 팀의 WERECORD 사이트 제작

• 프로젝트 기간: 2021.06.08~ 2021.07.01

🎯 기획 포인트

• 위코드의 수강생으로 생활하면서, 출석 관련 시스템의 부재로 생기는 불편함 개선을 목표로 함

• 멘토 및 학생이 실제로 사용할 수 있는, 출결 시스템을 목표로 하게 됨

• 수강생

  • 위코드 도착 후 시작 및 종료 시간 체크
  • 개인별 주간 시간 기록 및 누적 시간 기록 확인
  • 기수별 기록 및 속한 기수의 출결 상황 확인 가능

• 멘토(admin)

  • 기수별 정보 관리
  • 기수별 기록 및 출결 상황 확인 가능

🎯 프로젝트 목표

Frontend

• React function component, React Hooks 사용을 통한 컴포넌트 관리
• styled-component 사용을 통한 스타일링
• 관련 라이브러리 사용 경험 쌓기
• AWS 사용을 통한 사이트 배포

Backend

• django 사용을 통한 DB 관리
• AWS 사용을 통한 사이트 배포

공통

• 백엔드-프론트엔드 커뮤니케이션 및 통신으로 협업 경험 쌓기
• 배포 이후 bug fix 및 지속적인 유지 및 보수

👥 팀원 구성

• Frontend

  • 김수연 Github / 블로그
  • 이다슬 Github / 블로그
  • 전용민 Github / 블로그

• Backend

  • 양미화 Github / 블로그
  • 최대환 Github / 블로그
  
  

🎥 시연 영상

업로드 예정입니다.

👨‍💻 적용 기술

• Frontend: JavaScript, React, React-Router, React-hooks, styled-component, CRA
• Backend: Python, Django, MYSQL
• 공통 tool: Trello, Git & Github, Slack, AWS

🖊 주 구현 기능

• 랜딩 페이지, 소셜 로그인
• 메인 페이지
• 마이 페이지(수강생)
• 기수별 페이지
• 멘토(Admin) 페이지

💻 팀원별 상세 구현 기능

Frontend

• 공통: styled-component 사용하여 페이지, 컴포넌트 및 담당 페이지별 레이아웃 구현

김수연

• 디자인

  • Figma 사용하여 디자인 초안 구현(ver.1)

• 기수 페이지

  • fetch(GET)를 사용하여 수강생이 속한 기수별 시간 정보 표시 및 수강생 접속 현황 정보 표시
  • Slick 라이브러리를 사용하여 기수 멤버 목록 슬라이더 구현
  • 반응형 레이아웃 구현

• 마이 페이지

  • fetch(PATCH, DELETE)를 사용하여 수강생의 개인정보 수정 및 탈퇴 기능 구현

• 메인 페이지

  • day.js를 라이브러리를 사용하여 실시간 시간 정보 표시
  • fetch(POST, GET)을 사용하여 공부 시간 체크 기능 구현(start, restart, pause, stop)

• 공용 Modal 컴포넌트

  • 공용으로 사용할 Modal 컴포넌트 구현

이다슬

• 디자인

  • 기획 디자인 초안 수기 작성(ver.0)
  • 마이 페이지, 멘토 페이지, 기수 페이지 및 Modal 세부 디자인 구현

• 랜딩 페이지

  • 랜딩 페이지 구현 및 WERECORD 사이트 로고 제작

• 소셜 로그인 기능

  • 구글 소셜 로그인 API 사용으로 소셜 로그인 기능 및 WE-RECORD 사이트 전용 JWT 발행 기능 구현
  • 사이트 이용을 위한 추가 정보 입력 기능 구현

• 소셜 로그인 후 회원 추가 정보 입력 기능

  • user타입(멘토, 학생)에 대한 조건부 추가 입력 모달창 기능 및 페이지 이동 기능 구현

• 배포

  • AWS S3 및 git Action을 사용하여 자동배포

전용민

• 프로젝트 CRA 초기세팅

• Nav

  • 회원(학생, 멘토)별 버튼 조건부 렌더링 (학생: 마이페이지, 기수페이지, 메인페이지, 멘토: 멘토 페이지, 기수 페이지)
  • 반응형 레이아웃 구현

• 마이 페이지

  • fetch(GET)를 사용하여 수강생 개인별 시간 정보 표시
  • highchart.js 라이브러리 사용으로 해당 기수의 수강생별 주간 시간 기록 BarChart 구현, 전체 누적 시간 LineChart 구현
  • 반응형 레이아웃 구현

• 멘토(Admin) 페이지

  • path parameter를 사용하여 기수 페이지와의 동적 라우팅 기능 구현
  • 기수별 정보 목록 carousel 슬라이더 구현 (라이브러리 X)
  • fetch(PATCH, DELETE)를 사용하여 멘토 개인정보 수정 및 탈퇴 기능 구현
  • fetch(POST, PATCH, DELETE)를 사용하여 기수 정보 CRUD 기능 구현
  • 반응형 레이아웃 구현

• 공용 Button 컴포넌트

  • 공용으로 사용할 Button 컴포넌트 구현

    
    

Backend

양미화

• 프로젝트 초기 세팅

  • Django를 사용하여 프로젝트를 진행하기 위한 세팅

• 모델링

  • AQuery를 이용하여 프로젝트의 기획에 맞춘 모델링 완료

• 기록 확인

  • 사용자의 마지막 기록을 확인하여 출근과 퇴근이 모두 기록 되었는지 확인
  • 퇴근 기록을 놓쳤을 경우, 다음 접속 시에 퇴근 기록 가능

• 출근 & 퇴근 기록

  • 사용자가 특정한 아이피를 사용하고 있을 때에만 기록 가능하도록 설정
  • 퇴근 기록을 입력할 경우, 랜덤으로 명언을 전송

• 수강생 정보 전송

  • 토큰을 통해 사용자의 정보를 전달 받아 이용
  • 사용자의 타입이 멘토인 경우 접근 불가
  • 해당 사용자의 주간 기록, 총 누적 기록, 평균 출근 & 퇴근 시간, 그리고 >wecode D-day를 전송

• 기수 리스트 전송

  • 토큰을 통해 사용자의 정보를 전달 받아 이용
  • 사용자의 타입이 수강생인 경우 접근 불가
  • 접속 시간 기준, 출결 현황을 포함하여 전체 기수의 정보를 전송

• 기수 정보 전송

  • 토큰을 통해 사용자의 정보를 전달 받아 이용
  • 사용자가 수강생인 경우 해당 기수의 정보만 열람 가능
  • 사용자가 멘토인 경우 전체 기수의 정보 열람 가능
  • 접속일 기준, 전체 기수 중 누적 시간이 가장 높은 기수의 정보를 전송
  • 접속일 기준, 지난 주의 누적 시간이 높은 순으로 세 명의 수강생 정보를 전송
  • 해당 기수에 등록된 담임 멘토 & 수강생들의 프로필과 (접속 시간 기준) 수강생들의 출결 현황을 전송

• 기수 정보 관리

  • 새로운 기수 정보를 생성하거나 기존 기수 정보를 수정 또는 삭제 가능

• DB 관리

  • csv 파일을 이용하여 Local에서 데이터를 쌓고 확인한 뒤, sql 파일을 통해 AWS의 RDS를 관리

• 배포

  • EC2 인스턴스를 사용
  • Docker Image를 이용하여 배포

최대환

• 소셜로그인

  • 구글 소셜 로그인 API를 사용하여 로그인 기능 구현
  • 구글 이메일 주소 기준으로 멘토,수강생 구분
  • 엑세스 토큰 및 리프레시 토큰 기능 구현

• 회원정보수정

  • boto3을 활용하여 사진을 s3에저장
  • 사진 삭제나 수정시 s3파일도 함께 삭제(hard delete)
  • 회원탈퇴 기능 구현