[Refactor/#80] ControlBox 커스터마이징, WorkspaceSetting 삭제영역 구조 통일

[jjjsun]

🚨 관련 이슈

Closed #80

✨ 변경사항

• 🐞 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.)

✏️ 작업 내용

• WorkspaceSetting 삭제 섹션이 인라인 UI로 구현되어있어 공통 컴포넌트 구조로 리팩토링
• 삭제 영역 UI에 맞게 ControlBox 컴포넌트를 커스터마이징 가능하도록 확장

😅 미완성 작업

N/A

📢 논의 사항 및 참고 사항

기존 WorkspaceSetting의 삭제 섹션 인라인 UI를 ControlBox 구조를 변경하여 공통 컴포넌트 재사용성과 일관성을 높였습니다

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

Summary by CodeRabbit

릴리스 노트

• 리팩토링
  • 제어 박스(UI 컴포넌트)에 스타일·레이아웃 및 버튼 옵션(변형, 크기, 비활성화 등)과 추가 슬롯(선행 아이콘·버튼 대체 등)을 도입해 커스터마이제이션을 확대했습니다.
  • 작업 공간 설정의 삭제 섹션을 통합된 제어 박스로 재구성해 UI 일관성과 유지보수성을 향상시켰습니다.

[coderabbitai]

📝 Walkthrough

Walkthrough

ControlBox 컴포넌트의 props를 9개 확장하여 유연성을 높였고, WorkspaceSetting의 삭제 섹션을 이 컴포넌트로 리팩토링하여 코드 재사용성과 일관성을 개선했습니다.

Changes

Cohort / File(s)	Summary
ControlBox 컴포넌트 확대 src/components/common/controlbox/ControlBox.tsx	Props 9개 추가(containerClassName, titleClassName, descriptionClassName, buttonVariant, buttonSize, buttonClassName, buttonSlot, leadingSlot, contentClassName)하여 외부에서 레이아웃과 스타일을 더 세밀하게 제어할 수 있도록 확장. buttonSlot으로 Button 커스터마이징 지원.
WorkspaceSetting 리팩토링 src/pages/workspace/WorkspaceSetting.tsx	기존 인라인 삭제 섹션(빨간 배경 스타일)을 ControlBox 컴포넌트로 대체. leadingSlot에 아이콘 전달하며 deleteModal 오픈 로직 보존.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• [Feature/#70] ControlBox 구현 및 페이지 적용 #71: ControlBox 컴포넌트 초기 구현 및 스토리북 작성 — 이번 PR에서 확장한 컴포넌트의 기반이 되는 작업
• [Feature/#50] 워크스페이스 생성/수정 UI 구현 #54: WorkspaceSetting 페이지 초기 도입 — 이번 PR이 해당 페이지의 삭제 섹션을 리팩토링한 작업

Suggested reviewers

• YermIm
• 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 제목이 주요 변경사항(ControlBox 커스터마이징 및 WorkspaceSetting 삭제영역 구조 통일)을 명확하게 반영하고 있으며, 이슈 #80과도 연관성이 높습니다.
Linked Issues check	✅ Passed	코드 변경사항이 이슈 #80의 요구사항과 완벽히 일치합니다. ControlBox 컴포넌트 확장(새로운 props 추가)과 WorkspaceSetting에서의 적용이 모두 구현되었습니다.
Out of Scope Changes check	✅ Passed	모든 변경사항이 이슈 #80의 범위 내에서 진행되었습니다. ControlBox.tsx와 WorkspaceSetting.tsx 파일의 변경이 모두 삭제 영역 구조 통일 목표에 부합합니다.
Description check	✅ Passed	PR 설명이 템플릿 요구사항을 대부분 충족합니다. 제목, 관련 이슈, 변경사항 체크, 작업 내용, 미완성 작업, 논의 사항 등이 모두 작성되었습니다.

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

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch refactor/#80

---

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-cpzstvbexy.chromatic.com/
🔍 Chromatic	https://www.chromatic.com/build?appId=69a147b60a56365d9e2185ef&number=31

[coderabbitai]

Actionable comments posted: 2

🤖 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/common/controlbox/ControlBox.tsx`:
- Around line 32-33: The exposed prop buttonSize on ControlBox is being
overridden by a hardcoded height utility (!h-button-big) in the rendered class
list, so size changes have no effect; update the ControlBox render logic to
remove the fixed "!h-button-big" and instead apply height/size classes
conditionally based on the buttonSize prop (e.g., map "small"|"medium"|"large"
to the appropriate classes) so the prop actually controls the button height;
adjust any related classname generation where "!h-button-big" appears (and
similarly for the other occurrence) to reference the new size-to-class mapping
used by the component.

In `@src/pages/workspace/WorkspaceSetting.tsx`:
- Around line 216-229: The delete flow button (ControlBox with title "워크스페이스
삭제") is currently clickable during a save, which allows concurrent save+delete
requests; wire the same disabling condition used for save into this control by
passing the appropriate disabled/disabledButton prop (or the ControlBox's
equivalent) so the delete button is disabled whenever saving || deleting is
true; update the ControlBox usage that currently has
onButtonClick={openDeleteModal} to include the disable flag tied to the existing
saving and deleting state variables so the button cannot be activated during
saves or while deletion is in progress.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 381f5a7c-4732-42b4-8d79-f777f4f05711

📥 Commits

Reviewing files that changed from the base of the PR and between 9cf8ed5 and cebc116.

📒 Files selected for processing (2)

• src/components/common/controlbox/ControlBox.tsx
• src/pages/workspace/WorkspaceSetting.tsx

[github-actions]

📚 Storybook 배포 완료

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

[YermIm]

P4: 확인했습니다!