Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/oz-collabo-project-team-03/oz-project-03-fe
수행쌤 - FE
https://github.com/oz-collabo-project-team-03/oz-project-03-fe
msw react tailwindcss tanstack-query typescript zustand
Last synced: 4 days ago
JSON representation
수행쌤 - FE
- Host: GitHub
- URL: https://github.com/oz-collabo-project-team-03/oz-project-03-fe
- Owner: oz-collabo-project-team-03
- Created: 2024-11-07T04:15:02.000Z (about 2 months ago)
- Default Branch: develop
- Last Pushed: 2024-12-15T10:55:24.000Z (19 days ago)
- Last Synced: 2024-12-15T11:29:20.377Z (18 days ago)
- Topics: msw, react, tailwindcss, tanstack-query, typescript, zustand
- Language: TypeScript
- Homepage: https://sam.kprolabs.space/
- Size: 131 MB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 수행쌤
## 🔗 배포링크
> ### [🧑🏻🏫 수행쌤](https://sam.kprolabs.space/)
---
## 🗓️ 프로젝트 기간
> ### 2024. 11.07 - 2024. 12. 11
---
## 🎊 프로젝트 소개
> 👩🏻🏫 **수행쌤** 👩🏻🏫
> ### 🎉 치열해지는 내신 경쟁 속, 수능 준비로 바쁜 중·고등학생들을 위한 맞춤형 수행평가 AI 채팅앱이 탄생했습니다!🎉
> 📌 학생들의 학습 부담을 줄이고, 👩💻
> 📌 수행평가 준비를 더욱 효율적으로 도와줍니다! 🥳
## 테스트 계정
> * Test ID : [email protected]
> * Test PW : qwe123!@#
## ✅ 주요기능
### 1️⃣ AI 상담
> 수행평가에 대한 궁금증을 AI에게 질문하면, 수행평가와 관련된 정확하고 유익한 정보를 신속히 제공합니다.
### 2️⃣ 추가 학습 지원
> AI의 답변에 대해 더 자세한 설명이 필요하다면, 담당 선생님을 채팅방에 초대하여 직접 피드백을 받을 수 있습니다.
### 3️⃣ 수행평가 커뮤니티
> 학생들은 수행평가 관련 게시글을 작성하고 공유할 수 있습니다. 댓글, 대댓글, 좋아요를 통해 피드백을 주고받으며, 학생들의 학습의 폭을 넓힐 수 있습니다.
## ✅ 그 외 기능
### 1️⃣ 로그인
> 사용자는 이메일 또는 소셜로그인(구글,카카오,로그인)을 통해 로그인을 할 수 있습니다. 최초로그인을 한 학생 유저는 담당선생님을 선택할 수 있습니다.
### 2️⃣ 회원가입
> 사용자는 소셜 로그인을 통한 간편 회원가입 및 이메일로 회원가입을 할 수 있으며 회원가입시 선택한 역할에 맞춰 권한이 부여됩니다.
### 3️⃣ 게시글
> 학생, 선생님은 다른 학생이 업로드한 게시글에 댓글 및 대댓글을 달 수 있으며 마음에 드는 포스트에 좋아요를 누를 수 있습니다
### 4️⃣ 관리 학생 & 채팅 리스트 (선생님용)
> 선생님은 자신이 관리하는 학생들의 목록을 확인할 수 있으며, 학생들이 보낸 채팅 내역을 조회할 수 있습니다.
### 5️⃣ 채팅
> 학생은 AI와의 채팅을 통해 도움을 받을 수 있으며, 필요한 지원을 요청할 수 있습니다. 또한, Help 버튼을 통해 선생님과 직접 대화할 수도 있습니다.
선생님은 학생이 보낸 Help 요청 알림을 통해 어떤 학생이 도움을 요청했는지 한눈에 확인할 수 있으며, 채팅을 통해 학생의 수행평가를 효과적으로 지원할 수 있습니다.
### 6️⃣ 마이페이지
> 사용자는 회원가입 시 입력한 정보를 확인할 수 있으며, 작성한 게시글 목록, 받은 댓글 수와 좋아요 수를 조회할 수 있습니다. 또한 회원 정보 수정 및 탈퇴도 가능합니다.
### 7️⃣ 좋아요/대댓글
> 학생과 선생님은 다른 학생이 작성한 게시글에 댓글과 답글을 남길 수 있으며, 마음에 드는 게시글에 좋아요를 표시할 수 있습니다.
## 🧰 사용 스택
### Frontend
> 
> 
> 
> 
> 
> 
> 
> 
> 
### Backend
> 
> 
> 
> 
> 
### DB
> 
> 
### Deployment
> 
>
### 형상관리
> 
> 
> 
## 👥 팀 동료
| 
@Yi-HyeonJu | 
@deswaq1220 | 
@doin-N | 
@Watnu03 |
| :--------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------: |
| 이현주 | 변경원 | 노도인 | 강승혜 |
| **현주핑 자리** | **소셜 로그인 구현**
- OAuth를 이용한 소셜로그인(카카오, 구글, 네이버) 기능 개발
- 로그인, 회원가입, 이메일 인증을 위한 MockAPI 생성 및 테스트 진행
-백엔드 인증 관련 구현 딜레이로 msw를 활용하여 cookie 기반 인증 상태관리 구현
**로딩 및 사용자 경험(UX)개선**
- React의 lazy와 Suspense를 활용하여 번들 사이즈 최적화 및 동적 로딩 구현
- Suspense를 사용하여 로딩 시 Skeleton UI와 로딩 뷰를 제작해 UX 개선
**데이터 요청 및 인터셉터 개발**
- 로그인 하지 않은 사용자가 페이지에 접근하지 못하도록 인증 상태 기반 접근 제어 구현 | **도인핑 자리** | **승혜핑자리** |
## 설치 및 실행 방법
> 프로젝트 설치
>
>```
> yarn
>```
> 프로젝트 실행
>```
> yarn dev
>```
## 프로젝트 규칙
### Branch Strategy
> GitHub 전략을 기본으로 한다.
> main/develop 브랜치와 기능별 feature 보조브랜치 사용하며
pr과 리뷰 기능 적극사용
> * main과 dev로 직접 push 제한
> * PR전 최소 1인 이상 승인 필수
### Git convention
> 1. 적절한 커밋 접두사 작성
> 2. 커밋 메시지 내용 작성
> 3. 내용 뒤에 이슈 (#이슈 번호)와 같이 작성하여 이슈 연결
## COMMIT CONVENTION
| 타입 | 설명 |
| ---------------- | --------------------------------- |
| ✨ **Feat:** | 새로운 기능 추가 |
| 🍱 **Add:** | 에셋 파일 추가 |
| 🐛 **Fix:** | 버그 수정 |
| 🎨 **Design:** | CSS 등 사용자 UI 디자인변경 |
| 💄 **Style:** | 코드 포맷팅, 스타일 관련 파일 추가 및 수정 |
| 📝 **Docs:** | 문서 추가 및 수정 |
| ♻️ **Refactor:** | 코드 리팩토링 |
| 🤡 **Test:** | 테스트 관련 |
| 🚀 **Deploy:** | 배포 관련 |
| 💚 **Conf:** | 빌드, 환경 설정 |
| 🩹 **Chore:** | 기타작업 |
| 🚚 **Rename:** | 파일 혹은 폴더명 수정 또는 이동 |
| 🔥 **Remove:** | 파일 또는 코드 삭제 |
### Pull Request
> ### Title
>
> - 제목은 '[Feat] 홈 페이지 구현'과 같이 작성합니다.
> ### PR Type
>
> - [ ] FEAT: 새로운 기능 구현
> - [ ] ADD : 에셋 파일 추가
> - [ ] FIX: 버그 수정
> - [ ] DOCS: 문서 추가 및 수정
> - [ ] STYLE: UI, 스타일 관련 파일 추가 및 수정
> - [ ] REFACTOR: 코드 리팩토링
> - [ ] TEST: 테스트 관련
> - [ ] DEPLOY: 배포 관련
> - [ ] CONF: 빌드, 환경 설정
> - [ ] CHORE: 기타 작업
> ### Description
>
> - 구체적인 작업 내용을 작성해주세요.
> - 이미지를 별도로 첨부하면 더 좋습니다 👍
> ### Discussion
>
> - 추후 논의할 점에 대해 작성해주세요.
### Issue
> 이슈티켓은 알아보기 쉽게 구체적으로 작성 (ex. style: 로그인 페이지 스타일링)
>
> ### 📃Description
> 설명을 작성해주세요
> ### 📌Todo
> - [ ] todo1
> - [ ] todo2
> - [ ] todo3
> ### 📝ETC
> 기타사항
### Code Convention
> #### 함수명
> * 화살표함수를 사용
> * Event handler 사용 (ex. handle ~)
> * 다른 사람이 봐도 충분히 알아 볼 있도록 함수명을 작성
> * camelCase로 작성 (ex. isLoggedIn)
> #### 파일명
> * 컴포넌트를 제외한 파일명은 모두 소문자로 작성
> * camelCase로 작성 (ex. myPage)
> #### 컴포넌트
> * 컴포넌트명은 대문자로 시작
> * 화살표함수 사용 (rafce 스니펫 활용)
> * 파스칼 케이스로 작성한다. (ex. InputButton)
### Communication Rules
> - Discord 적극 활용
> - Zep을 이용한 커뮤니케이션