기능 요구사항 :

• 헤더 뷰 렌더링
• 메인 뷰 렌더링

세부사항

• 메인 뷰에는 컬럼 데이터가 포함
• 각 컬럼에는 현재 서버에 저장된 카드 데이터가 포함

기능 요구사항 :

• 카드 등록 뷰를 생성할 함수

세부사항

• newCard 정보(클래스명, 내용 등)을 입력받아 템플릿 리턴

기능 오류 :

• newCardView.js에서 카드를 선택할 때 querySelector을 사용해서 반드시 첫번째 column이 설정되는 오류 발견

개선 방안 :

• querySelector이 아닌, 이벤트 target를 기준으로 해당하는 btn이 포함된 column을 선택할 수 있게 변경

기능 요구사항 :

• Header view element를 리턴하는 함수 생성

세부사항

• 별도의 데이터가 없으므로 정해진 템플릿에 맞게 리턴

기능 요구사항 :

• 글자 입력 양에 따라 textArea 크기를 조절

세부사항

• 스크롤 크기를 읽어서 영역의 사이즈를 조절해 주는 함수 생성
• keyup, keydown이벤트에 사이즈 조절 함수를 등록

기능 요구사항 :

• 번들링을 위한 webpack 설정
• 브라우저 호환을 위한 babel 설정
• 코드 컨벤션을 위한 prettier 설정

세부사항

• webpack에 scss-loader, css-loader, style-loader을 활용해 javscript 파일로 번들링
• webHtmlWebpackPlugin을 이용 webpack 번들 html 생성 단순화
• babel polyfill을 corejs3로 설정
• tabWidth = 2 를 포함한 prettier 설정

기능 요구사항 :

• 버튼을 눌렀을 때 새로운 카드 등록 뷰 렌더링 토글 기능

세부사항

• 토글 함수 (이미 newCard가 렌더링 되어 있으면 삭제, 없으면 생성 및 주입)
• main에 토글 이벤트 위임 (target.closest 옵션을 이용해 플로스 버튼에만 적용)

기능 요구사항

• 위아래 같은 칼럼 내에서 이동
• 다른 칼럼 사이도 이동
• 원래 카드가 있던 자리에 잔상 있음
• 이동 경로의 절반 정도가 되면 카드의 예상 목적지로 카드의 잔상이 먼저 이동
• 이동 후 드래그 중단 시 카드는 잔상이 있던 위치로 이동하고 잔상 사라짐
• 드래그 앤 드롭으로 이동되는 카드는 반투명해짐

• 카드의 삭제 버튼(x) 클릭 시 어떤 카드를 클릭했든지 상관없이 무조건 해당 컬럼의 맨 위 카드가 삭제되는 문제 발생

기능 요구사항

• 컬럼 타이틀의 X버튼은 마우스 올렸을 때 빨간색으로 변경되게 함 (클릭 시 아무 반응 X, 추후 확장 기능)
• 카드의 X버튼에 마우스 올리면 카드가 빨갛게 됨
• 카드의 X버튼 누르면 알림 모달이 뜸
• 알림 모달의 취소 버튼 누를 시 알림창 닫히고 삭제 버튼 누를 시 알림 모달 닫히면서 카드 삭제

기능 요구사항 :

• card 정보를 담은 템플릿(string) 리턴 함수 생성
• card 데이터를 main element에 주입해 줄 함수 생성

세부사항

• card 정보(클래스명, 내용 등)을 입력받아 템플릿 리턴
• card가 주입되어야 할 대상 (column)을 매개변수로 받아 생성된 card를 대상에 주입
• card가 여러개일 경우 한번에 모두 주입할 수 있는 함수를 추가로 구성

• 제목, 내용 입력 후 등록 버튼 누르면 새로운 카드가 등록됨
  • 제목, 내용을 store에 저장 후 렌더링
• 카드 등록할 수 있는 박스는 사라짐
• 임시 db에 반영

기능 요구사항 :

• Main view element를 리턴하는 함수 생성

세부사항

• 서버로부터 데이터 요청
• 해당 데이터를 저장하는 store와 element를 포함하는 객체 형태로 리턴

• 헤더에 위치한 메뉴 버튼을 누르면 오른쪽에 숨겨져 있던 레이어가 에니메이션 효과와 함께 왼쪽 방향으로 노출된다.
• X 버튼을 누르면 애니메이션 효과와 함께 다시 오른쪽 방향으로 레이어가 숨겨진다.
• 사용자 액션이 위에서부터 최신순으로 모두 표시된다.
• 기록이 많아지면 레이어 오른쪽에 스크롤이 생긴다.

예상 동작

• 브라우저가 로딩되면 지정된 컬럼을 보여 준다.

기능 요구사항

• 내용 입력 시 등록 버튼을 활성화,
• 카드에 제목, 내용 입력 전까지는 등록 버튼 비활성화 (skyblue 색상)
• 제목이나 내용 중 어느 하나라도 입력된 게 없다면 버튼 비활성화

기능 요구사항 :

• column 정보를 담은 템플릿(string) 리턴 함수 생성
• column 데이터를 main element에 주입해 줄 함수 생성

세부사항

• column 정보(클래스명, 내용 등)을 입력받아 템플릿 리턴
• column이 주입되어야 할 대상 (main)을 매개변수로 받아 생성된 column을 대상에 주입

기능 요구사항

• 카드 더블 클릭시 등록 박스와 동일한 스타일로 전환되며 수정이 가능해짐
• 취소 버튼 누를 시 수정 취소
• 내용 모두 삭제하면 수정 버튼 비활성화
• 내용 수정 후 수정 버튼 누르면 변경사항이 반영된 카드로 변경됨

기능 요구사항 :

• 프론트에서 사용할 서버 데이터를 생성
• api 구현

세부사항

• json 데이터 (mock데이터 생성)
• json-server 사용한 라우팅 처리