Nextjs
yarn berry
vanilla-extract
modal.tsx
import { useEffect, useState } from "react";
import { modalBodyRecipe, modalHeaderRecipe, modalOverlayRecipe, modalRecipe } from "./modal.css";
interface Props {
show: boolean;
onClose: () => void;
title: string;
}
const Modal: React.FC<Props> = ({ show, onClose, children, title }) => {
const [isBrowser, setIsBrowser] = useState(false);
useEffect(() => {
setIsBrowser(true);
}, []);
const handleCloseClick = (e: React.MouseEvent<HTMLSpanElement>) => {
e.preventDefault();
onClose();
};
const modalContent = (
<div className={modalOverlayRecipe({ show })}>
<div className={modalRecipe()}>
<div className={modalHeaderRecipe()}>
<span onClick={handleCloseClick}>x</span>
</div>
{title && <p>{title}</p>}
<div className={modalBodyRecipe()}>{children}</div>
</div>
</div>
);
if (!isBrowser) return null;
return modalContent;
};
export default Modal;
modal.css.ts
import { style } from "@vanilla-extract/css";
import { recipe } from "@vanilla-extract/recipes";
// modal
const modalBodyStyle = style({
paddingTop: "10xp",
});
export const modalBodyRecipe = recipe({
base: [modalBodyStyle],
variants: {},
});
// header
const modalheaderStyle = style({
display: "flex",
justifyContent: "flex-end",
fontSize: "25px",
});
export const modalHeaderRecipe = recipe({
base: [modalheaderStyle],
variants: {},
});
//
const modalStyle = style({
backgroundColor: "white",
width: "100%",
maxWidth: "739px",
height: "100%",
borderRadius: "15px",
padding: "15px",
});
export const modalRecipe = recipe({
base: [modalStyle],
variants: {},
});
// Overlay
const modalOverlayStyle = style({
zIndex: "9999",
position: "absolute",
top: "0",
left: "0",
width: "100%",
height: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
backgroundColor: "rgba(0, 0, 0, 0.3)",
transform: "translateY(110%)",
transition: "transform 1s ease",
});
export const modalOverlayRecipe = recipe({
base: [modalOverlayStyle],
variants: {
show: {
true: {
transform: "translateY(0)",
},
false: {
transform: "translateY(110%)",
},
},
},
});
vanilla-extract 의 사용이 미숙해서 생각보다 시간이 많이 소요됐다