Skip to content

Commit cf8272f

Browse files
authored
Merge pull request #132 from COW-dev/feat/#131-modal
[REFACTOR] Modal 컴포넌트 ContentClassName 추가
2 parents ad89154 + 099ea14 commit cf8272f

File tree

1 file changed

+15
-3
lines changed

1 file changed

+15
-3
lines changed

src/shared/ui/Modal/Modal.tsx

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,11 @@ type Props = {
2828
* Additional classes to apply to the modal.
2929
*/
3030
className?: string;
31+
32+
/**
33+
* Additional classes to apply to the modal content.
34+
*/
35+
contentClassName?: string;
3136
};
3237

3338
const MODAL_MOTION = {
@@ -43,6 +48,7 @@ export function Modal({
4348
children,
4449
closeOnOutsideClick = true,
4550
className,
51+
contentClassName,
4652
}: Props) {
4753
const handleOutsideClick = (e: React.MouseEvent) => {
4854
if (
@@ -65,20 +71,26 @@ export function Modal({
6571
className={cn('fixed inset-0 z-50 flex w-full items-center justify-center', className)}
6672
>
6773
<div className="absolute inset-0 bg-black/50" onClick={handleOutsideClick} />
68-
<ModalContent>{children}</ModalContent>
74+
<ModalContent contentClassName={contentClassName}>{children}</ModalContent>
6975
</motion.div>
7076
</Portal>
7177
);
7278
}
7379

74-
export function ModalContent({ children }: { children: React.ReactNode }) {
80+
export function ModalContent({
81+
children,
82+
contentClassName,
83+
}: {
84+
children: React.ReactNode;
85+
contentClassName?: string;
86+
}) {
7587
return (
7688
<Flex
7789
role="dialog"
7890
aria-modal="true"
7991
justifyContent="center"
8092
alignItems="center"
81-
className="relative z-50 rounded-lg bg-white p-6"
93+
className={cn('relative z-50 rounded-lg bg-white p-6', contentClassName)}
8294
>
8395
{children}
8496
</Flex>

0 commit comments

Comments
 (0)