Skip to content

[Feature/#70] ControlBox 구현 및 페이지 적용 - #71

Merged
YermIm merged 3 commits into
developfrom
feature/#70
Mar 1, 2026
Merged

[Feature/#70] ControlBox 구현 및 페이지 적용#71
YermIm merged 3 commits into
developfrom
feature/#70

Conversation

@YermIm

@YermIm YermIm commented Mar 1, 2026

Copy link
Copy Markdown
Collaborator

🚨 관련 이슈

close #70

✨ 변경사항

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

✏️ 작업 내용

  • ControlBox 컴포넌트 제작
    • 추후 다른 색상 제작 예정
  • 광고 운영 관리 페이지 하단에 적용
    • 테이블과 동일하게 가로 스크롤 적용
스크린샷 2026-03-01 오후 1 57 58

😅 미완성 작업

  • 페이지네이션 (API 연동 시 작업 예정)
  • 캠페인 별 상세 페이지
  • 캠페인 통합 연동 페이지

📢 논의 사항 및 참고 사항

N/A

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

Summary by CodeRabbit

  • New Features
    • 제목·설명·버튼을 갖춘 새 컨트롤 박스 컴포넌트 추가
    • 광고 목록 페이지에 컨트롤 박스 배너 통합으로 UI 및 상호작용 개선
    • 반응형 래핑과 가로 스크롤 처리로 페이지 레이아웃 안정성 향상
  • Documentation
    • 컴포넌트 사용 예시를 제공하는 스토리북 스토리 추가하여 시각적 확인 가능

@coderabbitai

coderabbitai Bot commented Mar 1, 2026

Copy link
Copy Markdown

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 17ebf2a and eee7460.

📒 Files selected for processing (1)
  • src/components/common/controlbox/ControlBox.stories.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • src/components/common/controlbox/ControlBox.stories.tsx

📝 Walkthrough

Walkthrough

AdsListPage 하단에 재사용 가능한 UI 블록인 ControlBox 컴포넌트를 새로 추가하고 Storybook 스토리를 등록했으며, AdsListPage 레이아웃을 재구성해 CampaignTable 아래에 ControlBox를 배치했습니다.

Changes

Cohort / File(s) Summary
ControlBox 컴포넌트
src/components/common/controlbox/ControlBox.tsx, src/components/common/controlbox/ControlBox.stories.tsx
새로운 ControlBox 컴포넌트 추가(타이틀, 설명, 버튼, onButtonClick). Tailwind 스타일 및 tailwind-merge 사용. Storybook 메타 및 Default 스토리 추가로 기본 props 예시 제공.
AdsListPage 레이아웃 변경
src/pages/ads/list/AdsListPage.tsx
페이지 구조에 overflow-x-auto 및 내부 최소 너비 flex 컬럼을 도입하여 레이아웃 재구성. CampaignTable 아래에 ControlBox를 삽입하고 import/사용을 추가함. 기존 컴포넌트 호출은 유지됨.

Sequence Diagram(s)

(생성 조건 미충족 — 변경은 주로 레이아웃과 신규 UI 컴포넌트 추가로, 복잡한 다중 컴포넌트 제어 흐름 시각화가 필요하지 않습니다.)

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

Suggested reviewers

  • Seojegyeong
  • jjjsun
🚥 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 구현 및 AdsListPage 적용)을 명확하게 반영하고 있습니다.
Description check ✅ Passed PR 설명이 템플릿의 주요 섹션(관련 이슈, 변경사항, 작업 내용)을 충실히 작성했으며, 체크박스 표시와 스크린샷도 포함되어 있습니다.
Linked Issues check ✅ Passed ControlBox 컴포넌트 구현, Storybook 적용, AdsListPage 하단 배치 등 #70 이슈의 모든 코딩 요구사항이 충족되었습니다.
Out of Scope Changes check ✅ Passed 모든 변경사항이 #70 이슈의 범위 내에 있으며, 가로 스크롤 기능 추가도 요구사항에 명시된 사항입니다.

✏️ 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 feature/#70

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

@YermIm
YermIm requested review from Seojegyeong and jjjsun March 1, 2026 05:05
@YermIm YermIm self-assigned this Mar 1, 2026
@github-actions

github-actions Bot commented Mar 1, 2026

Copy link
Copy Markdown

📚 Storybook 배포 완료

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

@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: 1

🧹 Nitpick comments (2)
src/pages/ads/list/AdsListPage.tsx (1)

33-33: 불필요한 빈 DOM 노드는 제거하는 편이 좋습니다.

Line 33의 <div />는 현재 역할이 없어 레이아웃 복잡도만 늘립니다. 제거해도 동작 영향이 없다면 정리해주세요.

♻️ 제안 diff
-
-      <div />
     </section>

As per coding guidelines src/**: 2. 구조와 책임 분리: 페이지에 비즈니스 로직이 과도하지 않은지 확인. 커스텀 훅으로의 분리 여부 검토.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/pages/ads/list/AdsListPage.tsx` at line 33, AdsListPage의 불필요한 빈 DOM 노드인
self-closing <div /> (현재 AdsListPage 컴포넌트 내에 위치한 `<div />`)를 제거하세요; 레이아웃이나 스타일에
영향이 없는지 확인하기 위해 해당 컴포넌트의 렌더 트리와 CSS 클래스(또는 부모 컨테이너)만 빠르게 점검하고, 제거 후 브라우저에서 화면이
동일하게 보이는지 및 관련 유닛/통합 테스트가 통과하는지 확인하십시오.
src/components/common/controlbox/ControlBox.tsx (1)

35-38: 버튼에서 stopPropagation 강제는 재사용성을 낮출 수 있습니다.

Line 35-38에서 이벤트 버블링을 항상 막으면, 상위 컨테이너의 클릭 추적/라우팅 핸들러가 필요한 화면에서 의도치 않게 동작이 끊길 수 있어요. 특별한 이유가 없다면 제거하거나 옵션화하는 편이 안전합니다.

♻️ 제안 diff
       <button
         type="button"
-        onClick={(e) => {
-          e.stopPropagation();
-          onButtonClick();
-        }}
+        onClick={onButtonClick}
         className="px-8 py-4 bg-chart-3 text-white font-body1 rounded-component-md hover:bg-chart-3/90 overflow-hidden transition-all shrink-0 active:scale-95"
       >
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/common/controlbox/ControlBox.tsx` around lines 35 - 38,
ControlBox currently forcefully calls e.stopPropagation() inside the onClick
handler which reduces reusability; change this to be opt-in by adding a prop
(e.g., stopPropagation?: boolean) to the ControlBox component props and use that
prop in the onClick handler (only call e.stopPropagation() when stopPropagation
is true), or remove the call entirely if you prefer default bubbling—update the
ControlBox component signature and the onClick closure that calls
onButtonClick() to respect the new prop and adjust any consumers to pass
stopPropagation where needed.
🤖 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/pages/ads/list/AdsListPage.tsx`:
- Line 26: The ControlBox action currently only logs to console in AdsListPage
(onButtonClick={() => console.log("페이지 이동")}); replace this no-op with a real
user feedback or routing action: call the router navigation (e.g.,
useNavigate()/history.push) to go to the target ad creation or detail route, or
alternatively trigger a visible UI feedback (e.g., showToast/showSnackbar or
open a "준비 중" modal via state) so users see an effect; update the onButtonClick
handler in AdsListPage to perform navigation or set the feedback state and
remove the console.log.

---

Nitpick comments:
In `@src/components/common/controlbox/ControlBox.tsx`:
- Around line 35-38: ControlBox currently forcefully calls e.stopPropagation()
inside the onClick handler which reduces reusability; change this to be opt-in
by adding a prop (e.g., stopPropagation?: boolean) to the ControlBox component
props and use that prop in the onClick handler (only call e.stopPropagation()
when stopPropagation is true), or remove the call entirely if you prefer default
bubbling—update the ControlBox component signature and the onClick closure that
calls onButtonClick() to respect the new prop and adjust any consumers to pass
stopPropagation where needed.

In `@src/pages/ads/list/AdsListPage.tsx`:
- Line 33: AdsListPage의 불필요한 빈 DOM 노드인 self-closing <div /> (현재 AdsListPage 컴포넌트
내에 위치한 `<div />`)를 제거하세요; 레이아웃이나 스타일에 영향이 없는지 확인하기 위해 해당 컴포넌트의 렌더 트리와 CSS 클래스(또는
부모 컨테이너)만 빠르게 점검하고, 제거 후 브라우저에서 화면이 동일하게 보이는지 및 관련 유닛/통합 테스트가 통과하는지 확인하십시오.

ℹ️ Review info

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 61499ce and d108714.

📒 Files selected for processing (3)
  • src/components/common/controlbox/ControlBox.stories.tsx
  • src/components/common/controlbox/ControlBox.tsx
  • src/pages/ads/list/AdsListPage.tsx

Comment thread src/pages/ads/list/AdsListPage.tsx
@YermIm YermIm added the ✨ Feature 기능 개발 label Mar 1, 2026
Comment thread src/components/common/controlbox/ControlBox.tsx Outdated
@Seojegyeong

Seojegyeong commented Mar 1, 2026

Copy link
Copy Markdown
Collaborator

P4: 고생하셨습니다! PR 제목 양식 지켜주세요 :) @YermIm

@Seojegyeong

Seojegyeong commented Mar 1, 2026

Copy link
Copy Markdown
Collaborator

P2: 현재 WorkspaceSetting의 워크스페이스 삭제 섹션도 인라인으로 구현되어 있는데, 이 ControlBox 컴포넌트를 확장해서 사용하는 방향으로 리팩토링하면 좋을 것 같습니다!! @jjjsun

@YermIm YermIm changed the title feat: ControlBox 구현 및 페이지 적용 [Feature/#70] ControlBox 구현 및 페이지 적용 Mar 1, 2026
@jjjsun

jjjsun commented Mar 1, 2026

Copy link
Copy Markdown
Collaborator

P2: 현재 WorkspaceSetting의 워크스페이스 삭제 섹션도 인라인으로 구현되어 있는데, 이 ControlBox 컴포넌트를 확장해서 사용하는 방향으로 리팩토링하면 좋을 것 같습니다!! @jjjsun

네 좋은것같아요! API연동 PR완료한후에 리팩토링 PR추가로 따로 올릴게요!

@github-actions

github-actions Bot commented Mar 1, 2026

Copy link
Copy Markdown

📚 Storybook 배포 완료

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

@github-actions

github-actions Bot commented Mar 1, 2026

Copy link
Copy Markdown

📚 Storybook 배포 완료

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

@jjjsun jjjsun left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

✨ Feature 기능 개발

Projects

None yet

Development

Successfully merging this pull request may close these issues.

✨ [Feature] 공통 ControlBox 구현 및 적용

3 participants