seong-dodo / github-finder-program

깃허브 친구 찾기 프로그램

1. 프로젝트 목표

• 요구 사항 구현을 위한 전략을 세워 바닐라 자바스크립트로 코드 구현
• LocalStorage를 이용해서 즐겨찾기 기능 구현

2. 요구 사항

각 step의 '요구 사항 구현을 위한 전략'은 이슈에서 관리하고 있습니다.

⛳ step 1 - 검색 폼 구현

• 검색 입력창에서 사용자 이름을 입력할 수 있다.
• 검색 입력창에 사용자 이름을 입력하고 찾기 버튼을 클릭할 수 있다.
  • 찾기 버튼을 클릭하면 깃허브에 사용자를 검색할 수 있다.
  • 찾기 버튼을 클릭하면 즐겨찾기 리스트의 사용자를 검색할 수 있다.

⛳ step 2 - 서버 리스트 구현

• 깃허브 사용자 검색 api 응답을 받아 사용자 리스트를 이름순으로 최대 100까지 확인할 수 있다.
• 각 사용자 리스트는 프로필 이미지, 사용자 이름, 즐겨찾기 버튼으로 구성되어져 있다.
• 각 사용자의 즐겨찾기 버튼을 클릭하면 즐겨찾기에 저장 할 수 있다.
• 이미 즐겨찾기가 된 사용자의 즐겨찾기 버튼을 클릭하면 즐겨찾기를 취소할 수 있다.

⛳ step 3 - 탭 기능 구현

• 초기 화면 탭은 깃허브 탭으로 되어 있다.
• 깃허브 탭일 경우 검색 입력폼만 보여진다.
• 즐겨찾기 탭일 경우 즐겨찾기에 저장된 리스트가 있으면 즐겨찾기 전체 리스트를 보여준다.

⛳ step 4 - 로컬 리스트 구현

• 즐겨찾기 탭에서 즐겨찾기에 추가된 사용자 전체 리스트 또는 검색어와 일치하는 리스트를 이름순으로 확인할 수 있다.
• 즐겨찾기 된 사용자 리스트는 프로필 이미지, 사용자 이름, 즐겨찾기 버튼으로 구성되어져 있다.
• 즐겨찾기 된 사용자의 즐겨찾기 버튼을 클릭하면 즐겨찾기 리스트 목록에서 지울 수 있다.

github-finder-program's Issues

[Step 3] 탭 기능 구현을 위한 전략

⛳ Step 3 탭 기능 구현

TODO 탭 타입별 리스트 관리

깃허브 탭 타입일 경우

• 깃허브 탭의 class="active"가 추가되고 탭의 테두리가 생긴다.
• 즐겨찾기 탭의 class="active"가 사라지고 탭의 테두리 없어진다.
• 입력폼 입력값이 초기화된다.
• 검색 입력폼만 보여진다.
• 검색어를 찾기하면 서버리스트가 그려진다.

즐겨찾기 탭 타입일 경우

• 즐겨찾기 탭의 class="active"가 추가되고 탭의 테두리가 생긴다.
• 깃허브 탭의 class="active"가 사라지고 탭의 테두리 없어진다.
• 입력폼 입력값이 초기화된다.

TODO 페이지 접근시 최초 화면

• 초기 화면 탭은 깃허브 타입 탭이 그려진다.

[Step 4] 로컬 리스트 구현을 위한 전략

⛳ Step 4 로컬 리스트 구현

TODO 로컬스토리지 데이터 불러오기

로컬스토리지에 저장된 리스트가 있을 경우

• 로컬스토리지에 저장된 리스트를 그려준다.

찾기 버튼을 클릭했을 경우

• 로컬스토리지에 저장된 리스트와 일치하는 리스트를 그려준다.

TODO 예외처리

로컬스토리지에 저장된 리스트가 없을 경우

• '즐겨찾기 리스트가 없습니다'가 그려진다.

TODO 즐겨찾기 해제

• 사용자의 즐겨찾기 버튼을 클릭하면 리스트에서 지워지고 로컬 저장소 리스트에서 제외한다.

