[3주차 기본/심화/공유 과제] 숫자야구/깃허브 : 06/06 구현 추가수정

[jllee000]

🤙🏻 구현 기능 명세

💡 기본 과제

• Context API, 전역상태 라이브러리 사용 X (ThemeProvider 제외)
• CSS라이브러리 사용하기
• 외부 UI 라이브러리 없이 직접 컴포넌트를 구현합니다.

1. 헤더

   • 헤더에는 제목과 2개의 탭(깃허브 검색, 숫쟈야구 게임)이 위치한다.
   • 탭을 클릭하면 각 탭에 맞는 페이지를 렌더링 한다. (라우팅 X, URL은 안바뀜)

2. 숫자야구 게임

   • 게임이 시작되면 무작위 3자리 정답 숫자를 생성한다.
   • 정답을 맞춘경우 3초후 게임을 초기화 한다.

   2.1 Input

   • '최대 3자리'의 '숫자'만 입력 가능하다.
   • 중복된 숫자는 입력이 불가능하다.

   2.2 Message(사용자의 입력값에 대한 정보를 출력)

   • '최대 3자리'의 '숫자'가 아니라면, 경고 문구를 출력한다.
   • 정답을 맞춘경우 게임 승리 문구를 출력한다.
   • 오답인 경우 게임 결과를 출력한다 (ex. 1스트라이크 1볼)

   2.3 List(게임 진행 상황을 출력)

   • 이전 시도 결과를 출력한다. (ex. 123 - 1스트라이크 1볼)
   • 게임이 초기화되면 리스트도 초기화된다.

3. 깃허브 검색 기능

   • 깃허브 공공 API를 이용한다. (세부 설명에 제공되는 코드 활용)

   3.1 Input

   • 제출 시 GitHub API를 통해 해당 아이디의 프로필 정보를 요청한다.

   3.2 Card

   • 검색 성공시 사용자 정보를 출력한다.
   • 출력 항목 -> (아바타 이미지 (avatar_url), 이름 (name), 깃허브 아이디 (login), 자기소개 (bio), 깃허브 주소 (html_url), 팔로워 수 (followers), 팔로잉 수 (following)
   • x 버튼을 누르면 사용자 정보가 사라진다.
   • 사용자 이름 or 아바타 이미지를 클릭하면 해당 깃허브 Url로 이동한다. (새로운 탭이 생겨야함)

   3.3 최근 검색어

   • 검색한 아이디는 최근 검색어로 저장된다.
   • 브라우저를 새로고침해도 검색 기록은 유지된다. (localStorage 활용)
   • x 버튼을 누르면 해당 최근 검색어는 삭제된다. (localStorage에서도 삭제)

---

🔥 심화 과제

1. 숫자야구 게임

   • 시도 횟수는 최대 10회로 제한한다.
   • 시도 횟수가 10번이 넘어가면 5초후 게임을 초기화 한다.
   • 시도 횟수가 10번이 넘어가면, 게임패배 문구를 출력한다.

2. 깃허브 검색 기능

   • 최근 검색어를 클릭하면 해당 아이디로 재검색이 실행된다.
   • 최근 검색어는 최대 3개까지만 유지되며, 최신 검색어가 가장 오른쪽에 위치한다.
   • 중복된 검색어는 최근 검색어에 저장되지않는다.

3. 깃허브 검색 userInfo status에 따른 분기처리

   • idle, pending, resolved, rejected에 대한 분기 처리를 진행한다.
   • rejected인 경우(검색 결과가 없는 경우) 결과를 찾을 수 없다는 메세지를 출력한다.
   • pending인 경우(로딩 중인 경우) 스피너를 출력한다.

공유과제

제목: 숫자야구 게임 + 깃허브 검색 페이지

링크 첨부 :

🚀 내가 새로 알게 된 점

• ~ 부분 이렇게 구현했어요, 피드백 부탁해요!

🤔 구현 과정에서의 어려웠던/고민했던 부분

• ~ 부분이 잘 구현한건지 잘 모르겠어요!
• ~ 부분 다른 방법이 있는지 궁금해요!

⏳ 소요 시간

• 6h

🤳🏻 구현 결과물

**심화조건 추가 완료! 06/06일자 **

default.mp4

_.mp4

-----------------------------------------------------------
### **기존 영상 **

default.mp4

default.mp4