Refactor(client): 트리뷰 파일 구조 리팩토링

[jm8468]

📌 Summary

• [Refactor] 트리뷰 파일 구조 리팩토링 #254

tree-view의 Handle 커스텀 스타일이 React Flow 기본 스타일에 밀려 적용되지 않던 문제를 해결하고, 그 과정에서 함께 발견된 폴더 구조/중복 코드/렌더링 이슈들을 정리했어요.

📚 Tasks

• Handle 컴포넌트 스타일 우선순위 문제 해결
• tree-view 폴더 구조 정리 및 파일 위치 재배치
• 커스텀 Edge 관련 코드 개선
• 중복 유틸 함수 및 인터페이스 통합
• useSingleAndDoubleClick 훅 위치 이동 및 언마운트 버그 수정
• 렌더링 시 노드 깜빡임 현상 개선

🔍 Describe

• Handle 우선순위 이슈: TreeCustomHandle 자식 컴포넌트 + 인라인 스타일로 .react-flow__handle 기본 스타일을 덮어쓰던 방식을 제거하고, vanilla-extract selectors로 .내클래스.react-flow__handle 결합 선택자를 만들어 명시도를 고정 확보하도록 변경했어요. 기존 방식은 CSS 로드 순서에 따라 적용 여부가 달라지는 불안정한 상태였어요.
• 폴더 구조 정리: 불필요하게 깊었던 폴더 depth를 줄이고(tree-base-memo-node → tree-memo-base-node 등), tree-memo, detail-modal 등을 실제 사용 범위에 맞게 tree-memo-list-node 하위로 재배치했어요.
• 중복 제거: create-node-edge.ts와 convert-memos-data.ts에 중복 정의돼 있던 NodeEdgeTypes를 통합하고, detail-modal.tsx와 tree-memo/apis/queries.ts에 각각 정의돼 있던 SelectedMemoTypes 인터페이스 중복을 정리했어요.
• useSingleAndDoubleClick 훅: 유일한 소비처인 tree-memo로 이동시켜 응집도를 높이고, 언마운트 시 clickTimeout을 정리하지 않아 발생할 수 있던 setState-after-unmount 버그를 useEffect cleanup으로 수정했어요.
• 불필요한 재생성 방지: TreeMemo에서 useDetailMemo 기본값 객체가 매 렌더 새로 생성되던 부분을 모듈 상수로 호이스팅했어요.
• 렌더링 깜빡임 개선: 데이터 로딩 전 base 노드만 있는 상태로 fitView가 먼저 계산되고, 이후 데이터가 도착하면 나머지 노드들이 갑자기 나타나며 깜빡이던 문제를 수정했어요. 쿼리가 끝나기 전에는 ReactFlow를 마운트하지 않도록 가드를 추가해, 완성된 노드 목록 기준으로 fitView가 한 번만 계산되도록 했어요.

파일 구조 변경

• tree-view/component 폴더에는 외부로 export 할 것만 남겨두었어요.
• tree-memo 폴더는 tree-view/components/tree-memo-list-node 폴더에서만 사용되므로 내부로 옮겼어요.
• DetailModal 컴포넌트는 현재 tree-view에서만 이용되어 tree-view 폴더 내부로 옮겼어요.
• DetailModal 컴포넌트를 삭제하고 해당 JSX를 tree-memo로 옮기는 작업은 나중에 명세가 나오고 진행하고자 해요.
• useSingleAndDoubleClick 훅도 같은 이유로 tree-view 폴더 내부로 옮겼어요.

👀 To Reviewer

파일 구조 변경

파일 구조 변경에 있어서는 함께 수정되는 파일을 같은 디렉토리에 두기 을 참조하면서 진행했어요.

그런데 Component 폴더의 중첩이 심해져서 어떻게 하면 더 개선할 수 있을까요?
또한, tree-memo 폴더 내의 api와 hooks 폴더도 tree-view 폴더 내부로 옮겨야 할 지 잘 모르겠어요.

[github-actions]

🎨 Storybook 배포 완료

PR 작성자: @jm8468

🔗 배포된 Storybook 보기