boostcamp-2020 / issuetracker-34 Goto Github PK

View Code? Open in Web Editor NEW

3.0 6.0 4.0 465 KB

부스트캠프 3주 그룹프로젝트

JavaScript 99.75% HTML 0.23% Shell 0.02%

react nodejs express javascript mysql

issuetracker-34's Introduction

🏷️ IssueTracker-34

부스트캠프 3주 그룹프로젝트

🙆‍♂️ 팀원

J064 류남광	J169 임기봉	J171 임채욱	J211 탁성건

ISFJ	ISFP	ISFJ	ISFJ

❤️ 프로젝트 소개

로그인 페이지

github 로그인을 제공합니다.
이외의 별도의 로그인 수단은 존재하지 않습니다.

메인 페이지

현재 생성된 이슈 목록을 볼 수 있는 페이지입니다.
logout, 새로운 이슈 생성, 라벨 관리(생성, 수정, 삭제), 이슈 필터, 이슈 상세페이지로 이동하는 기능을 제공합니다.
이슈 제목을 클릭하면 이슈 상세 페이지로 이동합니다.

이슈 필터

보달창이 뜨는 것 외에는 기능이 없습니다.
창 외부를 클릭하면 창이 닫힙니다.
본래 목적은 선택한 버튼에 따라 검색 결과를 보여줘야하지만 모달창만 구현되었습니다.

Author, Label, Milestone, Assignee

작성자, 라벨, 작업자에 따른 필터를 이슈목록에 적용 할 수 있는 기능을 제공합니다.
선택한 결과에 따라 해당 이슈들이 목록으로 나타납니다.

이슈 생성 페이지

새로운 이슈를 생성할 수 있습니다.
이슈 제목을 작성해야만 생성 버튼이 활성화 됩니다.
이슈 본문에서 내용 작성을 그만둔 후 3초 후에 현재 작성한 글자 수를 잠시 보여줍니다.
assignees를 지정할 수 있습니다.
labels를 지정할 수 있습니다.
이슈 생성을 취소하면 메인 페이지으로 돌아갑니다.

이슈 상세 페이지

이슈 제목을 수정 할 수 있습니다.
assignees를 지정 할 수 있습니다.
labels를 지정 할 수 있습니다.
이슈를 open, close 할 수 있습니다.
이슈에 comment를 작성 할 수 있습니다.

라벨 페이지

새로운 Label을 생성 할 수 있습니다.
- 라벨의 이름과 색상을 지정하면 왼쪽 위의 미리보기 컴포넌트에 실시간으로 반영됩니다.
현재 존재하는 Label의 목록이 나타납니다.
Edit 버튼을 누르면 Label의 내용을 수정 할 수 있습니다.
Delete 버튼을 누르면 Label을 삭제합니다.

💻 Install & Run

Install

git clone -b production --single-branch https://github.com/boostcamp-2020/IssueTracker-34.git

GitHub OAuth

GitHub OAuth 설정 후 Client ID와 Client Secret을 .env에서 활용합니다.

Frontend

IssueTracker-34/front/.env 파일 생성

API_URL=api_url
HOMEPAGE_URL=front_url
GITHUB_CLIENT_ID=client_id

npm install & start

cd IssueTracker-34/front
npm install
npm start

Backend

IssueTracker-34/back/.env 파일 생성

DB_HOST=localhost
DB_USER=username
DB_PASS=password
DB_DATABASE=database_name

SEQ_DIALECT=mysql
SEQ_POOL_MAX=pool_max
SEQ_POOL_MIN=pool_min
SEQ_POOL_ACQUIRE=pool_acquire
SEQ_POOL_IDLE=pool_idle

PORT=port_number
PRIVATEKEY=privatekey_name
baseURL=base_url
GITHUB_CLIENT_ID=github_client_id
GITHUB_CLIENT_SECRET=github_client_secret

npm install & start

cd IssueTracker-34/back
npm install
npm start

http://127.0.0.1:3000/ 접속

📃 Documents

개발 일지

데일리 스크럼

스프린트 계획 회의 회의록

피어 세션

그룹 회고

issuetracker-34's People

Contributors

Stargazers

Watchers

Forkers

gyim1345 pieisland profornnan rockpell

issuetracker-34's Issues

Filters 버튼

