Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/#213 하위요소 블록 드래그앤드랍 구현 #226

Merged

Conversation

pipisebastian
Copy link
Member

@pipisebastian pipisebastian commented Nov 27, 2024

📝 변경 사항

  • 하위요소에 대해 드래그앤드롭을 구현했습니다.

🔍 변경 사항 설명

  • 개발과정은 해당 위키에 정리중입니다,
  • 영역을 잡았을때 영역을 반투명하게 보여주려했지만, 다음과 같이 마우스를 따라가는게 아닌, 오른쪽만큼 공간이 있었습니다.
image
  • 이를 수정하기 위해서는 dnd kit 자체에서 이중으로 드래그 영역을 잡는 것이 생각났지만, 이는 지금과 같은 indent로 관리하는 구조가 아닌 이중으로 구현해야하기에 일단 패스했습니다. 다른 방법은 useSortable이 아닌 useDraggable을 쓰는 방법인데, 이는 가능한지 확신이 들지 않았습니다.
  • 그래서 일단 마우스로 잡으면, 해당영역이 반투명하게 보이고, 노션처럼 이동할 위치에 선을 두는 방식으로 변경했습니다.
  • 또한, 부모의 경우 자식요소로 이동하지 못하게 막았습니다

디벨롭이 필요한 부분

  • 또한 현재는 이동할 위치의, 부모 블록의 indent를 그대로 따라갑니다. 노션과 같은 경우에는, 바로 윗부모의 indent를 따라갈수도, 윗윗부모의 indent를 따라갈수도, 윗부모에서 indent+1 로 자식으로 갈수도 있습니다.
  • tab을 입력할때, 부모의 indent+1이 최대입니다. 그렇지만, backspace/shift+tab를 누른다면 부모, 자식관계 indent 차이가 2이상이 되버립니다. -> 해결

🙏 질문 사항

  • 리뷰어에게 부탁하고싶은 체크리스트를 추가합니다.

📷 스크린샷 (선택)

드래그앤 드롭 + backspace/shift+tab 누를시 indent 감소

2024-11-28.5.21.35.mov

ol, ul 동작 확인

2024-11-28.5.22.48.mov

✅ 작성자 체크리스트

  • Self-review: 코드가 스스로 검토됨
  • Unit tests 추가 또는 수정
  • 로컬에서 모든 기능이 정상 작동함
  • 린터 및 포맷터로 코드 정리됨
  • 의존성 업데이트 확인
  • 문서 업데이트 또는 주석 추가 (필요 시)

@pipisebastian pipisebastian added FE 프론트엔드 작업 Feat 새로운 기능 추가나 기존 기능 확장 작업 labels Nov 27, 2024
@pipisebastian pipisebastian self-assigned this Nov 27, 2024
@@ -300,17 +300,15 @@ export class BlockLinkedList extends LinkedList<Block> {
if (targetNode.prev) {
const prevNode = this.getNode(targetNode.prev);
if (prevNode) prevNode.next = targetNode.next;
} else {
this.head = targetNode.next;
}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이게 밑으로 드래그했을때, 영상처럼 위에게 다 날라가는 원인이었습니다!

2024-11-28.4.49.09.mov

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아 이부분 관련해서 질문글을 쓰고있었는데.. ㅋㅋ 바로 답이 올라왔군요! 감사합니다.

저부분이 헤드에있던 녀석이 마지막으로 이동할때, 나머지 요소들이 재정렬될때 누락이 있었나보군요.. 대단하십니다 !!

Copy link
Member Author

@pipisebastian pipisebastian Nov 28, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

영상을 보시면 첫번째 block을 밑으로 드래그할때만 버그가 발생했습니다,
2,3번째 block은 버그가 발생하지 않았습니다.

이유는 첫번째 block은 prev가 없는 상태인데, 그걸 밑으로 드래그합니다.
LinkedList의 head가 여전히 첫 번째 블록을 가리키고 있기에 연결이 망가집니다.

그래서 prev가 없는 경우(= head인 경우), 현재 head의 next(targetNode.next)를 새로운 head로 업데이트해줘야합니다.

Copy link
Collaborator

@minjungw00 minjungw00 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수고많으셨습니다!

Copy link
Collaborator

@hyonun321 hyonun321 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수고많으셨습니다 !!


interface BlockProps {
id: string;
block: CRDTBlock;
dragBlockList: string[];
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

string 으로 바뀌게된 이유가 있을까요?

@github-actions github-actions bot merged commit 56741ab into dev Nov 28, 2024
7 checks passed
Copy link
Collaborator

@Ludovico7 Ludovico7 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니다!!!

@pipisebastian pipisebastian deleted the Feature/#213_하위요소_블록_드래그앤드랍_구현 branch December 5, 2024 05:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
FE 프론트엔드 작업 Feat 새로운 기능 추가나 기존 기능 확장 작업
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants