README.md

Week3_Assignment__Main Page 🏠

1. 프로젝트 소개 🚀
2. 구현 목록 📍
3. 프로젝트 구조 🌲
4. 역할 👋🏻
5. 프로젝트 제작 과정 ✍🏻
6. 프로젝트 설치 및 실행 ✨

🌍 배포 링크

1. 프로젝트 소개 🚀

• 개요 : 원티드 프론트엔드 프리온보딩 2기 3주차 5번째 기업 과제
• 주제 : 땅콩스쿨 메인 페이지 제작
• 기간 : 2022.02.14 ~ 2022.02.16

2. 구현 목록 📍

• 현재 게시되어 있는 땅콩스쿨 홈페이지의 메인 화면과 동일한 레이아웃 구현
• 홈페이지와 동일한 반응형 디자인
• 북클래스 페이지에서 태블릿 이미지 내부에 영상 자동 재생
• 소개 페이지에 애니메이션이 재생되는 로고 GIF 추가
• 전문가 페이지에 순서대로 체크 이미지가 나오는 애니메이션
• 베스트셀러 페이지에서 도서 이미지가 우에서 좌로 무한히 흐르는 형태의 애니메이션
• 특징 페이지에서 좌 -> 우로 책갈피가 순서대로 나오는 애니메이션
• 리뷰 페이지에서 좌/우 버튼을 통한 전환, 무한 로테이션
• 다운로드 페이지에서 버튼이 내려가고 말풍선이 나오는 애니메이션

3. 프로젝트 구조 🌲

/
├── components
│   ├── common
│   │    ├── Navigation
│   │    ├── Footer
│   │    ├── Title
│   │    ├── Text
│   │    └── DownloadButton
│   ├── Main
│   ├── About
│   ├── CheckedBooks
│   ├── ReadingBooks
│   ├── LiveVideo
│   ├── ReadingDiary
│   ├── Bestseller
│   ├── Feature
│   ├── Review
│   └── Download
├── cypress
├── pages
│   ├── _app.tsx
│   └── index.tsx
├── public
│   └── assets
├── styles
│   ├── GlobalStyles.tsx
│   └── Mixin.tsx
└── utils
    ├── constants
    ├── hooks
    └── interfaces

4. 역할 👋🏻

이름	담당 역할
🥇 공동 작업	초기 환경 설정, cypress를 활용한 E2E 테스트
황상섭	북클래스, 책 읽기, 독서 일기, 베스트셀러, 특징 컴포넌트 구현, 리팩토링, 문서 작성
정인권	메인, 소개, 전문가, 다운로드, 푸터 컴포넌트, 애니메이션 효과 구현
현다솜	네비게이션, 다운로드 버튼, 리뷰, 체크 컴포넌트 및 애니메이션 구현, useMedia Hook 생성

5. 프로젝트 제작 과정 ✍🏻

[1] 컨벤션은 다음과 같이 정했습니다 ✨

커밋명	내용
✨ feat	파일, 폴더, 새로운 기능 추가
🐛 fix	버그 수정
💄 style	코드 스타일 변경
📝 docs	문서 생성, 추가, 수정(README.md)
♻️ refactor	코드 리팩토링
🚑️ chore	코드 수정 (JSON 데이터 포맷 변경 / scss 변경 등)

자세한 내용은 여기서 확인해보실 수 있습니다!

[2] 풀 리퀘스트 시 팀원들과 코드 리뷰를 진행했습니다 🔥

풀리퀘스트 링크

[3] 이슈를 작성해 서로의 진행상황을 공유했습니다 👀

이슈 링크

[4] cypress로 팀원들과 E2E 테스트를 진행했습니다 🧪

테스트코드 링크

6. 프로젝트 설치 및 실행 ✨

1. Git Clone

git clone https://github.com/PreOnBoarding-Team17/Week3_MainPage.git

2. 프로젝트 패키지 설치

yarn install

3. 프로젝트 실행

yarn dev

4. cypress 실행

yarn cypress open