Notion: 프로젝트 노션 링크
PPT: 프로젝트 발표 자료
스터디움 Studium은 공통의 목표를 설정하고,
구성원과 함께 꾸준히 학습할 수 있도록 돕는 🎯 목표 기반 스터디 관리 플랫폼입니다!
출석 체크, 목표 달성, 리워드 시스템, 서바이벌 스터디 등을 통해
스터디의 몰입도와 지속성을 높이는 데 중점을 둡니다.
 |
 |
 |
|
|---|---|---|---|
 |
 |
 |
 |
| 이재건 | 강하영 | 구민지 | 김보민 |
| 리워드 상점, 마이 페이지 | 회원가입, 로그인(소셜 계정) | 스터디 목록, 소개, 홀(관리) | 메인 페이지, 서바이벌 스터디 |
| 로그아웃 및 UI 로딩 처리 | 스터디 생성/수정, 실시간 알림 구현 | 검색 및 무한 스크롤 구현 | 서바이벌 퀴즈 및 웹소켓 채팅 구현 |
프로젝트 개발 기간: 2025.06.27 - 2025.08.04 (30일)
Next.js + TypeScript: 프로젝트 환경
Zustand: 전역 상태 설정
Tanstack + Axios: 데이터 연결
Tailwind CSS: 스타일
{
"semi": true,
"singleQuote": false,
"tabWidth": 4,
"useTabs": false,
"plugins": ["prettier-plugin-tailwindcss"]
}| 태그 | 설명 |
|---|---|
Init |
초기 설정 |
Feat |
새로운 기능 추가 |
Zap |
기능 수정 |
Fix |
버그 수정 |
Docs |
문서 수정 |
Style |
코드 formatting, 세미콜론 누락 등 코드 동작에 영향 없는 경우 |
Refactor |
코드 리팩토링 (기능 변화 없이 구조 개선) |
Test |
테스트 코드 추가 또는 리팩토링 |
Chore |
패키지 매니저 수정, 기타 설정 파일 변경 (예: .gitignore) |
Design |
CSS 등 사용자 UI 디자인 변경 |
Comment |
주석 추가 및 변경 |
Rename |
파일 또는 폴더의 이름 변경/이동만 있는 경우 |
Remove |
파일 삭제만 수행된 경우 |
!BREAKING CHANGE |
커다란 API 변경 (기존 기능과 호환되지 않을 수 있음) |
!HOTFIX |
급하게 치명적인 버그 수정 |
- Feat: 로그인 API 연결
- Fix: 잘못된 날짜 형식 문제 해결
브랜치
main: 배포 전용 브랜치, 항상 안정적인 상태 유지dev: 개발 통합 브랜치, 기능 완성 후 merge기능명: 기능 단위 작업 브랜치, 기능마다 분기해서 작업 진행
디렉토리 구조
📂 FiveCoders
├── 📂 public # 아이콘, 이미지 모음
│ ├── 📂 icons
│ ├── 📂 images
│ └── 📄 favicon.ico # 사이트 아이콘
├── 📂 src
│ ├── 📂 api # API 관련 로직
│ ├── 📂 app # Next.js App 라우팅
│ │ ├── 📄 page.tsx
│ │ ├── 📄 layout.tsx
│ │ └── 📄 not-found.tsx
│ ├── 📂 assets # 이미지, 폰트 등 정적 리소스
│ │ └── 📂 fonts
│ ├── 📂 components # 재사용 가능한 컴포넌트
│ │ ├── 📂 common # 전역적으로 사용되는 컴포넌트
│ │ └── 📂 기능별 폴더
│ ├── 📂 css # 전역 스타일 모음
│ ├── 📂 hooks # 기능을 재사용하기 위한 훅 파일
│ ├── 📂 providers # 쿼리 클라이언트 주입
│ ├── 📂 stores # 전역 상태 관리 파일
│ ├── 📂 types # 타입스크립트 타입 정의
│ └── 📂 utils # 유틸리티 파일(함수)
├── 📄 next.config.ts # 외부 이미지 허용 설정
├── 📄 package.json # 프로젝트 종속성 및 설정 파일
└── 📄 tsconfig.json # 타입스크립트 설정 파일
| 메인 화면 | 블랙 테마 | 로그인 |
|---|---|---|
 |
 |
 |
| 스터티 홀 | 마이 페이지 | 그룹 채팅 |
|---|---|---|
 |
 |
 |
| 서바이벌 스터디 | 스터디 시작 | 리워드 상점 |
|---|---|---|
 |
 |
 |
-
✨ 프로덕트 오너
- 프로젝트 진행 노션 문서화 담당
- 전반적인 회의 진행 및 회의록 작성
-
💻 퍼블리싱
- 마이 페이지 화면
- 리워드 상점 화면
- 전체 UI 스켈레톤(로딩)
-
🛠 구현 기능
- 로그아웃
- 내 정보 조회, 수정 기능
- 상점 구매 기능
-
✨ FE 팀장
- 프론트엔드 개발 상황 정리
- 멘토링 일정 및 회의록 작성
-
💻 퍼블리싱
- 로그인, 회원가입 화면
- 스터디 생성, 수정 화면
- 알림 페이지 화면
- 기본적인 버튼, 입력창
-
🛠 구현 기능
- 소셜 로그인 + 이메일 인증 로그인
- 스터디 생성, 수정 기능
- 실시간 알림 기능
-
💻 퍼블리싱
- 스터디 목록 및 검색 화면
- 스터디 소개 및 신청 화면
- 스터디 홀(스터디장 관리 포함) 화면
-
🛠 구현 기능
- 스터디 검색과 조회 기능
- 페이지 무한 스크롤 기능
- 스터디 홀 타이머, 목표 달성 기능
-
🎨 디자인
- 전체적인 UI 디자인 담당
- 컴포넌트별 디자인 세분화
-
💻 퍼블리싱
- 메인 페이지 화면(배너 포함)
- 서바이벌 스터디 화면
- 스터디 채팅 화면
-
🛠 구현 기능
- 스터디 랜덤 추천 및 본인 메인 정보 조회 기능
- 서바이벌 스터디 퀴즈 기능
- 웹소켓을 이용한 실시칸 채팅 기능
# 1. 클론하기
$ git clone https://github.com/prgrms-web-devcourse-final-project/WEB4_5_9to6_FE.git .
# 2. 의존성 설치하기
$ npm install
# 3. 개발 서버 실행하기
$ npm run dev