🙋‍♂면학소

면학소는 '학생' 과 '강사' 를 이어주는 교육 과외 플랫폼 입니다.

IT, 어학, 취미 카테고리로 강의를 나누어져있으며, 강의는 👩‍👩‍👦대면강의 or 🧑‍💻화상강의 중 선택해서 진행될 수 있어요.

목차

1. 프로젝트 팀 소개
2. 프로젝트 개요
3. 기술 스택
4. 컨벤션
5. 담당 페이지 및 기능
6. 주요 기능 화면 구성 - 웹
7. 주요 기능 화면 구성 - 모바일
8. 프로젝트 소감
9. 관련 문서

프로젝트 팀 소개

뱅쿄시요 (Bankyoshiyo)

일본어로 '공부하자' 는 뜻의 뱅쿄시요, 일본어에 친숙한 팀원 3명이 모여 짓게 되었습니다.

류채영(팀장)	김나라	홍설아

📑 프로젝트 개요

📆 전체 프로젝트 기간 : 2024.07.29 ~ 2024.08.27

• 07.26 ~ 08.01 : 컨셉 기획, 초기 UI 설계 및 프로젝트 세팅
• 08.02 ~ 08.23 : 기능 구현
• 08.24 ~ 08.27 : QA, 배포

⚙️ 기술 스택

Library

Tools

Settings

---

📢 컨벤션

Git

Feat : 새로운 기능을 추가한 경우
Fix : 버그를 고친 경우
Design : 사용자 UI 디자인
Style : 코드 포맷 변경, 세미 콜론 누락 등 코드 수정이 없는 경우
Comment : 주석 추가 및 변경
Docs: 문서를 수정한 경우
Chore : 패키지 매니저 설정
Refactor : 코드 리팩토링
Rename : 파일, 폴더명을 수정하거나 옮기는 작업만 수행한 경우
Remove : 파일을 삭제하는 작업만 수행하는 경우

✔️ 팀원들 확인 받고 커밋, 푸쉬 진행
✔️ 본인이 PR 요청한 건 본인이 merge
✔️ PR 시 코드리뷰 진행
✔️ 최대한 작업 겹치지 않게…!!! → 겹치면 로컬vsc에서 머지하는 것으로

Code

- 리액트 컴포넌트는 `파스칼 케이스`
    
    →  const Form =()⇒ {}
    
- 리액트 컴포넌트는 `일반함수`, 그외 함수는 `화살표 함수`
- 일반 함수나 표현식 함수는 `카멜 케이스`
    
    → function getBoardList () {}, const postBoard = () ⇒ {} 
    
- 이벤트 핸들러 함수 같은 경우  `카멜 케이스` 기반
    
    `handle로 시작하며 명사와 동사(이벤트 이름)`로 적음
    
    → const handleFormSubmit = () ⇒ {}
    
- 변수의 경우 `카멜 케이스`
- 커스텀 훅을 만들 시 `use~`로 시작하며 `카멜 케이스`
- 폴더명은 `카멜 케이스`로 하되, 컴포넌트 폴더는 `파스칼 케이스`
- 함수의 경우 동사로 시작하며, 반대되는 함수를 만들 경우

      `반의어`를 확인하고 함수 네이밍을 작성

- 변수와 함수는 직관적으로 작성. 네이밍을 보고 어떤 역할인지 파악이 되어야 함
- 코드가 실행되기 전부터 값을 알고 있는(하드코딩한) 상수는 대문자 상수로 작성
→ const URL, const BASE_URL
- 약어 지양
- Typescript 인터페이스 사용 시 `‘I 접두어 붙이기’`
- 모든 타입 정의 시 `파스칼케이스`

🍕 담당 페이지 및 기능

• 류채영

  • 메인페이지
  • 헤더, 푸터, 페이지네이션
  • 카테고리별 상품 목록, 상품 정렬
  • 구매, 판매 목록, 수강 후기
  • 1:1 질의응답
  • (강사, 학생) 대시보드

