From 911d84ec0a707d2d6aead13d6286d2e0c1e823b5 Mon Sep 17 00:00:00 2001 From: yoosangwook Date: Tue, 6 Aug 2024 14:59:59 +0900 Subject: [PATCH] feat: Add modal --- package.json | 1 + src/components/Intro.jsx | 36 ++++++++++++++++++++++++++ src/components/common/modal/QModal.jsx | 12 +++++++++ yarn.lock | 31 ++++++++++++++++++++++ 4 files changed, 80 insertions(+) create mode 100644 src/components/common/modal/QModal.jsx diff --git a/package.json b/package.json index 07d6a666..7080a5cb 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "react": "^18", "react-datepicker": "^7.3.0", "react-dom": "^18", + "react-responsive-modal": "^6.4.2", "recoil": "^0.7.7", "uuid": "^9.0.1" }, diff --git a/src/components/Intro.jsx b/src/components/Intro.jsx index 86be98fa..7235e2eb 100644 --- a/src/components/Intro.jsx +++ b/src/components/Intro.jsx @@ -2,11 +2,15 @@ import { useState } from 'react' +import { Button } from '@nextui-org/react' + import SingleDatePicker from './common/datepicker/SingleDatePicker' import RangeDatePicker from './common/datepicker/RangeDatePicker' import QGrid from './common/grid/QGrid' +import QModal from './common/modal/QModal' export default function Intro() { + const [open, setOpen] = useState(false) const [startDate, setStartDate] = useState(new Date()) const singleDatePickerProps = { startDate, @@ -25,6 +29,29 @@ export default function Intro() { isPageable: false, } + const modelProps = { + open, + setOpen, + } + + const ipsum = ( + <> +

title

+

+ 저작자·발명가·과학기술자와 예술가의 권리는 법률로써 보호한다. 이 헌법은 1988년 2월 25일부터 시행한다. 다만, 이 헌법을 시행하기 위하여 필요한 + 법률의 제정·개정과 이 헌법에 의한 대통령 및 국회의원의 선거 기타 이 헌법시행에 관한 준비는 이 헌법시행 전에 할 수 있다. +

+

+ 국가는 주택개발정책등을 통하여 모든 국민이 쾌적한 주거생활을 할 수 있도록 노력하여야 한다. 통신·방송의 시설기준과 신문의 기능을 보장하기 + 위하여 필요한 사항은 법률로 정한다. +

+

+ 국회에서 의결된 법률안은 정부에 이송되어 15일 이내에 대통령이 공포한다. 선거에 관한 경비는 법률이 정하는 경우를 제외하고는 정당 또는 + 후보자에게 부담시킬 수 없다. +

+ + ) + return ( <>
@@ -45,6 +72,15 @@ export default function Intro() {
+
+
QModal
+
+ + {ipsum} +
+
) } diff --git a/src/components/common/modal/QModal.jsx b/src/components/common/modal/QModal.jsx new file mode 100644 index 00000000..60ce318c --- /dev/null +++ b/src/components/common/modal/QModal.jsx @@ -0,0 +1,12 @@ +import { Modal } from 'react-responsive-modal' +import 'react-responsive-modal/styles.css' + +export default function QModal(props) { + const { open, setOpen, children } = props + + return ( + setOpen(false)} center> + {children} + + ) +} diff --git a/yarn.lock b/yarn.lock index cfb210ea..b7d6abf3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -21,6 +21,18 @@ dependencies: regenerator-runtime "^0.14.0" +"@bedrock-layout/use-forwarded-ref@^1.3.1": + version "1.6.1" + resolved "https://registry.yarnpkg.com/@bedrock-layout/use-forwarded-ref/-/use-forwarded-ref-1.6.1.tgz#e0d25c35af41ccaa36df809a7de8d5ccd9c70d1e" + integrity sha512-GD9A9AFLzFNjr7k6fgerSqxfwDWl+wsPS11PErOKe1zkVz0y7RGC9gzlOiX/JrgpyB3NFHWIuGtoOQqifJQQpw== + dependencies: + "@bedrock-layout/use-stateful-ref" "^1.4.1" + +"@bedrock-layout/use-stateful-ref@^1.4.1": + version "1.4.1" + resolved "https://registry.yarnpkg.com/@bedrock-layout/use-stateful-ref/-/use-stateful-ref-1.4.1.tgz#c543c61d15885e19506f068618a4d6427a5bf817" + integrity sha512-4eKO2KdQEXcR5LI4QcxqlJykJUDQJWDeWYAukIn6sRQYoabcfI5kDl61PUi6FR6o8VFgQ8IEP7HleKqWlSe8SQ== + "@floating-ui/core@^1.6.0": version "1.6.5" resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.5.tgz#102335cac0d22035b04d70ca5ff092d2d1a26f2b" @@ -2256,6 +2268,11 @@ binary-extensions@^2.0.0: resolved "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz" integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw== +body-scroll-lock@^3.1.5: + version "3.1.5" + resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-3.1.5.tgz#c1392d9217ed2c3e237fee1e910f6cdd80b7aaec" + integrity sha512-Yi1Xaml0EvNA0OYWxXiYNqY24AfWkbA6w5vxE7GWxtKfzIbZM+Qw+aSmkgsbWzbHiy/RCSkUZBplVxTA+E4jJg== + brace-expansion@^1.1.7: version "1.1.11" resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd" @@ -2334,6 +2351,11 @@ chownr@^2.0.0: resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece" integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ== +classnames@^2.3.1: + version "2.5.1" + resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b" + integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow== + client-only@0.0.1, client-only@^0.0.1: version "0.0.1" resolved "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz" @@ -3409,6 +3431,15 @@ react-remove-scroll@^2.5.6: use-callback-ref "^1.3.0" use-sidecar "^1.1.2" +react-responsive-modal@^6.4.2: + version "6.4.2" + resolved "https://registry.yarnpkg.com/react-responsive-modal/-/react-responsive-modal-6.4.2.tgz#666b5c35b232cec617981006c9fe59414531a5a0" + integrity sha512-ARjGEKE5Gu5CSvyA8U9ARVbtK4SMAtdXsjtzwtxRlQIHC99RQTnOUctLpl7+/sp1Kg1OJZ6yqvp6ivd4TBueEw== + dependencies: + "@bedrock-layout/use-forwarded-ref" "^1.3.1" + body-scroll-lock "^3.1.5" + classnames "^2.3.1" + react-style-singleton@^2.2.1: version "2.2.1" resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"