https://github.com/Jam1eL1/6-studyforest-phytoncide-FS/pull/205

개발 리포트

1. 프로젝트 개요

'공부의 숲'은 사용자들이 스터디 습관을 관리하고 집중 시간을 기록할 수 있는 웹 애플리케이션입니다. 핵심 기능으로는 스터디 생성 및 관리, 습관 기록, 집중 시간 측정, 포인트 시스템 등이 있습니다. 사용자는 스터디를 생성하고, 습관을 등록하여 매일 체크하며, 집중 시간을 측정해 포인트를 획득하는 과정을 통해 학습 동기부여와 지속적인 관리가 가능합니다.

2. 담당한 작업

스터디 상세화면 구현 (이모지 부분 제외)

• 유저가 홈 화면에서 스터디 카드를 클릭하면, 스터디에 관련한 상세 화면을 보여줍니다. 스터디의 타이틀, 생성자 닉네임, 소개글, 스터디 포인트, 그리고 스터디와 연관된 습관 기록표 정보를 불러옵니다.
• 습관 기록표는 월요일부터 일요일까지 유저가 실천한 습관을 색상으로 표시하며, 이미 삭제한 습관이더라도 해당 주에는 기록을 보여줍니다(요구사항: "오늘의 습관을 종료할 경우, 오늘부터 습관이 종료되며, 이전 기록에는 영향을 주지 않습니다").

공유 비밀번호 검증 모달 구현

• 또한 스터디 상세 페이지에서는 '오늘의 습관' 페이지와 '오늘의 집중' 페이지로 연결, 그리고 스터디를 삭제, 공유, 수정할 수 있는 기능도 제공합니다.
  • 스터디 삭제, 수정하기, 오늘의 습관, 오늘의 집중 버튼을 눌렀을때 1차적으로 비밀번호 검증을 요구하는데, 이때 공통 컴포넌트로 비밀번호 검증 모달 생성하고 적용하여 유저가 스터디 생성시 입력했던 비밀번호와 일치할 경우에만 그다음 단계로 넘어갈수 있게 하였습니다.
  • 각 기능이 구현된 화면들을 토글하여 확인해보세요!

3. 기술적 성과

사용한 기술 스택:

• React.js를 사용한 컴포넌트 기반 UI 구현
• CSS Modules를 활용한 스타일링
• Axios를 이용한 RESTful API 통신
• LocalStorage를 활용한 최근 조회 스터디 저장
• 날짜 조작을 위한 Native JavaScript Date 객체 활용

주요 구현 기능: