Skip to content

fix: 팀 프로젝트 업무 위젯 레이아웃 겹침 보정#86

Merged
JiWoongE merged 2 commits into
developfrom
Fix/#85/team-project-work-widget-layout
Jul 22, 2026
Merged

fix: 팀 프로젝트 업무 위젯 레이아웃 겹침 보정#86
JiWoongE merged 2 commits into
developfrom
Fix/#85/team-project-work-widget-layout

Conversation

@JiWoongE

@JiWoongE JiWoongE commented Jul 22, 2026

Copy link
Copy Markdown
Contributor

Pull Request

작업 내용

  • 팀 프로젝트 대시보드에서 업무 위젯 레이아웃이 겹쳐 보일 수 있는 문제를 수정했습니다.
  • 저장된 레이아웃 값에 충돌이 있더라도 렌더 시점에 자동으로 정규화되도록 보완했습니다.

작업 결과

  • 저장된 예전 레이아웃이나 위젯 크기 변경으로 인해 좌표가 충돌하더라도 위젯이 겹치지 않도록 보정됩니다.
  • 초기 레이아웃 로딩, 레이아웃 변경, 위젯 추가 시 모두 동일한 정규화 로직이 적용됩니다.
  • npm run lint, npm run typecheck 통과했습니다.

변경 사항

Added

  • 대시보드 레이아웃 충돌을 정규화하는 normalizeLayout 유틸 추가

Changed

  • 대시보드 초기 상태에 저장된 레이아웃을 정규화하도록 수정
  • 레이아웃 변경 및 위젯 추가 시 정규화 로직을 적용하도록 수정
  • 대시보드 그리드 렌더 전에 레이아웃을 한 번 더 정규화하도록 수정

Fixed

  • 팀 프로젝트 대시보드에서 업무 위젯이 저장된 좌표 충돌로 겹쳐 보일 수 있는 문제 수정

실행화면

  • 팀 프로젝트 대시보드에서 위젯이 겹치지 않고 정상 배치되는지 확인
  • 저장된 레이아웃이 있는 상태에서 재진입해도 겹침 없이 렌더되는지 확인

테스트

  • 로컬 실행 확인
  • 주요 시나리오 확인
  • 영향 범위 확인

