[김한샘] week11

package.json

@@ -6,6 +6,8 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "axios": "^1.6.8",
+        "camelcase-keys": "^9.1.3",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.22.3",

src/components/AddLinkForm/AddLinkForm.jsx

@@ -1,18 +1,28 @@
 import "./AddLinkForm.css";
 import LinkIcon from "../../assets/icon/link.png";
+import { useContext } from "react";
+import ModalContext from "../Modal/ModalContext";
 
 function AddLinkForm() {
-    return (
-        <div className="link-wrap">
-            <form className="link-add-form">
-                <div className="link-con-wrap">
-                    <img src={LinkIcon} alt="" />
-                    <input className="link-input" type="text" placeholder="링크를 추가해보세요." />
-                    <button className="link-button">추가하기</button>
-                </div>
-            </form>
+  const { openModal, setModalType } = useContext(ModalContext);
+  const onClickModalOpen = (e) => {
+    e.preventDefault();
+    openModal();
+    setModalType("folderAdd");
+  };
+  return (
+    <div className="link-wrap">
+      <form className="link-add-form">
+        <div className="link-con-wrap">
+          <img src={LinkIcon} alt="" />
+          <input className="link-input" type="text" placeholder="링크를 추가해보세요." />
+          <button className="link-button" onClick={onClickModalOpen}>
+            추가하기
+          </button>
         </div>
-    );
+      </form>
+    </div>
+  );
 }
 
 export default AddLinkForm;

src/components/Card/Card.jsx

@@ -3,53 +3,53 @@ import catImg from "../../assets/images/cat.jpg";
 import GetDate from "../../utils/GetDate";
 import GetDaysAgo from "../../utils/GetDaysAgo";
 import useToggle from "../../hooks/useToggle";
-import KebobList from "./KebobList";
+import KebabList from "./KebabList";
 
 import EditableStarButton from "./EditableStarButton";
-import KebobButton from "./KebobButton";
+import KebabButton from "./KebabButton";
+import { useLocation } from "react-router-dom";
 
 function Card({ card }) {
-    const { description, id, title, url } = card;
-    const imageSource = card.image_source ?? card.imageSource;
-    const createdAt = card.created_at ?? card.createdAt;
-    const [display, setDisplay] = useToggle();
+  const { description, id, title, url, imageSource, createdAt } = card;
+  const [display, setDisplay] = useToggle();
+  const location = useLocation();
 
-    const onClickKebobButton = (e) => {
-        e.preventDefault();
-        setDisplay();
-    };
+  const onClickKebabButton = (e) => {
+    e.preventDefault();
+    setDisplay();
+  };
 
-    return (
-        <li key={id}>
-            <a href={url} target="_blank" rel="noopener noreferrer">
-                <div className="img-box">
-                    {imageSource ? (
-                        <img src={imageSource} alt={title} />
-                    ) : (
-                        <img src={catImg} alt="이미지가 없습니다." />
-                    )}
-                    {card.created_at ? <EditableStarButton /> : null}
-                </div>
-                <div className="text-box">
-                    <div className="text-menu-wrap">
-                        <div className="time">
-                            <GetDaysAgo createdAt={createdAt} />
-                        </div>
-                        {card.created_at ? (
-                            <>
-                                <KebobButton onClickKebobButton={onClickKebobButton} />
-                                {display === true ? <KebobList /> : null}
-                            </>
-                        ) : null}
-                    </div>
-                    <p>{description}</p>
-                    <div className="date">
-                        <GetDate createdAt={createdAt} />
-                    </div>
-                </div>
-            </a>
-        </li>
-    );
+  return (
+    <li key={id}>
+      <a href={url} target="_blank" rel="noopener noreferrer">
+        <div className="img-box">
+          {imageSource ? (
+            <img src={imageSource} alt={title} />
+          ) : (
+            <img src={catImg} alt="이미지가 없습니다." />
+          )}
+          {location.pathname === "/folder" ? <EditableStarButton /> : null}
+        </div>
+        <div className="text-box">
+          <div className="text-menu-wrap">
+            <div className="time">
+              <GetDaysAgo createdAt={createdAt} />
+            </div>
+            {location.pathname === "/folder" ? (
+              <>
+                <KebabButton onClickKebabButton={onClickKebabButton} />
+                {display === true ? <KebabList url={url} setDisplay={setDisplay} /> : null}
+              </>
+            ) : null}
+          </div>
+          <p>{description}</p>
+          <div className="date">
+            <GetDate createdAt={createdAt} />
+          </div>
+        </div>
+      </a>
+    </li>
+  );
 }
 
 export default Card;

