codeit-bootcamp-frontend · eonpain · Sep 3, 2023 · Nov 25, 2023 · Nov 26, 2023 · Nov 27, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,26 +1,21 @@
 {
-  "name": "1-weekly-mission",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "web-vitals": "^2.1.4"
+  "devDependencies": {
+    "@types/react": "^18.2.46",
+    "@types/react-dom": "^18.2.18",
+    "file-loader": "^6.2.0",
+    "react-scripts": "^5.0.1",
+    "typescript": "^5.3.3",
+    "url-loader": "^4.1.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+  "dependencies": {
+    "react-router-dom": "^6.20.0",
+    "styled-components": "^6.1.1"
   },
   "browserslist": {
     "production": [
@@ -33,8 +28,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "devDependencies": {
-    "react-scripts": "^5.0.1"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>weekly mission</title>
+    <link href="../src/indexCss.css" rel="stylesheet">
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/Image/_close.png b/src/Image/_close.png
diff --git a/src/Image/add.svg b/src/Image/add.svg
diff --git a/src/assets/bulldog.png → src/Image/bulldog.png b/src/assets/bulldog.png → src/Image/bulldog.png
diff --git a/src/Image/delete.svg b/src/Image/delete.svg
diff --git a/src/assets/facebook.svg → src/Image/facebook.svg b/src/assets/facebook.svg → src/Image/facebook.svg
diff --git a/src/Image/facebookBlue.svg b/src/Image/facebookBlue.svg
diff --git a/src/assets/instagram.svg → src/Image/instagram.svg b/src/assets/instagram.svg → src/Image/instagram.svg
diff --git a/src/Image/kakao.svg b/src/Image/kakao.svg
diff --git a/src/Image/kebab.svg b/src/Image/kebab.svg
diff --git a/src/Image/link.svg b/src/Image/link.svg
diff --git a/src/assets/logo.svg → src/Image/logo.svg b/src/assets/logo.svg → src/Image/logo.svg
diff --git a/src/Image/pen.svg b/src/Image/pen.svg
diff --git a/src/assets/search.svg → src/Image/search.svg b/src/assets/search.svg → src/Image/search.svg
diff --git a/src/Image/share.svg b/src/Image/share.svg
diff --git a/src/Image/star.svg b/src/Image/star.svg
diff --git a/src/assets/twitter.svg → src/Image/twitter.svg b/src/assets/twitter.svg → src/Image/twitter.svg
diff --git a/src/Image/urlLink.svg b/src/Image/urlLink.svg
diff --git a/src/assets/youtube.svg → src/Image/youtube.svg b/src/assets/youtube.svg → src/Image/youtube.svg
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
@@ -0,0 +1,122 @@
+import React, { useState, useEffect } from "react";
+import logoIcon from "../Image/logo.svg";
+import nullImg from "../Image/bulldog.png";
+import StarImg from "../Image/star.svg";
+import KebabImg from "../Image/kebab.svg";
+import { formatDateString, calculateElapsedTime } from "./Time";
+import * as S from "./Styled";
+import { DeleteLink, AddToFolderModal } from "./modal";
+import { LinkData } from "@utils/type";
+
+function Card({ data }: { data: LinkData }) {
+  const formattedDate = formatDateString(data.created_at);
+  const [imgNull, setImgNull] = useState("");
+  const createdTime = calculateElapsedTime(data.created_at);
+  const [kebabBool, setKebabBool] = useState(false);
+  const [ago, setAgo] = useState("");
+  const [modalContent, setModalContent] = useState<string | null>(null);
+  const [modalOpen, setModalOpen] = useState(false);
+
+  const handleKebabClick = () => {
+    setKebabBool((prevBool) => !prevBool);
+  };
+
+  const setImageNull = () => {
+    if (data.image_source == undefined) {
+      setImgNull(nullImg);
+    } else {
+      setImgNull(data.image_source);
+    }
+  };
+
+  const calculateAgo = (createdTime: number) => {
+    if (createdTime < 2) {
+      return "1 minute ago";
+    } else if (createdTime <= 59) {
+      return `${createdTime} minutes ago`;
+    } else if (createdTime / 60 <= 23) {
+      return `${Math.ceil(createdTime / 60)} hour ago`;
+    } else if (createdTime / 60 >= 24 && createdTime / 60 / 24 < 2) {
+      return `1 day ago`;
+    } else if (createdTime / 60 / 24 >= 2 && createdTime / 60 / 24 <= 30) {
+      return `${Math.ceil(createdTime / 60 / 24)} days ago`;
+    } else if (createdTime / 60 / 24 > 30 && createdTime / 60 / 24 <= 60) {
+      return `1 month ago`;
+    } else if (createdTime / 60 / 24 > 60 && createdTime / 60 / 24 <= 365) {
+      return `${Math.ceil(createdTime / 60 / 24 / 30)} months ago`;
+    } else if (createdTime / 60 / 24 > 365 && createdTime / 60 / 24 <= 730) {
+      return `1 year ago`;
+    } else {
+      return `${Math.ceil(createdTime / 60 / 24 / 365)} years ago`;
+    }
+  };
+
+  useEffect(setImageNull, [data.image_source]);
+  useEffect(() => {
+    const ago = calculateAgo(createdTime);
+    setAgo(ago);
+  }, [createdTime]);
+
+  const handleDeleteClick = () => {
+    setModalContent("DeleteLinkModal");
+    setModalOpen(true);
+  };
+
+  const handleAddToFolderClick = () => {
+    setModalContent("AddToFolderModal");
+    setModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setModalContent(null);
+    setModalOpen(false);
+  };
+
+  return (
+    <>
+      <S.Card>
+        <a href={`${data.url}`} target="_blank" rel="noopener noreferrer">
+          <S.CardImgWrap>
+            {data.image_source === undefined ? (
+              <>
+                <S.NullImg src={`${imgNull}`} alt={`${data.title}`}></S.NullImg>
+                <S.NullImg src={logoIcon} alt="logo"></S.NullImg>
+              </>
+            ) : (
+              <S.CardImg src={`${imgNull}`} alt={`${data.title}`}></S.CardImg>
+            )}
+          </S.CardImgWrap>
+        </a>
+        <S.Star src={StarImg} alt="별 이미지" />
+        <S.CardText className="cardText">
+          <S.KebabAgoBox>
+            <S.Ago>{`${ago}`}</S.Ago>
+            <S.Kebab onClick={handleKebabClick}>
+              <img src={KebabImg} alt="케밥 이미지" />
+            </S.Kebab>
+            {kebabBool && (
+              <S.KebabSelect>
+                <S.kebabOption onClick={handleDeleteClick}>
+                  삭제하기
+                </S.kebabOption>
+                <S.kebabOption onClick={handleAddToFolderClick}>
+                  폴더에 추가
+                </S.kebabOption>
+              </S.KebabSelect>
+            )}
+          </S.KebabAgoBox>
+          <S.Des>{`${data.description}`}</S.Des>
+          <S.CardDate>{`${formattedDate}`}</S.CardDate>
+        </S.CardText>
+      </S.Card>
+      {modalOpen && modalContent === "DeleteLinkModal" && (
+        <DeleteLink onClose={handleCloseModal} />
+      )}
+      {modalOpen && modalContent === "AddToFolderModal" && (
+        <AddToFolderModal onClose={handleCloseModal} />
+      )}
+    </>
+  );
+}
+
+export default Card;