에타의 강의평 + SNUTT + 서울대학교 수강신청 사이트가 한자리에 모였다!

• 구글로 간편 로그인 가능
  • 로그아웃 되어도 빠르고 간편한 로그인
• 에타 이동 불필요
  • 바로 확인 가능한 강의평과 별점
  • 강의평 및 댓글의 익명성 보장
• 예비 시간표를 3안까지 간단하게 저장
  • 이후 한 예비 시간표에 담긴 강의들을 SNUTT에서 옮길 필요 없이 버튼 하나로 장바구니 신청 완료
• 많은 사람들을 절망케 한 수강신청 되었습니다. 장바구니로 이동하시겠습니까? 삭제
  • 잘못 누를 걱정 없이 수강 신청 가능

그 어느 때보다도 편리한 수강신청으로 올클을 기원합니다!

👀 프로젝트 소개

서울대학교 수강신청 사이트 클론 서비스🛒

본 프로젝트는 서울대학교 수강신청을 위해 만들어진 사이트이며, 본 사이트 내에서 예비 시간표를 직접 짜볼 수 있고, 각 강좌에 대한 평가를 함께 볼 수 있어 수강신청에 더욱 용이합니다.

접속 URL: https://d2n9ad2o4ulumj.cloudfront.net

🧑‍🤝‍🧑 팀원 소개

역할	이름	github
프론트엔드	송채미	[chamcham02 ] (https://github.com/chamcham02)
프론트엔드	전윤경	[cyk0315] (https://github.com/cyk0315)
프론트엔드	최서영	[chlsy07] (https://github.com/chlsy07))
백엔드	김유신	[catnip033] (https://github.com/catnip033)
백엔드(팀장)	노현서	[serverrepairman] (https://github.com/serverrepairman)
백엔드	황명빈	[bean1009] (https://github.com/bean1009)

📚 기술 스택

프론트엔드: react

백엔드: django

💻 프로젝트 뷰

• 메인

  • 수강신청 매뉴얼을 다운받을 수 있습니다.

• 회원가입 및 로그인

  • snu 메일만 회원가입이 가능합니다.
  • 소셜 로그인 기능으로 간편하게 회원가입이 가능합니다.
  • 10분간 활동이 없을 시 자동으로 로그아웃됩니다 하단의 버튼을 눌러 연장할 수 있습니다.

• 마이페이지

  • 이름, 이메일, 소속 대학, 소속 학과, 학번, 입학년도, 이수 과정, 학년 정보를 확인할 수 있습니다.

• 강좌 검색

  • 단어 검색, 학년, 개설학과, 교과구분, 제외 검색어를 설정할 수 있는 상세 검색 기능 제공을 제공합니다.

• 강좌 상세정보

  • 교과 구분, 학년, 강좌 정보 등 강좌 상세정보를 확인 가능합니다.

• 관심강좌

  • 강좌검색을 통해 강의를 관심강좌에 저장할 수 있습니다.

• 예비 시간표

  • 예비 시간표 1, 2, 3안을 미리 구성하여 볼 수 있습니다. 1, 2, 3안 중 원하는 예비 시간표를 장바구니로 일괄 저장 가능합니다.
  • 장바구니와 동일하게 신청 가능 학점(21)까지만 담을 수 있으며 같은 강좌나 같은 시간대의 강의는 중복 수강이 불가능합니다.

• 장바구니

  • 강좌 목록, 관심 강좌, 예비 시간표에서 장바구니에 강좌를 추가하는 것이 가능합니다.
  • 위 기능은 장바구니 기간에만 작동합니다.

• 수강신청

  • 장바구니 확정 기간 이후 장바구니 보류 강좌, 관심 강좌, 교과목 검색을 통해 수강 신청 가능합니다. 정원보다 장바구니 인원이 적은 강좌는 자동으로 수강 신청 내역으로 이동합니다.

• 수강평, 댓글

  • 강좌에 별점과 수강평을 입력하고 그에 대한 댓글을 달 수 있습니다. 글쓴이는 익명으로 처리됩니다.
  • 수강생이 매긴 별점(5점 만점)에 따른 강의평가는 강좌 상세정보에서 확인 가능합니다.

🛠 개발 과정

• CORS 오류

  • 백엔드에서 django를 배포하지 않고 python manage.py runserver 로 테스트 서버를 실행하여 프론트와의 연동에서 CORS 오류가 발생하였습니다.
  • gunicorn과 nginx를 이용하여 백엔드 서버를 배포하고 https 인증을 적용함으로써 문제를 해결하였습니다.

• 관심강좌, 장바구니, 수강신청

  • 백엔드에서, 한 사용자가 한 강좌를 관심강좌에도, 장바구니에도, 수강신청내역에도 담을 수 있게 만들어야 했습니다.
  • 사용자와 강좌 간의 ManyToMany 관계인 관심강좌, 장바구니, 수강신청 사이의 상태 변화 관리를 설계하는 것이 핵심이었습니다.
  • 관심강좌, 장바구니, 수강신청의 세 분류를 모두 표현할 수 있는 ManyToMany 관계의 through 모델을 설계하였습니다.
  • view를 제작할 때 SOLID 원칙을 따라 관심강좌, 장바구니, 수강신청이 내부적으로 동일한 방식으로 처리되도록 구현하였습니다.
  • 이는 이후 예비 시간표 1, 2, 3안을 저장하는 기능을 만들 때에 큰 도움이 되었고, 결과적으로 예비 시간표 개수가 유동적으로 바뀌더라도 대처할 수 있는 유연한 api를 만드는 데에 성공했습니다.
  • 장바구니, 수강신청에 강의 시간이 서로 겹치는 시간이 있는 강좌는 수강이 불가능해야 했기에, timeinfo가 들어있는 테이블을 새로 정의했습니다.

• 수강신청 기간 변경

  • 수강 신청 기간을 pre-semester, cart, cart-confirmation, registration, semester 5구간으로 나누고 state를 데이터베이스에 저장한 뒤 기간에 따라 permission을 제한하여 사용할 수 있는 기능을 구분하였습니다.
  • custom command(changeperiod, resetperiod)와 crontab을 이용하여 서버의 state가 일정에 맞추어 자동으로 변경될 수 있도록 하였습니다.

• 강좌 제한

  • 예비 시간표, 장바구니에 강좌를 담을 때 시간대가 겹치거나 동일한 강좌인(강좌번호만 다른 경우도 포함) 경우, 신청 가능 학점 수(21)를 초과하는 경우 강좌를 더 이상 추가할 수 없도록 제한하였습니다.

• 프론트엔드 개발 과정

  • BrowseRouter를 사용하면 페이지 새로고침 시 s3에서 경로를 찾지 못해 오류가 발생하여 HashRouter를 사용하여 해결하였습니다.
  • 기존의 디자인이 없어 새로 디자인을 해야했어 어려움이 있었습니다.
  • 글작성자가 본인인지 확인하고 맞을시에는 수정과 삭제가 가능해야 하였습니다.
  • 글작성자의 정보를 받아서 작성자가 이름 혹은 익명으로 나타나고 수정 삭제버튼이 조건에 따라 나타나게 하였습니다.