리뷰 체크리스트

  • PR base branch가 올바릅니다. (feature/* -> develop, 배포 시 develop 또는 release/* -> main)
  • 브랜치명이 Type/#issue-number/description 형식을 따릅니다.
  • 커밋 메시지가 컨벤션을 따릅니다.
  • 불필요한 console.log, 주석, 임시 코드를 제거했습니다.
  • 타입 에러와 린트 에러를 확인했습니다.
  • CodeRabbit 1차 리뷰를 확인했습니다.
  • CodeRabbit 리뷰 반영 후 Discord에 공유했습니다.
  • 최소 1명 이상의 approve 후 merge합니다.

리뷰 요청사항

  • 저장된 사용자 레이아웃 데이터가 있는 상태에서 정규화가 의도대로 동작하는지 함께 확인 부탁드립니다.
  • 팀 프로젝트 외 다른 템플릿 대시보드에도 부작용이 없는지 봐주시면 좋겠습니다.

관련 이슈

Closes #85

Summary by CodeRabbit

  • 개선 사항
    • 대시보드 위젯의 위치와 크기를 자동으로 정리해 화면에서 겹치지 않도록 개선했습니다.
    • 저장된 레이아웃이나 새로 추가한 위젯도 화면 크기와 최소 크기 조건에 맞게 안정적으로 배치됩니다.
    • 위젯 이동 및 크기 조정 시 정리된 레이아웃이 적용됩니다.

@vercel

vercel Bot commented Jul 22, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
syncly Ready Ready Preview, Comment Jul 22, 2026 6:32am

@coderabbitai

coderabbitai Bot commented Jul 22, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@JiWoongE, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 10 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 5ac616cb-500b-4e99-9421-ae3c5e046115

📥 Commits

Reviewing files that changed from the base of the PR and between e3f94a6 and 634a74a.

📒 Files selected for processing (4)
  • src/features/dashboard/edit-layout/model/useDashboardLayout.ts
  • src/shared/dashboard/lib/normalize-layout.ts
  • src/views/dashboard/ui/DashboardGrid.tsx
  • src/views/dashboard/ui/DashboardView.tsx
📝 Walkthrough

Walkthrough

대시보드 레이아웃 정규화 함수를 추가하고, 레이아웃 상태 변경 및 그리드 렌더링에 적용했습니다. 아이템 크기·위치를 보정하고 위젯 간 겹침을 해소합니다.

Changes

대시보드 레이아웃 정규화

Layer / File(s) Summary
레이아웃 정규화 알고리즘
src/shared/dashboard/lib/normalize-layout.ts
레이아웃 아이템의 크기와 위치를 열 범위에 맞게 보정하고, 겹치는 아이템을 아래로 이동한 뒤 원래 순서로 반환합니다.
레이아웃 상태 변경 정규화
src/features/dashboard/edit-layout/model/useDashboardLayout.ts
초기 레이아웃, 변경된 레이아웃, 새 위젯 추가 결과에 normalizeLayout을 적용해 상태에 저장합니다.
그리드 렌더링 정규화
src/views/dashboard/ui/DashboardGrid.tsx
정규화된 레이아웃을 빈 상태 판정, ReactGridLayoutlayout 속성, 위젯 렌더링에 사용합니다.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Suggested reviewers: kwon812

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed PR 제목이 대시보드 위젯 레이아웃 겹침 보정이라는 핵심 변경을 정확히 요약합니다.
Description check ✅ Passed 작업 내용, 결과, 변경 사항, 테스트, 리뷰 요청사항, 관련 이슈가 템플릿에 맞게 대부분 채워져 있습니다.
Linked Issues check ✅ Passed [#85] 저장·변경·추가·렌더 시 정규화로 위젯 겹침과 재진입 후 배치 안정성 요구를 충족합니다.
Out of Scope Changes check ✅ Passed 추가된 정규화 유틸과 대시보드 적용 범위가 이슈의 레이아웃 겹침 수정 목적 안에 있습니다.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch Fix/#85/team-project-work-widget-layout

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/features/dashboard/edit-layout/model/useDashboardLayout.ts`:
- Line 30: useState의 초기화에서 normalizeLayout(initialLayout.layout)로 원본과 다른 보정 결과가
생성되면, 첫 렌더를 건너뛰는 저장 effect와 별도로 해당 초기 결과를 saveDashboardLayout에 한 번 영속화하세요. 원본과
정규화 결과가 동일할 때는 저장하지 않고, 이후 레이아웃 변경에 대한 기존 저장 동작은 유지하세요.

In `@src/shared/dashboard/lib/normalize-layout.ts`:
- Around line 19-25: clampLayoutItem에서 w/h만 고정하지 말고 item의 minW, minH, maxW, maxH
제약도 함께 정규화하세요. 병합된 실제 제약 범위를 반영해 최소·최대값이 일관되도록 보정한 뒤, 해당 범위 안에서 width와 height를
계산하고 기존 cols 제한과 x/y 보정은 유지하세요.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 8e2de53c-a602-4127-868a-3e9f6b06a858

📥 Commits

Reviewing files that changed from the base of the PR and between e0f180c and e3f94a6.

📒 Files selected for processing (3)
  • src/features/dashboard/edit-layout/model/useDashboardLayout.ts
  • src/shared/dashboard/lib/normalize-layout.ts
  • src/views/dashboard/ui/DashboardGrid.tsx

Comment thread src/features/dashboard/edit-layout/model/useDashboardLayout.ts Outdated
Comment thread src/shared/dashboard/lib/normalize-layout.ts Outdated

@seongjinss555 seongjinss555 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

고생하셨습니다~

@JiWoongE
JiWoongE merged commit ee3a15a into develop Jul 22, 2026
3 checks passed
@JiWoongE
JiWoongE deleted the Fix/#85/team-project-work-widget-layout branch July 22, 2026 07:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

fix: 팀 프로젝트 업무 위젯 레이아웃 겹침 수정

2 participants