src/components/Card/KebabButton.jsx

@@ -0,0 +1,11 @@
+import KebabIcon from "../../assets/svg/kebab.svg";
+
+function KebebButton({ onClickKebabButton }) {
+  return (
+    <button className="Kebab" onClick={onClickKebabButton}>
+      <img src={KebabIcon} alt="메뉴 더보기" />
+    </button>
+  );
+}
+
+export default KebebButton;

src/components/Card/KebabList.css

@@ -0,0 +1,20 @@
+.Kebab-list {
+  position: absolute;
+  right: 10px;
+  top: 40px;
+  background: #fff;
+  box-shadow: 0px 2px 8px 0px #3332361a;
+  text-align: center;
+  font-size: 14px;
+  line-height: 1.19357142857;
+  color: #333236;
+}
+
+.Kebab-list > li > button {
+  padding: 7px 17.5px;
+}
+
+.Kebab-list > li:hover {
+  background: #e7effb;
+  color: #6d6afe;
+}

src/components/Card/KebabList.jsx

@@ -0,0 +1,35 @@
+import "./KebabList.css";
+import { useContext } from "react";
+import ModalContext from "../Modal/ModalContext";
+
+function KebabList({ url, setDisplay }) {
+  const { openModal, setModalType, setCardUrl } = useContext(ModalContext);
+
+  const onClickDeleteLinkModalOpen = (e) => {
+    e.preventDefault();
+    setModalType("linkDelete");
+    setCardUrl(url);
+    openModal();
+    setDisplay();
+  };
+
+  const onClickAddFolderModalOpen = (e) => {
+    e.preventDefault();
+    setModalType("folderAdd");
+    setCardUrl(url);
+    openModal();
+    setDisplay();
+  };
+  return (
+    <ul className="Kebab-list">
+      <li>
+        <button onClick={onClickDeleteLinkModalOpen}>삭제하기</button>
+      </li>
+      <li>
+        <button onClick={onClickAddFolderModalOpen}>폴더에 추가</button>
+      </li>
+    </ul>
+  );
+}
+
+export default KebabList;

src/components/CardList/CardList.jsx

@@ -1,29 +1,30 @@
+import React from "react";
 import "./CardList.css";
 import Card from "../Card/Card";
 
+function renderCardList(cardData) {
+  return (
+    <ul className="card-list">
+      {cardData.map((card) => {
+        return <Card card={card} key={card.id} />;
+      })}
+    </ul>
+  );
+}
+
 function CardList({ cardListData, userFolderDataList }) {
-    return (
-        <>
-            {cardListData ? (
-                <ul className="card-list">
-                    {cardListData?.map((card) => {
-                        return <Card card={card} key={card.id} />;
-                    })}
-                </ul>
-            ) : null}
-            {userFolderDataList ? (
-                userFolderDataList?.data?.length ? (
-                    <ul className="card-list">
-                        {userFolderDataList?.data?.map((card) => {
-                            return <Card card={card} key={card.id} />;
-                        })}
-                    </ul>
-                ) : (
-                    <div className="empty-link">저장된 링크가 없습니다.</div>
-                )
-            ) : null}
-        </>
-    );
+  return (
+    <>
+      {cardListData && cardListData.length > 0 && renderCardList(cardListData)}
+      {userFolderDataList &&
+        userFolderDataList.data &&
+        userFolderDataList.data.length > 0 &&
+        renderCardList(userFolderDataList.data)}
+      {!cardListData && !userFolderDataList && (
+        <div className="empty-link">저장된 링크가 없습니다.</div>
+      )}
+    </>
+  );
 }
 
 export default CardList;