| 김주탁 (팀장) |
하성화 | 류하준 | 변지윤 | 이형민 |
| 이슈 목록 페이지 | Github API 연동 | Context API Provider 생성 | 이슈 상세 페이지 | 공통 컴포넌트, Infinite Scroll |
yarn install
yarn dev
원티드 프리온보딩 프론트엔드 기업 협업 과제
-
- 특정 깃헙 레파지토리의 이슈 목록과 상세 내용을 확인하는 웹 사이트 구축
-
- 2022년 9월 13일 ~ 9월 15일
-
- 이슈 목록 페이지
- 이슈 상세 페이지
-
📦
src
├─api
├─assets
├─components
│ ├─common
│ │ ├─Header
│ │ ├─Layout
│ │ └─Loading
│ ├─IssueDetailItem
│ └─viewList
│ ├─ViewAd
│ ├─ViewListItem
│ └─ViewTemplate
├─constants
├─context
├─hooks
├─pages
│ ├─IssueDetail
│ └─IssueList
└─styles
- 지정된 조건(open 상태, 코멘트 많은 순)에 맞게 데이터 요청 및 표시
해결방법
- github api 사용을 위한 octokit 의존성 추가하였다.
- octokit api로직을 추상화 하였다.
- octokit api를 통하여 IssueService(getIssueDetail, getIssues)를 구현하였다.
- Context API를 활용한 API 연동
해결방법
- issue 리스트 데이터를 context API를 통해 전역적으로 관리하는 패턴으로 구현하였습니다.
- useContext를 직접 호출하기 보단 커스텀 훅으로 한번 랩핑하여 Provider 외부에서 쓸 경우에 대한 예외처리 및 hook에 명시적인 이름을 붙혀줌으로써 사용성, 가독성에 한번 더 신경 써주었습니다.
- 공통 Header 컴포넌트
- Infinite scroll
- 데이터 요청 중 로딩 표시를 위한 Loading 컴포넌트
해결방법
DOM의Scroll Event를 활용하면 상대적으로 익숙하여 구현하기는 쉬우나, 최적화를 따로 해주어야 하고, 추후TopButton등의 기능을 추가할 때 reflow를 일으킬 가능성이 있으므로, 성능적으로 좋지 않을 수 있다. 따라서IntersectionObserver를 활용하여Infinite Scroll을 구현했다.- 페이지 하단에 임시 요소를 생성하고, 해당 요소가 뷰포트에 감지되는 순간 다음 데이터를 가져오는 방식으로 구현했다.
- 공통 Header와 Layout 컴포넌트을 통해 통일성 있는 UI를 구현했다.
- Loading 컴포넌트를 통해 데이터 요청 중 Skeleton Loading을 구현했다.
- 이슈 목록 가져오기 API 활용
- open 상태의 이슈 중 코멘트가 많은 순으로 정렬
- 각 행에는 ‘이슈번호, 이슈제목, 작성자, 작성일, 코멘트수’를 표시
- 다섯번째 셀에는 광고 이미지 출력 및 링크 연동
- 화면을 아래로 스크롤 할 시 이슈 목록 추가 로딩(인피니티 스크롤)
- UI는 데스크톱, 모바일에서 보았을 때 모두 읽기 편하게 구현
해결방법
- 해결 방안 작성
- 이슈의 상세 내용 표시
- ‘이슈번호, 이슈제목, 작성자, 작성일, 코멘트 수, 작성자 프로필 이미지, 본문' 표시
- UI는 데스크톱, 모바일에서 보았을 때 모두 읽기 편하게 구현
해결방법
context API를 통해 제목, 작성자, 작성일 등 관련 데이터를 전달받아 노출될 수 있도록 구현하였다.- 읽기 편할 수 있도록
마크다운렌더링 라이브러리를 추가하여 가독성을 높여주었다. - 웹과 모바일에 대응할 수 있도록 구현하였다.
