/2024_BEOTKKOTTHON_TEAM_20_FE

📕스터디 백문백답, 큐터디(Qtudy) FE📕

Primary LanguageTypeScript

2024-Qtudy-BEOTKKOTTHON ✏️

logo-title-light

hits qtudy-backend qtudy-client

💭 기획 배경

사람들은 각기 자신의 방법으로 공부하고 기록합니다. 그러나 까먹었을 때가 아니고서는 손이 잘 안가는 경험 있지 않으신가요? 누군가 자신이 공부한 내용에 대해 질문해줄 수 있다면 얼마나 좋을까요. 또한 요즘 사람들의 관심 주제는 어떤 건지, 그 속에서 내가 배워갈 내용은 어떤 건지 함께 공유할 수 있다면 어떨까하는 마음에 시작한 아이디어입니다.

📚 Qtudy

스터디 백문백답, 복습 하셨나요?
사용자는 자신이 공부한 내용을 게시함으로 AI의 내용 요약과 퀴즈를 받아볼 수 있습니다. 사용자가 초기에 설정한 관심사를 기반으로 다른 사용자들의 공부 게시글들이 추천되며, 해당 글에 대해 퀴즈를 풀어보고 댓글로 의견을 나눌 수 있습니다. 또한 전체 게시글에 가장 많이 태깅된 단어를 분석해 트렌드 기반 퀴즈를 제공합니다. 스크랩 기능과 내가 푼 문제 조회 기능으로 공부 내용을 다시 볼 수 있도록 합니다.

🎯 Kakao ESG

esg


💻 화면 구성

[관심사 설정]

: 관심사에 따라 포스팅을 추천할 수 있도록 최초 로그인 시 관심사를 설정할 수 있습니다. 관심사는 최대 3개까지 선택이 가능합니다.

[메인 화면]

: 내가 선택한 관심사에 맞춘 포스팅을 볼 수 있고, 현재 가장 인기가 많은 Top3 트렌드에 대한 문제를 풀어볼 수 있습니다.

[전체 스터디 포스팅]

: 내가 관심사로 설정한 포스팅뿐만 아니라, 총 15개의 관심사에 대한 사람들의 포스팅을 요약된 내용으로 확인할 수 있으며, 스크랩이 가능합니다.

[스터디 포스팅 상세 조회]

: 작성한 글에 대해 큐디가 글을 요약해주고, 사람들과 의견을 나눌 수 있습니다. 또한, AI 퀴즈 풀러가기를 통해 해당 포스팅에 대한 문제 풀이가 가능합니다.

[AI 퀴즈]

: 생성할 퀴즈의 분야와 상세 주제를 선택하여 AI퀴즈를 생성합니다.

[AI 풀이]

: 게시글 또는 태그 기반으로 10개의 객관식 문제를 풉니다.

[AI 채점]

: 퀴즈에 대한 정답과 해설을 제공하고 점수를 확인할 수 있습니다.

[마이페이지]

: 관심사 및 프로필 수정, 나의 게시글, 나의 스크랩, 내가 푼 퀴즈 등을 조회할 수 있습니다.

🔗 개발 환경

Frontend

  • React
  • TypeScript
  • Axios

Backend

  • Java OpenJDK 17
  • SpringBoot 3.2.3
    • Spring Data JPA
    • Lombok
  • Gradle 8.6

Database

  • MySQL 8.0.35

UI/UX

  • Figma

tools

  • Github
  • Postman
  • Notion

🛠️ 서비스 아키텍쳐

architecture

🗃️ ERD

image

👩🏻‍💻 팀원

김다혜 김예서 명지우 은세윤 한채은 홍서영
Design Backend Frontend PM BE/Infra Frontend