[Task] 칸반 보드 페이지 - 2. UX (드래그&드랍)

ddubbu commented 3 years ago

Task Card

칸반보드 페이지 - render 끝나고 나서

Job Description

고민

고민하고 효율이 뭐가 좋을지 - 문서화

[ ] List 간 순서 어떻게 부여할지
boards.order > STRINGIFY (pick)
lists.order 각각 부여
[ ] Task 간 순서 어떻게 부여할지
boards.order > STRINGIFY (pick)
task.order 각각 부여

drag and drop - only action

progress 간에 로직 완성하고

[x] dance party 레퍼런스 가져오기 : card 분리되도록
[x] source (출발지) width 줄이고 -> target (이동할 위치) 넓히면서 인식하기
[x] 놓으면 그곳에 넣어지도록
[x] card 간의 로직 적용

drag and drop - state 변경

[x] UPDATE list 위치 변경 > list 간 우선순위
[x] UPDATE card 위치 변경 > 속해있는 list 위치 & card 간의 우선순위

참고 자료

~[HTML]기본속성 draggable이용하기~ 위에는 옮겨지는게 안 예쁨

적용한 코드 https://heodolf.tistory.com/105

결과물

ddubbu commented 3 years ago

(해결) 그리고 초기화면에 scroll 필요 없는데 >> drop-zone height 100vh -> 80vh 로 조정
background repeat 설정 이상하네... TV 화면하고 노트북 화면 다름. 뭔가 view 크기에 따라 backgournd 되게 해야하는데

#main-content {
  background-image: url("https://trello-backgrounds.s3.amazonaws.com/SharedBackground/2286x1600/24baa6609b89fb8eb0cc0aceb70eaf36/photo-1557682250-33bd709cbe85.jpg");
  /* background-image: url("https://trello-backgrounds.s3.amazonaws.com/SharedBackground/1280x1920/64ee91344d42e824ae569901b3e909c3/photo-1611907045982-8ecba81fd8c6.jpg"); */
  /* background-color: rgb(218, 217, 217); */
  background-position: 50%;
  /* width: 100%; */
  height: 100%;
  background-repeat: no-repeat;

  padding: 5px 10px;
}

가로가 큰 화면

노트북 화면

ddubbu commented 3 years ago

helper.js

export default { 
key : value,
key : value
}

index.js

// 아래처럼 하고 싶은데..
// import { key1, key2 } from './helper.js'

결국

import helper from 'helper.js'
// 사용은 helper.key1 이렇게 함

ddubbu commented 3 years ago

drag-n-drop 고군분투

hover 로 drop-zone 대기하려고했는데, 다른 요소 잡고 있으면, hover는 인식이 안되네...
section 말고 다른 얘들도 잡힘. user-select 는 글씨 드래그 관련이었넹...
draggable HTML event 로 하는 것은 element 가 반 투명 상태로 옮겨짐.. https://gahyun-web-diary.tistory.com/167
결국 이전에 공부했던 코드 사용 https://heodolf.tistory.com/105

ddubbu commented 3 years ago

최종 로직

element 한개를 잡고나서 mouseMove : mouse.x 위치에 따라 drag-zone 이 넓혀졌다, 줄어졌다
mouseUp : 놓아진 dropzone 위치 파악해서 board.prg_priority state 변경하기

요구 사항

코드 정리 필요
progress / task 상단 border 만 drag and drop 적용됨.
progress 순서 변경 기반으로 task card 순서 변경 로직 적용 예정

ddubbu commented 3 years ago

css 적용안되면 tag 이름 의심해보라 ^^ article 을 artice 로 적어두고 헤맸다.. ㅂㄷㅂㄷ

ddubbu commented 3 years ago

Question

redux 사용해야할거 같기도

depth는 1이지만, props, handler 연결이 빈번함

ddubbu commented 3 years ago

task card drag-n-drop

task-dropzone height 비교하면 된다ㅎㅎ
className=prg-prgId-task-taskId 으로 자신이 종속된 부모 target 찾을 수 있도록

정규식 공부 https://heropy.blog/2018/10/28/regexp/

str.match(/prg-\d-task*-\d/i) 하면 될듯 >> 안됨 ㅎㅎ
결국엔 간단한 /^prg-/ ㄱㄱ

ddubbu commented 3 years ago

에러 해결

3번 카드 오른쪽 2개 있는 컬럼 상단으로 옮기면 에러남

코드 리팩토링 - 곂치는거 빼기

ddubbu commented 3 years ago

위에 이슈 해결방법

sortObject 에서 priority = '' 이면 return [ ]

new Issue

같은 컬럼에 손 놓으면 중복됨

해결방법

같은 컬럼, 다른 컬럼 이동 로직 분리
현재 task card의 idx를 알아야겠어 그래서 key 값을 얻으려했는데 React 에서 key를 얻는건 사라졌다고 하네 https://stackoverflow.com/questions/40020968/how-to-find-element-by-key-in-react
className에 taskDropZone idx 넣음

ddubbu commented 3 years ago

고민할 점

drag 인식 지점이 border 말고 progoress-head, task 전체가 되도록
코드 리팩토링 필요한데, status 를 항상 참조한단 말이지 지금 필요한 로직이 CRUD 인데 - 그거마다 handler 를 만들어 붙여??

해결 방안

drag 인식 지점이 border 말고 progoress-head, task 전체가 되도록

double click 할 때만 input 수정되도록

event 버블링, 캡처 공부 필요함

ddubbu commented 3 years ago

event 버블링 공부

https://ko.javascript.info/bubbling-and-capturing

상위 ~ 하위 요소 모두 같은 이벤트 이름에 무언가(같은 함수 아니어도 됨) 달아주고 event.target event.currentTarget // 으로 누른 지점이 아니라 상위 target 감지 가능

그래서 결론은?

흐음... 생각보다 구현이 어려움 현재 boarder 위에 잡으면 되거든? 그 잡는 구역을 늘려볼까?

ddubbu commented 3 years ago

div border 사이즈 조정

https://milooy.wordpress.com/2015/09/27/make-border-smaller-than-div-length/

codestates / ETON-client