처음에는 colum 클래스명에 addEventListener를 등록했지만, column클래스명을 가지고 있는 모든 element에서 이벤트가 발생하였다.
-> todoColumn클래스에 타이틀속성에 각 Column을 의미하는 (ing, todo, complete) 값을 넣었으며 해당 클래스 값으로 addEventListener를 등록하여 해결하였다.
- complete박스부터 todo박스까지 카드생성버튼을 누르고, 마지막 todo + 버튼을 누르면 알 수 없는 오류 발생 (원인파악중) -> 해결
- 취소 버튼 클릭 시 onInput(Todo 생성창이 열려있는 여부를 판단하는) 속성값을 변경한는데, onInput 속성값이 반대로 설정되어있었음.
- 같은 클래스명으로 인하여 렌더링이 꼬이는 현상 발생 -> 클래스명 수정......
- 글의 길이에 맞춰 input height가 늘어나도록 한다. => div 태그 + input 태그로 작업 예정
- 메뉴 공지창이 브라우저 크기가 컸을 때는 정상적으로 동작하는 것처럼 보이지만, 브라우저 크기가 작을 때는 todo 영역을 침범하여 노출된다.
-> right 값으로 % 단위로 해결
- Todo 클래스의 mousedown 이벤트, click 이벤트, dbclick 이벤트가 겹쳐져 mousedown 이벤트만 발생되고 있음.
onMouseDown = e => {
if (e.target.classList.contains('card__delete')) {
this.handleDeleteBtn();
return;
}
const dataDrag = e.currentTarget.getAttribute('data-drag');
if (dataDrag === 'true' && e.detail === 1) {
e.currentTarget.classList.add('spectrum');
this.createCopyTodo(e.pageX, e.pageY);
return;
}
if (e.detail === 2) {
e.currentTarget.setAttribute('data-drag', false);
this.showEditForm();
return;
}
};mousedown 이벤트는 마우스 왼쪽 클릭을 한 번 눌렀을때 발생하는 이벤트다. 그래서 3가지 조건으로 우선 나눠서 처리하였다.
- 제일 먼저 내가 클릭한 곳이 해당 투두를 삭제하는 x 버튼 클릭시 동작하는 조건
- e.detail 속성을 사용하여 1번 클릭했는지 2번 클릭했는지 분기, 여기서 e.detail 1번과 2번 사이의 시간은 대략 1초정도 인 것 같다. 따라서 좀 더 세밀한 시간을 다루기 위해선 setTimeout을 이용하여 커스텀 비동기처리를 해야할듯 싶다.
- dataDrag 속성이 true 라는 의미는 드래그 상태를 의미하며 e.detail 값은 1 => 드래그 이벤트 관련 함수 동작
- 2번 클릭 시엔 e.detail 값은 2 => 수정폼을 보여준다.
투두 삭제 이후에 다시 투두를 등록하면 로컬스토리지에 같은 id가 들어가는 문제
=> 간단하게 로컬스토리지 todos 키가 가지고 있는 데이터의 마지막 id를 반환함으로써 중복되는 id를 가지지 않도록 수정 => 현재는 투두 삭제시 투두데이터가 완전히 사라지는형태이지만, 원래 서버를 사용한다면 따로 isDeleted 속성을 두어 제어한다는점 기억