From 4bcf2ab02bc19214079ad0f1f1e08f44716ddb55 Mon Sep 17 00:00:00 2001 From: juan0444 Date: Sun, 5 May 2024 23:40:01 +0900 Subject: [PATCH] =?UTF-8?q?Feat:=20=EA=B3=B5=EC=9C=A0=20=EB=AA=A8=EB=8B=AC?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/images/modalFacebookIcon.png | Bin 0 -> 1202 bytes public/images/modalKakaoIcon.png | Bin 0 -> 997 bytes public/images/modalLinkIcon.png | Bin 0 -> 1336 bytes src/components/LinkItems/LinkItems.jsx | 17 +++- src/components/ShareModal/ShareModal.jsx | 50 +++++++++++ .../ShareModal/ShareModal.module.scss | 81 ++++++++++++++++++ src/components/ShareModal/constant.js | 3 + src/components/ShareModal/index.js | 1 + src/components/index.js | 3 +- 9 files changed, 150 insertions(+), 5 deletions(-) create mode 100644 public/images/modalFacebookIcon.png create mode 100644 public/images/modalKakaoIcon.png create mode 100644 public/images/modalLinkIcon.png create mode 100644 src/components/ShareModal/ShareModal.jsx create mode 100644 src/components/ShareModal/ShareModal.module.scss create mode 100644 src/components/ShareModal/constant.js create mode 100644 src/components/ShareModal/index.js diff --git a/public/images/modalFacebookIcon.png b/public/images/modalFacebookIcon.png new file mode 100644 index 0000000000000000000000000000000000000000..0709a712fd43b32c47258690ffa455fde89b9cc5 GIT binary patch literal 1202 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 { const [deletemodal, setDeleteModal] = useState(false); - const [addemodal, setAddModal] = useState(false); + const [addModal, setAddModal] = useState(false); + const [shareModal, setShareModal] = useState(false); const handleClick = (text) => { text === "삭제" && setDeleteModal(true); text === "이름 변경" && setAddModal(true); + text === "공유" && setShareModal(true); }; return ( @@ -63,13 +65,20 @@ export const LinkItems = ({ folderName }) => { )} - {addemodal && ( - + {addModal && ( +

폴더 이름 변경

 )} + + {shareModal && ( + +

폴더 공유

+

{folderName}

+ + )} ); }; diff --git a/src/components/ShareModal/ShareModal.jsx b/src/components/ShareModal/ShareModal.jsx new file mode 100644 index 000000000..5bf180f00 --- /dev/null +++ b/src/components/ShareModal/ShareModal.jsx @@ -0,0 +1,50 @@ +import { useEffect, useRef } from "react"; +import styles from "./ShareModal.module.scss"; +import classNames from "classnames/bind"; +import { KAKAO_ICON, FACEBOOK_ICON, LINK_ICON } from "./constant"; + +const cx = classNames.bind(styles); + +export const ShareModal = ({ modal, setModal, children }) => { + const modalRef = useRef(null); + + // 모달 영역 밖 클릭 시 닫기 + useEffect(() => { + const handleModal = (event) => { + if (modal && !modalRef.current.contains(event.target)) { + setModal(false); + } + }; + + document.addEventListener("mousedown", handleModal); + + return () => { + document.removeEventListener("mousedown", handleModal); + }; + }, [modal, setModal, modalRef]); + + return ( +
+
+
{children}
+ +
+
+ 카카오톡 +

카카오톡

+
+ +
+ 페이스북 +

페이스북

+
+ +
+ 링크 복사 +

링크 복사

+
+
+
+
+ ); +}; diff --git a/src/components/ShareModal/ShareModal.module.scss b/src/components/ShareModal/ShareModal.module.scss new file mode 100644 index 000000000..691cbca2f --- /dev/null +++ b/src/components/ShareModal/ShareModal.module.scss @@ -0,0 +1,81 @@ +@import "/src/styles/global.scss"; + +.container { + z-index: 4; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: $modal-gray; +} + +.content { + position: absolute; + top: 50%; + left: 50%; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + transform: translate(-50%, -50%); + gap: 1.5rem; + + padding: 2.2rem 2.5rem; + + width: 25rem; + height: 18rem; + + border-radius: 0.9375rem; + border: 1px solid $color-gray-light; + background: $color-white; + + h2 { + @include font(1.5rem, $color-gray100, 700); + } + + button { + display: flex; + width: 100%; + padding: 1rem 1.25rem; + justify-content: center; + align-items: center; + gap: 0.625rem; + + border-radius: 0.5rem; + background: $color-red; + + @include font(1.2rem, $color-gray-light, 600); + } +} + +.title { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + gap: 0.8rem; + + @include font(1.2rem, $color-gray60, 400); + + p { + width: 20rem; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + word-break: break-all; + } +} + +.icon-block { + display: flex; + gap: 2.4rem; +} + +.text { + display: flex; + flex-direction: column; + gap: 0.5rem; + @include font(1.2rem, $color-gray100, 400); +} diff --git a/src/components/ShareModal/constant.js b/src/components/ShareModal/constant.js new file mode 100644 index 000000000..429ff822a --- /dev/null +++ b/src/components/ShareModal/constant.js @@ -0,0 +1,3 @@ +export const KAKAO_ICON = "/images/modalKakaoIcon.png"; +export const FACEBOOK_ICON = "/images/modalFacebookIcon.png"; +export const LINK_ICON = "/images/modalLinkIcon.png"; diff --git a/src/components/ShareModal/index.js b/src/components/ShareModal/index.js new file mode 100644 index 000000000..f1b2d1b28 --- /dev/null +++ b/src/components/ShareModal/index.js @@ -0,0 +1 @@ +export * from "./ShareModal"; diff --git a/src/components/index.js b/src/components/index.js index dfca21a2d..356b03b8d 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,8 +1,9 @@ export * from "./AddFolderModal"; export * from "./AddModal"; +export * from "./DeleteModal"; +export * from "./ShareModal"; export * from "./Cards"; export * from "./LinkAddSearchBar"; -export * from "./DeleteModal"; export * from "./FolderCards"; export * from "./FolderToolBar"; export * from "./Footer";