design:워크스페이스 모듈 로딩 스켈레톤(#83)

[seongjinss555]

Pull Request

작업 내용

• 워크스페이스 모듈 전환 시 페이지 구조에 맞는 스켈레톤 UI를 표시했습니다.
• Next.js App Router의 loading.tsx 경계로 본문 영역만 로딩 상태로 전환합니다.

작업 결과

• 대시보드, 근무표, 채팅, 캘린더, 칸반, 목록, 설정 화면별로 실제 콘텐츠 밀도에 맞는 로딩 골격이 표시됩니다.
• 공통 WorkspaceShell의 사이드바와 헤더는 유지됩니다.

변경 사항

Added

• 공통 Skeleton UI 컴포넌트
• WorkspacePageSkeleton 위젯 및 화면 유형별 변형
• 워크스페이스 모듈 12개 라우트의 loading.tsx

Changed

• 없음

Fixed

• 모듈 전환 중 본문이 비어 보여 느리게 느껴지는 상태를 로딩 UI로 보완

실행화면

• 모듈간 전환시 화면에 표시되는 스켈레톤 UI

테스트

• npm run lint
• npm run typecheck
• git diff --check
• 로컬 실행 확인 (인증 세션이 필요한 화면)
• 주요 시나리오 확인
• 영향 범위 확인

npm run lint:tw는 이번 변경과 무관한 기존 회의록/캘린더 파일의 Tailwind spacing 20건으로 실패합니다.
npm run build는 기존 Next 빌드 프로세스가 최적화 단계 이후 정체되어 완료 결과를 받지 못했습니다.

리뷰 체크리스트

• PR base branch가 올바릅니다. (develop)
• 브랜치명이 이슈 번호를 포함합니다.
• 커밋 메시지가 컨벤션을 따릅니다.
• 불필요한 console.log, 임시 코드를 추가하지 않았습니다.
• 타입 에러와 린트 에러를 확인했습니다.
• CodeRabbit 1차 리뷰를 확인했습니다.
• CodeRabbit 리뷰 반영 후 Discord에 공유했습니다.
• 최소 1명 이상의 approve 후 merge합니다.

리뷰 요청사항

• 화면별 스켈레톤 밀도와 실제 레이아웃 간 차이가 큰 부분이 있는지 확인 부탁드립니다.

관련 이슈

Closes #83

Summary by CodeRabbit

• 새로운 기능
  • 캘린더, 채팅, 대시보드, 칸반, 목록, 일정, 설정, 스프린트 화면에 맞춤형 로딩 스켈레톤을 추가했습니다.
  • 데이터를 불러오는 동안 실제 콘텐츠와 유사한 레이아웃을 표시해 화면 전환 시 레이아웃 변화를 줄였습니다.
  • 공통 스켈레톤 UI를 도입해 로딩 상태의 시각적 일관성을 높였습니다.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
syncly	Ready	Preview, Comment	Jul 21, 2026 1:51am

[coderabbitai]

Warning

Review limit reached

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

Next review available in: 48 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: 369995df-1147-42cf-9403-8d954714c258

📥 Commits

Reviewing files that changed from the base of the PR and between 66dc6a4 and 742b092.

📒 Files selected for processing (2)

• src/shared/ui/skeleton.tsx
• src/widgets/workspace-page-skeleton/ui/WorkspacePageSkeleton.tsx

📝 Walkthrough

Walkthrough

워크스페이스 모듈별 공통 스켈레톤 컴포넌트를 추가하고, 각 라우트의 loading.tsx에서 페이지 유형에 맞는 스켈레톤 variant를 렌더링하도록 연결했습니다.

Changes

워크스페이스 모듈 로딩 스켈레톤

Layer / File(s)	Summary
공통 스켈레톤 기반 src/shared/ui/skeleton.tsx, src/widgets/workspace-page-skeleton/index.ts	Skeleton 컴포넌트와 WorkspacePageSkeleton 공개 export 및 variant 타입을 추가했습니다.
페이지별 스켈레톤 레이아웃 src/widgets/workspace-page-skeleton/ui/WorkspacePageSkeleton.tsx	목록, 일정, 칸반, 대시보드, 캘린더, 채팅, 설정 레이아웃을 variant별로 구현했습니다.
모듈 라우트 로딩 연결 src/app/workspaces/[workspaceId]/*/loading.tsx	12개 모듈 라우트에 Loading 컴포넌트를 추가하고 각 페이지 유형에 맞는 variant를 연결했습니다.

Estimated code review effort: 2 (Simple) | ~10 minutes

Sequence Diagram(s)

sequenceDiagram
  participant WorkspaceRoute
  participant Loading
  participant WorkspacePageSkeleton
  WorkspaceRoute->>Loading: 로딩 경계 진입
  Loading->>WorkspacePageSkeleton: variant 전달
  WorkspacePageSkeleton-->>Loading: 페이지별 스켈레톤 반환

Loading

Possibly related PRs

• TeampleRun/syncly#40: 동일한 progress-chart 라우트의 페이지 구현과 로딩 스켈레톤을 다룹니다.

Suggested reviewers: kwon812

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	공통 Skeleton 추가, 화면별 로딩 레이아웃, loading.tsx 경계 적용, WorkspaceShell 유지 등 #83의 완료 기준을 충족합니다.
Out of Scope Changes check	✅ Passed	추가된 변경은 워크스페이스 로딩 스켈레톤 범위에 맞고, 명백히 무관한 코드 변경은 보이지 않습니다.
Title check	✅ Passed	제목이 워크스페이스 모듈 로딩 스켈레톤 추가라는 핵심 변경을 간결하고 구체적으로 잘 요약합니다.
Description check	✅ Passed	필수 섹션인 작업 내용, 결과, 변경 사항, 실행화면, 테스트, 리뷰 체크리스트, 관련 이슈가 모두 포함되어 있습니다.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch design/#83/workspace-loading-skeleton

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 3

🤖 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/shared/ui/skeleton.tsx`:
- Around line 7-10: Update the Skeleton component’s className composition to use
the project’s existing cn utility or tailwind-merge instead of a template
literal, so caller-provided rounded-* classes such as rounded-full or
rounded-2xl override the default rounded-lg without conflicting classes.

In `@src/widgets/workspace-page-skeleton/ui/WorkspacePageSkeleton.tsx`:
- Around line 146-147: Update the height-related arbitrary Tailwind values in
WorkspacePageSkeleton so every calc() subtraction includes spaces around the
operator, represented with underscores for Tailwind syntax. Apply this to both
min-h and h declarations while preserving their existing viewport calculations
and sizing behavior.
- Around line 127-135: Update the calendar grid in WorkspacePageSkeleton so the
container uses a 1px gap with the existing border-color background, and each
cell uses a white background. Remove the cell border classes, including
border-r, border-b, and last:border-r-0, while preserving the 7-column, 42-cell
layout and skeleton content.

🪄 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: 7b1b3c4f-33fc-4288-896e-68dd03828765

📥 Commits

Reviewing files that changed from the base of the PR and between f258637 and 66dc6a4.

📒 Files selected for processing (15)

• src/app/workspaces/[workspaceId]/calendar/loading.tsx
• src/app/workspaces/[workspaceId]/chat/loading.tsx
• src/app/workspaces/[workspaceId]/dashboard/loading.tsx
• src/app/workspaces/[workspaceId]/files/loading.tsx
• src/app/workspaces/[workspaceId]/meeting-notes/loading.tsx
• src/app/workspaces/[workspaceId]/notices/loading.tsx
• src/app/workspaces/[workspaceId]/notifications/loading.tsx
• src/app/workspaces/[workspaceId]/progress-chart/loading.tsx
• src/app/workspaces/[workspaceId]/project-management/loading.tsx
• src/app/workspaces/[workspaceId]/settings/loading.tsx
• src/app/workspaces/[workspaceId]/sprint-board/loading.tsx
• src/app/workspaces/[workspaceId]/work-schedule/loading.tsx
• src/shared/ui/skeleton.tsx
• src/widgets/workspace-page-skeleton/index.ts
• src/widgets/workspace-page-skeleton/ui/WorkspacePageSkeleton.tsx

[Kwon812]

고생하셨습니다~