Giter Site home page Giter Site logo

todo-list's Introduction

todo-list

그룹프로젝트 #1

팀 13 협업 규칙

이슈

  • 이슈 태그
    • FE, BE : 대분류
    • Bug : 수정할 버그
    • Enhancement : 기능 추가
    • 의외의 항목들은 필요할 때 자유롭게 추가
  • 생성된 이슈는 Project에서 관리한다
  • 완료된 이슈는 PR에 연결한 후, PR이 완료될 때 같이 닫는다

커밋 컨벤션

  • 커밋 태그
    • feat : 새로운 기능 추가
    • fix : 버그 수정
    • docs : 문서의 수정
    • style : (코드의 수정 없이) 스타일(style)만 변경(들여쓰기 같은 포맷이나 세미콜론을 빼먹은 경우)
    • refactor : 코드를 리펙토링
    • test : Test 관련한 코드의 추가, 수정
    • chore : (코드의 수정 없이) 설정을 변경

브랜치 규칙

  • main : 배포용
  • FE, BE : 코드 리뷰용, PR 브랜치
  • FE-dev : Seong, Rano가 분업한 코드를 합치는 브랜치
  • FE-(author)-(feature) : 각각의 기능 구현 후 FE-dev로 PR
  • BE-(feature) : 각각의 기능 구현 후 BE로 PR

api 정리 (Work in Process)

기본 객체

Card

{
    "card": {
        "columnId": 1,
        "cardId": 2,
        "previousCardId": 0,
        "title": "제목",
        "body": "내용"
    }
}

Column

{
    "column": {
        "columnId": 1,
        "name": "해야 할 일",
        "cards": [
            {
                "columnId": 1,
                "cardId": 2,
                "previousCardId": 0,
                "title": "GitHub 공부하기",
                "body": "add, commit, push"
            },
            {
                "columnId": 1,
                "cardId": 1,
                "previousCardId": 2,
                "title": "블로그에 포스팅할 것",
                "body": "GitHub 공부 내용"
            }
        ]
    }
}

요청 주소

GET /api/columns

모든 칼럼의 정보를 가져옵니다.

{
    "columns": [
        {
            "columnId": 1,
            "name": "해야 할 일",
            "cards": [
                {
                    "columnId": 1,
                    "cardId": 2,
                    "previousCardId": 0,
                    "title": "GitHub 공부하기",
                    "body": "add, commit, push"
                },
                {
                    "columnId": 1,
                    "cardId": 1,
                    "previousCardId": 2,
                    "title": "블로그에 포스팅할 것",
                    "body": "GitHub 공부 내용"
                }
            ]
        },
        {
            "columnId": 2,
            "name": "하고 있는 일",
            "cards": [
                {
                    "columnId": 2,
                    "cardId": 3,
                    "previousCardId": 0,
                    "title": "HTML/CSS 공부하기",
                    "body": "input 태그 실습"
                }
            ]
        },
        {
            "columnId": 3,
            "name": "완료된 일",
            "cards": []
        }
    ]
}

GET /api/columns/:columnId

하나의 칼럼의 정보를 가져옵니다.

{
    "column": {
        "columnId": 1,
        "name": "해야 할 일",
        "cards": [
            {
                "columnId": 1,
                "cardId": 2,
                "previousCardId": 0,
                "title": "GitHub 공부하기",
                "body": "add, commit, push"
            },
            {
                "columnId": 1,
                "cardId": 1,
                "previousCardId": 2,
                "title": "블로그에 포스팅할 것",
                "body": "GitHub 공부 내용"
            }
        ]
    }
}

POST /api/columns

칼럼을 추가합니다. 응답으로 카드가 빈 리스트인 column을 보냅니다.

{
    "column" : {
        "name" : "새 칼럼"
    }
}

PUT /api/columns/:columnId

칼럼의 이름을 수정합니다. 응답으로 카드 리스트가 포함된 column을 보냅니다.

{
    "column" : {
        "name" : "새 칼럼"
    }
}

DELETE /api/columns/:columnId

칼럼을 삭제합니다. 존재하는 카드도 삭제됩니다. 204 응답을 보냅니다.

{
    "column" : {
        "name" : "새 칼럼"
    }
}

POST /api/columns/:columnId/cards

해당 칼럼에 카드를 추가합니다.

Request Body

{
    "card" : {
        "title" : "추가한 카드 제목",
        "body" : "추가한 카드 내용"
    }
}

Response Body

{
    "card": {
        "columnId": 1,
        "cardId": 9,
        "previousCardId": 0,
        "title" : "추가한 카드 제목",
        "body" : "추가한 카드 내용"
    }
}

DELETE /api/columns/:columnId/cards/:cardId

