# 리액트 과제 검사 가이드

## 🚀2일차 가위바위 보게임 1~4 까지의 결과물
1. 가위, 바위 보 각 버튼 클릭시 이미지가 버튼에 맞게 나와야 한다
2. 초기의 이미지가 있어야한다. (? 또는 게임시작! 과같은 이미지)

#### 테스트 노하우🤹‍♀️
1. 가위, 바위, 보 버튼을 각각 클릭해서 이미지가 맞게 잘 나오는지 테스트

#### fail 기준 🚫
* 각각의 버튼에서 하나라도 작동을 안하면 fail.
* 이미지가 잘못 나와도 fail
* 초기의 이미지가 엑박이거나 안나오면 fail

#### 잘함 기준 💛
* 기본 디자인이 아닌 예쁘게 디자인을 했다면 잘함.
* 오늘 과제 뿐만 아니라 내일 과제 까지 디자인을 예쁘게 잘 해서 끝내놨다면 잘함.

## 🚀3일차 가위바위 보게임 최종 결과물
1. 유저가 가위, 바위, 보 버튼 클릭시 컴퓨터는 랜덤하게 선택이 되어야 한다.
2. 게임의 결과가 맞게 나와야 한다 (이김, 짐, 비김이 각 카드에 유저와 컴퓨터 각자의 입장에 맞게 나와야함)
3. 결과에 따라 다른 테두리색을 보여줘야한다 (예: 이김-초록, 짐-빨감, 비김- 회색)
4. 모바일 버전이잘 나와야한다

#### 테스트 노하우🤹‍♀️
1. 가위, 바위, 보 버튼을 각각 클릭해서 컴퓨터가 랜덤한 결과를 뽑는지 확인한다.
2. 가위, 바위 보 버튼을 클릭하면서 결과와 그 색깔도 맞게 나오는지 테스트한다.
3. 가위 버튼을 2~3번 연속해서 눌러보고 그때마다 매번 결과가 다르게 나오는지 테스트 한다.
4. 모바일 버전 확인

#### fail 기준 🚫
* 위에 1,2,3,4중 하나라도 안되면 fail

#### 잘함 기준 💛
* 기본 디자인이 아닌 예쁘게 디자인을 했다면 잘함.
* 과제 외에 추가 가능이 들어가 있다면 잘함

## 🚀5일차 리액트 라이프 사이클, 과제 없음

## 🚀6일차 날씨앱 만들기 1~6 까지의 결과물
1. 현재 위치의 날씨가 UI와 함께 나와야 한다

#### fail 기준 🚫
* 날씨 정보가 맞게 안나온다
* UI디자인 없이 날씨 정보만 나온다

#### 잘함 기준 💛
* UI디자인이 예쁘면 잘함임

## 🚀7일차 날씨앱 만들기 7~9 까지, 최종 결과물 제출

1. 사이트 입장시 현재 위치의 날씨가 보여야 한다.
2. 다른 도시 버튼들을 클릭하면 다른 도시 날씨가 나와야 한다.
3. 유저가 클릭한 도시 버튼이 표시가 되어야 한다.
4. 다시 current location 버튼을 누르면 다시 현재 위치의 날씨를 볼 수 있다.
5. 도시간 이동시 로딩스피너가 보여야 한다
6. 모바일 디자인이 잘 나와야 한다 ( 가로스크롤이 생기거나 버튼이 너무 작아서 클릭할 수 없거나 그러면 안됨 )
7.
#### 테스트 노하우🤹‍♀️
* 로딩 스피너 테스트 시 잘 안보인다면 네트워크 속도를 느리게 세팅하고 테스트 할 수 있다.
* 모바일 버전 반드시 확인

#### fail 기준 🚫
* 1~5번중에 하나라도 안된다면 fail
* 초기 로딩시 NaN나 Undefined가 나오면 fail
* 화씨계산이 제대로 안되면 fail

#### 잘함 기준 💛
* 디자인이 예쁘게 되어있다면 잘함 ( 과제 진행시 했던 기본 디자인 말고)
_이정도 수준의 기본 디자인은 잘함은 아님_
* 위에 기능 말고도 추가 기능이 있다면 잘함
## 🚀8일차 쉬는날
## 🚀9일차 라우터 1~6, 과제 없음
## 🚀10일차 쇼핑몰 만들기 1~5 상단 메뉴 만들기 결과물 제출
1. 상단 메뉴 디자인이 끝나있어야 한다.
2. 특히 서치박스 디자인이 되어있어야 한다.

