✨ 강의 계획서 개선 및 에브리타임 강의평 정보 연동

[nbsp1221]

#20 해당 이슈에서 논의되었던 강의 계획서에 에브리타임 강의평 정보를 연동하는 기능이 완성되었습니다. 원래는 기존의 기능이나 디자인에서 크게 변동 없이 에브리타임 강의평 정보만 그대로 추가하려고 했으나, 이를 기존의 코드에 이식하는 것이 거의 불가능에 가까운 것 같아서 React를 이용해서 강의 계획서를 새로 만들어 버렸습니다. 😂

변경 사항

사용자 기준

• 기존의 디자인보다 세련된 강의 계획서를 이용할 수 있습니다.
• 조회 결과에 에브리타임 강의평 정보가 연동됩니다. 기본적으로 평점, 과제, 조모임, 성적 정보를 확인할 수 있으며 🔗 이모지를 클릭할 경우 해당 강의의 에브리타임 강의평 페이지로 이동됩니다.
• 강의 계획서를 새로 만들었다 보니 버그가 발생할 수 있습니다. 이를 대비해 상단의 체크박스로 이전 버전의 강의 계획서도 이용할 수 있습니다.

개발자 기준

• React와 SCSS가 도입되었습니다. 이를 이용하면 복잡한 기능과 디자인을 훨씬 편하게 구현할 수 있습니다. (19fc07b)
• apis 폴더에 강의 계획서와 관련된 정보를 쉽게 가져올 수 있도록 API를 만들었습니다.
• 수집된 에브리타임 강의평 정보는 @klas-helper/data 패키지에서 import 문으로 쉽게 가져와 사용할 수 있습니다.
• scripts 폴더에 에브리타임 강의평 수집 스크립트가 있습니다. 크롬 브라우저의 콘솔 탭에서 해당 스크립트를 실행하면 에브리타임 강의평 정보가 JSON 형태의 데이터로 수집됩니다. 이 과정은 약 1시간 정도 소요됩니다. (be8649b)

개선할 점

• 수집된 에브리타임 강의평 정보가 약 3.5MB 정도로 매우 큽니다. PC에서 테스트했을 때에는 크게 체감되지는 않았으나 구형 PC나 모바일 기기에서는 성능 이슈가 발생할 가능성이 있습니다.
• 현재는 모든 페이지에서 에브리타임 강의평 정보를 로드하고 있습니다. 해당 데이터가 필요한 강의 계획서 페이지에서만 데이터를 로드하는 방식으로 성능을 개선할 수 있을 것 같습니다. (아직 방법을 찾지 못했습니다.)

스크린샷

Before

After

[mirusu400]

다크모드 적용했을 때 일부 글씨 / BackgroundColor 가시성이 좋지 않은 문제가 있는데 이부분은 dark.css를 수정해야 될듯 합니다.

이 외에는 전반적으로 좋아보입니다. 수고하셨습니다!

[nbsp1221]

리뷰 감사합니다! 다크테마를 생각하지 못했었네요. 일단 이 PR은 머지하고 추가적으로 작업해 보겠습니다