Closed ddubbu closed 3 years ago
#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;
}
helper.js
export default {
key : value,
key : value
}
index.js
// 아래처럼 하고 싶은데..
// import { key1, key2 } from './helper.js'
결국
import helper from 'helper.js'
// 사용은 helper.key1 이렇게 함
user-select
는 글씨 드래그 관련이었넹...css 적용안되면 tag 이름 의심해보라 ^^ article 을 artice 로 적어두고 헤맸다.. ㅂㄷㅂㄷ
redux 사용해야할거 같기도
depth는 1이지만, props, handler 연결이 빈번함
str.match(/prg-\d-task*-\d/i)
하면 될듯 >> 안됨 ㅎㅎ/^prg-/
ㄱㄱ3번 카드 오른쪽 2개 있는 컬럼 상단으로 옮기면 에러남
같은 컬럼에 손 놓으면 중복됨
- drag 인식 지점이 border 말고 progoress-head, task 전체가 되도록
- double click 할 때만 input 수정되도록
- event 버블링, 캡처 공부 필요함
https://ko.javascript.info/bubbling-and-capturing
상위 ~ 하위 요소 모두 같은 이벤트 이름에 무언가(같은 함수 아니어도 됨) 달아주고 event.target event.currentTarget // 으로 누른 지점이 아니라 상위 target 감지 가능
흐음... 생각보다 구현이 어려움 현재 boarder 위에 잡으면 되거든? 그 잡는 구역을 늘려볼까?
Task Card
칸반보드 페이지 - render 끝나고 나서
Job Description
고민
고민하고 효율이 뭐가 좋을지 - 문서화
drag and drop - only action
progress 간에 로직 완성하고
drag and drop - state 변경
UPDATE
list 위치 변경 > list 간 우선순위UPDATE
card 위치 변경 > 속해있는 list 위치 & card 간의 우선순위참고 자료
~[HTML]기본속성 draggable이용하기~ 위에는 옮겨지는게 안 예쁨
적용한 코드 https://heodolf.tistory.com/105
결과물