온라인 강의를 끝까지 완주하지 못하는 학습자들에게 동기부여와 명확한 목표를 제공하고자 합니다. 같은 강의를 듣는 학습자들이 함께 스터디를 생성하고 참여할 수 있도록 지원하여, 상호 협력과 꾸준한 학습을 돕습니다.
Udemy와 Inflearn 등 유명 플랫폼의 강의 정보를 스크래핑하여 제공하며, 각 강의별 스터디 모집 및 참여 기능을 구현하였습니다. 모집된 스터디는 일정 관리, 진행 상황 공유, 채팅 등 다양한 기능을 통해 안정적으로 운영될 수 있도록 지원합니다.
자체 VOD 제공 없이 강의 정보와 스터디 매칭에 집중하여, 수강생들이 네트워킹을 강화하고 학습에 집중할 수 있는 최적의 환경을 제공합니다.
| Category | Stack |
|---|---|
| Common |   |
| Frontend |          |
| Deployment |    |
| Collaboration |    |
oz_externship_fe_03_team2/
├── .github/ # GitHub 설정 파일
├── .vscode/ # VSCode 설정 파일
├── dist/ # 빌드 결과물
├── node_modules/ # 의존성 패키지
├── public/ # 정적 파일
│ ├── font/ # 폰트 파일
│ ├── images/ # 이미지 파일
│ └── 기타 svg 파일...
├── src/
│ ├── api/ # API 관련
│ │ ├── Helper/ # Tanstack Query 관련 훅
│ │ ├── services/ # API 서비스 레이어
│ │ └── 기타 설정 파일...
│ ├── assets/ # 정적 파일
│ │ ├── readme/ # README 관련 파일
│ │ └── 기타 이미지...
│ ├── components/ # React 컴포넌트
│ │ ├── common/ # 공통 컴포넌트
│ │ │ ├── toast/ # 토스트 알림
│ │ │ └── 기타 공통 컴포넌트...
│ │ ├── find/ # 찾기 페이지 컴포넌트
│ │ │ ├── emailFind/ # 이메일 찾기
│ │ │ ├── passwordFind/ # 비밀번호 찾기
│ │ │ └── 기타...
│ │ ├── layout/ # 레이아웃 컴포넌트
│ │ │ ├── Notification/ # 알림
│ │ │ └── 기타 레이아웃...
│ │ ├── mainpage/ # 메인페이지 컴포넌트
│ │ ├── mypage/ # 마이페이지 컴포넌트
│ │ ├── restore/ # 복구 컴포넌트
│ │ └── signup/ # 회원가입 컴포넌트
│ ├── constants/ # 상수 정의
│ ├── hooks/ # 커스텀 훅
│ │ └── 기타 커스텀 훅...
│ ├── lib/ # 라이브러리 설정
│ ├── mocks/ # MSW 목 데이터
│ ├── pages/ # 페이지 컴포넌트
│ ├── routes/ # 라우팅
│ ├── store/ # Zustand 상태 관리
│ ├── tests/ # 테스트 페이지
│ ├── types/ # TypeScript 타입 정의
│ │ └── apiInterface/ # API 인터페이스
│ ├── utils/ # 유틸리티 함수
│ └── 기타 설정 파일...
├── .env # 환경 변수
├── .gitignore # Git 무시 파일
├── .prettierrc # Prettier 설정
├── eslint.config.js # ESLint 설정
├── index.html # HTML 엔트리
├── package.json # 프로젝트 메타데이터
├── tsconfig.json # TypeScript 설정
├── vercel.json # Vercel 배포 설정
└── vite.config.ts # Vite 설정
 김민섭 (리드) @mminseop 프로젝트 총괄 마이페이지 |
 민현서 @hyeonseo1109 알림/채팅 이메일/비밀번호 찾기 |
 정승윤 @seun9yoon 로그인 회원가입, 소셜로그인 |
 김미진 @kim-mijin 랜딩페이지 회원탈퇴복구 |
