codeit-bootcamp-frontend · Jay-WKJun · May 10, 2024 · Apr 27, 2024 · Apr 27, 2024 · Apr 27, 2024
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
     <title>Linkbrary</title>
   </head>
   <body>

diff --git a/src/assets/facebook.png b/src/assets/facebook.png
diff --git a/src/assets/kakaotalk.png b/src/assets/kakaotalk.png
diff --git a/src/assets/share.png b/src/assets/share.png
diff --git a/src/global.css b/src/global.css
@@ -7,6 +7,10 @@ body {
     Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 }
 
+button {
+  cursor: pointer;
+}
+
 :root {
   --primary: #6d5afe;
   --red: #ff5b56;

diff --git a/...globalComponents/styles/Avatar.module.css → ...globalComponents/Avatar/Avatar.module.css b/...globalComponents/styles/Avatar.module.css → ...globalComponents/Avatar/Avatar.module.css
diff --git a/src/globalComponents/Avatar.jsx → src/globalComponents/Avatar/index.jsx b/src/globalComponents/Avatar.jsx → src/globalComponents/Avatar/index.jsx
@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import styles from "./styles/Avatar.module.css";
+import styles from "./Avatar.module.css";
 
 function Avatar({ src, size }) {
   const avatarClass = classNames(styles.avatar, {

diff --git a/...globalComponents/styles/Footer.module.css → ...globalComponents/Footer/Footer.module.css b/...globalComponents/styles/Footer.module.css → ...globalComponents/Footer/Footer.module.css
diff --git a/src/globalComponents/Footer.jsx → src/globalComponents/Footer/index.jsx b/src/globalComponents/Footer.jsx → src/globalComponents/Footer/index.jsx
@@ -1,5 +1,5 @@
 import { FaFacebook, FaInstagram, FaTwitter, FaYoutube } from "react-icons/fa";
-import styles from "./styles/Footer.module.css";
+import styles from "./Footer.module.css";
 
 function Footer() {
   return (

diff --git a/...globalComponents/styles/Header.module.css → ...globalComponents/Header/Header.module.css b/...globalComponents/styles/Header.module.css → ...globalComponents/Header/Header.module.css
diff --git a/src/globalComponents/Header.jsx → src/globalComponents/Header/index.jsx b/src/globalComponents/Header.jsx → src/globalComponents/Header/index.jsx
@@ -1,6 +1,6 @@
-import mainLogo from "../assets/Linkbrary.png";
-import Avatar from "./Avatar";
-import styles from "./styles/Header.module.css";
+import mainLogo from "../../assets/Linkbrary.png";
+import styles from "./Header.module.css";
+import Avatar from "../Avatar";
 
 function Header({ userAvatarImage, userProfileEmail, userLogInSuccess }) {
   return (

diff --git a/src/globalComponents/Modal/Modal.module.css b/src/globalComponents/Modal/Modal.module.css
@@ -0,0 +1,36 @@
+.background {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+  z-index: 1000;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+}
+
+.container {
+  padding: 28px;
+  background-color: var(--white);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  border-radius: 15px;
+  position: relative;
+}
+
+.exitButton {
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  right: 16px;
+  top: 16px;
+  border: none;
+  border-radius: 9999px;
+  background-color: var(--gray-400);
+  color: var(--gray-600);
+  cursor: pointer;
+}
diff --git a/src/globalComponents/Modal/ModalChildren.module.css b/src/globalComponents/Modal/ModalChildren.module.css
@@ -0,0 +1,92 @@
+.formContainer {
+  width: 280px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.formInput {
+  width: 100%;
+  padding: 15px 18px;
+  border: 1px solid var(--primary);
+  border-radius: 10px;
+  color: var(--black);
+  font-size: 16px;
+  font-weight: 400;
+}
+
+.formButton {
+  width: 100%;
+  padding: 16px 20px;
+  border-radius: 10px;
+  border: none;
+  background: var(--primary-gradient);
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--white);
+}
+
+.redBackground {
+  background: none;
+  background-color: var(--red);
+}
+
+.shareBox {
+  width: 280px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 32px;
+  margin-top: 10px;
+}
+
+.shareButtonWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--black);
+}
+
+.shareButton {
+  background: none;
+  border: none;
+  border-radius: 100%;
+}
+
+.title {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--black);
+}
+
+.subTitle {
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--gray-600);
+}
+
+.inputList {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.inputList button {
+  width: 100%;
+  text-align: left;
+  font-size: 16px;
+  font-weight: 400;
+  background-color: transparent;
+  border: none;
+  border-radius: 8px;
+  padding: 6px 15px;
+}
+
+.inputList button:active {
+  background-color: var(--gray-400);
+  color: var(--primary);
+}
diff --git a/src/globalComponents/Modal/index.jsx b/src/globalComponents/Modal/index.jsx
@@ -0,0 +1,16 @@
+import styles from "./Modal.module.css";
+
+function Modal({ children, onClick }) {
+  return (
+    <div className={styles.background}>
+      <div className={styles.container}>
+        {children}
+        <button className={styles.exitButton} onClick={onClick}>
+          X
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default Modal;
diff --git a/...balComponents/styles/SearchBar.module.css → ...Components/SearchBar/SearchBar.module.css b/...balComponents/styles/SearchBar.module.css → ...Components/SearchBar/SearchBar.module.css
diff --git a/src/globalComponents/SearchBar.jsx → src/globalComponents/SearchBar/index.jsx b/src/globalComponents/SearchBar.jsx → src/globalComponents/SearchBar/index.jsx
@@ -1,5 +1,5 @@
 import { FaSearch } from "react-icons/fa";
-import styles from "./styles/SearchBar.module.css";
+import styles from "./SearchBar.module.css";
 
 function SearchBar() {
   return (

diff --git a/...rPage/styles/FoldersController.module.css → ...erController/FoldersController.module.css b/...rPage/styles/FoldersController.module.css → ...erController/FoldersController.module.css
diff --git a/...lderPage/components/FoldersController.jsx → ...age/components/FolderController/index.jsx b/...lderPage/components/FoldersController.jsx → ...age/components/FolderController/index.jsx
@@ -1,11 +1,11 @@
-import FolderLinkCards from "./FolderLinkCards";
-import SearchBar from "../../../globalComponents/SearchBar";
 import { useEffect, useState } from "react";
 import { useSearchParams } from "react-router-dom";
-import { getLinksByUserIdAndFolderId } from "../../../services/api";
-import useAsync from "../../../services/useAsync";
-import FoldersList from "./FoldersList";
-import styles from "../styles/FoldersController.module.css";
+import useAsync from "../../../../services/useAsync";
+import { getLinksByUserIdAndFolderId } from "../../../../services/api";
+import styles from "./FoldersController.module.css";
+import SearchBar from "../../../../globalComponents/SearchBar";
+import FoldersList from "../FoldersList";
+import FolderLinkCards from "../FolderLinkCards";
 
 function FoldersController({ folders, userId }) {
   const [loading, setLoading] = useState(true);

diff --git a/src/pages/FolderPage/components/FolderLinkCard.jsx b/src/pages/FolderPage/components/FolderLinkCard.jsx
diff --git a/src/pages/FolderPage/components/FolderLinkCard/components/LinkAddToFolderForm/index.jsx b/src/pages/FolderPage/components/FolderLinkCard/components/LinkAddToFolderForm/index.jsx
@@ -0,0 +1,29 @@
+import styles from "../../../../../../globalComponents/Modal/ModalChildren.module.css";
+
+function LinkAddToFolderForm() {
+  return (
+    <>
+      <h1 className={styles.title}>폴더에 추가</h1>
+      <h2 className={styles.subTitle}>링크 주소</h2>
+      <form className={styles.formContainer}>
+        <ul className={styles.inputList}>
+          <li>
+            <button>코딩 팁</button>
+          </li>
+          <li>
+            <button>채용 사이트</button>
+          </li>
+          <li>
+            <button>유용한 글</button>
+          </li>
+          <li>
+            <button>나만의 장소</button>
+          </li>
+        </ul>
+        <button className={styles.formButton}>추가하기</button>
+      </form>
+    </>
+  );
+}
+
+export default LinkAddToFolderForm;
diff --git a/src/pages/FolderPage/components/FolderLinkCard/components/LinkDeleteForm/index.jsx b/src/pages/FolderPage/components/FolderLinkCard/components/LinkDeleteForm/index.jsx
@@ -0,0 +1,17 @@
+import styles from "../../../../../../globalComponents/Modal/ModalChildren.module.css";
+
+function LinkDeleteForm() {
+  return (
+    <>
+      <h1 className={styles.title}>링크 삭제</h1>
+      <h2 className={styles.subTitle}>url</h2>
+      <form className={styles.formContainer}>
+        <button className={`${styles.formButton} ${styles.redBackground}`}>
+          삭제하기
+        </button>
+      </form>
+    </>
+  );
+}
+
+export default LinkDeleteForm;
diff --git a/src/pages/FolderPage/components/FolderLinkCard/index.jsx b/src/pages/FolderPage/components/FolderLinkCard/index.jsx
@@ -0,0 +1,78 @@
+import { useState } from "react";
+import {
+  displayCreatedTime,
+  formatDateString,
+} from "../../../../utils/dateUtils";
+import defaultImage from "../../../../assets/card-default.png";
+import kebab from "../../../../assets/kebab.svg";
+import styles from "../../../LinkCard.module.css";
+import { FaRegStar } from "react-icons/fa";
+import Modal from "../../../../globalComponents/Modal";
+import LinkAddToFolderForm from "./components/LinkAddToFolderForm";
+import LinkDeleteForm from "./components/LinkDeleteForm";
+
+function FolderLinkCard({ link }) {
+  const [onModal, setOnModal] = useState(false);
+  const [modalContent, setModalContent] = useState(null);
+
+  const handleClickModal = (actionType) => {
+    const actionTypes = {
+      deleteLink: <LinkDeleteForm />,
+      addLink: <LinkAddToFolderForm />,
+    };
+
+    setModalContent(actionTypes[actionType]);
+    setOnModal(true);
+  };
+
+  const { url, description, title, created_at, image_source } = link;
+
+  const createdTime = displayCreatedTime(created_at);
+  const createdAtFormat = formatDateString(created_at);
+
+  const src = image_source || defaultImage;
+
+  const handleToggleDropDown = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    const button = e.currentTarget;
+    const linkInfo = button.closest(`.${styles.linkInfo}`);
+    const dropdown = linkInfo.querySelector(`.${styles.dropdown}`);
+    dropdown.classList.toggle(styles.hidden);
+  };
+
+  return (
+    <div className={styles.linkContainer}>
+      <a href={url} target="_blank" rel="noreferrer">
+        <div className={styles.imageWrapper}>
+          <img className={styles.linkImage} src={src} alt={title} />
+          <FaRegStar className={styles.starIcon} />
+        </div>
+      </a>
+      <div className={styles.linkInfo}>
+        <div className={styles.linkInfoContent}>
+          <div>{createdTime}</div>
+          <button onClick={handleToggleDropDown} className={styles.kebabButton}>
+            <img src={kebab} alt="menu" />
+          </button>
+        </div>
+        <div className={styles.linkInfoContent}>{description}</div>
+        <div className={styles.linkInfoContent}>{createdAtFormat}</div>
+        <div className={`${styles.dropdown} ${styles.hidden}`}>
+          <button onClick={() => handleClickModal("deleteLink")}>
+            삭제하기
+          </button>
+          <button onClick={() => handleClickModal("addLink")}>
+            폴더에 추가
+          </button>
+        </div>
+      </div>
+      {onModal && (
+        <Modal onClick={() => setOnModal(false)}>{modalContent}</Modal>
+      )}
+    </div>
+  );
+}
+
+export default FolderLinkCard;