Filters 버튼을 클릭시 드롭다운 목록이 나타남
팝업창에는 Open issues, Your issues, Everything assigend to you, Everyting mentioning you, Closed issues 총 5가지 옵션이 존재
필터 종류 중 하나를 선택하면 필터 종류 드롭다운이 닫히면서 필터 조건이 적용된 목록만 나타남(옵션은 하나만 적용됨)
필터 종류를 선택하지 않고 다른 영역 클릭 시 팝업이 닫힌다.

마일스톤 버튼

마일스톤 목록 화면으로 이동

필터 검색창

필터 적용 상태가 텍스트 형식으로 표시됨
초기 상태는 is:issue is:open이다.(오픈된 이슈 목록이 나타남)
검색창의 텍스트를 모두 지우면 "Search all issues"라고 연하게 텍스트가 나타난다. 이후 엔터를 누르면 모든 이슈 목록이 나타난다.
사용자가 검색창에 적용된 텍스트를 수정하여 엔터를 하면 해당 텍스트에 맞는 필터가 적용된다.
초기 상태가 아닌 경우 필터 초기화 버튼 나타남

Labels 버튼

클릭시 레이블 목록 화면으로 이동
버튼 옆에 현재 사용하는 레이블 개수를 표시

Delete 버튼

버튼을 누르면 확인 메세지 팝업이 뜬다.
확인 버튼을 누르면 해당 레이블이 삭제되고 목록화면에 반영된다.
취소 버튼을 누르면 레이블 삭제는 진행되지 않는다.
해당 레이블을 가지고 있는 issue에 삭제가 모두 적용된다.

이슈 작성(추가적 기능)

제목 작성을 해야 오른쪽 하단의 submit new issue 버튼 활성화.
글자 타이핑하지 않고 2초 지날 시 현재 입력된 글자 수가 2초간 나타났다 사라짐.
attach files by selecting here 클릭 시 이미지 선택할 수 있음.
- 이미지 선택 시 서버에 업로드
- 저장된 이미지 주소가 마크다운 형식으로 작성 영역에 추가.

이모티콘 기능 (선택)

이슈 코멘트에 이모티콘 표시

이슈 목록

이슈 목록들을 담는 컴포넌트와 이슈 컴포넌트로 구성
이슈 컴포넌트는 제목, 마일스톤, 레이블, 이슈 번호, 이슈 작성 시간, 작성자, 담당자를 표시
이슈 제목 클릭시 상세 화면 페이지로 이동

이슈 상세 화면 제목 표시

이슈 제목, 이슈 번호, 오픈 여부, 작성자, 해당 이슈가 오픈된 시간, 코멘트 개수 표시

필터 초기화 버튼

필터 적용 상태일 때 필터 버튼과 목록 사이에 생성
해당 버튼을 누르면 적용된 필터 초기화후 초기 상태로 변함(is:issue is:open)

ERD 작성

mysql workbench를 사용해서 ERD 작성

Due date 입력창

선택 입력 사항 공백으로 놔둘수 있음
“연도. 월. 일.” 형식으로 이루어진 유효한 날짜값인지 확인한다. 유효하지 않을 경우 해당 값을 빨간색으로 표시한다.

화면 제목 및 설명

제목 : New milestone
설명 : Create a new milestone to help organize your issues and pull requests. Learn more about milestones and issues.

사용자 프로필 사진 표시

글 작성 왼쪽 영역에 표시됨.

코멘트 작성 영역

코멘트 목록 최하단에 새로운 코멘트 작성 영역 표시
코멘트 편집 화면과 동일한 구조를 갖는다.
Cancel, Update comment 대신 Close issue와 Comment 버튼이 표시된다.

Edit 버튼

버튼 클릭시 해당 레이블 목록 바로 아래에 레이블을 편집할 수 있는 영역이 나타난다.
레이블 추가 영역과 동일한 기능을 가지고 있으며 Delete 버튼이 우측 상단에 추가된다.
레이블 추가 영역의 Create label버튼 대신 Save changes 버튼이 위치한다.

마일스톤 목록 페이지용 삭제 기능

해당 마일스톤을 삭제

마일스톤에 issue 가 묶인 것들을 삭제 안하고 issues의 해당 마일스톤 속성만 삭제

배포

ncloud를 사용하여 배포를 한다.

Assigness, Labels, Milestone 공통

각각은 클릭 시 글씨와 톱니바퀴가 파란색으로 변경.

New label 버튼

