Figma : https://www.figma.com/design/uXhSyx6tDu0p9uwUZkNN5g/2024-2-%EC%B0%BD%EC%9D%98%ED%95%99%EA%B8%B0%EC%A0%9C?node-id=97-307&p=f&t=QQ8bKz7UzOnhQVGd-0

Link : https://github.com/2024-2-Sejong

[프로젝트 소개]

보고서, 발표 링크 : http://classic.sejong.ac.kr/classic/creative/report-board.do?mode=view&articleNo=1114&article.offset=24&articleLimit=12

• Python을 이용해 크롤링한 백준사이트의 문제들을 바탕으로 AI가 사용자 맞춤으로 문제를 추천해주는 서비스
• 초기 로그인시 사용자가 느끼는 카테고리별 체감 난이도를 받은 후 해당값을 입력으로 사용해 AI서버에 전달해주면 그 내용을 바탕으로 추천 문제가 return으로 온다. return값을 통해 사용자별 추천문제를 사이트에 띄워준다.

[사용 기술]

• React, TypeScript , vite
• axios, styled-component, framer-motion, react-router, tanstack query, react-hook-form, react-helmet-async

[역할]

• 프론트엔드 개발
• UI
  1. 디자이너와 같이 제작한 Wireframe, UI를 바탕으로 전체 레이아웃 제작
• 기능
  1. axios를 이용한 api통신
  2. ChartJS를 이용한 스터디룸의 통계 시각화 https://github.com/2024-2-Sejong/sejong-frontend/commit/726d2aff29c7a8b82163e51629f604356ff5b193#diff-7ff7154900ea5cc3297a2f7a3b650d000acd6cb338dc60a134dd9d4a0a06dc77
  3. useRef, forwardRef, dialog를 이용한 Modal 직접 구현 https://github.com/2024-2-Sejong/sejong-frontend/commit/bd2e1f779efbbeb6961ed7c888be8e285a5f1ad7
  4. 초기 로그인시 사용자에게 설문조사를 받는 로직, UI animation 구현

[배운점]

• 디자이너와 함께 wireframe을 제작하면서 ,사용자 흐름을 고려하며 사용자 입장에서 편리한 UI 설계가 중요하다는 것을 깨달았다. 이를 바탕으로 의견교환 후 wireframe을 제작할 수 있었다.