#### 테스트 노하우🤹‍♀️

#### fail 기준 🚫
* 1~2번중 하나라도 없다면 fail

#### 잘함 기준 💛
* 강의에서 진행한 기본 스타일이 아닌 자신만의 스타일로 디자인 했다면 잘함.
## 🚀11일차 쇼핑몰 만들기 6~9 상단 메뉴 만들기 결과물 제출
1. 랜딩페이지에 디자인이 되어있어야 한다
2. conscious choice 부분이 true이면 보이고 false이면 안보여야 한다.
3. 상품 카드에 마우스를 올려두면 커진다
4. 로그인 버튼을 클릭하면 로그인 페이지가 나온다
5. 로그인 페이지가 디자인이 되어있다.
6. 로그인 버튼 클릭 시 메인페이지로 돌아온다
7. 상품 클릭시 로그인이 안되어 있다면 로그인 페이지로 간다
8. 상품 클릭시 로그인이 되어 있다면 상품 디테일 페이지로 간다.

#### 테스트 노하우🤹‍♀️
1. conscious choice가 처음 두개 아이템에 있어야 한다.
2. 상품카드에 마우스 올려서 커지는지 테스트
3. 상품을 클릭했을 때 로그인 페이지로 가는지 테스트
4. 로그인 버튼을 누르고 다시 홈페이지로 돌아가는지 확인
6. 다시 상품을 클릭 했을 때 상품디테일 페이지로 가는지 확인 (상품 디테일 페이지는 디자인 안되어 있어도 괜찮음)

#### fail 기준 🚫
* 1~8번중 하나라도 없다면 fail

#### 잘함 기준 💛
* 강의에서 진행한 기본 스타일이 아닌 자신만의 스타일로 디자인 했다면 잘함.

## 🚀12일차 쇼핑몰 만들기 6~9 상단 메뉴 만들기 결과물 제출
1. 상품 디테일 페이지가 디자인이 되어있다.
2. 상품을 검색할 수 있다.
3. 유저는 로그아웃 할 수 있다.
4. 로그인이 된 상태이면 로그아웃 버튼이보이고 로그아웃 되어있으면 로그인으로 바뀐다.
5. H&M 로고를 클릭하면 상품 전체페이지로 돌아온다
6. 모바일 버전에서 메뉴는 사이드 메뉴로 들어간다 제품 사진들은 한장씩 세로로 나온다
7. 디테일 페이지도 모바일 지원이 되어야 한다.

#### 테스트 노하우🤹‍♀️
1. 검색어를 이미 있는 제품 하나, 아에 없는 검색어 입력 한번씩 해서 검색결과가 없어도 에러 없이 잘 나오는지 확인
2. 상단에 로그인, 로그아웃이 잘 작동하는지 표시는 잘 되는지 확인
3. 모바일 버전으로 바꿔서 잘 나오는지, 사이드바는 잘 열리고 닫히는지 확인
4. H&M 메인 로고 클릭시 랜딩페이지로 돌아가는지 확인

#### fail 기준 🚫
* 1~7번중 하나라도 없다면 fail
* 특히 모바일 버전이 지원 안되면 fail

#### 잘함 기준 💛
* 강의에서 진행한 기본 스타일이 아닌 자신만의 스타일로 디자인 했다면 잘함.
* 강의에서 다룬 기능 외에 다른 기능이 있다면 잘함
## 🚀13일차 과제 없음
## 🚀14일차 리덕스 카운터 만들기
1. 증가가 잘 된다
2. 감소가 잘 된다.

#### fail 기준 🚫
* 증가 또는 감소가 안된다면 탈락

#### 잘함 기준 💛
* 강의에서 진행한 기본 스타일이 아닌 자신만의 스타일로 디자인 했다면 잘함.
* 강의에서 다룬 기능 외에 다른 기능이 있다면 잘함
## 🚀15일차 연락처 앱 만들기
1. 연락처(이름과 전화번호)를 만들 수 있다.
2. 연락처 리스트가 보인다.
3. 연락처 추가 후에도 바로 리스트가 업데이트가 된다.
4. 연락처를 이름으로 검색할 수 있다.

#### fail 기준 🚫
* 1~4번중 하나라도 안되면 탈락

#### 잘함 기준 💛
* 강의에서 진행한 기본 스타일이 아닌 자신만의 스타일로 디자인 했다면 잘함.
* 강의에서 다룬 기능 외에 다른 기능이 있다면 잘함