버튼 클릭 시 새로운 레이블을 추가할 수 있는 영역이 나타난다.
레이블 이름과 색깔 입력 시 반영된 형태를 볼 수 있는 미리보기 컴포넌트가 있다.
Label name을 입력할 수 있는 input 창이 있다.(입력 시에 미리보기 컴포넌트가 업데이트 된다.)
레이블 설명을 입력할 수 있는 input 창이 있다.(작성하지 않아도 레이블을 생성할 수 있다.)
색상 코드는 초기값이 입력되어 있다.
리프레시 버튼을 누르면 랜덤하게 색상 코드를 생성해서 변경해준다.
색상 코드를 변경하면 리프레시 버튼과 미리보기의 색상이 변경된다.
Cancel 버튼을 누르면 새로운 레이블 추가 영역이 사라진다.
Create label버튼을 누르면 입력한 내용내로 새로운 레이블이 추가되고 레이블 추가 영역은 사라진다.

Labels 영역

초기값: Not yet
클릭 시 레이블 목록 드롭다운이 뜨고 선택 가능. 선택 시 해당 레이블로 변경. 레이블 색상 적용.
드롭다운 상단 글: Apply labels to this issue
드롭다운 내용으로 각각의 label이 색깔, 내용을 포함해 나옴.

목록 필터

Author, Label, Milestones, Assignee 필터 버튼
체크 박스가 하나라도 체크되면 목록 필터 버튼 사라짐

Assigness 영역, Labels 영역, Milestone 영역

이슈 작성 화면과 동일하게 Assignees와 Labels, Milestone이 표시됨
현재 선택된 이슈에 해당 내용들을 적용해야한다.

체크 박스

이슈 목록에서 선택한 개수만큼 이슈 목록 상단 영역에 표시 ex)1 selected
이슈 목록 상단 영역의 체크 박스를 클릭하면 전체선택 또는 전체해제 되어야함

로그인 구현

로그인 화면 css

"이슈 트레커" 타이틀과
"sign in with Github (github icon)" 버튼

Oauth 및 token validator 적용

New issue 버튼

클릭시 새로운 이슈 생성화면으로 이동

Assigness 영역

초기값: No one--assign yourself
클릭 시 담당자 목록 드롭다운이 뜨고 선택 가능. 선택시 해당 담당자로 텍스트가 변경됨.
assign yourself 텍스트를 클릭 시 바로 본인이 담당자로 할당됨.
드롭다운 상단 글: Assign up to 10 people to this issue
드롭다운 내용으로 프로필과 이름이 나옴.

전체 레이블 목록 표시

레이블 목록 상단에 전체 레이블 개수를 표시 ex) 8 labels
레이블 이름과 배경색이 표시
레이블 설명을 한줄로 표시
모든 레이블 목록은 우측에 Edit과 Delete 버튼을 함게 가진다.

추가 필터

추가 필터 조건은 작성자, 레이블, 마일스톤, 담당자 총 4가지이다.
각 추가 필터 버튼을 누르면 드롭다운이 나타난다.
레이블, 마일스톤, 담당자 목록에는 "Unlabeled", "Issues with no milestone", "Assigned to nobody" 옵션을 선택 할 수 있다.
원하는 목록을 선택하면 드롭다운이 닫히면서 해당 값의 조건이 적용된 목록만 필터링 된다.
드롭다운 외 영역을 클릭하면 필터가 적용되지 않고 드롭다운이 닫힌다.

Milestone 버튼

클릭시 마일스톤 목록 화면으로 이동
버튼 옆에 현재 진행중인(오픈 상태인) 마일스톤 개수를 표시

이슈 작성(기본)

프로필 오른쪽에서 제목 작성 영역.
제목 작성 시에 오른쪽 하단 submit new issue 버튼 활성화
본문 영역에 새로운 이슈 작성
cancel 버튼 클릭 시 이슈 목록 화면으로 이동
submit new issue 버튼 클릭 시 작성한 사항 저장하고 이슈 상세 화면으로 이동
- issue 생성 API 호출
- Assigness, Labels, Milestone 영역에서 지정한 내용도 같이 API로 저장

milestone edit 버튼

edit 누를시에 마일스톤 수정 화면으로 이동 할 수 있게끔 구현

이슈 제목 수정 기능

이슈 제목 오른쪽에 Edit 버튼이 위치한다.
버튼 클릭 시 이슈 제목 수정이 가능하도록 제목이 input 박스로 변경되며 Edit 버튼은 Save, Cancel 버튼으로 변경됨
제목 수정 후 Save 버튼 클릭 시 수정된 제목 반영, 원래의 제목 디자인으로 돌아감
Cancel 버튼 클릭 시 아무 내용도 반영되지 않고 원래의 제목으로 돌아감