Git Flow 전략을 기반으로 브랜치를 관리합니다.
| 브랜치 | 역할 | 설명 |
|---|---|---|
main |
배포 | 프로덕션 배포 가능한 안정적인 코드 관리 |
develop |
개발 통합 | 개발된 기능들이 병합되는 기본 브랜치 |
feat/* |
기능 개발 | 새로운 기능 개발 (예: feat/이슈번호-작업내용-이니셜) |
main,develop브랜치로 직접 push 금지- Pull Request를 통해서만 병합 가능
- PR 승인 최소 2인 이상 필수
- 모든 CI/CD 테스트 통과 후 병합
- 리뷰어 2명 자동 등록 구현(Git Actions)
- 이슈 생성 후 develop 기준으로 feat 브랜치 생성
git checkout develop
git pull origin develop
git checkout -b feat/12-login-kms- 기능 개발 및 커밋
git add .
git commit -m "feat: 로그인 구현"- 원격 브랜치에 push
git push -u origin feat/12-login-kms- GitHub에서 Pull Request 생성 (develop <- feat)
- 코드 리뷰 및 승인 후 merge
- merge 완료된 feat 브랜치는 삭제
git branch -D feat/12-login-kms
git push origin feature/12-login-kms --delete- 작업 중인 브랜치는
git pull origin develop후 작업 브랜치로 이동하여 rebase 활용
| 접두사 | 설명 | 예시 메시지 |
|---|---|---|
Feat |
새로운 기능 추가, 컴포넌트 파일 생성 | Feat: 로그인 기능 구현 |
Fix |
버그 수정, 코드/UI 문제 해결 | Fix: 비밀번호 찾기 오류 수정 |
docs |
문서 수정 (README, 주석, API 문서 등) | Docs: API 명세서 최신화 |
Style |
코드 포맷팅, 공백, 세미콜론 누락 등 스타일 변경 | Style: 버튼 컴포넌트 스타일 수정 |
Refactor |
리팩토링 (기능 변경 없음) | Refactor: 인증 로직 함수 분리 |
Hotfix |
긴급 버그 수정(프로덕션 치명적 오류) | Hotfix: ㅇㅇ오류 수정 |
Test |
테스트 코드/더미 데이터 추가 | Test: 로그인 API 테스트 케이스 추가 |
Chore |
빌드 업무, 패키지 매니저 설정, 기타 관리 작업 | Chore: npm 패키지 업데이트 |
Types |
타입/인터페이스 정의 추가·수정 | Types: User 타입 추가 |
Comment |
주석 추가·변경 | Comment: 복잡한 로직 주석 추가 |
Rename |
파일/폴더명 변경 또는 이동(내용 변경 없음) | Rename: 컴포넌트 경로 변경 |
Remove |
파일 삭제 | Remove: 사용하지 않는 이미지 삭제 |
Revert |
변경 사항 되돌리기 | Revert: 로그인 기능 커밋 롤백 |
Init |
초기화 관련 작업 | Init: 프로젝트 초기 세팅 |
- 커밋 메시지 스타일 통일로 프로젝트 히스토리 가독성↑, 협업 효율성↑
- 코드리뷰 시 커밋 메시지만 봐도 변경 내역과 의도를 빠르게 파악 가능
- 이슈와 PR은 .github 폴더에 첨부된 템플릿을 사용하여 작성
- 리뷰어는 GitHub Actions를 통한 자동 등록 설정으로 편리하게 관리
- 변수/함수: camelCase 사용 (예:
userData) - 컴포넌트/타입/인터페이스: PascalCase 사용 (예:
UserProfile) - 상수: UPPER_SNAKE_CASE 사용 (예:
API_BASE_URL) - 약어 사용 지양: 명확한 이름 사용 (예:
user>u,value>v사용x) - Boolean 변수:
is,has접두사 사용 (예:isLoading,hasError)
- 함수 선언문(Function Declaration) 사용 (화살표 함수 지양)
- Props는 인터페이스로 정의
- Props 타입명은
컴포넌트명 + Props(예:UserProfileProps)
any타입 사용 금지 (불가피한 경우unknown사용 후 타입 가드)- Props, API 응답:
interface사용 - Union, Utility 타입:
type사용 - 제네릭 사용시 명확한 이름 (
T지양,TData,TParams권장)
- Axios 인스턴스는
api/client.ts에서 중앙 관리 - Request: 인증 Baerer 토큰 자동 삽입
- Response: 에러 핸들링 중앙관리(서버 500 에러, 진짜 네트워크 요청 에러, 타임아웃 에러), 토큰 갱신 로직
- API 함수는
api/services/폴더에 도메인별로 분리 - 응답 데이터만 반환 (
AxiosResponse래핑 제거)
useQuery를 컴포넌트에서 바로 사용하지 않고 별도 커스텀 훅으로 관리- Hook은 api/services 폴더 내부에 별도 폴더/파일로 관리
- 상위 컴포넌트에서 옵션을 변경할 수 있도록 options 파라미터를 사용
- Query key는 endPoint + Params query로 관리
- Store는
stores/폴더에 상태별로 분리 - Store 파일명:
useㅇㅇStore.ts(예:useAuthStore.ts,useUserStore.ts)
- Try-catch는 최소화하고 React Error Boundary 활용
- API 에러는 Axios 인터셉터에서 중앙 처리
- Toast로 사용자에게 에러 안내
- 더미데이터, handler는 만들어 Test Page에서 테스팅 후 적용
hanlers는 배열에 스프레드 오퍼레이터로 등록
- Discord와 Notion 활용한 비동기 협업
- 매일 10:20 데일리 스크럼 및 Task 보고
- 어제 한 일 / 오늘 할 일 공유
- 매주 금요일 17:00 KPT 회고 및 Weekly Sprint 진행
- 다음 주 Sprint 계획 수립
- 질문/답변, 소통은 Discord 활용
- 중요한 결정사항은 Notion에 문서화
VITE_API_BASE_URL=https://api.ozcoding.site/api
NODE_ENV=development
VITE_USE_MSW=true || false
VITE_KAKAO_CLIENT_ID=카카오 REST 클라이언트 키
VITE_KAKAO_REDIRECT_URI=카카오 리다이렉션 URI
VITE_NAVER_CLIENT_ID=네이버 REST 클라이언트 키
VITE_NAVER_CLIENT_SECRET=네이버 시크릿 키
VITE_NAVER_REDIRECT_URI=네이버 리다이렉션 URI| 서비스 기획문서 | 팀 문서 |
|---|---|
| 📜 사용자 요구사항 정의서 📜 디자인 📜 플로우 차트 📜 화면 정의서 |
✨ 팀 문서 |
|
김민섭 @mminseop |
민현서 @hyeonseo1109 |
정승윤 @seun9yoon |
김미진 @kim-mijin |
StudyHub FE Team2 - 김민섭 & 민현서 & 정승윤 & 김미진