깃허브 오픈 API를 활용하여 특정 레퍼지토리의 이슈를 조회할 수 있는 반응형 웹 사이트입니다.
- 23.06.12 ~ 23.06.18
- 박희수 : 프로젝트 구성, 페이지네이션, 필터 기능, api 받아오기, 반응형 구현
- 오현우 : 프로젝트 구성, rtk 활용 상태관리, 상세페이지 구현, 쿼리스트링 활용 뒤로가기 기능 구현
가. 목록페이지
-
이슈 데이터를 가져와야하는 레퍼지토리는 https://github.com/angular/angular-cli를 활용 할 것
-
이슈 목록은 10개 단위의 페이지네이션으로 구현할 것,
-
총 이슈의 갯수는 최근 200개로 한정 ( total item: 200 )
- api에서 구할 수 없는 데이터이므로 임의로 정할 것
- 만약 총 이슈의 갯수가 200개가 안된다고 하더라도 빈 페이지가 보이도록 구현
-
현재 페이지의 숫자는 포커스 되어있어야 할것 < 1, 2, 3, [4], 5, 6 , 7, 8, 9 , 10 >
-
10페이지 단위로 마지막 페이지에서 다음 페이지를 누르면 다음 10 페이지가 뜨도록 구현할 것
- < 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 > [다음버튼]
- < 11, 12, 13, 14, 15, 16, 17, 18, 18, 20 >
-
버튼은 [맨처음] [이전] 1, [2], 3, 4, 5 [다음] [맨끝]으로 구현할 것
-
-
필터 기능 구현 (생성순/업데이트순/댓글순, 10개/20개/50개 씩 보기)
-
필터 기능 및 페이지네이션 구현 시 뒤로가기 기능을 지원해야한다
ex) 2페이지 → 3페이지 (뒤로이동) → 2페이지
생성순 → 업데이트순 (뒤로이동) → 생성순
-
목록은 RTK를 활용하여 전역 상태 관리 할 것
-
모바일 및 태블릿 화면으로 봐도 UX에 불편함이 없어야 함
-
데이터가 받아오는 동안 리스트 화면은 로딩 페이지를 띄워야함
나. 상세페이지
- 이슈의 id 값을 활용하여 api를 요청하고 해당 issue의 상세페이지를 구현할 것
- 모바일 및 태블릿 화면으로 봐도 UX에 불편함이 없어야 함
다. 공통
- 각 기능 마다 브랜치를 파서 merge 할 것
- README.md에 아래와 같은 사항을 추가할 것
- 프로젝트 설명
- 배포 주소 or 시연 영상
- 프로젝트 폴더 구조
- 팀원
- 사용 기술 스택
- 요구 사항 구현 내역
- 코드 및 깃허브 커밋 컨벤션
-
react, octokit, styled-components 설치 + prettier, husky
- 리액트 컴포넌트를 이용하기 위해서 styled-compnents 설치를 했고,
- 깃허브 api를 쉽게 제어하기 위해 깃허브 라이브러리 octokit 설치를 하였습니다.
-
octokit을 활용해 issue api 받아오기
- api의 타이틀, 내용, 생성날짜, 수정날짜 등을 받아오고, map을 이용해 화면에 도출했습니다.
-
페이지네이션 구현
- 버튼을 누르면 페이지 이동이 가능하고 이전 버튼 이후 버튼을 누르면 그 전 페이지로 이동 가능하게 구현했습니다.
- 게시글 필터 기능을 구현을 통해 게시글의 개수를 선택하면 해당 숫자만큼 게시글이 화면에 뜹니다.
-
sort를 이용해 필터 기능 구현
- sort는 깃허브에 내장되어 있는 필터 기능입니다.
- created, updated, comments 세가지 필터를 구현했고, 필터 별로 잘 작동되고 있습니다.
-
rtk를 이용해 전역상태 관리, 상세페이지 구현
- rtk를 이용해 전역상태 관리를 함으로써 유지보수에 용이하게 기존의 코드를 변경해 줬습니다.
- main의 게시글을 누르면 클릭된 게시글의 상세페이지가 보이도록 구현했습니다.
-
css를 이용해 다양한 화면에서 사용자가 보기 용이하게 UI 반응형 구현
- midea-query을 이용해 모바일 및 테블릿 화면으로 보아도 불편함이 없게 ui를 구현했습니다.
-
뒤로가기 기능이 정상적으로 작동하게 구현 - query-string을 이용해 필터, 게시글 개수, 페이지네이션의 뒤로가기 기능이 정상 작동하게 구현했습니다.