v1.24.0 — 흐름 지도

목록으로 그린 지도는 "무엇이 있나"는 알려 줬지만 "어디까지 배선됐나"는 못 보여 줬습니다. 연결이 화살표로 보이지 않으면 갈래가 몇 개인지, 어느 화면이 고아인지 머릿속으로 조립해야 합니다.

이제 흐름 화면의 지도 탭이 실제 그래프입니다. pan/zoom, 자동 배치, 연결선이 있고 화면을 누르면 그 화면으로 갑니다.

• 닿지 않는 화면도 자리를 받습니다 — 마지막 열 뒤에 섭니다. 배치에서 빠지면 지도에 안 보이고, 안 보이면 "연결을 깜빡했다"는 사실 자체를 모르게 됩니다.
• 끊긴 연결은 지우지 않고 빨간 점선으로 남깁니다. 같은 이유입니다.
• 노드 위치는 저장하지 않습니다. 시작 화면에서 BFS 로 깊이를 매겨 열로 세웁니다. 좌표를 흐름 파일에 넣으면 "지도에서 옮긴 위치"가 시연 데이터의 일부가 되어 화면 편입과 별개로 관리해야 하고, 여럿이 만지면 좌표만 충돌합니다.

의존성이 하나 늘었습니다 — @xyflow/react

갤러리는 부품을 대개 직접 만듭니다(툴팁·팝오버·타임라인·코드 하이라이터·마크다운). 이번에 그 기준을 gallery/README.md 에 명시했습니다.

규칙은 둘이고 서로 다른 이야기입니다:

1. 소비 프로젝트의 컴포넌트 라이브러리는 쓰지 않습니다(예외 없음). 갤러리가 소비자 컴포넌트를 쓰면 "갤러리가 깨져서 컴포넌트를 못 보는" 순환이 생깁니다. 이건 순환에 대한 규칙이지 서드파티 의존 일반에 대한 규칙이 아닙니다.
2. 서드파티 의존은 비용-편익으로 판단합니다. 아이콘을 직접 그린 건 하나가 10줄이기 때문이고, 터미널을 직접 만든 건 append-only 목록이면 충분해서입니다. 기준은 제대로 만들려면 그 자체가 프로젝트가 되는 것만 들인다 — pan/zoom·엣지 라우팅·뷰포트 맞춤이 각각 그렇습니다.

비용

• 설치 +1.9MB. 이 패키지는 이미 vite(2.3MB)·jiti(1.7MB)를 함께 설치합니다.
• 여러분의 프로덕션 번들에는 영향이 없습니다. gallery/ 는 exports 에 없어 앱이 import 할 수 없고, ie gallery 로 dev 서버를 띄울 때만 로드됩니다.
• 갤러리 안에서도 동적 import 입니다. 컴포넌트 갤러리만 보면 xyflow 는 받아 오지 않습니다(지도 탭을 열 때 받습니다).