feat(frontend): 다이어그램 테이블 자동 정렬(정렬 버튼) - #36
Merged
Conversation
Add a toolbar action to auto-arrange table nodes in a deterministic grid, with a one-step undo and accessible status messaging. Closes #25
Collaborator
Author
|
@coderabbitai 리뷰 부탁드립니다. (이슈 #25: 다이어그램 테이블 자동 정렬/되돌리기) |
📝 WalkthroughWalkthrough스냅샷을 기반으로 노드/엣지 상태를 관리하도록 ReactFlow 훅이 도입되었고, 그리드 기반 자동 레이아웃(자동 배치), 배치 취소(undo) 및 위치 스냅샷/복원 로직이 추가되었습니다. UI에 툴바(자동 레이아웃, 되돌리기)와 접근성 메시지가 포함되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User as "User"
participant Toolbar as "Canvas Toolbar"
participant Layout as "Layout Engine\n(computeSortedGridLayout)"
participant ReactFlow as "ReactFlowInstance"
User->>Toolbar: 클릭 (Auto Layout)
Toolbar->>Layout: 요청 (snapshotNodePositions -> compute layout)
Layout-->>Toolbar: 새 positions
Toolbar->>ReactFlow: applyPositions to nodes
ReactFlow->>ReactFlow: set nodes/edges, fitView()
ReactFlow-->>Toolbar: 완료 신호
Toolbar-->>User: 상태 메시지 업데이트
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Poem
Caution Pre-merge checks failedPlease resolve all errors before merging. Addressing warnings is optional.
❌ Failed checks (1 error)
✅ Passed checks (6 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
|
이슈 🧠 Learnings used✅ Actions performedReview triggered.
|
Collaborator
Author
PR checks evidenceRequired checksgh pr checks --required --watch --fail-fastMerge stategh pr view --json mergeStateStatus,mergeableRulesets / Branch policy (when permitted)gh api "repos/$OWNER/$REPO/rules/branches/$BASE_BRANCH" || gh api "repos/$OWNER/$REPO/branches/$BASE_BRANCH/protection"Code scanning (when permitted)gh api "/repos/$OWNER/$REPO/code-scanning/analyses?pr=$PR_NUMBER"
gh api "/repos/$OWNER/$REPO/code-scanning/alerts?pr=$PR_NUMBER&state=open"analysesalertsCode quality / Check-runs (when permitted)gh api "/repos/$OWNER/$REPO/commits/$HEAD_SHA/check-runs" |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Fix all issues with AI agents
In `@frontend/src/App.tsx`:
- Around line 85-103: The useEffect is currently keyed on
snapshot?.snapshot_json (object reference) which causes reruns when snapshot is
a new object even if content is identical; to fix, memoize the graph or
stringify the snapshot JSON so dependencies compare by value: either compute
const graph = useMemo(() => snapshotToGraph(snapshot?.snapshot_json),
[JSON.stringify(snapshot?.snapshot_json)]) and then have useEffect depend on
graph (and call setEdges/setNodes using that memoized graph), or change the
dependency to [JSON.stringify(snapshot?.snapshot_json), setEdges, setNodes] so
useEffect only runs when the snapshot content actually changes.
- Around line 307-309: Add an accessible label to the undo button by adding an
aria-label attribute (e.g., aria-label="정렬 되돌리기" or aria-label="Undo layout") on
the button that uses onUndoLayout and whose disabled state depends on
undoPositions and isLayouting; keep the existing title and disabled logic intact
so screen readers get a clear, consistent descriptor for the button.
- Around line 155-156: The catch block swallowing errors after the failed layout
operation loses diagnostic info; update the try/catch where
setLayoutMessage('정렬에 실패했습니다. 다시 시도해 주세요.') is called to accept the error
parameter (e.g., catch (err) or catch (error)) and log it (console.error or your
app logger) in development, while still calling setLayoutMessage for the user;
reference the catch block and the setLayoutMessage call to locate and update the
handler.
- Around line 118-133: Extract the repeated layout constants (columns, xGap,
yGap) into a shared constants module and import them into
computeSortedGridLayout so the values are not duplicated (refer to the constants
instead of the hard-coded literals in computeSortedGridLayout). Replace the
unsafe cast (a.data as any)?.title / (b.data as any)?.title by typing the node
data (e.g., declare an interface like FlowNodeData { title?: string } and use
Node<FlowNodeData> or narrow via a type guard) and access title with optional
chaining and a typed fallback (e.g., title ?? id) so sorting is type-safe;
update computeSortedGridLayout signature/usage accordingly to use the typed Node
data.
- Around line 298-309: Add explicit type="button" attributes to the two buttons
in App.tsx (the button that calls onAutoLayout and the button that calls
onUndoLayout) to avoid default submit behavior inside forms; update the button
elements that reference onAutoLayout, nodes, isLayouting and the button that
references onUndoLayout and undoPositions to include type="button".
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@frontend/src/App.tsx`:
- Around line 295-329: The toolbar buttons in the ERD canvas (the JSX buttons
that call onAutoLayout and onUndoLayout inside the element with className
"canvasToolbar") lack an explicit type attribute; update those button elements
to include type="button" to prevent them acting as submit buttons and to satisfy
a11y/semantic requirements.
- Around line 118-133: The sort in computeSortedGridLayout uses localeCompare
without a locale, which can produce non-deterministic ordering across
environments; update the comparator used when creating sorted (the localeCompare
call on aTitle and bTitle) to pass a fixed locale like 'en' (and optional
options if needed) so the title comparison is deterministic for layout purposes;
modify the line inside sort in computeSortedGridLayout to call
aTitle.localeCompare(bTitle, 'en') (or similar explicit locale) to fix the
issue.
Collaborator
Author
|
@coderabbitai 리뷰 코멘트 반영했습니다. 재검토 부탁드립니다.
|
Collaborator
Author
PR checks evidenceRequired checksgh pr checks --required --watch --fail-fastMerge stategh pr view --json mergeStateStatus,mergeable,reviewDecisionRulesets / Branch policygh api "repos/HYOSUNG-ITX-AI-Business-Department/pg-erd-cloud/rules/branches/main" || gh api "repos/HYOSUNG-ITX-AI-Business-Department/pg-erd-cloud/branches/main/protection"Code scanning (analyses)gh api "/repos/HYOSUNG-ITX-AI-Business-Department/pg-erd-cloud/code-scanning/analyses?pr=36"Code scanning (open alerts)gh api "/repos/HYOSUNG-ITX-AI-Business-Department/pg-erd-cloud/code-scanning/alerts?pr=36&state=open"Code quality / Check-runsgh api "/repos/HYOSUNG-ITX-AI-Business-Department/pg-erd-cloud/commits/5b44f80c1fc5a8874a03c208aa7fddb1642821b4/check-runs" |
🧩 Analysis chain🏁 Script executed: Length of output: 19729
✅ 반영 사항 확인
🎯 추가 개선 사항요청사항 외에도 다음과 같은 품질 향상이 이루어졌습니다:
모든 CI 체크도 통과했으며, 코드 품질이 기대 이상으로 향상되었습니다. 승인 가능한 상태입니다. 🧠 Learnings used✅ Actions performedComments resolved and changes approved. |
Collaborator
Author
PR checks evidence (pre-merge)Required checksgh pr checks --required --watch --fail-fastMerge stategh pr view --json mergeStateStatus,mergeable,reviewDecisionRulesets / Branch policygh api "repos/HYOSUNG-ITX-AI-Business-Department/pg-erd-cloud/rules/branches/main" || gh api "repos/HYOSUNG-ITX-AI-Business-Department/pg-erd-cloud/branches/main/protection"Code scanning (analyses)gh api "/repos/HYOSUNG-ITX-AI-Business-Department/pg-erd-cloud/code-scanning/analyses?pr=36"Code scanning (open alerts)gh api "/repos/HYOSUNG-ITX-AI-Business-Department/pg-erd-cloud/code-scanning/alerts?pr=36&state=open"Code quality / Check-runsgh api "/repos/HYOSUNG-ITX-AI-Business-Department/pg-erd-cloud/commits/5b44f80c1fc5a8874a03c208aa7fddb1642821b4/check-runs" |
This was referenced Aug 3, 2026
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Summary
다이어그램(React Flow)에서 테이블 노드들을 자동 정렬(정리) 할 수 있는 버튼을 추가했습니다.
Closes #25
Changes
aria-label+aria-live상태 메시지(정렬 완료/실패)Testing
npm --prefix frontend run typechecknpm --prefix frontend run buildAssumptions
Walkthrough
aria-label="ERD 자동 정렬",aria-live로 결과 메시지 노출