📖 Studyhub

온라인 강의와 스터디 문화를 결합한 IT 학습 플랫폼

---

배포 주소

➡️ Production 배포 URL: https://account.ozcoding.site/

서비스 소개

StudyHub는 온라인 강의 수강 중도 포기를 줄이기 위해 스터디 기반의 학습 구조를 제공하는 플랫폼으로, 학습자 간의 연결과 일정·진행 관리 기능을 통해 강의를 끝까지 완주할 수 있는 환경을 만듭니다.

---

🔍 주요 기능

1. 랜딩페이지

2. 회원가입 & 인증

• 회원가입

  • 기본 정보 입력 (이름, 닉네임, 생년월일, 성별) → 닉네임 중복 확인
  • 이메일 인증: 이메일 입력 → 인증코드 발송 → 인증번호 확인
  • SMS 인증: 휴대폰 번호 입력 → 인증번호 발송 → 인증번호 확인
  • 비밀번호 설정 → 모든 인증 완료 후 가입하기

• 로그인 / 로그아웃

  • 일반 로그인: 이메일 + 비밀번호 입력 → 토큰 발급
  • 소셜 로그인: 카카오 / 네이버 간편 로그인 지원

• 토큰 기반 인증 처리

3. 이메일 & 비밀번호 찾기

• 이메일 찾기
  • 이름 + 휴대폰 번호 입력 → SMS 인증번호 발송 → 인증 완료 시 가입된 이메일 확인
• 비밀번호 찾기
  • 이메일 입력 → 이메일로 인증코드 발송 → 인증 완료 → 새 비밀번호 설정

4. 탈퇴회원 복구

5. 마이페이지

• 내 정보 조회 및 수정
• 비밀번호 변경 및 휴대폰 번호 변경
• 회원 탈퇴
• 북마크한 공고 및 강의 조회
• 북마크한 공고 및 강의 삭제
• 지원 내역 확인 및 지원 취소
• 완료된 스터디에 한해 리뷰 작성 및 수정

---

렌딩페이지

회원가입 및 로그인 페이지

이메일 찾기 및 비밀번호 찾기

• 이메일 찾기

• 비밀번호 찾기

탈퇴 복구

마이페이지(내정보, 북마크한 공고, 북마크한 강의, 지원 내역, 완료된 스터디)

• 내정보

• 북마크한 공고

• 북마크한 강의

• 지원 내역

• 완료된 스터디

시연 영상

_FE_13._1._.1.1.1.1.mov

개발 서버 실행 방법

패키지 설치

npm install

실행

npm run dev

팀원 소개

황찬진	권다빈	기정환
FrontEnd	FrontEnd	FrontEnd

기술 스택

언어 및 라이브러리
상태관리
통신 클라이언트
API 모킹
코드 컨벤션

---

팀 컨벤션

Git Convention

• 작업 단위 이슈 및 PR 생성
• PR 코드리뷰 및 승인 필수

1. 적절한 커밋 접두사 작성
2. 커밋 메시지 내용 작성
3. 내용 뒤에 이슈 (#이슈 번호)와 같이 작성하여 이슈 연결

접두사	설명
feat :	새로운 기능 구현
fix :	버그 수정
docs :	문서 추가 및 수정
refactor :	코드 리팩토링
test :	테스트
design :	UI 관련 디자인 작업
Chore :	빌드, 환경 설정
remove :	사용하지 않는 코드나 파일 제거
style :	기능 변경 없는 스타일 수정

프로젝트 구조

src/
├── api/
├── assets/
├── components/
├── constant/
├── hooks/
├── lib/
├── mappers/
├── pages/
├── routes/
├── store/
├── types/
├── utils/
└── App.tsx