mina-gwak / todo-list Goto Github PK

📃 Description

요구사항 중 드래그 앤 드롭 기능을 구현

☑ Todo

• 유저가 카드를 드래그하면 잔상이 생기고, 카드가 반투명해진 채로 마우스를 따라온다.
• 이동 경로의 절반 정도가 되면 카드의 예정 목적지로 잔상이 먼저 이동한다.
• 이동 후 드래그를 중단하면 카드는 잔상이 있던 위치로 이동하고 잔상은 사라진다.
• 이동이 완료되면 서버에 카드의 위치를 수정하는 요청을 전송한다. (서버의 카드 순서 변경 로직 추가 후)
• 요청이 성공적으로 끝나면 프론트에서 변경사항을 리렌더링한다.

📃 Description

더블클릭 시 수정이 가능하고, 저장 버튼을 통해 수정 내용을 저장하는 기능을 추가

☑ Todo

• 이미 생성된 카드에 더블클릭 이벤트 실행 시 수정 가능한 카드 생성
• 취소 버튼 클릭 시 변경 사항 취소 및 기존 카드로 복귀
• 제목, 내용이 비어 있을 시 수정 버튼 비활성화
• 수정 마친 뒤 수정 버튼 클릭 시 변경된 정보를 서버에 저장
• 서버에 저장이 완료될 경우 카드 목록을 다시 렌더링

📃 Description

서버 로직 수정, 칼럼 전체 렌더링을 칼럼 뱃지 렌더링으로 수정, task에 order 속성 추가 및 처리

☑ Todo

• 액션 컨텐츠 서버 로직 수정 - 서버에서는 관련 데이터만 저장하고 돔 생성은 프론트에서 하도록
• 로직 변경 후 바뀐 데이터를 통해 렌더링
• task 데이터 순서 변경 기능 추가 (task 데이터에 order 속성 추가)
  • DELETE method 일 시(삭제 시) 데이터 삭제 및 order 속성 변경
  • PATCH method 일 시(드래그앤드롭, 수정) 데이터 수정 또는 데이터 삭제 ∙ 추가
    • 순서만 변경되는 경우 order
    • 순서, 컬럼 모두 변경되는 경우 column, order
• 추가, 삭제, 수정 요청 후 액션 데이터 업데이트 & 렌더링

📃 Description

서버에서 데이터를 가져와 컬럼과 카드를 렌더링한다.

☑ Todo

• Column, Card 컴포넌트 생성
• 데이터를 저장할 스토어 생성
• 서버에서 가져온 데이터를 스토어에 저장 후 컴포넌트 렌더링

📃 Description

버튼을 클릭하면 등록된 카드를 삭제할 것인지 묻는 alert 창이 뜨고, 삭제 버튼을 누르면 카드를 삭제한다.

☑ Todo

• X 버튼에 마우스를 올리면 카드가 빨갛게 변한다.
• alert 컴포넌트를 생성한다. 컴포넌트가 렌더링되면 뒤의 화면을 어둡게 바꿔준다.
• X 버튼을 누르면 삭제 여부를 묻는 alert 창이 뜬다.
• 취소 버튼을 누르면 alert 창이 닫힌다.
• 삭제 버튼을 누르면 alert 창을 닫고 서버에 DELETE 요청을 보낸다.
• 요청이 성공한 경우 카드 목록을 다시 렌더링한다.

📃 Description

활동 기록을 보여주는 레이어를 생성하고, 서버에서 데이터를 받아와 렌더링한다.

☑ Todo

• json-server에서 액션 데이터 가져오기
• 액션 레이어 렌더링
• 액션 데이터가 없을 경우 활동 기록이 없습니다.라는 문구 표시
• 헤더의 메뉴 버튼, 레이어의 X 버튼 클릭했을 때 레이어 열고 닫기
• 레이어 나타나고 사라질 때 트랜지션 적용

☑ Todo

• 이슈 템플릿 작성
• PR 템플릿 작성
• README 작성

📃 Description

프로젝트의 개발 환경을 설정한다.

☑ Todo

• Webpack 설정
  • SCSS 변경 사항 즉시 적용
  • JS 파일에 Babel 설정
• package.json 설정
  • nodemon 설정
  • sass 설정
• Prettier 설정
• .gitignore 설정
• json-server 설정
• 프로젝트 구조 설정
• markup 작성 및 scss 구조 설정 ∙ 작성

📃 Description

칼럼 타이틀 옆 + 버튼을 누를 시 새로운 카드를 등록하는 박스 생성, 등록 완료 시 카드 목록 추가, 특정 조건에서 박스 사라짐 기능 구현

☑ Todo

• + 버튼 마우스 올릴 시 버튼 색상 변경
• + 버튼 클릭 시 카드 등록 박스 생성
• 제목 ∙ 내용 모두 입력 시 등록 버튼 활성화
• 등록 버튼 클릭 시 제목 ∙ 내용 서버로 전송
• 서버에서 올바른 응답 시 카드 등록 박스 삭제
• 생성된 카드를 목록에 추가
• 카드 등록 박스 나타나있을 때 + 버튼 다시 클릭 시 박스 사라짐
• 카드 등록 박스의 취소 버튼 클릭 시 박스 사라짐

💡 ETC

다른 스토리에 비해 구현 시간이 길어 추후 다른 팀원이 함께 작업 예정

📃 Description

PR에서 피드백해주신 부분 수정

☑ Todo

• babel-node 글로벌 설치
• BASE_URL 위치 변경
• requestWithoutJson 함수 수정 혹은 삭제
• calculateTimeDiff 수정