Feat: 공유 모달 추가

src/components/LinkItems/LinkItems.jsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import styles from "./LinkItems.module.scss";
 import classNames from "classnames/bind";
-import { DeleteModal, AddModal } from "../";
+import { DeleteModal, AddModal, ShareModal } from "../";
 import { SEARCH_ICON, PEN_ICON, WASTEBASKET_ICON } from "./constant";
 
 const cx = classNames.bind(styles);
@@ -26,11 +26,13 @@ const choiceItems = [
 
 export const LinkItems = ({ folderName }) => {
   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 }) => {
         </DeleteModal>
       )}
 
-      {addemodal && (
-        <AddModal modal={addemodal} setModal={setAddModal}>
+      {addModal && (
+        <AddModal modal={addModal} setModal={setAddModal}>
           <h2>폴더 이름 변경</h2>
           <input type="text" placeholder={folderName} />
           <button type="button">변경하기</button>
         </AddModal>
       )}
+
+      {shareModal && (
+        <ShareModal modal={shareModal} setModal={setShareModal}>
+          <h2>폴더 공유</h2>
+          <p>{folderName}</p>
+        </ShareModal>
+      )}
     </div>
   );
 };

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 (
+    <div className={cx("container")}>
+      <div className={cx("content")} ref={modalRef}>
+        <div className={cx("title")}>{children}</div>
+
+        <div className={cx("icon-block")}>
+          <div className={cx("text")}>
+            <img src={KAKAO_ICON} alt="카카오톡" />
+            <p>카카오톡</p>
+          </div>
+
+          <div className={cx("text")}>
+            <img src={FACEBOOK_ICON} alt="페이스북" />
+            <p>페이스북</p>
+          </div>
+
+          <div className={cx("text")}>
+            <img src={LINK_ICON} alt="링크 복사" />
+            <p>링크 복사</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

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);
+}

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";

src/components/ShareModal/index.js

@@ -0,0 +1 @@
+export * from "./ShareModal";

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";