🌟 문서 정리에 진심인팀

[팀 협업 문서 바로가기] (https://www.notion.so/2-1be5e940de598095a073da7e2f525e98?cookie_sync_completed=true)

👥 팀원 구성

이지수B [팀장]	김홍섭	이태빈	안세빈	임정빈	최민경	박민규

---

🚀 프로젝트 소개

공부의 숲

많은 사람들이 목표를 설정하고 꾸준한 습관을 만들고 싶어 하지만, 이를 지속하는 것은 쉽지 않습니다. 공부의 숲은 이러한 문제를 해결하기 위해 습관을 형성하고, 집중 시간에 따라 포인트를 지급하는 기능을 제공하는 서비스입니다.

주요 기능

• 습관 형성 및 관리
• 집중 시간에 따른 포인트 지급
• 스터디 그룹 활동 지원

프로젝트 기간

• 2025.03.21 ~ 2025.04.10

---

⚙ 기술 스택

Category	Tech Stack
Frontend
Backend
Deploy
Tool

---

🔨 팀원별 구현 기능 상세

🎉 이지수B

• 스터디 상세 조회

  • 스터디 목록 페이지에서 각 스터디를 클릭할 경우 스터디 상세 조회가 가능합니다.

  • 습관 기록표는 오늘의 습관에서 수정할 수 있습니다.

  • 습관 기록표에 일주일 단위로 유저가 완료하거나 완료하지 않은 습관을 불러와 완료된 경우에는 색깔 스티커로 표시합니다.

• 특정 스터디 삭제

  • 비밀번호를 입력하여 스터디 등록 시 입력했던 비밀번호와 일치할 경우, 스터디 삭제가 가능합니다.

• 공용 비밀번호 검증 모달 구현

  • 스터디 삭제, 수정, 오늘의 집중, 오늘의 습관 기능에서 공통으로 요구하는 비밀번호 검증 모달을 만듭니다.

👑 김홍섭

• 특정 스터디 수정

  • 비밀번호를 입력하여 스터디 등록 시 입력했던 비밀번호와 일치할 경우, 스터디 수정 폼으로 이동하며, 스터디 상세정보를 수정할 수 있습니다.

• 응원 이모지 추가

  • 스터디 상세 페이지를 조회할 때 스터디에 저장된 응원 이모지를 불러오고, 이모지를 추가로 남기거나 삭제할 수 있습니다.

🏆 이태빈

• 오늘의 집중 시작
  • 타이머로 공부 시간을 설정하고, 시작 버튼을 클릭해 오늘의 집중 시작이 가능합니다.
• 오늘의 집중 완료
  • 설정한 공부시간이 종료되면, 집중이 완료됩니다.
  • 집중 성공 시 기본 3포인트를 획득하고, 설정한 공부시간 10분당 추가 1포인트를 받습니다.

🔮 안세빈

• 오늘의 습관 조회
  • 비밀번호를 입력하여 스터디 등록 시 입력했던 비밀번호와 일치할 경우, 오늘의 습관 조회가 가능합니다.
  • 현재 시간, 오늘의 습관 목록이 조회됩니다.
  • 오늘의 집중 및 홈 버튼을 통해 오늘의 집중 페이지 및 스터디 홈으로 나갈 수 있습니다.
• 오늘의 습관 생성
  • 매일 반복될 습관을 설정합니다.

🎯 임정빈

• 스터디 생성
  • 닉네임, 스터디 이름, 스터디에 대한 간단한 소개, 배경 선택, 비밀번호 및 비밀번호 확인을 입력하여 스터디를 생성합니다.
• 오늘의 집중 조회
  • 비밀번호를 입력하여 스터디 등록 시 입력했던 비밀번호와 일치할 경우, 오늘의 집중 페이지 접근이 가능합니다.
  • 현재까지 획득한 포인트 조회, 타이머 조작이 가능합니다.

✨ 최민경

• 오늘의 습관 수정

  • 오늘의 습관 이름을 수정할 경우, 이전에 연관된 모든 습관의 이름이 변경됩니다.
  • 오늘의 습관을 종료할 경우, 오늘부터 습관이 종료되며, 이전 기록에는 영향을 주지 않습니다.
  • 새로운 습관 추가할 경우, 오늘부터 새로운 습관이 추가되며, 이전 날짜의 스터디 상세 조회에서는 표시되지 않습니다.

• 오늘의 습관 체크

  • 지킨 습관을 체크하거나 해제할 수 있습니다. 체크 여부는 매일 초기화됩니다.
  • 체크한 습관은 스터디 상세 페이지의 습관 기록표에 기록됩니다. 습관 기록표에서는 일주일 단위로 습관 기록을 조회회할수 있습니다.

💎 박민규

🔧 구현한 주요 기능

📐 전체 레이아웃 구성 및 반응형 디자인

• TailwindCSS 기반으로 레이아웃을 유연하게 구성
• 모바일, 태블릿, 데스크탑 해상도에 맞춘 반응형 디자인 적용

🧱 공통 레이아웃 컴포넌트 구현

• 공통 Header 및 Footer 컴포넌트 설계 및 적용
• 라우팅 경로에 따라 메뉴 및 스타일 동적 제어

📚 스터디 목록 조회 기능

• 전체 스터디 리스트 API 연동 및 렌더링
• 페이지네이션 기능 추가
• 검색 및 정렬 기능 제공:
  • 🔍 키워드 기반 검색
  • 🔼🔽 포인트 순 정렬 (오름차순 / 내림차순)
  • 🕒 최신 순 / 오래된 순 정렬

🕵️‍♂️ 최근 본 스터디 표시

• LocalStorage를 활용하여 사용자가 최근에 조회한 스터디 정보를 저장
• 홈 화면 또는 별도 섹션에서 최근 본 스터디를 시각적으로 제공

---

💡 UX 개선 사항

⏳ ClipLoader 기반 로딩 바 적용

• isLoading 상태를 활용하여 데이터 로딩 시 로딩 스피너(ClipLoader) 표시
• 사용자 피드백 강화를 통한 UX 향상

🎨 인터랙션 요소 강화

• 디자인 시안에는 없지만 카드 hover 시 y값 이동 애니메이션 추가로 역동성 강화
• 모바일 환경에서는 터치 시 카드 배경 opacity 변경으로 명확한 피드백 제공

🚀 Prisma Raw Query를 활용한 검색 최적화

• 기존 .findMany 대신 Prisma.rawQuery를 활용하여 SQL 수준의 검색 로직 구현
• 불필요한 데이터 로딩 최소화로 성능 최적화
• 공백값 입력시 조회가 잘 안되는 문제 해결

---

📁 파일 구조

Front-end

frontend/
├── src/
│   ├── api/            # API 호출 관련 함수
│   ├── components/     # 재사용 가능한 컴포넌트
│   ├── contexts/       # React Context API 관련 파일
│   ├── hooks/          # 커스텀 훅
│   ├── layout/         # 레이아웃 관련 컴포넌트
│   ├── pages/          # 페이지 컴포넌트
│   ├── styles/         # 스타일 파일
│   ├── utils/          # 유틸리티 함수
│   ├── App.jsx         # 메인 앱 컴포넌트
│   └── main.jsx        # 앱 진입점
├── public/             # 정적 파일
│   ├── font/           # 폰트 파일
│   ├── images/         # 이미지 파일
│   └── _redirects      # Netlify 리다이렉트 설정
├── index.html          # HTML 템플릿
├── vite.config.js      # Vite 설정
├── eslint.config.js    # ESLint 설정
├── package.json        # 프로젝트 설정 및 의존성
└── README.md           # 프로젝트 설명서

Back-end

backend/
├── src/
│   ├── app.js              # 앱 진입점
│   ├── db/                 # 데이터베이스 관련 파일
│   │   └── prisma/         # Prisma ORM 설정 및 마이그레이션
│   │       ├── client.prisma.js    # Prisma 클라이언트
│   │       ├── migrations/         # 데이터베이스 마이그레이션 파일
│   │       └── schema.prisma       # Prisma 스키마 정의
│   ├── middlewares/        # 미들웨어
│   │   └── errorHandler.module.js  # 에러 처리 미들웨어
│   └── modules/            # 기능별 모듈
│       ├── healthCheck.module.js   # 헬스 체크 모듈
│       ├── index.module.js         # 모듈 인덱스
│       └── route/                  # 라우트 모듈
│           ├── focus.module.js     # 집중 관련 라우트
│           ├── habits.module.js    # 습관 관련 라우트
│           └── studies.module.js   # 스터디 관련 라우트
├── package.json            # 프로젝트 설정 및 의존성
├── package-lock.json       # 의존성 잠금 파일
└── README.md               # 프로젝트 설명서

---

구현 홈페이지

(https://6-studyforest-phytoncide-fs.netlify.app/)

---

프로젝트 회고록