해당하는 칼럼의 카드를 삭제합니다.

PUT /api/columns/:columnId/cards/:cardId

카드의 내용을 수정합니다. 현재 카드 내용만 수정됩니다.

{
    "card": {
        "columnId": 1,
        "cardId": 2,
        "previousCardId": 0,
        "title": "카드 수정",
        "body": "카드 수정"
    }
}

GET /api/activities

활동 내역을 보냅니다.

{
    "activities" : [
        {
            "user":"Web",
            "action":"Deleted",
            "title":"GitHub 공부",
            "from":null,
            "to":null,
            "actionTime":"2021-04-07T14:10:25.038"
        },{
            "user":"Web",
            "action":"Edited",
            "title":"GitHub 공부",
            "from":null,
            "to":null,
            "actionTime":"2021-04-07T14:10:25.038"
        },{
            "user":"Web",
            "action":"Moved",
            "title":"git 공부",
            "from":"해야할 일",
            "to":"하고있는 일",
            "actionTime":"2021-04-07T14:10:25.038"
        },{
            "user":"Web",
            "action":"Added",
            "title":"git 공부",
            "from":null,
            "to":"해야할 일",
            "actionTime":"2021-04-07T14:10:25.038"
        }
    ]
}

멤버

  • Backend
    • K
  • Frontend
    • Rano
    • Seong

todo-list's People

Contributors

17-sss avatar crongro avatar gleamingstar avatar godrm avatar kihyuk-sung avatar

todo-list's Issues

[FE] Rano-Modal

Modal

  • 카드의 삭제 버튼 누를 시 팝업되는 Modal 디자인 생성
  • 기존과 같이 Container Component, Presentational Component 형식으로 생성

시나리오 (기능)

  • 카드 삭제 버튼 누를 때 Modal 창 Popup
  • Popup된 Modal에서 삭제 버튼을 누르면 카드 삭제
  • 취소 시 Modal을 닫고 아무런 동작하지 않음.

[FE] feature-list

To Do List - FrontEnd Feature List

구성

  • 헤더
    • 제목
    • 메뉴버튼
      • 사이드로그
  • 메인
    • 칼럼
      • 카드인풋
      • 삭제팝업
    • 카드

분업

  • Seong
    • 칼럼, 카드인풋, 카드
  • Rano
    • 나머지 다!

주요 컴포넌트

  • 칼럼, 카드, 카드인풋, 사이드로그

기능

  • 칼럼
    • 이름, 카운트, +, X
      • 카운트는 동적으로 칼럼내 카드개수의 총합
      • +는 카드인풋을 띄워줌
  • 카드
    • 제목, 본문, x버튼, 날짜? author?
      • X버튼
      • 더블클릭시 카드인풋을 띄워주며 input안의 현재의 값을 넣어줌
  • 카드인풋
    • input-제목, input-본문, 취소, 등록
      • 등록시 현재 input 2개의 값을 통해 객체 생성, 그 객체를 이용해 카드 추가
      • 등록버튼 비활성화기능
  • 사이드 로그
    • 로그 나열
  • 삭제 팝업
    • 삭제 버튼

추가구현사항

  • 칼럼 수정
    • 더블클릭시 input으로 변환, 수정가능
  • 칼럼 추가 및 삭제
    • 우하단 버튼 추가 및 칼럼의 X버튼 이용

[FE] Seong-Drag&Drop

FE feature list #2

옛날 연습문제 참고

기능

  • onMouseDown
    • 클릭이나 더블클릭 이벤트와 구분필요
      • 일정시간 이상 드래그? 누른상태? 유지
      • isOn? 따위의 속성을 이용해보자
    • 잔상 생성
      • cardList에만 추가, 원본list는 변경하지 않는 방향으로
    • e받아서 e.offsetX와 e.offsetY를 이용해 카드 컴포넌트 좌표 초기값 지정
  • onMouseMove
    • e받아서 e.clientX와 e.clientY, e.scrollLeft와 e.scrollRight를 이용해 위치 계속 갱신
    • left값과 각 column영역을 비교해 잔상 이동
    • (추가구현사항) 칼럼 내 순서 변경
      • top값과 card세로길이? 를 비교, 해당 순서에 잔상이동
      • splice? concat? 잘 써볼 것
  • onMouseUp
    • 상기한 onMouseDown의 isOn속성을 false로 바꾸는걸로 추적 해제
    • 현재 잔상을 list에다 넣어준다

[FE] Rano-Header

구성

  • 헤더
    • 제목
    • 메뉴버튼

기능

  • 메뉴버튼
    • 메뉴버튼 클릭 시, 오른쪽에 숨겨져있던 사이드로그 보이기
      (왼쪽방향으로 애니메이션)

