수강신청알리미

수강신청알리미

과목 검색을 활용해 현재 빈자리 알림 및 경쟁률을 실시간으로 보여주어 학생들의 수강신청을 더욱 간편하고 정확하게 만들어준 서비스

수강신청알리미 서비스 보러가기

Skills

React.js
Styled-Component
Rest API
Amazon EC2 & S3

DESCRIPTION

프로젝트 수행 역할 수강신청알리미는 고려대학교 수강신청 사이트 서버의 데이터 사용을 정식으로 허가 받아 크롤링 해온 데이터를 기반으로 과목 검색을 활용해 현재 빈자리 알림 및 경쟁률을 실시간으로 보여주어 학생들의 수강신청을 더욱 간편하고 정확하게 만들어 주는 서비스입니다. 2020년 9월 2학기 ver1.0을 시작으로 2년 동안 ver4.0까지 오며 네 번 수강신청을 성공적으로 도왔습니다. 특히, 작년 9월 2학기부터는 고려대학교 커뮤니티 사이트 고파스와 함께 협업을 시작해 현재 고파스 사이트의 탭에 수강신청알리미 서비스가 제공되고 있습니다. 현재까지 누적 가입자는 9,617명, 방문수는 103,416회를 달성했습니다.

WHAT I DID

저는 작년 7월에 프론트엔드 개발자로 합류해 두 학기의 수강신청을 함께 했습니다. 특히, 이번 22년 3월 1학기에는 ‘전반적인 UI&UX 변경’, ‘즐겨찾기’, ‘과목명, 학수번호 빠른 복사’, ‘상태관리’ 기능 구현을 주도적으로 진행했습니다.

전반적인 UI&UX 변경을 진행할 때에는 전체적인 Layout과 main 화면, search 화면, 강의 card 등을 새로 만들었습니다. 모바일 환경 위주의 웹을 구현하고자 Layout을 강남언니의 앱 화면을 웹에서 봤을 때처럼 구현하고자 했고 특히, 스크롤 이벤트가 발생하는 위치를 Layout의 background 부분에서는 못하도록 막아 유저가 컨텐츠에 더욱 집중할 수 있도록 구현했습니다. search 화면은 각 카테고리별 (강의명, 교수명, 학수번호) 검색 목록 구체화했습니다. 이때에는 하나의 카테고리에 해당하는 검색 결과가 50건 정도가 넘어갔을 때 다음 카테고리에 대한 검색 결과를 확인하려면 스크롤을 많이 내려야 하는 문제점이 있었습니다. 이 문제점은 toggle 형식의 더보기 버튼을 추가해 최초 6건의 목록만 보여주고 검색 결과가 6건이 넘어갈 경우 더보기 버튼이 생기게 구현해 해결할 수 있었습니다. main 화면은 전체적으로 위에서부터 아래로 즐겨찾기, 공지사항, 수강신청알리미 스토리를 차례대로 큐레이션해서 보여주는데 단순히 위에서만 아래로 보여주는 것이 각 컨텐츠들이 강조되지 못하는 느낌이 들어 이 부분은 즐겨찾기의 컨텐츠와 수강신청알리미 스토리의 컨텐츠 스크롤 방향을 x로 바꾸어 유저들이 관심을 가질 수 있도록 유도했습니다.

이 외에도 이번 22년도 1학기 ver4.0에서 추가된 부분은 상태관리 라이브러리가 있습니다. 이전까지는 상태관리 라이브러리를 사용하지 않고 있었던 상황이었습니다. 하지만 강의 card에 있는 modal open button이 중복으로 눌렸을 경우 버그가 발생하는 문제가 생겼습니다. 이를 해결하기 위한 방법으로 modal이 열렸을 경우 뒷 배경을 선택하지 못하도록 처리를 해줄 수 있었지만 UX를 고려해 저희는 전역적으로 modal 상태를 관리해 modal이 열려 있으면 다른 modal을 띄우지 않는 방법을 사용하기로 했습니다. 결국, Context API를 사용해 전역상태에서의 modal 상태를 관리할 수 있게 되었습니다.

  • ContextAPI를 통한 상태관리 진행
  • main 화면 구성
    • notice, 즐겨찾기
    • query parameter를 활용한 searchBar 기능 구현
  • search 화면 구성
    • 각 카테고리별 (강의명, 교수명, 학수번호) 검색 목록 구체화
    • 더보기 버튼 구현(toggle 형식)
  • sign in & up 화면 구성
    • 유저 정보를 카테고리별 (이름, 학번, 전공, 부전공, 부전공별 학과 등) 구체화
  • 강의 card, 공지사항 card, detail page 제작

What else

  • React memoization을 통한 렌더링 최적화
  • Search page 무한스크롤
  • Search keywords 강조

© 2021. All rights reserved.

Powered by Hydejack v9.1.6