feat: 기술 스택 드래그 앤 드롭 기능 구현 #75
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- parent 속성 기본값을 document.body에서 defaultRoot로 변경
- onRemove 메서드를 onClose로 변경 - LuTrash2 아이콘을 LuX 아이콘으로 변경 - div 요소를 header 요소로 변경하여 접근성 개선 - props를 추가하여 ModalHeader의 유연성 향상
- 기술 스택을 표시하는 TechStackItem 컴포넌트와 드래그 가능한 DraggableTechStackItem 구현 - LabelList 및 TechLabel 컴포넌트의 네이밍을TechStackModal에서 TechStackList로 변경 - 모달의 태그를 dialog로 조정하여, 시멘틱 태그를 활용 - 배럴 패턴으로 export
- 세부 컴포넌트를 분리하여 디렉토리를 구성하여 배럴 패턴으로 export - 기술 스택 모달에서 선택한 내용으로 위젯에 추가되는 드래그 앤 드롭 기능 구현 - 선택된 기술 스택을 표시하고 제거할 수 있는 UI 구성
- index.html에서 root div에 "dark" 클래스 추가 - WorkSpacePage 컴포넌트에서 불필요한 "dark" 클래스 제거 - 전체적인 스타일 일관성을 위해 수정
- curosrWithName -> CursorWithName 로 변경
- techStackInfo.ts 파일에서 모든 기술 스택 항목에 대해 id 필드 추가 - 새로운 techStack.ts 파일을 생성하여 TechStack 인터페이스 정의
- drag id에서 정규식으로 기술 스택의 id를 찾아 적절한 기술 스택 이름을 반환
- DraggableTechStackItem prop을 TechStack으로 변경
- useDraggable 훅에서 id를 `tech-stack-${id}` 형식으로 설정
- 코드 가독성을 높이기 위해 filter 함수의 매개변수 이름을 tech로 변경
- selectedTechStacks 기술 스택 데이터 타입을 TechStack[]으로 변경하여 전부 받도록 설정 - handleRemoveTech 메서드를 techId를 사용하여 기술 스택 항목을 제거하도록 수정 - TechStackItem에서 기술 스택 이름을 getTechStackName 함수를 통해 가져오도록 변경
- Merge remote-tracking branch 'origin/main' into feat/5-techstack-dnd
- DragOverlay를 모달에 위치하여 react portal에 위치하도록 하여 transform 영향을 받지 않도록 수정 - dialog에 event propagtion을 막아서, 모달 이동 및 아이템 이동시 캔버스가 이동되지 않도록 막음 - DraggableTechStackItem의 opacity를 0.5에서 0.8로 변경하여 드래그 중 시각적 피드백을 강화
SnailW
approved these changes
Jan 8, 2026
frontend/src/features/widgets/techStack/components/modal/TechStackModal.tsx
Show resolved
Hide resolved
as-zini
approved these changes
Jan 8, 2026
Collaborator
as-zini
left a comment
as-zini
left a comment
There was a problem hiding this comment.
dnd 구현이 생각보다 힘든 작업이었네요🥹 고생많으셨습니다!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🔗 관련 이슈
✅ 작업 내용
핵심 기능 구현
기술 스택 드래그 앤 드롭 기능 구현
@dnd-kit/core라이브러리를 활용한 드래그 앤 드롭 시스템 구축DraggableTechStackItem: 모달 내 드래그 가능한 기술 스택 아이템 컴포넌트SelectedTechStackBox:useDroppable을 활용한 드롭 영역 구현TechStackWidget:DndContext로 전체 드래그 앤 드롭 컨텍스트 관리DragOverlay를 사용하여 드래그 중인 아이템을 별도 레이어에서 렌더링ReactPortal 컴포넌트 추가
parentprop을 통해 렌더링 위치 커스터마이징 가능TechStackModal 개선
ReactPortal을 통해 캔버스 transform에 영향받지 않도록 처리TechStackItem 컴포넌트 추가
트러블슈팅
드래그 overlay 좌표 버그 수정
DragOverlay가 캔버스 transform의 영향을 받아 좌표가 틀어지는 문제 해결ReactPortal을 사용하여 모달과 overlay를 캔버스 외부에서 렌더링하도록 변경CursorWithName 컴포넌트 대소문자 오류 수정
리팩토링
id필드 추가 및 타입 분리@/) 방식으로 변경📸 스크린샷 / 데모 (옵션)
2026-01-08.6.19.01.mov
🧪 테스트 방법 (옵션)
💬 참고 사항
@dnd-kit/core패키지가 새로 추가되었습니다Important
전반적으로 canvas의 이벤트 핸들러가 모든 이벤트를 다 받을 수 있어서, 이벤트 전파 방지 코드를 작성을 많이 해야했습니다.
현재 상태라면 유지보수하기 어려울 것 같아, 더 적절한 아키텍쳐를 고안해보아야할 것 같습니다!