[BE] 카드 이동 기능 구현

현재, PUT /api/columns/:columnId/cards/:cardId 로 요청을 보내면 내용 수정만 합니다. 이동할 수 있도록 기능 추가

[FE] Rano - CSS 전체적인 수정

디자인 피그마

기획서

프로토타입

디자인


~ 2021.04.09 (Rano & Seong)

  • 컴포넌트를 프레젠테이션부분과 컨테이너부분으로 분리
  • 폴더구조를 프레젠테이션와 컨테이너에 맞춰 정리
  • 컬럼부분 CSS 수정 (title 부분)

2021.04.12 ~ (Rano)

  • 전체적인 스타일 수정
    • Header
    • Activity (사이드바)
    • Column & Card

[FE] Seong-Fetch

FE feature list #2

목표

앱 시작시 API를 통해 저장된 데이터 렌더링

  • API 예시로 GET요청 해오기
    • 받은데이터 그대로 렌더링

동작 기록? 서버에 보내줄 내용

  • add
    • HTTP POST api/columns/{columnId}/cards/
    • POST {"card":{title, body}}
    • Response Card {대충id....}
  • edit, move
    • HTTP PUT api/columns/{columnId}/cards/{cardId}
    • columnId, cardId, prevCardId,(edit) title, body
    • move -> 드래그앤드랍 구현 이후
  • remove
    • HTTP DELETE api/columns/{columnId}/cards/{cardId}
    • 데이터필요없음

[BE] Mock API (GET)

프론트엔드를 위한 Get api 구현

  • /api/cards
  • /api/columns
  • /api/activitys

[FE] Seong-Column

FE feature list #2

구성

  • 이름
  • 카운트
  • +버튼
  • x버튼

기능

  • 해당 칼럼 안 초기 cardList 렌더링
  • 이름
    • (추가구현사항) 더블클릭시 이름 편집
  • 카운트
    • cardList의 length
  • +버튼
    • 클릭시 cardList에 카드인풋 추가
    • 카드 인풋에 reRender이벤트 전달
    • 카드인풋의 등록 이벤트 후 reRender진행
  • x버튼
    • (추가구현사항) 칼럼 컴포넌트 삭제!

[FE] Rano-SideLog

구성

  • 헤더 > 메뉴버튼
    • 사이드로그

기능

  • 로그 나열 (사이드로그)
    • X 버튼 클릭 시, 사이드로그 숨기기
      (애니메이션과 함께 오른쪽 방향으로 숨김)
    • 사이드로그의 기록(log)은 위에서부터 최신순으로 표시
    • 기록이 많아지면 사이드로그의 오른쪽에 스크롤바 생성

[BE] ToDoList 구현

  • Card
  • Column
    • 카드 추가
    • 카드 삭제
  • CardRepository
    • CRUD
  • ColumnRepository
    • CRUD
  • ColumnService
  • ColumnController

[FE] Seong-current bug list

현재 확인된 버그

  • column의 plusButton 클릭으로 plusEvent()호출 후 card 더블클릭의 editEvent()호출시 망가짐
    • if(isInProgress) return 코드가 동작안함, isInProgress 변경사항이 왜 적용되지 않는지 확인할 것
    • 혹은 isInProgress를 이용하지 않는 방향의 새로운 로직으로 짤 것
    • 해결 : cardList와 renderedList 분리
  • 수정 취소시 수정전 카드가 돌아오는게 아니라 통째로 날아가버리는 문제
    • 현재는 deleteCard에다 axios를 안해놓아서 새로고침하면 복구되긴한다
    • title.length따위로 더이상 수정/추가 구분하지말고 isModify따위의 변수를 새로 만들어 deleteCard를 추가일때는 지금처럼 삭제, 수정일때는 받아온 title, body property이용해 그대로 자리에 복구
    • 바로 위의 두 경우 전부 axios를 해줄 필요는 없다.
    • 해결 : 추가일때와 수정일때의 return 다르게 적용
  • cardInput에 입력한채로 plusEvent 호출시 인풋이 그대로 들어가는 문제
    • {title:'', body:''}의 새로운객체를 넣어주는데 어떻게 이런 현상이 일어나는 거지?
  • 칼럼 추가 후 card 추가 이벤트, 이후 놔둔채로 바로 삭제시 옆 칼럼 card추가 이벤트가 두번 일어나는 현상
    • 모르겠다
  • 드래그 앤 드롭 관련
    • click과 mouseDown이벤트 중복
      • 현재 down 0.5초후 isDown속성 변경되게 함
      • 0.5초 후에 mouseMove이벤트 추적 가능. 예전엔 이렇게해결했었는데 timer와 clearTimeout 함 써볼까
      • 해결 : 변수 useRef를 통해 씀 / .current가 뭔지? 공부할 것!
    • 드래그된 대상 card
      • position:absolute로 바꿔서 자리는 차지하지 않으나 데이터상으로 배열의 한 인덱스를 좀먹고있음
      • 그에따라 같은 열안에서 위치(세로위치)만 바꾸려고 할때 버그 발생
      • 해결방안1: column 바깥 main같은 곳에다 div하나 두고 거기다 드래그될카드 공간을 따로두자
      • 해결방안2: mouseMove의 잔상생성 이벤트 부분에서 drag중인 카드 인덱스는 무시하게 '적절히' 코딩
      • 미리 사용자에게 주의를 주자...

[BE] 프론트엔드 포함 첫 배포

해야할 일, 하고 있는 일, 완료된 일 목록에
카드를 추가, 삭제, 수정가능합니다.

백엔드에서 임시로 H2 DB 사용 중

[FE] Rano - Activity (Apply useContext)

카드가 업데이트되면 사이드바(Activity)도 업데이트 되어야 함.
하지만 prop이 무수히 타고 들어가야하기에 (prop drilling이 심해짐)
useContext를 적용하기로 함.

구현해야 할 사항

  • createContext를 활용하여 Store 느낌의 개체인 TodoStore 컴포넌트 생성
    • 전역적으로 쓰고 싶은 state OR function이든 같이 정의해줌
  • 최상위(App)에서 return 시 모든 컴포넌트들을 TodoStore 로 감싸줌
  • 쓰일 컨테이너 컴포넌트에 TodoStore에 있는 state OR function를 가져와서 적용!

[FE] Seong-Card

FE feature list #2

구성

  • 제목
  • 본문
  • 삭제 버튼
  • (추가구현사항) author by web

기능

  • 카드 전체
    • 더블클릭시 현재의 제목,본문 값을 이용해 카드인풋 컴포넌트를 띄워줌
      • 버그 : isInProgress속성 참조문제, Column의 plusEvent진행중에 더블클릭시 에러
  • 삭제 버튼
    • 클릭시 삭제

[FE] Seong-CardInput

FE feature list #2

카드인풋 말고 적당한 네이밍 생각해낼 것

구성

  • name 인풋
  • body 인풋
  • 취소 버튼
  • 등록 버튼

기능

  • input
    • 양쪽의 value의 length가 0일 경우 버튼 비활성화
  • 등록 버튼
    • 클릭시 input의 value를 받아 객체형태로 데이터 가공, 저장
    • 해당 데이터를 바탕으로 카드 컴포넌트를 만들어 칼럼에 추가
  • 취소 버튼
    • 클릭시 카드인풋 컴포넌트 제거
      • 카드리스트를 리렌더링 하는 방식으로 구현

[FE] Seong - add / delete / edit column

#2

기능

  • 칼럼 추가
    • 버튼 컴포넌트 새로 만들 것 + 놓을 위치 고민
    • api는 기존의 post
    • 기존 columns.length를 통해 새id, 임의의 기본 name을 담은 객체를 http post 를 통해 보내주자
  • 칼럼 삭제
    • 기존에 있던 x버튼 드디어 활용
    • api는 기존의 delete
  • 칼럼 편집
    • 상태값을 통해 {isEditNow ? Input태그 : column.name} 바꿔주자
    • api는 기존의 put
    • 입력완료 해줄버튼? 엔터키? 설계할것
       // 칼럼 추가 이벤트
       // setColumnData((data)=>{
       //     const newData = [...data]
       //     newData.push({columnId:newData.length,name:"적절한 기본이름", cards:[]})
       //     return newData
       // })
       
       // 칼럼 삭제 이벤트
       // setColumnData((data)=>[...data].filter((card)=>card.columnId!==columnId))

       // 칼럼 이름 편집 이벤트
       // 대충 name 을 기본값으로 가지는 input이 생성되는 코드
       // 대충 입력한 값을 name으로 지정해 렌더링하는 함수
       // const newName = ""
       // setColumnData((data)=>data.map((column)=> column.columnId !== columnId ? column : {columnId, name:newName, cards:list}))

이벤트 트리거

  • 추가
    • 버튼... 적절한 위치의 버튼 컴포넌트
  • 삭제 : 기존의 X버튼
  • 편집
    • 더블클릭 : input태그 생성
    • 편집 완료 : 무언가 적절한 버튼... 혹은 그냥 엔터키?

[BE] 활동 기록

GET /api/activities로 요청을 보내면, 활동기록을 보냅니다.

Recommend Projects

  • React photo React

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

  • Vue.js photo Vue.js

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

  • Typescript photo Typescript

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

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

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

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.