WeCode Class101 클론코딩 프로젝트 (Front-End)
프로젝트 소개🙌
- '준비물까지 챙겨주는 온라인 클래스'라는 슬로건을 포함해 공격적인 마케팅으로 최근 떠오르는 취미 플랫폼 Class101 클론 코딩
개발 기간📆
- 2020년 8월 3일 ~ 2020년 8월 14일(12일)
팀원🐙
- 프론트 3명(front-end github)
- 백엔드 3명(back-end github)
기술 스택 및 구현 기능🛠
공통
- Git, Git rebase&squash
- Github
- AWS EC2
- RESTful API
프론트엔드
- React.js(functional component)
- React Router
- React Hooks
- Sass/Scss
- CSS in JS
- Slick.js
- Moment.js
- Class101 UI Package
백엔드
- Python
- Django
- MYSQL
- CORS headers
- Bcrypt
- JWT
- AWS RDS
- AWS S3
- Docker
- Elasticsearch
구현 기능
다음은 사이트 주요 기능이다.
직접 구현한 기능은 ✅, 팀원이 구현한 기능은 ✔️로 표시했다.
-
📃 회원가입 / 로그인 페이지
1-1. ✔️ 이메일 및 패스워드 양식 확인 기능
1-2. ✔️ 카카오 소셜 로그인 기능
1-3. ✅ 로그인 기능 및 페이스북 소셜 로그인 기능(localStorage) -
📃 메인 페이지 및 네비게이션바
2-1. ✔️ 메인 페이지 Carousel 기능(Slick.js, CSS)
2-2. ✔️ 메인 페이지 상품 컴포넌트 구성
2-3. ✔️ Nav, Footer -
📃 상품 상세 페이지
3-1. ✔️ 상품 전체 이미지 모달창
3-2. ✔️ 상품 사이드바
3-3. ✅ 상품 사이드바 쿠폰 연동
3-4. ✅ 탭 클릭 시 해당 위치로 스크롤 이동
3-5. ✅ 상품 상세 이미지 모달창
3-6. ✅ 커리큘럼 탭 유동 라우팅 기능
3-7. ✅ 패키지 탭 더보기 기능
3-8. ✅ 혜택 탭 쿠폰 기능 사이드바 연동
3-9. ✅ 혜택 탭 모달창
3-10. ✅ 환불 정책 탭 모달창 -
📃 스트리밍 페이지
4-1. ✅ 동영상 불러오기 기능
4-2. ✅ 댓글 추가/삭제/이미지 업로드 기능 -
📃 마이페이지
5-1. ✔️ 로그인 데이터에서 유저 정보 받아와서 마이페이지에 적용
5-2. ✔️ 찜하기 기능
💡 담당한 기능 중 특히 신경 쓴 부분 :
- 로그인 페이지: 페이스북 소셜 로그인 기능
- 상세 페이지: axios 요청 비동기처리
- 스트리밍 페이지: 댓글 이미지 업로드 기능
파일 트리 구조
.
├── Components
│ ├── Footer
│ │ ├── Footer.js
│ │ ├── Footer.scss
│ │ ├── FooterIcon
│ │ │ ├── FooterIcon.js
│ │ │ ├── FooterIcon.scss
│ │ │ └── Icons
│ │ │ ├── FacebookIcon.js
│ │ │ ├── FacebookIcon.scss
│ │ │ ├── InstagramIcon.js
│ │ │ ├── InstagramIcon.scss
│ │ │ ├── MobileIcon.js
│ │ │ ├── MobileIcon.scss
│ │ │ ├── NaverIcon.js
│ │ │ ├── NaverIcon.scss
│ │ │ ├── YoutubeIcon.js
│ │ │ └── YoutubeIcon.scss
│ │ └── KakaoBtn
│ │ ├── KakaoBtn.js
│ │ └── KakaoBtn.scss
│ ├── Nav
│ │ ├── FloatingBtn.js
│ │ ├── Nav.js
│ │ ├── Nav.scss
│ │ ├── NavHeader.js
│ │ ├── NavHeader.scss
│ │ ├── NavLogo
│ │ │ ├── NavLogo.js
│ │ │ └── NavLogo.scss
│ │ ├── NavRight.js
│ │ └── NavRight.scss
│ ├── Signature
│ │ └── Main
│ │ ├── ClassAbout
│ │ │ ├── ClassAbout.js
│ │ │ └── ClassAbout.scss
│ │ ├── ClassCardList
│ │ │ ├── ClassCardList.js
│ │ │ ├── ClassCardList.scss
│ │ │ └── OpenSignatureClass
│ │ │ ├── OpenSignatureClass.js
│ │ │ └── OpenSignatureClass.scss
│ │ ├── ClassInfo
│ │ │ ├── ClassInfo.js
│ │ │ └── ClassInfo.scss
│ │ └── TitleSlide
│ │ ├── SlideButton
│ │ │ ├── ButtonIcon
│ │ │ │ └── ButtonIcon.js
│ │ │ ├── SlideButton.js
│ │ │ └── SlideButton.scss
│ │ ├── TitleSlide.js
│ │ └── TitleSlide.scss
│ └── SignatureSideBar
│ ├── Components
│ │ ├── Class101IntroductionBanner.js
│ │ ├── ClassApplyBtn.js
│ │ ├── Label.js
│ │ ├── ProductPriceInfo.js
│ │ ├── SummaryOptions.js
│ │ ├── SummaryOptions.scss
│ │ └── WishShare.js
│ └── SignatureSideBar.js
├── Config.js
├── Pages
│ ├── Login
│ │ ├── Login.js
│ │ ├── Login.scss
│ │ ├── LoginIcons.js
│ │ ├── LoginInput.js
│ │ ├── LoginInput.scss
│ │ ├── LoginTitle.js
│ │ └── LoginTitle.scss
│ ├── MyPage
│ │ ├── Components
│ │ │ ├── Content
│ │ │ │ ├── MyViewClassList
│ │ │ │ │ ├── MyViewClassList.js
│ │ │ │ │ ├── MyViewClassList.scss
│ │ │ │ │ ├── ViewClass.js
│ │ │ │ │ └── ViewClass.scss
│ │ │ │ └── WishClassList
│ │ │ │ ├── WishClass.js
│ │ │ │ ├── WishClass.scss
│ │ │ │ ├── WishClassList.js
│ │ │ │ └── WishClassList.scss
│ │ │ ├── LeftAside
│ │ │ │ ├── MyAttendance
│ │ │ │ │ └── MyAttendance.js
│ │ │ │ └── ProfileCard
│ │ │ │ ├── Coupon.js
│ │ │ │ ├── Order.js
│ │ │ │ ├── Point.js
│ │ │ │ ├── ProfileCard.js
│ │ │ │ ├── ProfileEdit.js
│ │ │ │ └── Wish.js
│ │ │ ├── MyPageFooter
│ │ │ │ ├── FooterIcon
│ │ │ │ │ ├── FooterIcon.js
│ │ │ │ │ ├── FooterIcon.scss
│ │ │ │ │ └── Icons
│ │ │ │ │ ├── FacebookIcon.js
│ │ │ │ │ ├── FacebookIcon.scss
│ │ │ │ │ ├── InstagramIcon.js
│ │ │ │ │ ├── InstagramIcon.scss
│ │ │ │ │ ├── MobileIcon.js
│ │ │ │ │ ├── MobileIcon.scss
│ │ │ │ │ ├── NaverIcon.js
│ │ │ │ │ ├── NaverIcon.scss
│ │ │ │ │ ├── YoutubeIcon.js
│ │ │ │ │ └── YoutubeIcon.scss
│ │ │ │ ├── KakaoBtn
│ │ │ │ │ ├── KakaoBtn.js
│ │ │ │ │ └── KakaoBtn.scss
│ │ │ │ ├── MyPageFooter.js
│ │ │ │ └── MyPageFooter.scss
│ │ │ └── MyPageNav
│ │ │ ├── MyPageNav.js
│ │ │ └── MyPageNav.scss
│ │ └── MyPage.js
│ ├── SignUp
│ │ ├── SignUp.js
│ │ ├── SignUp.scss
│ │ ├── SocialIcons.js
│ │ ├── SocialLogin.js
│ │ └── SocialLogin.scss
│ ├── Signature
│ │ ├── Detail
│ │ │ ├── Benefit.js
│ │ │ ├── Benefit.scss
│ │ │ ├── ClassSummary.js
│ │ │ ├── ClassSummary.scss
│ │ │ ├── Comment.js
│ │ │ ├── Comment.scss
│ │ │ ├── Creator.js
│ │ │ ├── Creator.scss
│ │ │ ├── Curriculum.js
│ │ │ ├── Curriculum.scss
│ │ │ ├── Delivery.js
│ │ │ ├── Delivery.scss
│ │ │ ├── DetailPage.js
│ │ │ ├── DetailPage.scss
│ │ │ ├── IntroSection.js
│ │ │ ├── IntroSection.scss
│ │ │ ├── Modal.js
│ │ │ ├── Package.js
│ │ │ ├── Package.scss
│ │ │ ├── ProductView.js
│ │ │ ├── ProductView.scss
│ │ │ ├── Recommend.js
│ │ │ ├── Recommend.scss
│ │ │ ├── Refund.js
│ │ │ ├── Refund.scss
│ │ │ ├── SignatureHeadCover.js
│ │ │ ├── SimilarClass.js
│ │ │ └── SimilarClass.scss
│ │ └── Main
│ │ ├── Main.js
│ │ └── Main.scss
│ └── Streaming
│ └── Streaming.js
├── Routes.js
├── Styles
│ ├── common.scss
│ ├── reset.scss
│ └── styled.js
└── index.js
39 directories, 129 files기록하고 싶은 코드
느낀점
1차 프로젝트때와 다르게 PM 역할을 맡아서 프로젝트를 이끌었다. 1차때는 제대로 활용하지 못했던 Trello도 제대로 써보고 매일 오전 11시에 Scrum meeting을 가지면서 전체 프로젝트 진행 상황을 보면서 일정도 조율하고 서로 필요한 부분들을 공유하면서 제대로 진행했던 것 같다. 처음 해보는 PM 역할치고는 프로젝트를 잘 이끌어간 것 같아 기분은 좋다. 무엇보다 React Hooks를 처음 써봤는데 안막히고 제대로 활용을 해서 실력도 많이 늘었다고 생각된다. 1차때는 계획없이 닥치는대로 프로젝트를 진행했는데 이것 저것 많이 만들었지만 실속은 없었는데 2차는 페이지 수는 적지만 제대로 한 것 같아서 뿌듯하다. 그리고 git rebase를 해보면서 git 실력도 많이 늘어난 것 같다.
처음 제대로 써본 우리 팀 Trello
아쉬운 점
사실 2차 때도 해보고 싶었던 기능들은 많았지만 역시나 시간 부족으로 제대로 완성을 못해서 많이 아쉬웠다. 금방 끝날줄 알았던 상세페이지에서 일주일 넘게 시간을 잡아먹어서 제대로 해보자고 했던 스트리밍 페이지를 완벽하게 끝내지 못한게 너무 아쉬웠다. blob 객체로 동영상을 스트리밍 해보자고 했다가 완성을 못하고 영상 파일을 AWS S3에 올린 다음 파일을 통째로 받아오는 식으로 완성을 시켰다. 시간만 많았다면 모든 클래스에 대해 했을텐데... PM역할을 제대로 하지 못한 것 같아 팀원들에게 미안한 마음이 든다.
