|
| 1 | +import ReactMarkdown from "react-markdown"; |
| 2 | +import remarkGfm from "remark-gfm"; |
| 3 | +import useWindowDimensions from "@/hooks/useWindowDimensions"; |
| 4 | +import CloseBtn from "./../../assets/image/button/CloseBtn.svg"; |
| 5 | +import { Dialog } from "@mui/material"; |
| 6 | +import { AUTHOR_TERMS_CONTENT } from "@/constants/PopupTexts/PostWorkTexts"; |
| 7 | +import OnOffBtn from "../button/OnOffBtn"; |
| 8 | + |
| 9 | +function DialogPopup({ |
| 10 | + onClick, |
| 11 | + setShowPopup, |
| 12 | +}: { |
| 13 | + onClick: () => void; |
| 14 | + setShowPopup: (show: boolean) => void; |
| 15 | +}) { |
| 16 | + const { isMobile, isSmallMobile } = useWindowDimensions().widthConditions; |
| 17 | + |
| 18 | + const handleClose = () => { |
| 19 | + setShowPopup(false); |
| 20 | + }; |
| 21 | + |
| 22 | + return ( |
| 23 | + <Dialog |
| 24 | + open |
| 25 | + onClose={handleClose} |
| 26 | + keepMounted |
| 27 | + slotProps={{ |
| 28 | + paper: { |
| 29 | + sx: { |
| 30 | + display: "flex", |
| 31 | + flexDirection: "column", |
| 32 | + alignItems: "center", |
| 33 | + margin: 0, |
| 34 | + width: isMobile ? "450px" : isSmallMobile ? "280px" : "500px", |
| 35 | + borderRadius: "30px", |
| 36 | + height: isSmallMobile ? "70vh" : "626px", |
| 37 | + maxHeight: isSmallMobile ? "493px" : "626px", |
| 38 | + overflow: "hidden", |
| 39 | + }, |
| 40 | + }, |
| 41 | + }} |
| 42 | + > |
| 43 | + <form |
| 44 | + onSubmit={(e) => { |
| 45 | + e.preventDefault(); |
| 46 | + onClick(); |
| 47 | + }} |
| 48 | + className="w-full p-[15px] sm:p-[20px] flex flex-col h-full " |
| 49 | + > |
| 50 | + <div className="flex w-full !items-center sm:justify-between mb-[10px]"> |
| 51 | + <span |
| 52 | + className="flex justify-center items-center w-full sm:w-[265px] px-[15px] py-[10px] sm:px-[15px] sm:py-[10px] rounded-[30px] bg-[#F5F5F5] |
| 53 | + border border-solid [border-width:0.3px] border-neutral-300/60 p-small-regular sm:p-medium-medium whitespace-nowrap" |
| 54 | + > |
| 55 | + 작가 대상 이용약관 (포도알 스테이지) |
| 56 | + </span> |
| 57 | + {!isSmallMobile && ( |
| 58 | + <img |
| 59 | + className="c-pointer" |
| 60 | + id="close-btn" |
| 61 | + src={CloseBtn} |
| 62 | + alt="close" |
| 63 | + onClick={handleClose} |
| 64 | + ></img> |
| 65 | + )} |
| 66 | + </div> |
| 67 | + |
| 68 | + <div |
| 69 | + className="prose prose-neutral max-w-none whitespace-pre-wrap rounded-[30px] bg-[#F5F5F5] border border-solid [border-width:0.3px] border-neutral-300/60 p-[20px] |
| 70 | + flex-1 min-h-0 overflow-y-auto" |
| 71 | + > |
| 72 | + <ReactMarkdown |
| 73 | + remarkPlugins={[remarkGfm]} |
| 74 | + components={{ |
| 75 | + h3: ({ node, ...props }) => ( |
| 76 | + <h3 className="text-[16px] font-semibold" {...props} /> |
| 77 | + ), |
| 78 | + p: ({ node, ...props }) => ( |
| 79 | + <p className="p-small-regular leading-6" {...props} /> |
| 80 | + ), |
| 81 | + ol: (props) => ( |
| 82 | + <ol className="p-small-regular list-decimal pl-5" {...props} /> |
| 83 | + ), |
| 84 | + ul: (props) => ( |
| 85 | + <ul className="p-small-regular list-disc pl-5" {...props} /> |
| 86 | + ), |
| 87 | + li: (props) => ( |
| 88 | + <li className="p-small-regular leading-6" {...props} /> |
| 89 | + ), |
| 90 | + hr: (props) => ( |
| 91 | + <hr className="border-t border-neutral-200" {...props} /> |
| 92 | + ), |
| 93 | + }} |
| 94 | + > |
| 95 | + {AUTHOR_TERMS_CONTENT} |
| 96 | + </ReactMarkdown> |
| 97 | + </div> |
| 98 | + <OnOffBtn |
| 99 | + text="동의하고 작품 보내기" |
| 100 | + onClick={onClick} |
| 101 | + disabled={false} |
| 102 | + color="purple" |
| 103 | + style={{ width: "100%", marginTop: "20px" }} |
| 104 | + /> |
| 105 | + </form> |
| 106 | + </Dialog> |
| 107 | + ); |
| 108 | +} |
| 109 | + |
| 110 | +export default DialogPopup; |
0 commit comments