공부의 숲

학습 습관 형성을 위한 스터디 관리 플랫폼

프로젝트 소개

• 본 프로젝트는 사용자의 학습 습관 형성과 집중력 향상을 돕기 위한 학습 관리 서비스입니다.
• 스터디를 생성하고, 습관을 기록하며, 집중 타이머를 통해 학습 시간을 측정하고 포인트를 획득할 수 있도록 설계되었습니다.

프로젝트 링크

• 

  공부의 숲

• 

  Frontend GitHub

• 

  Backend GitHub

기술 스택

주요 기능

• 스터디 생성·수정 및 공유 기능
• 스터디 목록 조회 및 검색·필터링 기능
• 집중 타이머 및 포인트 획득 시스템
• 최근 조회 스터디 저장 및 사용자 편의 기능 (다크모드, 이모지)

담당 기능

• 1. 검색·정렬 기반 스터디 목록 렌더링

  
  • -기본 select 대신 커스텀 Select UI를 구현하여 드롭다운 동작 원리를 이해하고, UI 제어 경험을 확장
  • -keyword와 sort 상태 기반 렌더링을 적용해 검색 및 정렬 시 즉각적인 UI 반응이 가능하도록 개선
  • -더보기 버튼 기반 페이지네이션을 적용해 대량 데이터를 단계적으로 로드하도록 구성하고 사용자 경험을 향상

• 2. 스터디 생성 기능 구현

  
  • -스터디 생성 폼 UI를 구현하고 입력값 상태를 관리하여 사용자가 스터디 정보를 등록할 수 있도록 구성
  • -필수 입력값에 대한 유효성 검사를 적용하고, 오류 발생 시 사용자에게 즉시 피드백을 제공
  • -useRef를 활용해 유효성 검사 실패 시 가장 먼저 오류가 발생한 input으로 포커스를 이동시켜 UX를 개선
  • -입력 완료 후 생성 요청을 처리하고, 성공 시 생성된 스터디 상세 또는 목록 화면으로 자연스럽게 이동하도록 구현

• 3. 스터디 수정 기능 구현

  
  • -기존 스터디 데이터를 수정 폼에 초기값으로 반영하여 사용자가 이전 내용을 확인한 뒤 수정할 수 있도록 구성
  • -입력값 상태를 관리하고 유효성 검사를 적용하여 잘못된 데이터가 수정 요청으로 전달되지 않도록 처리
  • -수정 완료 시 변경된 데이터가 화면에 반영되도록 처리하여 사용자 흐름을 자연스럽게 개선

• 4. 최근 조회 스터디 저장 기능 구현

  
  • -사용자가 스터디를 조회할 때 해당 정보를 LocalStorage에 저장하여 최근 조회 목록을 유지
  • -중복 조회 시 기존 데이터를 갱신하고, 최신 조회 순으로 정렬되도록 처리
  • -저장 개수를 제한하여 불필요한 데이터 누적을 방지하고 성능을 고려

기술적 성과

• 기본 select 대신 커스텀 Select UI를 구현하여 드롭다운 동작 원리를 이해하고 UI 제어 경험을 확장함
• keyword, sort 상태 기반 렌더링을 적용하여 검색 및 정렬 시 즉각적인 UI 반응이 가능하도록 개선함
• 더보기 버튼 기반 페이지네이션을 적용해 대량 데이터를 단계적으로 로드하도록 개선하여 사용자 경험을 향상시킴
• LocalStorage를 활용한 최근 조회 스터디 저장 기능을 구현하여 재방문 시 탐색 편의성을 높임
• useRef를 활용해 유효성 검사 실패 시 입력 포커스를 자동 이동시켜 UX를 개선함

회고

• 개인 일정과 프로젝트 일정이 충돌하는 상황에서 팀 전체 흐름을 고려해 작업 범위를 조정하고 사전에 공유함으로써 협업 리스크를 최소화하였다.
• 연쇄적인 오류 발생 시 PR 변경 이력을 기반으로 원인을 추적하여 문제를 해결하였으며, 이를 통해 기록 중심 협업의 중요성을 체감하였다.