## 🚀16일 ~ 19일차 과제 없음
## 🚀20일차 넷플릭스 5강 까지 결과물
1. navbar에 로고가 있어야 한다
2. 전체 화면의 색상이 검은색이어야 한다 ( 만약 본인이 다른 컨셉으로 한 학생이 있다면 컨셉에 맞는 색이라면 넘어간다.)
3. navbar에 home,movies 메뉸가 있고 각 메뉴 클릭시 url이 /, /movies로 넘어간다
4. navbar에 검색창이 있다.

#### fail 기준 🚫
* 1~4번중 하나라도 안되면 탈락
* 디자인이 전혀 안되어있거나 너무 이상하면 탈락

## 🚀20일차 넷플릭스 7강 까지 결과물
1. fetch해서 가져온 영화중 하나가 배너여야 한다.
2. 배너가 디자인이 되어있어야 한다.
3. 배너 사진 위에 영화 소개글이 있어야 한다
4. 모바일 버전에서도 배너글씨가 잘 나와야 한다

#### fail 기준 🚫
* 1~3중 하나라도 안되어있다면 탈락
* fetch로 가져온 영화데이터가 아닌 하드코딩한 배너라면 탈락
* 모바일 버전에서 배너 글씨가 넘치면 탈락
#### 잘함 기준 💛
자신만의 디자인을 해주신 분.

## 🚀21일차 넷플릭스 9강 까지 결과물
1. top reated, popular movie upcomming movie 등 최소 3개의 영화 슬라이드 리스트가 있다.
2. 각 슬라이드 안에 있는 카드들은 hover 시 디자인이 되어있다.
3. 슬라이드와 영화카드 각각 모바일 지원이 된다.

#### fail 기준 🚫
* 1~3중 하나라도 안되어있다면 탈락

#### 잘함 기준 💛
자신만의 디자인을 해주신 분.

## 🚀22일차 넷플릭스 12강 까지 결과물
1. 영화 카드에 장르 이름이 보인다

#### fail 기준 🚫
* 장르가 숫자이거나 안보이면 탈락

#### 잘함 기준 💛
자신만의 디자인을 해주신 분.

## 🚀23일차 넷플릭스 14강 까지 결과물
1. 키워드를 검색하면 키워드를 포함한 영화를 찾을 수 있다.
2. movies 페이지에서 페이지 네이션을 할 수 있다.

#### fail 기준 🚫
* 키워드를 검색했을때 검색이 안된다면 탈락
* 검색 결과가 없을때 결과 없음 안내 메세지를 안보여 준다면 탈락
* 키워드가 없을 시에는 다시 원래 리스트로 돌아가야함
* 페이지네이션에서 페이지 클릭했을때 이동 안한다면 탈락
* 페이지 네이션에서 < > 이 버튼들 동작하는지 확인 아니면 탈락
* 마지막 페이지를 눌렀을때 데이터가 잘 나와야함
* 검색어 입력후 다음 검색어로 넘어갈때 페이지네이션이 초기화가 안되면 탈락
#### 잘함 기준 💛
자신만의 디자인을 해주신 분.

#### 테스트 노하우🤹‍♀️
1. marvel 검색
2. 페이지네이션 이리저리 움직이면서 테스트
3. 페이지네이션 4에 머무른 상태에서 (1이 아닌 모든 곳)
4. hey 검색
5. 페이지네이션이 1로 초기화 되는지 확인
6. 이상한 검색어 입력
7. 결과 없음이 나오는지 확인

## 🚀24일차 과제 없음
## 🚀25일차 넷플릭스 최종 결과물
1. 카드를 클릭하면 영화 상세페이지로 넘어간다.
2. 상세페이지를 디자인하자( 영화포스터, 제목, 장르 ,인기도,줄거리,예산개봉일 등 보여야함 )
3. 리뷰 보여주기
4. 리뷰가 길때 접기, 더보기 기능 넣어주기
5. 영화 예고편 보여주기
6. 영화를 인기순으로 정렬할 수 있다.
7. 영화를 장르별로 필터링 할 수 있다.

#### fail 기준 🚫
* 1~7까지 하나라도 안된다면 탈락
* 모바일 버전이 지원 안된다면 탈락

#### 잘함 기준 💛
자신만의 디자인을 해주신 분.
추가기능을 넣어주신 분