[희락] Modal Error 수정

모달부분이 왼쪽에 치우쳐진채로 나오는 문제가 발생함!
모바일 화면일때는 괜찮은데 큰화면으로 보게되면 이상한 모양..

interface ModalProps {
  children: ReactNode;
  open: boolean;
  top?: string;
  left?: string;
  right?: string;
  onClose: () => void;
}

export const Modal = ({
  children,
  open,
  top = "4rem",
  left = "5%",
  right = "5%",
  onClose,
}: ModalProps) => {
  if (open) {
    return (
      <div className="">
        <Backdrop onClose={onClose}></Backdrop>
        <Overlay>
          <div
            className="fixed flex justify-center rounded z-20"
            style={{ top, left, right }}
          >
            {children}
          </div>
        </Overlay>
      </div>
    );
  }
};

div 안쪽 부분에 style을 지우고 justify-center를 사용하고자 했으나 menu bar 부분에서도 같은 Modal component를 사용해서 다시 돌림 ..

fixed rounded z-20 bg-white만 있었는데 flex와 justify-center를 추가해줌! 그리고 bg-white는 각각 다른곳에서 넣어줌