• 김나라

  • (결제 전, 결제 후) 상품 상세 조회
  • 강의 결제 기능
  • 강의 등록, 수정, 삭제 (Kakao API)
  • (상품, 강사) 북마크, 북마크 목록
  • 북마크 강사의 신규 강의 알림 (Socket IO)

• 홍설아

  • 로그인, 구글, 카카오 SNS 로그인 (Oauth)
  • 회원가입, 이메일 중복 체크
  • 회원 정보 수정
  • 상품 검색
  • 전역 모달

🖥️주요 기능 화면 구성 - 웹

1. 회원가입 및 로그인 (SNS 로그인)

회원가입	로그인	로그아웃

카카오 로그인	구글 로그인

2. 메인페이지, 상품 목록

메인페이지	상품 목록	상품정렬, 상품검색

3. 강의 상세페이지

상세페이지	수강하기

4. (강사) 강의등록, 강의관리

강의등록	강의수정	강의삭제

5. 북마크

강의, 강사 북마크	북마크 목록

6. 판매목록, 구매목록, 후기

(강사)구매목록	(학생)구매목록, 후기 작성

7. 1:1 질의응답

(학생)1:1 질의응답 작성	(강사)문의 응답

8. (강사, 회원) 대시보드

(강사)대시보드	(회원)대시보드

📱주요 기능 화면 구성 - 모바일

1. 회원가입 및 로그인 (SNS 로그인)

회원가입	로그인

2. 메인페이지, 상품 목록

메인페이지	상품 목록, 상품정렬

3. 강의 상세페이지

상세페이지	수강하기

4. (강사) 강의등록, 강의관리

강의등록	강의수정	강의삭제

5. 북마크

강의, 강사 북마크	북마크 목록

6. 판매목록, 구매목록, 후기

(강사)판매목록	(학생)구매목록, 후기 작성

7. 알림 기능

북마크한 강사의 신규 강의 알림

8. 1:1 질의응답

(학생)1:1 질의응답 작성	(강사)문의 응답

9. (강사, 회원) 대시보드

(강사)대시보드	(회원)대시보드

😻프로젝트 소감

🐁 류채영

SSR과 CSR을 모두 경험해볼 수 있는 뜻깊은 프로젝트였습니다! 밤낮없이 기능 개발하고 회의하면서
초보 팀장이었던 저를 믿고 프로젝트에 열정적으로 임해주신 뱅쿄시요 팀원들에게 너무 감사합니다! ♥ :D
앞으로 더 많이 성장한 모습으로 또 만나요!

🇰🇷 김나라

교육 도메인은 예전부터 하고 싶었었는데 이번에 할 수 있게 되어서 감개무량합니다.
거기에 마음 맞는 팀원들과 함께 할 수 있어 더욱 뜻 깊었던 프로젝트라고 생각합니다.
이번 프로젝트에서는 평소에 도전하고 싶었던 기능을 경험할 수 있어서 좋았습니다. 
이 자리를 빌려 난관에 빠질 때마다 많은 도움을 주었던 저희 팀원들(객원 팀원인 길용쌤 포함!!)께 감사의 인사를 전합니다.

❄️홍설아

NextAuth && Type 혼돈의 굴레 속에서 헤엄치다가 중간에 탈주하게 되어 나라님 채영님의 멋진 발표를 볼 수 없는 것이 한이 될 것 만 같지만
Next.js와 TypeScript로 흥미로운 프로젝트 할 수 있도록 아이디어 내주신 나라선배와 J로써 기강 잡아주신 채영팀장님 능력자분들과 함께할 수 있어서 정말 즐거웠어요!!
 많이 배워 갑니다! 뱅쿄시요 면학요정들 고생 많으셨고 감사했어요! 설명요정 용쌤도 정말 감사했습니다!! 

📁관련 문서

유저플로우, 화면 정의서

API 문서