[#54] Drag & Drop UI 구현 #55
Conversation
Co-authored-by: youdame <youdame@users.noreply.github.com> Co-authored-by: Jisoo Ahn <An-jisu@users.noreply.github.com>
| if (typeof result === "function") { | ||
| return result(obj); |
There was a problem hiding this comment.
sender 내부에서 makeUrl 함수를 호출 할 때 각각의 파라미터 순서를 지키는게 불편해서
객체로 받아서 내부에서 처리하도록 했습니다~
| @@ -47,7 +41,7 @@ class Api { | |||
| }, | |||
| }); | |||
| const data = await res.json(); | |||
| return { status: res.status, data }; | |||
| return { status: res.status, data, message: data.message }; | |||
There was a problem hiding this comment.
서버에서 오류 메시지가 있을 경우, 메시지를 담는 속성을 추가해두었습니다.
| @@ -59,11 +53,11 @@ class Api { | |||
| }); | |||
|
|
|||
| if (res.status === 204) { | |||
| return { status: res.status, data: null }; | |||
| return { status: res.status, data: null as any }; | |||
There was a problem hiding this comment.
delete 일때는 데이터가 안 담겨져서 오는데 data 속성을 null 로 해도 타입 통과가 안돼서, 일단은 any 선언했습니다.
| .imageWrapper { | ||
| width: 100%; | ||
| height: auto; | ||
| } |
There was a problem hiding this comment.
카드에 담긴 imge를 반응형으로 창 크기에 따라서 너비가 커지게 만들었습니다.
| const entireData: EntireData = { | ||
| cards: {}, | ||
| columns: {}, | ||
| columnOrder: [], | ||
| }; | ||
|
|
||
| for (const value of columnData) { | ||
| entireData.columnOrder.push(value.id); | ||
| entireData.columns[value.id] = value; | ||
| } | ||
|
|
There was a problem hiding this comment.
columnOrder의 순서대로 column 컴포넌트를 mapping하고, columnId로 entireData.columns[columnId]로 해당 칼럼의 데이터를 찾아옵니다. card 데이터는 entireData.cards[columnId] 값으로 찾아옵니다.
| @@ -82,7 +82,7 @@ const Card = ({ data, index, columnTitle, setCardList }: CardProps) => { | |||
| data={data} | |||
| columnTitle={columnTitle} | |||
| handleModalClose={handleCardModalToggle} | |||
| setCardList={setCardList} | |||
| setEntireList={setEntireList} | |||
There was a problem hiding this comment.
이건 결국 그럼 모든 컬럼에 있는 모든 카드를 하나의 스테이트에서 가져오기로 한 거군요
| <Button buttonType="plus_icon" color="white" onClick={handleCreateModalToggle}> | ||
| <ChipPlus size="lg" /> | ||
| </Button> | ||
| {entireList.cards[columnId]?.map((card, index) => ( |
There was a problem hiding this comment.
[ cards: {
columnA : [{컬럼 A 카드 A}, {컬럼 A 카드 B}],
columnB : [{컬럼 B 카드 A}, {컬럼 B 카드 B}],
columnC : [{컬럼 C 카드 A}, {컬럼 C 카드 B}],
}]대충 이런 형태인가요?
| const newCardList = prevValue.filter((card) => card.id !== data.id); | ||
| return newCardList; | ||
| }); | ||
| setEntireList( |
There was a problem hiding this comment.
모든 카드 부분을 이거로 바꾸다니.. 갱장한 노가다였겠군요 ㄷㄷ
pages/dashboard/[boardId]/index.tsx
Outdated
|
|
||
| setEntireList((prev) => ({ | ||
| ...prev, | ||
| cards: { ...prev.cards, [dragStartColumnId]: startCardList, [dragEndColumnId]: endCardList }, |
|
|
||
| useEffect(() => { | ||
| setMounted(true); | ||
| setMount(true); |
There was a problem hiding this comment.
이거는 혹시 다른 코드랑 중복되는, 가령 라이브러리의 예약어라던가, 그런 게 있었던 건가요??
There was a problem hiding this comment.
아뇨?? 아마 코드가 지워졌는데 제가 mounted 랑 mount 헷갈린거같아요
| (a, b) => Number(new Date(a.createdAt)) - Number(new Date(b.createdAt)) | ||
| ), | ||
| [dragEndColumnId]: endCardList.sort((a, b) => Number(new Date(a.createdAt)) - Number(new Date(b.createdAt))), | ||
| }, |
| } | ||
| }; | ||
| }, [dragRef]); | ||
| } |
There was a problem hiding this comment.
리턴은 안하고 Ref로 요리조리 씹뜯즐 하고 이벤트리스너만 부착합니다
| "바라는 일이 되기를 바라.", | ||
| "오늘도 좋은 하루 되세요!", | ||
| "할 수 있는 만큼만 하기.", | ||
| ]; |
There was a problem hiding this comment.
이건 헤더의 빈 부분에서 랜덤으로 알아서 튀어나오는 건가요?
There was a problem hiding this comment.
네 랜덤메시지 그냥 이스터에그로 넣어봣어요
| const mouseTouchDown = (e: MouseEvent | TouchEvent) => { | ||
| // 마우스를 눌렀을 때 이벤트 함수 | ||
| const target = e.target as HTMLElement; | ||
| if (target.className.includes("Card")) return; |
There was a problem hiding this comment.
카드를 눌렀을 때는 스와이핑이 일어나지 않고,
드래그앤 드롭이 일어나도록 했습니다.
hooks/useNotScroll.ts
Outdated
There was a problem hiding this comment.
코드는 추가해놨는데 지금 ModalWrapper 구조에서 스크롤이 막혀있어서~ 사용할 일이 없네요!
진호님 설계 굿
| if (prevColumnId === newColumnId) { | ||
| setEntireList((prev) => ({ | ||
| ...prev, | ||
| cards: { | ||
| ...prev.cards, | ||
| [newColumnId]: prev.cards[newColumnId].map((v) => (v.id === editedCard.id ? editedCard : v)), | ||
| }, | ||
| })); | ||
| return; | ||
| } |
There was a problem hiding this comment.
상태관리 툴이 없으니까 setState 구조가 괴랄하네요
There was a problem hiding this comment.
수정하는 경우에는 해당 카드의 아이디를 찾아서, map 메서드로 response로 응답받은 카드 정보로 바꿔치기 합니다.
There was a problem hiding this comment.
이 코드는 칼럼 외의 내용을 수정할 경우에 적용됩니다.
| setEntireList((prev) => ({ | ||
| ...prev, | ||
| cards: { | ||
| ...prev.cards, | ||
| [prevColumnId]: prev.cards[prevColumnId].filter((v) => v.id !== editedCard.id), | ||
| [newColumnId]: | ||
| (prev.cards[newColumnId].push(editedCard), | ||
| prev.cards[newColumnId].sort((a, b) => Number(new Date(a.createdAt)) - Number(new Date(b.createdAt)))), | ||
| }, | ||
| })); |
There was a problem hiding this comment.
칼럼까지 수정할 경우 이 코드를 실행합니다.
항상 createdAt 기준으로 정렬을 하기 때문에, 서버상태와 일치합니다.
| <Button buttonType="plus_icon" color="white" onClick={handleCreateModalToggle}> | ||
| <ChipPlus size="lg" /> | ||
| </Button> | ||
| {entireList.cards[columnId]?.map((card, index) => ( |
pages/dashboard/[boardId]/index.tsx
Outdated
|
|
||
| setEntireList((prev) => ({ | ||
| ...prev, | ||
| cards: { ...prev.cards, [dragStartColumnId]: startCardList, [dragEndColumnId]: endCardList }, |
|
|
||
| useEffect(() => { | ||
| setMounted(true); | ||
| setMount(true); |
There was a problem hiding this comment.
아뇨?? 아마 코드가 지워졌는데 제가 mounted 랑 mount 헷갈린거같아요
| } | ||
| }; | ||
| }, [dragRef]); | ||
| } |
There was a problem hiding this comment.
리턴은 안하고 Ref로 요리조리 씹뜯즐 하고 이벤트리스너만 부착합니다
| "바라는 일이 되기를 바라.", | ||
| "오늘도 좋은 하루 되세요!", | ||
| "할 수 있는 만큼만 하기.", | ||
| ]; |
There was a problem hiding this comment.
네 랜덤메시지 그냥 이스터에그로 넣어봣어요
Feature
Drag & Drop UI
: /dashboard/[boardId] 페이지에서 사용하는 드래그앤 드롭 기능입니다.
View