CLASS404 프로젝트 Front-end/Back-end 소개

CLASS101 클론코딩 프로젝트

짧은 프로젝트 기간동안 개발에 집중해야 하므로 디자인/기획 부분만 클론했습니다. 개발은 초기 세팅부터 전부 직접 구현했으며, 아래 데모 영상에서 보이는 부분은 모두 프론트엔드와 백앤드 연결을 통하여 실제 사용할 수 있는 서비스 수준으로 개발한 것입니다.

1. CLASS101 사이트 소개

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

2. 개발 인원 및 기간

1. 개발 기간 : 2021/03/2 ~ 2021/03/12
2. 개발 인원 : 프론트엔드 3명, 백엔드 4명

3. 팀 소개

1. 팀명 : CLASS404
2. 팀원
   • Front-End : 이지은(PM), 박정현, 이사랑
   • Back-End : 박재현, 김치오, 이준하, 이동근

4. 데모영상 및 회고(링크) : https://velog.io/@mementomori/Cloning-Project-CLASS101

적용 기술 및 구현 기능

1. 적용 기술

• Front-End : React.js, Sass(Scss), React-router-dom, React Hooks, Styled-Component
• Back-End : Python, Django web framework, Bcrypt, My SQL
• 협업에 사용 된 툴 : Git Hub, Slack, Trello
• Common : RESTful API

2. 구현 기능

Front-End

찜하기(로그인 권한 없는 액션) 시도 -> 로그인/회원가입(소셜로그인) -> 상세페이지(리뷰업로드, 비디오 미리보기) -> 찜하기 -> 크리에이터 신청 -> 마이페이지(프로필 사진 교체 포함) 확인의 Flow 중심

1. 로그인/회원가입 - 카카오 연동 로그인, validation

2. 메인화면 (클래스 목록 display) - 키워드 검색, 조건 검색 기능

3. 상세 페이지

4. 리뷰 업로드 페이지 - 사진 미리보기, 이미지 파일 백엔드 송신

5. 비디오 시청 페이지 - 영상 시점 이동

6. 마이페이지 - 장바구니 기능, 프로필 이미지 교체

7. 크리에이터 신청 페이지 - 이미지 및 텍스트 파일 백엔드 송신

8. Nav - 조건부 랜더링

9. Footer

Back-End

1.공통

modeling unit test 구현

2. user app

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

3. product app

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

Reference

이 프로젝트는 스타일쉐어 사이트를 참조하여 학습목적으로 만들었습니다. 실무수준의 프로젝트이지만 학습용으로 만들었기 때문에 이 코드를 활용하여 이득을 취하거나 무단 배포할 경우 법적으로 문제될 수 있습니다. 이 프로젝트에서 사용하고 있는 사진은 https://unsplash.com/ 의 사진입니다.