[이주안] Week13

.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage

components/AddFolderModal/AddFolderModal.module.scss

@@ -0,0 +1,109 @@
+@import "/styles/globals.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: 26rem;
+
+  border-radius: 0.9375rem;
+  border: 1px solid $color-gray-light;
+  background: $color-white;
+
+  h2 {
+    @include font(1.5rem, $color-gray100, 700);
+  }
+}
+
+.title {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+
+  @include font(1.2rem, $color-gray60, 400);
+
+  p {
+    width: 20rem;
+    margin-top: 0.8rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-break: break-all;
+  }
+}
+
+.input-text {
+  border: 1px solid $color-primary;
+}
+
+.folder-block {
+  display: flex;
+  margin-top: 1rem;
+  width: 20rem;
+  height: 12rem;
+  flex-direction: column;
+  align-items: baseline;
+  overflow: scroll;
+  overflow-x: hidden;
+
+  button {
+    width: 100%;
+    text-align: left;
+    padding: 0.8rem;
+    @include font(1.2rem, $color-black, 400);
+
+    &:hover {
+      border-radius: 0.5rem;
+      background: $color-light-blue;
+      @include font(1.2rem, $color-primary, 400);
+    }
+  }
+}
+
+.button-click {
+  border-radius: 0.5rem;
+  background: $color-light-blue;
+  @include font(1.4rem, $color-primary, 400);
+}
+
+.add-button {
+  display: flex;
+  width: 100%;
+  margin-top: 1.4rem;
+  padding: 1rem 1.25rem;
+  justify-content: center;
+  align-items: center;
+  gap: 0.625rem;
+
+  border-radius: 0.5rem;
+  background: $color-linear-gradient;
+
+  @include font(1.2rem, $color-gray-light, 600);
+}
+
+.button {
+  border: none;
+  background-color: #fff;
+}

components/AddFolderModal/AddFolderModal.tsx

@@ -0,0 +1,54 @@
+import { useEffect, useRef } from "react";
+import styles from "./AddFolderModal.module.scss";
+import classNames from "classnames/bind";
+import { COLSE_ICON } from "./constant";
+
+const cx = classNames.bind(styles);
+
+export const AddFolderModal = ({ modal, setModal, url, folders }) => {
+  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")}>
+          <h2>폴더에 추가</h2>
+          <p>{url}</p>
+          <div className={cx("folder-block")}>
+            {folders.map((item) => {
+              return (
+                <button
+                  key={item.id}
+                  className={cx("button")}
+                  // onClick={() => clickButton(item, index)}
+                  type="button"
+                >
+                  <span>{item.name}</span>
+                </button>
+              );
+            })}
+          </div>
+
+          <button className={cx("add-button")} type="button">
+            추가하기
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

components/AddFolderModal/constant.js

@@ -0,0 +1 @@
+export const COLSE_ICON = "/closeIcon.svg";

components/AddFolderModal/index.js

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

components/AddModal/AddModal.module.scss

@@ -0,0 +1,89 @@
+@import "/styles/globals.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: 16rem;
+  border-radius: 0.9375rem;
+  border: 1px solid $color-gray-light;
+  background: $color-white;
+
+  h2 {
+    @include font(1.5rem, $color-gray100, 700);
+  }
+}
+
+.title {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+
+  @include font(1.2rem, $color-gray60, 400);
+
+  input {
+    width: 20rem;
+    margin-top: 0.8rem;
+    padding: 1.2rem;
+    border-radius: 0.5rem;
+    background: $color-white;
+    border: 1px solid $color-gray20;
+    @include font(1.2rem, $color-gray100, 400);
+
+    &:hover {
+      border: 1px solid $color-primary;
+    }
+  }
+
+  button {
+    display: flex;
+    width: 100%;
+    margin-top: 1.4rem;
+    padding: 1rem 1.25rem;
+    justify-content: center;
+    align-items: center;
+    gap: 0.625rem;
+
+    border-radius: 0.5rem;
+    background: $color-linear-gradient;
+
+    @include font(1.2rem, $color-gray-light, 600);
+  }
+
+  p {
+    width: 20rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-break: break-all;
+  }
+}
+
+.input-text {
+  border: 1px solid $color-primary;
+}
+
+.image {
+  width: 1rem;
+  height: 1rem;
+}

components/AddModal/AddModal.tsx

@@ -0,0 +1,36 @@
+import { useEffect, useRef } from "react";
+import styles from "./AddModal.module.scss";
+import classNames from "classnames/bind";
+import { COLSE_ICON } from "./constant";
+import Image from "next/image";
+
+const cx = classNames.bind(styles);
+
+export const AddModal = ({ 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")}>
+      <Image className={cx("image")} src={COLSE_ICON} alt="모달 닫기 아이콘" width={100} height={100}/>
+
+      <div className={cx("content")} ref={modalRef}>
+        <div className={cx("title")}>{children}</div>
+      </div>
+    </div>
+  );
+};

components/AddModal/constant.js

@@ -0,0 +1 @@
+export const COLSE_ICON = "/closeIcon.svg";

components/AddModal/index.js

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