Skip to content

Commit

Permalink
feat: modal에 dialog portal 추가
Browse files Browse the repository at this point in the history
  • Loading branch information
황 태환 committed Feb 26, 2024
1 parent e1a9362 commit f1d41ab
Show file tree
Hide file tree
Showing 3 changed files with 133 additions and 35 deletions.
1 change: 0 additions & 1 deletion public/swe-worker-4da67dda9bc18c53.js
View file

This file was deleted.

102 changes: 102 additions & 0 deletions public/swe-worker-development.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
/*
* ATTENTION: An "eval-source-map" devtool has been used.
* This devtool is neither made for production nor for readable output files.
* It uses "eval()" calls to create a separate source file with attached SourceMaps in the browser devtools.
* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
* or disable the default devtool with "devtool: false".
* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
*/
/******/ (function() { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ({

/***/ "./node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/@ducanh2912/next-pwa/dist/sw-entry-worker.js":
/*!*****************************************************************************************************************************************************************************!*\
!*** ./node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/@ducanh2912/next-pwa/dist/sw-entry-worker.js ***!
\*****************************************************************************************************************************************************************************/
/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {

eval(__webpack_require__.ts("__webpack_require__.r(__webpack_exports__);\nself.onmessage=async e=>{switch(e.data.type){case\"__START_URL_CACHE__\":{let t=e.data.url,a=await fetch(t);if(!a.redirected)return (await caches.open(\"start-url\")).put(t,a);return Promise.resolve()}case\"__FRONTEND_NAV_CACHE__\":{let t=e.data.url,a=await caches.open(\"pages\");if(await a.match(t,{ignoreSearch:!0}))return;let s=await fetch(t);if(!s.ok)return;if(a.put(t,s.clone()),e.data.shouldCacheAggressively&&s.headers.get(\"Content-Type\")?.includes(\"text/html\"))try{let e=await s.text(),t=[],a=await caches.open(\"static-style-assets\"),r=await caches.open(\"next-static-js-assets\"),c=await caches.open(\"static-js-assets\");for(let[s,r]of e.matchAll(/<link.*?href=['\"](.*?)['\"].*?>/g))/rel=['\"]stylesheet['\"]/.test(s)&&t.push(a.match(r).then(e=>e?Promise.resolve():a.add(r)));for(let[,a]of e.matchAll(/<script.*?src=['\"](.*?)['\"].*?>/g)){let e=/\\/_next\\/static.+\\.js$/i.test(a)?r:c;t.push(e.match(a).then(t=>t?Promise.resolve():e.add(a)));}return await Promise.all(t)}catch{}return Promise.resolve()}default:return Promise.resolve()}};//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9ub2RlX21vZHVsZXMvLnBucG0vQGR1Y2FuaDI5MTIrbmV4dC1wd2FAMTAuMi4yX0Bzd2MrY29yZUAxLjQuMl9lc2J1aWxkQDAuMTguMjBfbmV4dEAxNC4wLjRfd2VicGFja0A1Ljg5LjAvbm9kZV9tb2R1bGVzL0BkdWNhbmgyOTEyL25leHQtcHdhL2Rpc3Qvc3ctZW50cnktd29ya2VyLmpzIiwibWFwcGluZ3MiOiI7QUFBQSx5QkFBeUIsb0JBQW9CLDJCQUEyQixrQ0FBa0Msa0VBQWtFLHlCQUF5Qiw4QkFBOEIsOENBQThDLG9CQUFvQixnQkFBZ0IsU0FBUyxxQkFBcUIsZ0JBQWdCLCtHQUErRywwSkFBMEosd0pBQXdKLDhEQUE4RCw0Q0FBNEMsMERBQTBELDRCQUE0QixPQUFPLHlCQUF5QiIsInNvdXJjZXMiOlsid2VicGFjazovL19OX0UvLi9ub2RlX21vZHVsZXMvLnBucG0vQGR1Y2FuaDI5MTIrbmV4dC1wd2FAMTAuMi4yX0Bzd2MrY29yZUAxLjQuMl9lc2J1aWxkQDAuMTguMjBfbmV4dEAxNC4wLjRfd2VicGFja0A1Ljg5LjAvbm9kZV9tb2R1bGVzL0BkdWNhbmgyOTEyL25leHQtcHdhL2Rpc3Qvc3ctZW50cnktd29ya2VyLmpzP2QxNWUiXSwic291cmNlc0NvbnRlbnQiOlsic2VsZi5vbm1lc3NhZ2U9YXN5bmMgZT0+e3N3aXRjaChlLmRhdGEudHlwZSl7Y2FzZVwiX19TVEFSVF9VUkxfQ0FDSEVfX1wiOntsZXQgdD1lLmRhdGEudXJsLGE9YXdhaXQgZmV0Y2godCk7aWYoIWEucmVkaXJlY3RlZClyZXR1cm4gKGF3YWl0IGNhY2hlcy5vcGVuKFwic3RhcnQtdXJsXCIpKS5wdXQodCxhKTtyZXR1cm4gUHJvbWlzZS5yZXNvbHZlKCl9Y2FzZVwiX19GUk9OVEVORF9OQVZfQ0FDSEVfX1wiOntsZXQgdD1lLmRhdGEudXJsLGE9YXdhaXQgY2FjaGVzLm9wZW4oXCJwYWdlc1wiKTtpZihhd2FpdCBhLm1hdGNoKHQse2lnbm9yZVNlYXJjaDohMH0pKXJldHVybjtsZXQgcz1hd2FpdCBmZXRjaCh0KTtpZighcy5vaylyZXR1cm47aWYoYS5wdXQodCxzLmNsb25lKCkpLGUuZGF0YS5zaG91bGRDYWNoZUFnZ3Jlc3NpdmVseSYmcy5oZWFkZXJzLmdldChcIkNvbnRlbnQtVHlwZVwiKT8uaW5jbHVkZXMoXCJ0ZXh0L2h0bWxcIikpdHJ5e2xldCBlPWF3YWl0IHMudGV4dCgpLHQ9W10sYT1hd2FpdCBjYWNoZXMub3BlbihcInN0YXRpYy1zdHlsZS1hc3NldHNcIikscj1hd2FpdCBjYWNoZXMub3BlbihcIm5leHQtc3RhdGljLWpzLWFzc2V0c1wiKSxjPWF3YWl0IGNhY2hlcy5vcGVuKFwic3RhdGljLWpzLWFzc2V0c1wiKTtmb3IobGV0W3Mscl1vZiBlLm1hdGNoQWxsKC88bGluay4qP2hyZWY9WydcIl0oLio/KVsnXCJdLio/Pi9nKSkvcmVsPVsnXCJdc3R5bGVzaGVldFsnXCJdLy50ZXN0KHMpJiZ0LnB1c2goYS5tYXRjaChyKS50aGVuKGU9PmU/UHJvbWlzZS5yZXNvbHZlKCk6YS5hZGQocikpKTtmb3IobGV0WyxhXW9mIGUubWF0Y2hBbGwoLzxzY3JpcHQuKj9zcmM9WydcIl0oLio/KVsnXCJdLio/Pi9nKSl7bGV0IGU9L1xcL19uZXh0XFwvc3RhdGljLitcXC5qcyQvaS50ZXN0KGEpP3I6Yzt0LnB1c2goZS5tYXRjaChhKS50aGVuKHQ9PnQ/UHJvbWlzZS5yZXNvbHZlKCk6ZS5hZGQoYSkpKTt9cmV0dXJuIGF3YWl0IFByb21pc2UuYWxsKHQpfWNhdGNoe31yZXR1cm4gUHJvbWlzZS5yZXNvbHZlKCl9ZGVmYXVsdDpyZXR1cm4gUHJvbWlzZS5yZXNvbHZlKCl9fTsiXSwibmFtZXMiOltdLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///./node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/@ducanh2912/next-pwa/dist/sw-entry-worker.js\n"));

/***/ })

/******/ });
/************************************************************************/
/******/ // The require scope
/******/ var __webpack_require__ = {};
/******/
/************************************************************************/
/******/ /* webpack/runtime/make namespace object */
/******/ !function() {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/trusted types policy */
/******/ !function() {
/******/ var policy;
/******/ __webpack_require__.tt = function() {
/******/ // Create Trusted Type policy if Trusted Types are available and the policy doesn't exist yet.
/******/ if (policy === undefined) {
/******/ policy = {
/******/ createScript: function(script) { return script; }
/******/ };
/******/ if (typeof trustedTypes !== "undefined" && trustedTypes.createPolicy) {
/******/ policy = trustedTypes.createPolicy("nextjs#bundler", policy);
/******/ }
/******/ }
/******/ return policy;
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/trusted types script */
/******/ !function() {
/******/ __webpack_require__.ts = function(script) { return __webpack_require__.tt().createScript(script); };
/******/ }();
/******/
/******/ /* webpack/runtime/react refresh */
/******/ !function() {
/******/ if (__webpack_require__.i) {
/******/ __webpack_require__.i.push(function(options) {
/******/ var originalFactory = options.factory;
/******/ options.factory = function(moduleObject, moduleExports, webpackRequire) {
/******/ var hasRefresh = typeof self !== "undefined" && !!self.$RefreshInterceptModuleExecution$;
/******/ var cleanup = hasRefresh ? self.$RefreshInterceptModuleExecution$(moduleObject.id) : function() {};
/******/ try {
/******/ originalFactory.call(this, moduleObject, moduleExports, webpackRequire);
/******/ } finally {
/******/ cleanup();
/******/ }
/******/ }
/******/ })
/******/ }
/******/ }();
/******/
/******/ /* webpack/runtime/compat */
/******/
/******/
/******/ // noop fns to prevent runtime errors during initialization
/******/ if (typeof self !== "undefined") {
/******/ self.$RefreshReg$ = function () {};
/******/ self.$RefreshSig$ = function () {
/******/ return function (type) {
/******/ return type;
/******/ };
/******/ };
/******/ }
/******/
/************************************************************************/
/******/
/******/ // startup
/******/ // Load entry module and return exports
/******/ // This entry module can't be inlined because the eval-source-map devtool is used.
/******/ var __webpack_exports__ = {};
/******/ __webpack_modules__["./node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/@ducanh2912/next-pwa/dist/sw-entry-worker.js"](0, __webpack_exports__, __webpack_require__);
/******/
/******/ })()
;
65 changes: 31 additions & 34 deletions src/components/ui/modal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Dialog, DialogTrigger, DialogContent, DialogClose } from '@radix-ui/react-dialog';
import { Dialog, DialogTrigger, DialogContent, DialogClose, DialogPortal } from '@radix-ui/react-dialog';
import { Dispatch, SetStateAction } from 'react';
import { twMerge } from 'tailwind-merge';

Expand All @@ -21,47 +21,44 @@ export default function Modal({
description,
contents,
}: ModalProps) {
if (open) {
window.document.body.style.overflow = 'hidden';
} else {
window.document.body.style.overflow = 'auto';
}
return (
<Dialog modal open={open} onOpenChange={onOpenChange}>
{triggerElement && <DialogTrigger asChild>{triggerElement}</DialogTrigger>}
<DialogClose onKeyUp={(e) => e.preventDefault()}>
<DialogContent
onOpenAutoFocus={(e) => e.preventDefault()}
onCloseAutoFocus={(e) => e.preventDefault()}
onKeyDown={(e) => e.stopPropagation()}
onEscapeKeyDown={(e) => e.preventDefault()}
>
<div className="fixed right-0 top-0 z-[999] h-[100vh] w-full">
<div
className="mx-auto flex min-h-screen w-auto flex-col items-center justify-center bg-[#0a0a0c4d] shadow-lg lg:w-[400px] "
style={{ minHeight: '100dvh' }}
>
<DialogPortal>
{triggerElement && <DialogTrigger asChild>{triggerElement}</DialogTrigger>}
<DialogClose onKeyUp={(e) => e.preventDefault()}>
<DialogContent
onOpenAutoFocus={(e) => e.preventDefault()}
onCloseAutoFocus={(e) => e.preventDefault()}
onKeyDown={(e) => e.stopPropagation()}
onEscapeKeyDown={(e) => e.preventDefault()}
>
<div className="fixed right-0 top-0 z-[999] h-[100vh] w-full">
<div
className={twMerge(
'flex h-auto w-[296px] flex-col items-center justify-center rounded-[20px] bg-[#ffffff] px-[24px] py-[56px] ',
className,
)}
onClick={(e) => e.stopPropagation()}
className="mx-auto flex min-h-screen w-auto flex-col items-center justify-center bg-[#0a0a0c4d] shadow-lg lg:w-[400px] "
style={{ minHeight: '100dvh' }}
>
<div className="mb-[20px] flex flex-col items-center gap-[4px]">
{title && <h2 className="text-[#17171B)] text-[20px] font-[700]">{title}</h2>}
{description && (
<h3 className="whitespace-pre-line text-Subtitle2 text-newGray-800">
{description}
</h3>
<div
className={twMerge(
'flex h-auto w-[296px] flex-col items-center justify-center rounded-[20px] bg-[#ffffff] px-[24px] py-[56px] ',
className,
)}
onClick={(e) => e.stopPropagation()}
>
<div className="mb-[20px] flex flex-col items-center gap-[4px]">
{title && <h2 className="text-[#17171B)] text-[20px] font-[700]">{title}</h2>}
{description && (
<h3 className="whitespace-pre-line text-Subtitle2 text-newGray-800">
{description}
</h3>
)}
</div>
{contents}
</div>
{contents}
</div>
</div>
</div>
</DialogContent>
</DialogClose>
</DialogContent>
</DialogClose>
</DialogPortal>
</Dialog>
);
}

0 comments on commit f1d41ab

Please sign in to comment.