Skip to content

KIT-Frontend-Team1/pair2-Git-Issue-Project

Repository files navigation

💚 2조 git issue 프로젝트

1조 2페어의 GIT ISSUE 토이 프로젝트 레퍼지토리입니다.

❇️ 프로젝트 소개

😸 issueItem, api, filter 기능 구현한 프로젝트

❇️ 프로젝트 개요

😸 git.api를 가져와서 issue를 보여주고 필터 기능으로 업데이트, 댓글, 생성 순으로 10개, 20개, 50개의 issue 정렬한 게시판 프로젝트

❇️ 베포링크

Vercel

https://pair2-git-issue-project-git-main-pair2.vercel.app/

Nettlify

https://cosmic-salmiakki-9852fa.netlify.app/

❇️ 작업 기간

2023/06/13 ~ 2023/06/18

❇️ 와이어프레임

PC프레임 모바일프레임

❇️ 진행 팀원 소개

❄️ 고승용 🦊 심재원 🐬 오혜린

❇️ 역할 분담

  • 1순위 레이아웃 디자인 / 혜린
    api 가져오기 / 재원, 혜린
    axios로 토큰가져오기 / 재원, 혜린
    rtk로 getIssue함수 실행하기 / 승용, 혜린

  • 2순위 페이지네이션 / 재원
    필터기능 / 승용
    로딩페이지 / 승용
    디테일페이지 / 재원
    반응형 / 승용

  • 3순위 전역상태관리

❇️ Main UI

MainPage

❇️ 배포 링크 및 시연 영상

필터 기능 구현

  • 업데이트 순 업데이트

  • 댓글 수 댓글순

  • 생성 순 생성순

  • 10개 10개

  • 20개 20개

  • 50개 50개

로딩페이지 구현

로딩페이지

페이지네이션 구현

페이지네이션 11~20포함

뒤로가기 구현

-페이지네이션 뒤로가기

페이지네이션 20

-필터 뒤로가기

필터 뒤로가기

디테일페이지 구현

디테일페이지

반응형 구현

미디어쿼리

❇️ 폴더 구조

├─apis
│  └─core.js
│  └─MainApi.js
├─components
│  └─Layout
│    └─Header.js
│    └─index.js
│    └─TopButton
├─pages
│  └─main
│      └─components
│        └─ItemList.js
│        └─OneItem.js
│        └─PageDetail.js
│        └─Pagination.js
│    └─index.js
├─reducer
│  └─index.js
│  └─issue.js
├─routes
│  └─routing.js
└─store
│  └─Store.js

❇️ 사용한 기술 스택 및 라이브러리

초기셋팅
-eslint
-husky
-styled-components

사용 라이브러리
- husky, prettier, eslint
- rtk, redux-logger
- axios
- react-router-dom
- styled-components

❇️ 문서화

스프린트 💚 Pair2 Notion

데일리 스크럼

❄️ 고승용 🦊 심재원 🐬 오혜린

❇️ 회의 내용

6/13

간단한 와이어 프레임 회의
husky, prettier, eslint 생성
Main UI, axios, rtk 생성

6/14

상준님이 나가셔서 혜린님 페어 1팀으로 이동
재원님이랑 승용님 같이 페이지네이션 개발 시작(살짝 멘붕)

6/15

필터를 승용님이 맡고 페이지네이션 재원님이 완성하기로함
필터로 issue갯수 구현 완료

6/16

승용님이 필터 업데이트, 댓글, 생성순 기능 구현 완료
재원님이 페이지네이션 > 버튼 누르면 11~20번 페이지로 이동 가능

6/17

승용님이 로딩페이지 구현 완료, mediaquery 기능 구현 완료
재원님이 디테일 페이지 구현 완료

6/18

README 작성 완료
전역상태관리
배포하기 완료!