Light

boostcamp-2020 / issuetracker-31 Goto Github PK

View Code? Open in Web Editor NEW

2.0 6.0 4.0 734 KB

TEAM 31

JavaScript 99.77% HTML 0.23%

issuetracker-31's Introduction

Issue Tracker

http://49.50.167.222:3000/

Teammate 👨‍👩‍👦‍👦

J052	J062	J088	J193
김종원	김혜지	박준호	조준형

Tech Stack

Frontend	Backend	etc
React Webpack/babel	Express MySQL	ESLint Prettier

How to Start

git clone https://github.com/boostcamp-2020/IssueTracker-31.git
cd IssueTracker-31

frontend

script
```
cd frontend
npm install
npm run dev
```

backend

backend directory에 .env 파일 추가

.env 파일

PORT=3000
NODE_ENV=development
DB_HOST=127.0.0.1
DB_PORT=3306
DB_USER=your_database_id
DB_PASSWORD=your_database_password
DB_DATABASE=issue_tracker

DB Schema는 위키에서 볼 수 있습니다.

script
```
cd backend
npm install
npm run dev
```

Wiki

더 많은 정보는 wiki에서 확인해주세요!

Project

project에서 개발 과정을 확인할 수 있습니다 💻📈⏰

실제 화면

issuetracker-31's People

Contributors

Stargazers

Watchers

Forkers

hyex bell-won zunopark mi277

issuetracker-31's Issues

[CreateIssue] 입력 취소

[ ]

[IssueList] Lables 버튼에 개수 표시

Labels 버튼에 개수 표시

[IssueList] IssueListComponent-IssueFilterComponent의 state 값에 따른 상태 값 변화

클릭된 상태: 모든 이슈의 체크 박스 해제 (should)
클릭안된 상태: 모든 이슈의 체크 박스 클릭 (should)

[IssueList] IssueListComponent 구현

default로 오픈 상태의 이슈만 보여주기
filtering 결과 보여줄 목록이 없으면 No Results matched 라는 텍스트 표시

[IssueDetail] 이슈 제목 수정 요청

이슈 제목 수정 요청

[IssueList] Mark as PopUp

체크된 issue open 요청
체크된 issue close 요청
요청 후 검색창 상태 초기화
단일 선택만 가능

[IssueList] IssueListComponent-이슈 목록에서 선택된 모든 체크 박스 해제되면 IssueFilterComponent 변경

클릭되었던 체크 박스를 해제한다.
몇 개의 이슈가 선택되었는지 표시한 내용이 사라진다.
"mark as" 버튼이 사라지고 모든 필터 버튼이 생성된다.

[FE] client side routing

[BE] 여러 개의 issue 상태 변경 업데이트 API

[] 여러 개의 issue 상태 변경 업데이트 API

[BE] 전체 Milestone 목록 API

[IssueList] LinkButtonComponent 구현

LinkButtonComponent
Routing

[IssueList] Author PopUp

단일 선택만 가능

[IssueList] PopUpComponent UI 구현

팝업창의 제목
팝업창의 아이템들
- 팝업 컴포넌트를 사용하는 곳에서 넘겨받기(in props)
아이템 하나 선택 후, 팝업창이 바로 사라지거나/배경을 클릭했을 때 사라지는 옵션
- props.disappear = "direct" || "click"
단일선택/복수선택
- props.multiSelect = true || false(default)
아이템 선택 시 state가 변경
- 그럼 이 팝업 컴포넌트의 상태를 구독하는 컴포넌트들이 동작하겠지라는 생각

[IssueList] New Issue Button → Issue 생성 화면으로 Routing

New Issue Button → Issue 생성 화면으로 Routing

[IssueList] 모든 milestone 요청

[IssueList] 모든 label 요청

모든 label 요청

[BE] filter된 issue 목록 API

filter된 issue 목록 API

[IssueList] IssueComponent 구현

클릭 시 상세 화면 페이지로 이동 (should)
Open/Close 경과 시간 표시 (would)

[IssueDetail] IssueDetailHeaderComponent UI 구현

[BE] 토큰 검증 middleware

[] 토큰 검증 middleware

[CreateIssue] 이미지 저장 요청

[CreateIssue] CreateIssuePage UI 구현

[IssueList] IssueListComponent-이슈 목록에서 하나 이상 체크 박스가 클릭되면 IssueFilterComponent 변경

체크 박스가 "-" 모양으로 클릭된다.
몇 개의 이슈가 선택되었는지 표시한다.
모든 필터 버튼이 사라지고 "mark as" 버튼이 생성된다.

[IssueList] SearchBarComponent-검색 창에 필터 적용 상태 표시

[Login] 로그인 화면 컴포넌트 구현

로그인 화면 컴포넌트 구현

[IssueList] 전체 Issue 목록 요청

전체 Issue 목록 요청
axios 함수 재활용 고려해서 util로 작성
필터 정보를 기반으로 이슈 목록 요청 작성

[Login] 토큰 존재 여부 확인

토큰 존재 여부 확인

[IssueList] IssueListComponent-팝업 클릭 시 조건 만족하는 이슈만 이슈 목록에 rendering

[Login] 인증 후 이슈 목록 페이지로 이동

인증 후 이슈 목록 페이지로 이동

[IssueList] SearchBarComponent-필터 초기화

[CreateIssue] 이슈 생성 요청

[ ]

[IssueList] Filter Selector Component UI 구현

클릭 시 팝업이 뜬다.

[BE] 전체 user 목록 API

전체 user 목록

[CreateIssue] 이미지 삭제 API

(이슈 등록을 취소하는 경우, 이미지를 등록했다면) 이미지 id를 받아서 삭제

[IssueList] SearchBarComponent-이슈 검색

[BE] 전체 Label 목록 API

[IssueList] SearchBarComponent UI 구현

검색 창의 default 값은 open issue

[IssueList] Milestones Button → Milestones 목록 화면으로 Routing

Milestones Button → Milestones 목록 화면으로 Routing

[IssueList] Milestone PopUp

"마일스톤 없음" 옵션 선택 가능
단일 선택 가능

[IssueList] IssueFilterComponent UI 구현

필터 버튼 클릭 시 PopUpComponent render (should)

[BE] 토큰 검증 API

토큰 검증 API

[BE] oatuh 로그인 API

oatuh 로그인 API

[IssueList] Label Popup

"레이블 없음", 모든 레이블 옵션 선택 가능
중복 선택 가능

[IssueList] Label Button → Label 목록 화면으로 Routing

Label Button → Label 목록 화면으로 Routing

[Login] oauth 로그인 요청

oauth 로그인 요청

[IssueList] HeaderComponent UI 구현

모든 페이지에서 공통적으로 사용되는 헤더 컴포넌트를 구현한다.

[IssueList] Milstones 버튼에 현재 오픈 상태인 개수 나타내기

Milstones 버튼에 현재 오픈 상태인 개수 나타내기

[CreateIssue] 이미지 마크다운 형식으로 변환하여 삽입

[ ]

[CreateIssue] 이미지 업로드

[IssueList] ButtonComponent 구현

ButtonComponent 구현
default 버튼 형태 render

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.