confirm dialog cancel/confirm 버튼 순서 변경

[Orchemi]

💡 기능

confirm dialog의 confirm/cancel의 위치와 primary/secondary type까지 이상해서 수정

Before	After

Summary by CodeRabbit

스타일

• 확인 대화상자의 버튼 배치 및 시각적 강조가 조정되었습니다.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

ConfirmDialog 컴포넌트의 버튼 순서와 스타일을 변경합니다. 이전에는 보조 스타일의 Ok 버튼이 먼저 나타났으며, 이제는 Close 버튼이 보조 스타일로 먼저 표시되고 Ok 버튼이 주요 스타일로 강조됩니다.

Changes

컴포넌트 / 파일	변경 내용
ConfirmDialog 버튼 재정렬 apps/web/src/app/[locale]/laboratory/_component/ConfirmDialog.tsx	Close 버튼과 Ok 버튼의 순서 및 스타일 (주요/보조) 교환. Close 버튼은 이제 보조 스타일로 먼저 나타나고, Ok 버튼은 주요 스타일로 강조됨

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~5-10분

• 단일 파일의 UI 스타일 및 순서 변경
• 버튼 핸들러와 클릭 로직의 일관성 확인 필요

Poem

🐰 버튼들이 춤을 추네, 위치를 바꾸며,
초록색 승인이 이제 주인공,
닫기는 곁에서 고개를 끄덕,
작은 변화가 모인 큰 마법,
대화상자는 더욱 친근해졌네! ✨

Pre-merge checks and finishing touches

❌ 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%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목이 변경 사항의 주요 내용을 정확하게 반영하고 있습니다. 확인 대화상자의 버튼 순서 변경이라는 핵심 변경사항을 명확하게 설명하고 있습니다.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/quiz-confirm

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b0cc54a and cdbbee3.

📒 Files selected for processing (1)

• apps/web/src/app/[locale]/laboratory/_component/ConfirmDialog.tsx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (2)

apps/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

apps/**/*.{ts,tsx}: Import UI components from @gitanimals/ui-panda workspace package
Import shared utilities from @gitanimals/util-common workspace package

Files:

• apps/web/src/app/[locale]/laboratory/_component/ConfirmDialog.tsx

apps/**/*.tsx

📄 CodeRabbit inference engine (CLAUDE.md)

Use useQuery directly with queryOptions in components instead of creating custom hooks (unless adding extra logic)

Files:

• apps/web/src/app/[locale]/laboratory/_component/ConfirmDialog.tsx

🧠 Learnings (1)

📓 Common learnings

Learnt from: Orchemi
Repo: git-goods/git-animal-client PR: 297
File: packages/ui/panda/src/components/Button/Button.stories.tsx:38-46
Timestamp: 2025-03-25T14:13:27.400Z
Learning: Button 컴포넌트는 'primary'와 'secondary' 두 가지 variant를 지원하며, 기본값은 'primary'입니다. (packages/ui/panda/src/components/Button/cva.ts에 정의됨)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Install Dependencies

🔇 Additional comments (1)

apps/web/src/app/[locale]/laboratory/_component/ConfirmDialog.tsx (1)

18-23: LGTM! UX 패턴이 올바르게 적용되었습니다.

버튼 순서와 variant 변경이 올바르게 구현되었습니다:

• Ok 버튼이 primary variant로 강조되어 주요 액션임을 명확히 표시
• Close 버튼이 secondary variant로 부차적 액션임을 나타냄
• 우측 정렬로 primary 액션을 배치하는 것은 일반적인 UI 패턴

Button 컴포넌트는 'primary'와 'secondary' variant를 모두 지원하므로 구현에 문제가 없으며, 전역 useDialog.tsx와 SelectedPetTable.tsx 등 다른 Dialog 컴포넌트들과도 일관된 패턴을 따릅니다.

---

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.}