[Feature/#233] 플랫폼 연동 페이지 UI 구현#234
Open
YermIm wants to merge 5 commits into
Open
Conversation
📝 WalkthroughWalkthrough플랫폼 연동 기능을 추가합니다. 메타, 구글, 네이버 광고 계정을 워크스페이스별로 연결하고 상태를 관리하는 화면을 구현했으며, 사이드바에 메뉴 항목과 주의 배지를 추가하고 라우팅을 등록했습니다. Changes플랫폼 연동 기능 전체 흐름
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested reviewers
📋 리뷰 포인트구조 및 설계
접근성
성능
안정성 및 버그 위험
UI/UX 일관성
코드품질 및 유지보수성
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
📚 Storybook 배포 완료
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/pages/integration/PlatformIntegrationsPage.tsx (1)
9-14: ⚡ Quick win에러 상태에서 즉시 재시도 액션을 추가해 주세요.
현재는 실패 메시지만 보여서 사용자가 복구를 위해 페이지를 벗어나야 합니다.
refetch를 노출해서 에러 영역에다시 시도버튼을 두면 UX가 좋아집니다.제안 diff
export default function PlatformIntegrationsPage() { const { data: platformConnections = [], isLoading, isError, error, + refetch, } = usePlatformConnections(); @@ ) : isError ? ( <div className="flex min-h-40 items-center justify-center rounded-3xl bg-surface-100 p-8 shadow-Soft"> - <p className="text-center font-body2 text-text-muted"> - {error?.message ?? - "플랫폼 연동 정보를 불러오지 못했습니다. 잠시 후 다시 시도해 주세요."} - </p> + <div className="flex flex-col items-center gap-3"> + <p className="text-center font-body2 text-text-muted"> + {error?.message ?? + "플랫폼 연동 정보를 불러오지 못했습니다. 잠시 후 다시 시도해 주세요."} + </p> + <button + type="button" + onClick={() => void refetch()} + className="rounded-xl border border-surface-300 px-4 py-2 font-body2 text-text-title hover:bg-surface-200" + > + 다시 시도 + </button> + </div> </div>As per coding guidelines
src/**:6. 에러 처리: API 실패 대응 및 사용자 피드백 적절성 검토.Also applies to: 20-26
🤖 Prompt for 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. In `@src/pages/integration/PlatformIntegrationsPage.tsx` around lines 9 - 14, The error UI in PlatformIntegrationsPage doesn't offer a retry; update the component to use the refetch function from usePlatformConnections (add refetch to the destructuring alongside data/isLoading/isError/error) and render a "다시 시도" button in the error branch that calls refetch when clicked; ensure the error block still displays a helpful message (using error) and disables the button while isLoading to prevent duplicate calls.
🤖 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/components/sidebar/SidebarItem.tsx`:
- Around line 33-45: The collapsed-state rendering in SidebarItem currently
shows only the Icon with aria-hidden, which leaves the NavLink/button (rendered
elsewhere) without an accessible name; update the collapsed branch in the
content JSX so that when isCollapsed is true you add an accessible label (e.g.,
aria-label and optionally title) derived from item.label to the interactive
element that uses content (ensure the same label is applied when Icon exists or
is null), and keep aria-hidden on the decorative Icon; check NavLink/button
usages that consume content to ensure they forward the aria-label when
collapsed.
---
Nitpick comments:
In `@src/pages/integration/PlatformIntegrationsPage.tsx`:
- Around line 9-14: The error UI in PlatformIntegrationsPage doesn't offer a
retry; update the component to use the refetch function from
usePlatformConnections (add refetch to the destructuring alongside
data/isLoading/isError/error) and render a "다시 시도" button in the error branch
that calls refetch when clicked; ensure the error block still displays a helpful
message (using error) and disables the button while isLoading to prevent
duplicate calls.
🪄 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: 30ec8865-4f6e-4c5f-9b42-4ced4d53adee
⛔ Files ignored due to path filters (1)
src/assets/icon/sidebar/connect.svgis excluded by!**/*.svgand included bysrc/**
📒 Files selected for processing (11)
src/components/integration/PlatformIntegrationCard.tsxsrc/components/integration/skeleton/PlatformIntegrationsSkeleton.tsxsrc/components/sidebar/Sidebar.tsxsrc/components/sidebar/SidebarItem.tsxsrc/constants/sidebarNav.tssrc/hooks/integration/usePlatformConnections.tssrc/layout/main/MainLayout.tsxsrc/pages/integration/PlatformIntegrationsPage.tsxsrc/pages/integration/platformIntegrations.mock.tssrc/routes/MainRoutes.tsxsrc/types/integration/platformConnection.ts
Collaborator
|
P3: 혹시 지금 페이지 아래에는 비어있는듯한 느낌이 들어서, 플랫폼을 세로로 flex로 배치하고, 재연동/연결해제/연동하기 버튼들을 우측에 맞춰서 flex로 넣으면 어떨까요? |
Collaborator
Author
저도 이 부분 고민하다가 버튼이 멀어지면 가독성이 떨어질 것 같아서 일단 가로 배치했습니다. 화면적으로 봤을 때는 세로 배치가 더 좋을 것 같습니다. 수정해본 화면인데 이대로 진행할까요?! 
|
Collaborator
음 저는 이 세로 배치가 더 나은것같습니다! 혹시 옆에 버튼들(재연동/연결해제)은 위아래로 배치해서 오른쪽에 붙게 하는건 어떨까요? +)추가로 버튼들이 안에 텍스트 크기에 따라서 너비가 다른것같은데 너비 고정해서 너비 맞추는 것도 깔끔해보일것같아요! |
Collaborator
|
P4: 저는 아래 이미지처럼 카드형 가로 배치가 좋을 것 같습니다! 이유는 아래와 같음
하단이 비어보이는 문제는 아래 방법을 통해 보완할 수 있을 것 같습니다!
|
Collaborator
저는 가로배치가 아래부분이 비어보이는 점이 수정되었으면 좋겠다는 점에서 세로배치를 제안드렸는데, |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🚨 관련 이슈
close #233
✨ 변경사항
✏️ 작업 내용
플랫폼 연동 페이지 (
/integrations)사이드바
error상태가 있으면 펼침 시 연동 필요 뱃지😅 미완성 작업
N/A
📢 논의 사항 및 참고 사항
API 연동하면서 필요한 UI 추가 예정입니다!
Summary by CodeRabbit
릴리스 노트