[Refactor/#156] 사이드바 드롭다운 오버플로우 처리

[YermIm]

🚨 관련 이슈

close #156

✨ 변경사항

• 🐞 BugFix Something isn't working
• 💻 CrossBrowsing Browser compatibility
• 🌏 Deploy Deploy
• 🎨 Design Markup & styling
• 📃 Docs Documentation writing and editing (README.md, etc.)
• ✨ Feature Feature
• 🔨 Refactor Code refactoring
• ⚙️ Setting Development environment setup
• ✅ Test Test related (storybook, jest, etc.)

✏️ 작업 내용

드롭다운 워크스페이스 목록 스크롤 및 새 워크스페이스 고정

확장 상태	축소 상태

😅 미완성 작업

N/A

📢 논의 사항 및 참고 사항

N/A

💬 리뷰어 가이드 (P-Rules)
P1: 필수 반영 (Critical) - 버그 가능성, 컨벤션 위반. 해결 전 머지 불가.
P2: 적극 권장 (Recommended) - 더 나은 대안 제시. 가급적 반영 권장.
P3: 제안 (Suggestion) - 아이디어 공유. 반영 여부는 드라이버 자율.
P4: 단순 확인/칭찬 (Nit) - 사소한 오타, 칭찬 등 피드백.

Summary by CodeRabbit

• 버그 수정
  • 워크스페이스 전환기 드롭다운의 위치 지정과 크기 조정을 개선했습니다.
  • 워크스페이스 목록에 스크롤 기능을 추가하여 많은 워크스페이스를 효율적으로 표시할 수 있도록 했습니다.

[coderabbitai]

📝 Walkthrough

Walkthrough

WorkspaceSwitcher.tsx 컴포넌트의 드롭다운 레이아웃을 최적화했습니다. isCollapsed 상태에 따라 드롭다운의 너비와 위치 앵커를 조정하고, 워크스페이스 목록을 스크롤 가능한 컨테이너로 감싸 많은 워크스페이스 목록에서 화면 오버플로우를 방지했습니다.

Changes

Cohort / File(s)	Summary
사이드바 워크스페이스 드롭다운 레이아웃 최적화 src/components/sidebar/WorkspaceSwitcher.tsx	드롭다운 너비 조정 (w-53 → w-58 in collapsed), 위치 앵커 변경 (right-0 → -right-5 in expanded). 워크스페이스 목록을 flex-1 overflow-y-auto max-h-100로 감싸 수직 스크롤 활성화, "새 워크스페이스" 버튼은 스크롤 영역 밖에 유지.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• [Refactor/#111] 사이드바 워크스페이스 영역 추가 및 리팩토링 #150: 동일한 WorkspaceSwitcher.tsx 파일을 수정하는 PR로, 해당 PR에서 워크스페이스 선택 로직을 초기 구현했으므로 관련성이 높습니다.

Suggested reviewers

• jjjsun
• Seojegyeong

🚥 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
Title check	✅ Passed	제목이 PR의 주요 변경사항(드롭다운 오버플로우 처리)을 명확하게 반영하고 있으며, 이슈 번호와 함께 작업 내용을 구체적으로 표현하고 있습니다.
Description check	✅ Passed	PR 설명이 템플릿 형식을 따르고 있으며, 관련 이슈 링크, 변경사항 체크박스, 작업 내용 및 스크린샷을 포함하고 있어 필요한 정보가 충분합니다.
Linked Issues check	✅ Passed	PR의 코드 변경사항이 이슈 #156의 요구사항(드롭다운 오버플로우 해결, 워크스페이스 목록 스크롤 구현, '새 워크스페이스' 고정)을 완전히 충족하고 있습니다.
Out of Scope Changes check	✅ Passed	변경사항이 WorkspaceSwitcher 컴포넌트의 드롭다운 레이아웃 조정으로 범위 내에 있으며, 이슈 #156의 목표와 직접적으로 관련되어 있습니다.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch refactor/#156

---

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 and usage tips.}

[github-actions]

📚 Storybook 배포 완료

항목	링크
📖 Storybook	https://69a147b60a56365d9e2185ef-vozrxfjihy.chromatic.com/
🔍 Chromatic	https://www.chromatic.com/build?appId=69a147b60a56365d9e2185ef&number=186

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/sidebar/WorkspaceSwitcher.tsx`:
- Line 144: The fixed class "max-h-100" on the div inside the WorkspaceSwitcher
component can cause overflow on small screens or when zoomed; replace this fixed
tailwind height with a viewport-dynamic limit (e.g., a dvh-based value or calc
using a header/footer CSS variable) by updating the div with className "flex-1
overflow-y-auto max-h-100" in WorkspaceSwitcher.tsx to use something like a
max-height of 100dvh or calc(100dvh - var(--header-height)) so the scroll
container respects true viewport height and prevents bottom clipping.

🪄 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: CHILL

Plan: Pro

Run ID: 145af4a4-8720-4a49-9b70-7a2d95c3bed5

📥 Commits

Reviewing files that changed from the base of the PR and between ded7ed8 and e171a62.

📒 Files selected for processing (1)

• src/components/sidebar/WorkspaceSwitcher.tsx

[Seojegyeong]

P4: 확인했습니다!

[jjjsun]

P4: 확인했습니다! 고생하셨어요!

[Seojegyeong]

P3: 사이드바 WorkspaceSwitcher에서 새 워크스페이스 생성 클릭하면 워크스페이스 목록 페이지로 이동하는데 바로 워크스페이스 생성 모달 뜨도록 구성하는게 좋을 것 같습니다!

[YermIm]

P3: 사이드바 WorkspaceSwitcher에서 새 워크스페이스 생성 클릭하면 워크스페이스 목록 페이지로 이동하는데 바로 워크스페이스 생성 모달 뜨도록 구성하는게 좋을 것 같습니다!

이 부분은 UI 변경 때 같이 진행하겠습니다!!