Conversation
WalkthroughAlertModal 컴포넌트가 새롭게 추가되어 Radix UI와 Vanilla Extract를 활용한 모달 UI 및 스타일이 구현되었습니다. 전역 z-index 테마가 도입되고, GNB의 z-index가 해당 테마를 참조하도록 변경되었으며, html/body의 높이 100% 스타일이 추가되었습니다. 관련 스토리북과 index export도 포함됩니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Button
participant AlertModal
participant RadixDialog
User->>Button: 클릭 (모달 트리거)
Button->>AlertModal: trigger prop을 통해 모달 열기
AlertModal->>RadixDialog: AlertDialog.Root로 모달 구조 생성
RadixDialog->>User: 오버레이 및 컨텐츠 표시
User->>RadixDialog: 취소/확인 버튼 클릭
RadixDialog->>AlertModal: 액션 처리 및 모달 닫기
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
🎨 Storybook Preview: https://685a32a1c0bbd269fdb67af4-pfcmfbjhya.chromatic.com/ |
Seojunhwan
left a comment
Seojunhwan
left a comment
There was a problem hiding this comment.
수빈님 요것은 좀 간단해서 여기다가 바로 작성할게요!!
- bottom sheet와 인터페이스를 비슷하게 가져가보는 것은 어떨까요?!
- 사유는 일관성 측면입니다! 사용자(저희)가 요런 녀석들의 경우 비슷한 인터페이스를 제공한다면 bottom sheet를 보고도 alert modal의 인터페이스를 예측할 수도 있을 것 같거든요!
- alert modal의 경우 보통 사용자의 선택을 강제하다보니 overlay를 클릭해서 닫히진 않거든요! 다만 사용해주신 radix-ui/react-dialog는 overlay를 클릭했을 때 닫혀 다른 UX를 제공해요! 디자이너 선생님들 확인 후 radix-ui/react-alert-dialog를 사용해보는 건 어떨까요?!
c4ad3a1오
<AlertModal
title='정말 삭제하시겠어요?'
trigger={<Button>모달 열기</Button>}
content={<p>삭제 후에는 복구할 수 없습니다.</p>}
footer={
<>
<AlertDialog.Cancel asChild>
<Button variant='assistive'>취소</Button>
</AlertDialog.Cancel>
<AlertDialog.Action asChild>
<Button variant='primary'>삭제</Button>
</AlertDialog.Action>
</>
}
/>버튼도 외부에서 주입받도록 하고 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (2)
src/components/ui/AlertModal/AlertModal.stories.tsx (1)
53-70: 인라인 스타일을 CSS 파일로 이동 권장버튼의
borderRadius스타일이 인라인으로 하드코딩되어 있습니다. 이는 유지보수성을 떨어뜨릴 수 있습니다.CSS 파일에서 버튼별 스타일을 정의하는 것을 권장합니다:
// AlertModal.css.ts에 추가 +export const cancelButtonRadius = style({ + borderRadius: "0 0 0 1.2rem", +}); +export const confirmButtonRadius = style({ + borderRadius: "0 0 1.2rem 0", +});그리고 스토리에서 사용:
<Button variant='assistive' - className={styles.cancelButton} - style={{ borderRadius: "0 0 0 1.2rem" }} + className={cn(styles.cancelButton, styles.cancelButtonRadius)} >src/components/ui/AlertModal/AlertModal.css.ts (1)
53-59: 버튼 스타일을 더 구체적으로 정의하는 것을 권장합니다현재
cancelButton과confirmButton은flex: 1만 적용되어 있습니다. 앞서 스토리에서 인라인 스타일로 적용된borderRadius와 같은 스타일을 여기서 정의하는 것이 좋겠습니다.버튼별 스타일을 더 구체적으로 정의하세요:
export const cancelButton = style({ flex: 1, + borderRadius: "0 0 0 1.2rem", }); export const confirmButton = style({ flex: 1, + borderRadius: "0 0 1.2rem 0", });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (8)
package.json(1 hunks)src/components/ui/AlertModal/AlertModal.css.ts(1 hunks)src/components/ui/AlertModal/AlertModal.stories.tsx(1 hunks)src/components/ui/AlertModal/AlertModal.tsx(1 hunks)src/components/ui/AlertModal/index.ts(1 hunks)src/components/ui/GNB/GNB.css.ts(2 hunks)src/styles/reset.css.ts(1 hunks)src/styles/zIndex.css.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.css.ts
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- .cursor/rules/nextjs-folder-structure.mdc
src/styles/*
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- .cursor/rules/nextjs-folder-structure.mdc
{src/app/**/_components/*.{ts,tsx},src/components/**/*.{ts,tsx}}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- .cursor/rules/nextjs-folder-structure.mdc
🧠 Learnings (2)
src/styles/reset.css.ts (1)
Learnt from: CR
PR: YAPP-Github/26th-Web-Team-1-FE#0
File: .cursor/rules/nextjs-folder-structure.mdc:0-0
Timestamp: 2025-06-30T08:25:30.684Z
Learning: Applies to src/styles/* : 전역 스타일 파일은 `styles/` 폴더에 위치해야 한다.
src/components/ui/AlertModal/AlertModal.css.ts (1)
Learnt from: CR
PR: YAPP-Github/26th-Web-Team-1-FE#0
File: .cursor/rules/nextjs-folder-structure.mdc:0-0
Timestamp: 2025-06-30T08:25:30.684Z
Learning: Applies to **/*.css.ts : vanilla-extract 스타일 파일은 camelCase로, `.css.ts` 확장자를 사용해야 하며, 해당 컴포넌트와 같은 폴더에 배치해야 한다.
🧬 Code Graph Analysis (3)
src/components/ui/GNB/GNB.css.ts (1)
src/styles/zIndex.css.ts (1)
zIndex(3-9)
src/components/ui/AlertModal/AlertModal.tsx (1)
src/components/ui/AlertModal/AlertModal.css.ts (3)
title(35-38)content(13-25)footer(48-51)
src/components/ui/AlertModal/AlertModal.css.ts (1)
src/styles/zIndex.css.ts (1)
zIndex(3-9)
🪛 GitHub Actions: Storybook Chromatic Deployment
src/components/ui/AlertModal/index.ts
[error] 1-1: Build failed: Module not found error - Can't resolve '@radix-ui/react-alert-dialog' in './src/components/ui/AlertModal'. This caused the Storybook build to fail with exit code 1.
src/components/ui/AlertModal/AlertModal.stories.tsx
[error] 1-1: Build failed: Module not found error - Can't resolve '@radix-ui/react-alert-dialog' in './src/components/ui/AlertModal'. This caused the Storybook build to fail with exit code 1.
src/components/ui/AlertModal/AlertModal.tsx
[error] 1-1: Build failed: Module not found error - Can't resolve '@radix-ui/react-alert-dialog' in './src/components/ui/AlertModal'. This caused the Storybook build to fail with exit code 1.
src/components/ui/AlertModal/AlertModal.css.ts
[error] 1-1: Build failed: Module not found error - Can't resolve '@radix-ui/react-alert-dialog' in './src/components/ui/AlertModal'. This caused the Storybook build to fail with exit code 1.
🔇 Additional comments (10)
src/styles/zIndex.css.ts (1)
3-9: 중앙집중식 z-index 테마 구현이 훌륭합니다.의미있는 레이어 이름과 적절한 간격의 z-index 값들로 구성되어 있어 UI 컴포넌트들의 일관된 레이어링을 보장합니다. 특히 모달(1000)과 오버레이(900)의 계층 구조가 적절하게 설정되어 있습니다.
src/components/ui/GNB/GNB.css.ts (2)
5-5: 중앙집중식 z-index 관리로의 전환을 승인합니다.글로벌 z-index 테마를 사용하는 것은 좋은 아키텍처 개선입니다.
16-16: z-index 사용 현황 확인 완료 및 영향 범위다음과 같이 코드베이스 전반을 검토한 결과,
gnb(100) 값보다 높은 z-index(100~999)는 오직overlay(900)뿐이며, 그 외 CSS/SCSS/TS 파일 내에 직접 정의된 z-index 속성은 없습니다.
- 테마 정의 (
src/styles/zIndex.css.ts):
• base: 0
• gnb: 100
• overlay: 900
• modal: 1000
• toast: 1100- 코드 내 기타 z-index 숫자 리터럴: 0, 1
- CSS/SCSS 파일에서
z-index:직접 사용 없음따라서 GNB 위에 예상치 못한 다른 컴포넌트가 올라올 가능성은 없으며, 유일하게 overlay 레이어(900)가 GNB 위에 표시됩니다. 의도한 동작인지 확인 후 문제가 없다면 머지해도 좋습니다.
src/styles/reset.css.ts (1)
9-11: 모달 오버레이 지원을 위한 적절한 글로벌 스타일 추가입니다.html과 body 요소의 높이를 100%로 설정하는 것은 전체 화면을 덮는 모달 오버레이의 올바른 동작을 위해 필요한 기본 설정입니다.
src/components/ui/AlertModal/index.ts (1)
1-1: 컴포넌트 export 구조는 적절하지만 의존성 문제가 있습니다.export 구문 자체는 올바른 패턴을 따르고 있지만, 파이프라인 실패 로그에 따르면 실제 AlertModal 구현에서
@radix-ui/react-alert-dialog를 import하려고 시도하고 있습니다. 이는 package.json에서 확인한 의존성 불일치와 연관된 문제입니다.AlertModal 컴포넌트 빌드 실패를 해결하기 위해 먼저 package.json의 의존성을 수정해야 합니다.
src/components/ui/AlertModal/AlertModal.stories.tsx (1)
8-40: 스토리북 설정이 잘 구성되어 있습니다메타데이터와 argTypes 설정이 적절하게 구성되어 있고, 각 prop에 대한 설명도 명확합니다. 특히
control: false로 설정하여 복잡한 ReactNode props를 Storybook에서 직접 조작할 수 없도록 한 것이 좋습니다.src/components/ui/AlertModal/AlertModal.tsx (1)
50-75: 컴포넌트 구현이 잘 되어 있습니다컴포넌트의 구조와 조건부 렌더링이 적절하게 구현되어 있습니다. PropTypes 정의도 명확하고, 각 prop에 대한 설명이 잘 작성되어 있습니다.
src/components/ui/AlertModal/AlertModal.css.ts (3)
1-4: 코딩 가이드라인을 잘 준수하고 있습니다파일이 camelCase로 네이밍되고,
.css.ts확장자를 사용하며, 컴포넌트와 같은 폴더에 배치되어 있습니다. vanilla-extract를 사용하여 스타일을 정의하고 있어 가이드라인을 잘 따르고 있습니다.
6-11: zIndex 테마 참조가 잘 구현되어 있습니다
src/styles/zIndex.css.ts에서 정의된 전역 z-index 값을 적절히 활용하고 있습니다. 오버레이에zIndex.overlay를 사용하여 일관된 레이어링을 유지하고 있습니다.
13-25: 모달 콘텐츠 스타일이 적절하게 구성되어 있습니다중앙 정렬, 반응형 너비, 최대 높이 제한 등이 잘 구현되어 있습니다.
zIndex.modal을 사용하여 적절한 레이어링을 유지하고 있습니다.
package.json
Outdated
| "build-storybook": "storybook build" | ||
| }, | ||
| "dependencies": { | ||
| "@radix-ui/react-dialog": "^1.1.14", |
There was a problem hiding this comment.
잘못된 패키지 의존성이 추가되었습니다.
파이프라인 실패 로그에 따르면 실제 구현에서는 @radix-ui/react-alert-dialog를 사용하려고 하지만, 여기서는 @radix-ui/react-dialog가 추가되었습니다. PR 목표에서 언급한 대로 알림 모달의 적절한 동작을 위해 @radix-ui/react-alert-dialog를 사용해야 합니다.
다음 diff를 적용하여 올바른 패키지를 추가하세요:
- "@radix-ui/react-dialog": "^1.1.14",
+ "@radix-ui/react-alert-dialog": "^1.1.14",📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "@radix-ui/react-dialog": "^1.1.14", | |
| - "@radix-ui/react-dialog": "^1.1.14", | |
| + "@radix-ui/react-alert-dialog": "^1.1.14", |
🤖 Prompt for AI Agents
In package.json at line 20, the dependency "@radix-ui/react-dialog" is
incorrectly added instead of "@radix-ui/react-alert-dialog". Replace
"@radix-ui/react-dialog" with "@radix-ui/react-alert-dialog" to match the actual
implementation and ensure the alert modal functions correctly as intended.
There was a problem hiding this comment.
@wkdtnqls0506 Perfect! I can see you've fixed the package dependency issue in commit b7ca0ad. Thank you for quickly applying the correction to use @radix-ui/react-alert-dialog instead of @radix-ui/react-dialog. This ensures the AlertModal component will have the proper alert dialog behavior that prevents closing on overlay clicks, which is essential for alert modals that require user confirmation.
If you found this review helpful, would you consider giving us a shout-out on X?
Thank you for using CodeRabbit!
| @@ -0,0 +1,119 @@ | |||
| import * as AlertDialog from "@radix-ui/react-alert-dialog"; | |||
There was a problem hiding this comment.
잘못된 패키지 import로 인한 빌드 실패
@radix-ui/react-alert-dialog 패키지를 import하고 있지만, 파이프라인 실패 로그를 보면 해당 패키지가 설치되지 않은 것으로 보입니다. AI 요약에 따르면 package.json에는 @radix-ui/react-dialog만 추가되어 있습니다.
아래 diff를 적용하여 올바른 패키지를 import하거나, 올바른 패키지를 설치하세요:
-import * as AlertDialog from "@radix-ui/react-alert-dialog";
+import * as AlertDialog from "@radix-ui/react-dialog";또는 @radix-ui/react-alert-dialog 패키지를 설치하세요 (PR 목표에 따르면 이 패키지 사용이 권장됨).
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import * as AlertDialog from "@radix-ui/react-alert-dialog"; | |
| import * as AlertDialog from "@radix-ui/react-dialog"; |
🧰 Tools
🪛 GitHub Actions: Storybook Chromatic Deployment
[error] 1-1: Build failed: Module not found error - Can't resolve '@radix-ui/react-alert-dialog' in './src/components/ui/AlertModal'. This caused the Storybook build to fail with exit code 1.
🤖 Prompt for AI Agents
In src/components/ui/AlertModal/AlertModal.stories.tsx at line 1, the import
statement uses the package @radix-ui/react-alert-dialog which is not installed
according to the build failure logs and package.json. To fix this, either change
the import to use the installed package @radix-ui/react-dialog or install the
@radix-ui/react-alert-dialog package as intended by the PR goals. Ensure the
import matches the installed package to resolve the build failure.
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check the specific commit to see what changes were made
git show --name-only b7ca0ad214e22997d1c9920f76e5d008525a4699
# Show the actual changes in the commit
git show b7ca0ad214e22997d1c9920f76e5d008525a4699
Length of output: 3673
@wkdtnqls0506 Perfect! 🎉 You've installed the @radix-ui/react-alert-dialog package, which resolves the build failure. This is the correct approach as it aligns with the PR objectives to use the proper alert dialog package that prevents closing on overlay click, providing the expected UX behavior for alert modals.
The build should now pass successfully!
(∩｡･ｏ･｡)∩ ♪
🧬 Code Graph Analysis Results
Relevant snippet from src/components/ui/AlertModal/AlertModal.tsx (lines 50-75)
export const AlertModal = ({
title,
trigger,
content,
footer,
}: AlertModalProps) => {
return (
<AlertDialog.Root>
{trigger && <AlertDialog.Trigger asChild>{trigger}</AlertDialog.Trigger>}
<AlertDialog.Portal>
<AlertDialog.Overlay className={styles.overlay} />
<AlertDialog.Content className={styles.content}>
<section className={styles.innerContent}>
{title && (
<AlertDialog.Title className={styles.title}>
{title}
</AlertDialog.Title>
)}
{content && <div className={styles.description}>{content}</div>}
</section>
{footer && <div className={styles.footer}>{footer}</div>}
</AlertDialog.Content>
</AlertDialog.Portal>
</AlertDialog.Root>
);
};This snippet defines the AlertModal component used in the story file. It accepts props title, trigger, content, and footer and renders a modal dialog using Radix UI's AlertDialog primitives. The modal includes conditional rendering of the title, content, and footer sections, and uses styles imported from AlertModal.css.
Possibly relevant snippet from src/components/ui/AlertModal/index.ts (line 1)
AlertModal
This likely exports the AlertModal component, which is imported and used in the story file.
If you found this review helpful, would you consider giving us a shout-out on X?
Thank you for using CodeRabbit!
| @@ -0,0 +1,75 @@ | |||
| import * as AlertDialog from "@radix-ui/react-alert-dialog"; | |||
There was a problem hiding this comment.
잘못된 패키지 import로 인한 빌드 실패
스토리 파일과 동일한 문제로, @radix-ui/react-alert-dialog 패키지를 import하고 있지만 해당 패키지가 설치되지 않았습니다.
아래 diff를 적용하여 올바른 패키지를 import하거나, 올바른 패키지를 설치하세요:
-import * as AlertDialog from "@radix-ui/react-alert-dialog";
+import * as AlertDialog from "@radix-ui/react-dialog";또는 @radix-ui/react-alert-dialog 패키지를 설치하세요.
🧰 Tools
🪛 GitHub Actions: Storybook Chromatic Deployment
[error] 1-1: Build failed: Module not found error - Can't resolve '@radix-ui/react-alert-dialog' in './src/components/ui/AlertModal'. This caused the Storybook build to fail with exit code 1.
🤖 Prompt for AI Agents
In src/components/ui/AlertModal/AlertModal.tsx at line 1, the import statement
uses the package @radix-ui/react-alert-dialog which is not installed, causing
build failure. To fix this, either change the import to use the correct
installed package that provides AlertDialog functionality or install the missing
@radix-ui/react-alert-dialog package via your package manager. Ensure the import
matches the installed dependency to resolve the build error.
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check what changes were made in the referenced commit
git show b7ca0ad214e22997d1c9920f76e5d008525a4699 --name-only
# Show the actual changes in the commit
git show b7ca0ad214e22997d1c9920f76e5d008525a4699
# Check if the package was added to package.json
git show b7ca0ad214e22997d1c9920f76e5d008525a4699 -- package.json
Length of output: 4423
@wkdtnqls0506 완벽하게 해결되었습니다! 🎉
커밋을 확인해보니 누락된 @radix-ui/react-alert-dialog 패키지를 정상적으로 설치하셨네요. 이제 빌드 실패 문제가 해결되고, AlertModal 컴포넌트가 의도한 대로 작동할 것입니다.
특히 @radix-ui/react-alert-dialog를 사용하는 것이 올바른 선택입니다 - 오버레이 클릭 시 모달이 닫히지 않는 alert dialog 특성에 맞는 패키지이기 때문입니다.
(\ /)
( .. )
o(")(")
🧬 Code Graph Analysis Results
Relevant snippets from src/components/ui/AlertModal/index.ts (line 1)
AlertModal- This likely re-exports the
AlertModalcomponent fromAlertModal.tsx.
Relevant snippets from src/components/ui/AlertModal/AlertModal.css.ts
At lines 13-25:
export const content = style({
maxHeight: "80vh",
display: "flex",
flexDirection: "column",
position: "fixed",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: "min(30rem, 90vw)",
background: semantic.background.white,
borderRadius: radius[120],
zIndex: zIndex.modal,
});- Defines the CSS styles for the modal content container, including positioning, size, background, border radius, and z-index.
At lines 35-38:
export const title = style({
...typography.title3Sb,
color: semantic.text.normal,
});- Defines the CSS styles for the modal title, applying typography styles and text color.
At lines 48-51:
export const footer = style({
width: "100%",
display: "flex",
});- Defines the CSS styles for the modal footer container, setting full width and flex display.
These snippets provide the styling context for the AlertModal component's structure and elements.
If you found this review helpful, would you consider giving us a shout-out on X?
Thank you for using CodeRabbit!
| * @example | ||
| * ```tsx | ||
| * <AlertModal | ||
| * title="정말 삭제하시겠어요?" | ||
| * trigger={<Button>모달 열기</Button>} | ||
| * content={<div>삭제하면 복구할 수 없습니다.</div>} | ||
| * footer={ | ||
| * <> | ||
| * <Button variant="assistive">취소</Button> | ||
| * <Button variant="primary">삭제</Button> | ||
| * </> | ||
| * } | ||
| * /> | ||
| * ``` |
There was a problem hiding this comment.
🛠️ Refactor suggestion
JSDoc 예제 코드에서 AlertDialog 래퍼 사용 누락
JSDoc 예제에서 footer 버튼들이 AlertDialog.Cancel과 AlertDialog.Action으로 래핑되지 않았습니다. 이는 실제 사용 시 혼란을 야기할 수 있습니다.
예제 코드를 다음과 같이 수정하세요:
* footer={
* <>
-* <Button variant="assistive">취소</Button>
-* <Button variant="primary">삭제</Button>
+* <AlertDialog.Cancel asChild>
+* <Button variant="assistive">취소</Button>
+* </AlertDialog.Cancel>
+* <AlertDialog.Action asChild>
+* <Button variant="primary">삭제</Button>
+* </AlertDialog.Action>
* </>
* }📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| * @example | |
| * ```tsx | |
| * <AlertModal | |
| * title="정말 삭제하시겠어요?" | |
| * trigger={<Button>모달 열기</Button>} | |
| * content={<div>삭제하면 복구할 수 없습니다.</div>} | |
| * footer={ | |
| * <> | |
| * <Button variant="assistive">취소</Button> | |
| * <Button variant="primary">삭제</Button> | |
| * </> | |
| * } | |
| * /> | |
| * ``` | |
| * @example | |
| * |
🤖 Prompt for AI Agents
In src/components/ui/AlertModal/AlertModal.tsx between lines 35 and 48, the
JSDoc example code for AlertModal is missing the wrapping of footer buttons with
AlertDialog.Cancel and AlertDialog.Action components. To fix this, update the
example so that the cancel button is wrapped with AlertDialog.Cancel and the
delete button is wrapped with AlertDialog.Action, reflecting the actual usage
pattern and preventing confusion.
앗 네네! 다만 Cancel, Action은 어떤 것일까요?,, <- 아아 맞아요! |
2 participants
✅ 이슈 번호
close #87
🪄 작업 내용 (변경 사항)
AlertModal컴포넌트 및 스토리북 생성📸 스크린샷
💡 설명
@radix-ui/react-dialog패키지를 사용하여AlertModal을 구현했습니다.src/styles/zIndex.css.ts에 zIndex 값 상수화하였습니다 😁🗣️ 리뷰어에게 전달 사항
📍 트러블 슈팅
Summary by CodeRabbit
New Features
Style
Chores