Team Class404

안녕하세요 저희는 'Class101' 사이트의 클론 코딩을 진행하게 된 TEAM Class404입니다.

시연 영상

---

• 진행기간 : 2021년 3월 2일 ~ 2021년 3월 12일

🔜 FrontEnd

• 이지은(PM)
• 박정현
• 이사랑

🔙 BackEnd

• 김치오
• 박재현
• 이동근
• 이준하

🌟프로젝트 소개

Class404
대한민국 1등 온라인 클래스 플랫폼입니다. 수업에 필요한 준비물도 구매할 수 있습니다. 해야만 하는 일에 밀려, 방법을 몰라서, 시작을 망설였다면, 사랑하는 일을 하기 위한 기반이 필요하다면, 당신이 사랑하는 일을 하며 살수 있도록 1,000명 이상의 크리에이터와 함께 취미도, 직무도, 경제적인 자유도 클래스404에서 시작하세요!

🛠 기술 스택

FrontEnd 기술 스택

• React
• React Router Dom
• Sass
• Styled Components
• Restful API
• Git & Github

BackEnd 기술 스택

• Django
• Python
• MySQL
• Bcrypt, JWT
• AQueryTool
• Git & GitHub
• AWS EC2, RDS

🌈 구현 기능

FrontEnd

공통

• React Router Dom을 활용한 SPA 구현
• Global Styles, theme, config 파일을 활용한 스타일 및 API 통일
• Navigation, Footer, Product, Button, Radio Button, Checkbox 등 공통 컴포넌트 구현
• mock data

회원가입/로그인

• access token에 따른 Nav 전환 구현
• 정규표현식을 활용한 회원가입 validation 구현
• access token을 활용한 로그인 구현
• 카카오 API를 활용한 회원가입, 로그인 기능 구현

메인 페이지

• 메인페이지 레이아웃 및 내부 요소 컴포넌트화 구현
• 프로덕트 카드 컴포넌트 찜하기 기능 구현
• query string을 활용한 filter, sort 기능 및 모달 구현
• 클래스명, 카테고리, 크리에이터명 검색 기능 구현

상세 페이지

• 상세 페이지 레이아웃 및 내부 요소 컴포넌트화 구현
• 영상 시청 페이지 레이아웃 구현
• video ref 속성을 활용해 링크에 따른 재생 구간 이동 기능 구현
• 리뷰 작성 레이아웃 구현
• 글 작성 및 이미지 첨부 기능 구현

클래스 생성

• 생성 페이지 레이아웃 구현
• 입력된 데이터 생성 통신 구현
• 이미지 첨부 시 데이터 렌더링 기능 구현
• 첨부 이미지 미리보기 기능 구현

마이 페이지

• 마이 페이지 레이아웃 및 컴포넌트화 구현
• 프로필 이미지 수정 기능 구현
• 메뉴에 따른 컴포넌트 전환

BackEnd

공통

• modeling
• unit test 구현

user app

• 일반 회원가입/로그인
• 카카오톡 API를 이용한 회원가입/로그인
• 회원/비회원 구분 login decorator 작성
• 찜한 클래스, 수강등록한 클래스, 만든 클래스 마이페이지
• S3 연동 user 프로필 이미지 변경

product app

• 상품 여러 조건별 정렬 & 필터링
• 상품 상세페이지 조회
• 상품 찜하기
• S3 연동 이미지 업로드를 이용한 상품 만들기

‼️ Reference

• 이 프로젝트는 Class101 사이트를 참조하여 학습목적으로 만들었습니다.
• 실무수준의 프로젝트이지만 학습용으로 만들었기 때문에 이 코드를 활용하여 이득을 취하거나 무단 배포할 경우 법적으로 문제될 수 있습니다.
• 이 프로젝트에서 사용하고 있는 사진 대부분은 위코드에서 구매한 것이므로 해당 프로젝트 외부인이 사용할 수 없습니다.