마일 스톤 closed 기능 구현

누르면 open 상태에서 closed 로 변함

이슈 코멘트

이슈 작성자의 프로필과 아이디, 작성 시간, 이슈 내용이 코멘트 디자인으로 표시됨
다른 사용자가 단 코멘트도 같은 디자인으로 표시됨 (Edit 버튼은 없다.)
현재 작성된 코멘트들을 API를 호출하여 불러온다.

Milestone 영역

초기값: No milestone
클릭 시 마일스톤 드롭다운이 뜨고 선택 가능. 선택시 어떤 마일스톤을 선택했는지 알 수 있도록 변경.
드롭다운 상단 글: Set milestone
드롭다운 내용으로 milestone 종류가 나옴.
- 해당 마일스톤에 대한 진행률도 보임.

test

수정하기!

이슈 작성자 표시

이슈 작성자가 누구인지 알 수 있게 표시. ex) Owner, Author...

마일스톤 목록 헤더

헤더에는 milestone의 icon + open 갯수 + "Open" 과 체크 아이콘 + closed 갯수 + "Closed"

Labels, Milestones버튼(마일 스톤 탭 하이라이트)

Labels 버튼 클릭 시 labels 목록으로 이동

Description 입력창

선택 입력 사항 공백으로 놔둘수 있음

개발 환경 구축

웹프론트/웹백엔드 폴더 구분
웹팩, eslint, prettier

마일스톤 label과 milestone nav 버튼

마일스톤 목록 화면과 마일스톤 수정 화면 상단에 있는 label 혹은 milestone 이동 할 수 있는 버튼 작성

Title 입력창

마일스톤 진행률과 이슈 개수 표시

마일스톤 목록 우측에 진행률과 해당 마일스톤과 관련된 오픈/클로즈 이슈의 개수가 표시된다.

진행률은

퍼센테이지 bar
숫자로 표현된 진행률 + "completed" 와 open 갯수 + "open" 과 closed 갯수 + "closed"

로 구현한다

자신이 작성한 이슈(또는 코멘트) 수정 기능

자신이 작성한 이슈(또는 코멘트) Edit 버튼 클릭 시 내용 수정 가능한 텍스트 박스 형태로 변경됨
상단 Edit 버튼 사라지고 텍스트 박스 하단에 Cancel과 Update comment 버튼 나타남
내용 수정 후 Update comment 버튼 클릭 시 수정 내용 반영, 원래 코멘트 디자인으로 돌아감
- 수정 내용 반영 시 API 호출
Cancel 버튼 클릭 시 아무 내용도 반영되지 않고 원래의 코멘트 디자인으로 돌아감

Create milestone 버튼

버튼을 누르면 입력한 내용대로 새로운 마일스톤이 만들어지고, 마일스톤 목록 화면으로 이동한다.

마일스톤 목록 바디(헤더 아래 마일스톤 목록들)

마일 스톤 목록들 출력

마일스톤 이름과 완료일이 표시된다. 완료일이 없다면 “No due date”와 같이 표시한다.
- 마일스톤에 대한 설명이 한 줄로 표시된다. 설명이 없다면 표시하지 않는다.(일정 이상 길어지면 ...으로 나타나도록 설정)
- 마일스톤 목록 우측에 진행률과 해당 마일스톤과 관련된 오픈/클로즈 이슈의 개수가 표시된다.
- Edit 버튼
  - 누를 시에 마일스톤 편집 화면으로 이동
- Close 버튼
  - 누를 시에 상태가 closed 로 변함
- Delete 버튼
  - 누를 시에 해당 milestone만 삭제됨

Mark as 버튼

체크 박스가 하나라도 체크되면 나타남
모든 체크 박스가 해제되면 목록 필터 버튼으로 돌아감
Mark as 버튼 클릭시 드롭다운 목록이 생성
팝업창에는 Open, Closed 버튼이 있으며 선택된 이슈들의 상태를 일괄 적용할 수 있다.
적용 후 팝업은 닫히고, 변경된 상태가 반영되어 이슈 목록이 업데이트됨

페이지 구축

React-router 라이브러리을 사용해서 라우팅 구현

구현해야할 페이지 목록

로그인 화면(넘어가는 버튼만 작성)
이슈 목록 화면
새로운 이슈 생성 화면
이슈 상세 화면
레이블 목록 화면
마일스톤 목록 화면
마일스톤 생성 화면
마일스톤 수정 화면