[Step 2] 서버 리스트 구현을 위한 전략

⛳ Step 2 서버 리스트 구현

TODO 검색 리스트 서버 요청 및 응답 받기

• 찾기 버튼을 클릭 및 엔터 키보드 눌렀을 경우 깃허브 사용자 api 서버 요청을 보낸다.

   method : GET
   쿼리스트링 : 사용자 검색한 이름
  

• 깃허브 사용자 리스트를 최대 100까지 받아온다.

• 깃허브 각각의 사용자의 프로필 이미지, 사용자 이름을 받아와서 리스트를 그려준다.

TODO 즐겨찾기 추가

• 각 사용자의 즐겨찾기 버튼을 클릭하면 로컬 저장소에 저장한다.

   데이터 스키마 명세서 : { key : 'user', value: [ { avatar_url: userImageUrl, login: userId } ] 
  

• 즐겨찾기 버튼을 클릭하면 class="far" 삭제되고 class="fas" 추가되고 즐겨찾기 버튼의 배경색이 검정으로 변경된다.

TODO 즐겨찾기 해제

• 즐겨찾기 된 사용자의 즐겨찾기 버튼을 클릭하면 로컬 저장소 저장 리스트에서 제외한다.
• class="fas" 삭제되고 class="far" 추가되고 즐겨찾기 버튼의 배경색이 투명으로 변경된다.

[Step 1] 검색 폼 구현을 위한 전략

⛳ Step 1 검색 폼 구현

TODO 검색 폼 구현

• 검색 입력폼이 그려진다.

    placeholder="사용자 검색"
  

TODO 검색 폼 이벤트

• 검색어를 입력하고 엔터 키보드를 누를수 있다 .

• 입력값이 없는 상태에서 엔터 키보드를 누르면 알림창을 띄워 사용자에게 알려준다.

      alert("값을 입력해주세요.")
  

• 엔터 키보드를 누르고 나면 입력폼 입력값이 초기화된다.

• 검색어를 입력하고 찾기 버튼을 클릭할 수 있다.

• 입력값이 없는 상태에서 찾기 버튼 클릭라면 알림창을 띄워 사용자에게 알려준다.

      alert("값을 입력해주세요.")
  

• 클릭을 하고 나면 입력폼 입력값이 초기화된다.

[요구 사항]

기술 요구 사항

• 바닐라 자바스크립트

기능 요구 사항

1. 깃허브 사용자 검색 화면

• 깃허브 탭에서 깃허브 사용자 리스트를 검색할 수 있습니다.
• 검색 입력창에 사용자 이름을 검색하고 찾기 버튼을 누르면 깃허브 api서버를 호출하여 사용자를 검색할 수 있습니다.
• 깃허브 사용자 검색 api 응답을 받아 사용자 리스트를 불러옵니다.
• 검색 결과는 최대 100개까지 불러올 수 있습니다.
• 각 사용자 리스트에서 프로필 이미지, 사용자 이름, 즐겨찾기(☆ or ★) 여부를 확인할 수 있습니다.
• 각 사용자 리스트에 즐겨찾기 버튼을 클릭하면 즐겨찾기에 추가됩니다. (☆ -> ★)
• 이미 즐겨찾기가 된 사용자의 즐겨찾기 버튼을 클릭하면 즐겨찾기를 해제할 수 있습니다. (★ -> ☆)

2 . 즐겨찾기 검색 화면

• 즐겨찾기 탭에서 즐겨찾기에 추가된 사용자 전체 리스트를 확인할 수 있습니다.
• 즐겨찾기에 추가된 사용자 리스트는 프로필 이미지, 사용자 이름, 즐겨찾기(★) 표시를 확인할 수 있습니다.
• 즐겨찾기 리스트에 있는 사용자의 즐겨찾기(★) 버튼을 클릭하면 즐겨찾기를 해제할 수 있고, 목록에서 지울 수 있습니다. (★ -> ☆)
• 즐겨찾기 탭에서 즐겨찾기된 사용자를 검색할 수 있습니다.
• 즐겨찾기 리스트에서 검색어에 해당하는 리스트를 불러옵니다.