/Look-at-the-issues

github open API를 활용한 이슈 조회 웹 사이트

Primary LanguageJavaScript

이슈를 보넷 !

1. 프로젝트 설명

  • 본 프로젝트는 github open API를 활용한 특정 레포지토리의 issue를 조회할 수 있는 웹 사이트입니다.
  • 아래와 같이 레포지토리의 url주소를 통해 이슈를 쉽게 조회할 수 있도록 했습니다.

image

  • 메인 페이지 image

  • 상세 페이지 image

  • 기간은 22.03.13 ~ 22.03.18 동안 진행했습니다.

2. 배포 주소

이슈를 보넷


3. 프로젝트 폴더 구조

src
│  App.js
│  index.js
│
├─Apis
│      @core.js
│      issues.js
│
├─Components
│  │  Loading.js
│  │
│  └─Layout
│          Header.js
│          index.js
│
├─Pages
│  ├─Detail
│  │      index.js
│  │
│  ├─List
│  │  │  index.js
│  │  │
│  │  └─Components
│  │          Box.js
│  │          PerPage.js
│  │          Sort.js
│  │          style.js
│  │
│  └─Main
│       index.js
│      
├─Routes
│      routing.js
│
├─Stores
│      index.js
│      issue.js
│      issues.js
│      search.js
│
├─Styles
│      common.js
│      global.js
│      theme.js
│
└─Utils
        Pagination.js

4. 팀원

김도은

5. 사용 기술 스택

기술 스택 종류
언어
Javascript
프론트엔드
React
사용 라이브러리 사용한 부분
emotion 스타일 컴포넌트 구성 시 사용
react-router-dom URL에 따라 화면을 렌더링 시 사용
axios api를 통한 비동기 통신 시 사용
redux-toolkit 전역 상태 관리 시 사용

6. 요구 사항 구현 내역

목록 페이지

1. 이슈 목록은 10개 단위로 페이지네이션 구현
▶️ 10페이지 단위로 마지막 페이지에서 다음 페이지 누르면 다음 10페이지 뜨도록
▶️ 현재 페이지 숫자는 포커스 되어있도록
▶ 버튼은 [맨처음][이전]1, [2], 3, 4, 5 [다음][맨끝]으로 구현
gittask_1

2. 필터 기능 구현
▶️ 생성순/업데이트순/댓글순, 10개/20개/50개 씩 보기 gittask_2

▶️ 뒤로 가기 기능 지원
-필터 기능에서 뒤로가기 gittask_3



-페이지네이션에서 뒤로가기 gittask_4


7. 코드 및 깃허브 커밋 컨벤션

커밋 컨벤션 내용
✨ Feat 새로운 기능 추가
💄 Design 사용자 UI 디자인 추가 및 변경
🚑 Fix 이슈 수정
🛻 Rename 파일 혹은 폴더명 수정 혹은 이동
🔥 Remove 파일 혹은 폴더