[김한샘] Week12

package.json

@@ -37,5 +37,8 @@
             "last 1 firefox version",
             "last 1 safari version"
         ]
+    },
+    "devDependencies": {
+        "typescript": "^4.9.5"
     }
 }

src/App.jsx → src/App.tsx

@@ -1,19 +1,20 @@
 import "./styles/form.css";
 import "./styles/pages/main/main.css";
 
+import React from "react";
 import Footer from "./components/Footer/Footer";
 import Header from "./components/Header/Header";
 import { BrowserRouter } from "react-router-dom";
 import AppRouter from "./routes";
 
 function App() {
-    return (
-        <BrowserRouter>
-            <Header />
-            <AppRouter />
-            <Footer />
-        </BrowserRouter>
-    );
+  return (
+    <BrowserRouter>
+      <Header />
+      <AppRouter />
+      <Footer />
+    </BrowserRouter>
+  );
 }
 
 export default App;

src/components/AddLinkForm/AddLinkForm.jsx → src/components/AddLinkForm/AddLinkForm.tsx

@@ -1,11 +1,12 @@
 import "./AddLinkForm.css";
+import React from "react";
 import LinkIcon from "../../assets/icon/link.png";
 import { useContext } from "react";
 import ModalContext from "../Modal/ModalContext";
 
 function AddLinkForm() {
-  const { openModal, setModalType } = useContext(ModalContext);
-  const onClickModalOpen = (e) => {
+  const { openModal, setModalType } = useContext(ModalContext)!;
+  const onClickModalOpen = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     openModal();
     setModalType("folderAdd");

src/components/Card/Card.jsx → src/components/Card/Card.tsx

@@ -1,4 +1,5 @@
 import "./Card.css";
+import React from "react";
 import catImg from "../../assets/images/cat.jpg";
 import GetDate from "../../utils/GetDate";
 import GetDaysAgo from "../../utils/GetDaysAgo";
@@ -9,14 +10,27 @@ import EditableStarButton from "./EditableStarButton";
 import KebabButton from "./KebabButton";
 import { useLocation } from "react-router-dom";
 
-function Card({ card }) {
+interface FolderCardData {
+  card: {
+    id: number;
+    createdAt: string;
+    description?: string;
+    folderId?: number;
+    title?: string;
+    updatedAt?: string;
+    url: string;
+    imageSource?: string;
+  };
+}
+
+function Card({ card }: FolderCardData) {
   const { description, id, title, url, imageSource, createdAt } = card;
   const [display, setDisplay] = useToggle();
   const location = useLocation();
 
-  const onClickKebabButton = (e) => {
+  const onClickKebabButton = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
-    setDisplay();
+    if (typeof setDisplay === "function") setDisplay();
   };
 
   return (

src/components/Card/EditableStarButton.jsx → src/components/Card/EditableStarButton.tsx

@@ -1,12 +1,13 @@
+import React from "react";
 import starIcon from "../../assets/svg/star.svg";
 import "./EditableStarButton.css";
 
 function EditableStarButton() {
-    return (
-        <button className="editable-star">
-            <img src={starIcon} alt="즐겨찾기" />
-        </button>
-    );
+  return (
+    <button className="editable-star">
+      <img src={starIcon} alt="즐겨찾기" />
+    </button>
+  );
 }
 
 export default EditableStarButton;

src/components/Card/KebabButton.jsx → src/components/Card/KebabButton.tsx

@@ -1,6 +1,11 @@
+import React from "react";
 import KebabIcon from "../../assets/svg/kebab.svg";
 
-function KebebButton({ onClickKebabButton }) {
+interface OnClickKebabButton {
+  onClickKebabButton: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+function KebebButton({ onClickKebabButton }: OnClickKebabButton) {
   return (
     <button className="Kebab" onClick={onClickKebabButton}>
       <img src={KebabIcon} alt="메뉴 더보기" />

src/components/Card/KebabList.jsx → src/components/Card/KebabList.tsx

@@ -1,24 +1,30 @@
 import "./KebabList.css";
 import { useContext } from "react";
 import ModalContext from "../Modal/ModalContext";
+import React from "react";
 
-function KebabList({ url, setDisplay }) {
-  const { openModal, setModalType, setCardUrl } = useContext(ModalContext);
+interface KebabListInterface {
+  url: string;
+  setDisplay: boolean | (() => void);
+}
+
+function KebabList({ url, setDisplay }: KebabListInterface) {
+  const { openModal, setModalType, setCardUrl } = useContext(ModalContext)!;
 
-  const onClickDeleteLinkModalOpen = (e) => {
+  const onClickDeleteLinkModalOpen = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     setModalType("linkDelete");
     setCardUrl(url);
     openModal();
-    setDisplay();
+    if (typeof setDisplay === "function") setDisplay();
   };
 
-  const onClickAddFolderModalOpen = (e) => {
+  const onClickAddFolderModalOpen = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     setModalType("folderAdd");
     setCardUrl(url);
     openModal();
-    setDisplay();
+    if (typeof setDisplay === "function") setDisplay();
   };
   return (
     <ul className="Kebab-list">

src/components/CardList/CardList.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import "./CardList.css";
+import Card from "../Card/Card";
+
+interface CardListData {
+  id: number;
+  createdAt: string;
+  url: string;
+  title: string;
+  description: string;
+  imageSource?: string;
+}
+
+interface UserFolderCardDataList {
+  data: {
+    id: number;
+    createdAt: string;
+    description?: string;
+    folderId?: number;
+    title?: string;
+    updatedAt?: string;
+    url: string;
+    imageSource?: string;
+  };
+}
+
+function renderCardList(cardData: CardListData[] | UserFolderCardDataList["data"][]) {
+  return (
+    <ul className="card-list">
+      {Array.isArray(cardData) &&
+        cardData.map((card) => {
+          return <Card card={card} key={card.id} />;
+        })}
+    </ul>
+  );
+}
+
+function CardList({
+  cardListData,
+  userFolderDataList,
+}: {
+  cardListData?: CardListData[];
+  userFolderDataList?: UserFolderCardDataList;
+}) {
+  return (
+    <>
+      {cardListData && cardListData.length > 0 && renderCardList(cardListData)}
+      {userFolderDataList &&
+        Array.isArray(userFolderDataList.data) &&
+        userFolderDataList.data.length > 0 &&
+        renderCardList(userFolderDataList.data)}
+      {!cardListData && !userFolderDataList && (
+        <div className="empty-link">저장된 링크가 없습니다.</div>
+      )}
+    </>
+  );
+}
+
+export default CardList;

src/components/CardTitleIcon/CardTitleIcon.jsx → src/components/CardTitleIcon/CardTitleIcon.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import "./CardTitleIcon.css";
 import shareIcon from "../../assets/svg/share.svg";
 import penIcon from "../../assets/svg/pen.svg";
@@ -7,7 +8,7 @@ import ModalContext from "../Modal/ModalContext";
 import { useContext } from "react";
 
 function CardTitleIcon() {
-  const { setModalType, openModal } = useContext(ModalContext);
+  const { setModalType, openModal } = useContext(ModalContext)!;
 
   const cardTitleIcon = [
     {

src/components/ConHeader/ConHeader.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import "./ConHeader.css";
+
+interface FolderData {
+  id: number;
+  name: string;
+  owner: {
+    id: number;
+    name: string;
+    profileImageSource: string;
+  };
+  links: {
+    id: number;
+    createdAt: string;
+    url: string;
+    title: string;
+    description: string;
+    imageSource?: string;
+  }[];
+  count: number;
+}
+
+function ConHeader({ folderData }: { folderData: FolderData | null }) {
+  const owner = folderData?.owner;
+
+  return (
+    <div className="con-header-wrap">
+      <div className="con-header">
+        <img src={owner?.profileImageSource} alt="" />
+        <h3>{owner?.name}</h3>
+      </div>
+      <h2>{folderData?.name}</h2>
+    </div>
+  );
+}
+
+export default ConHeader;

src/components/FolderTabList/Button.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import "./Button.css";
+
+interface buttonData {
+  data: {
+    id: number;
+    name: string;
+  };
+  onClickButton: (id: number, name: string) => void;
+  buttonClass: number | null;
+}
+
+function Button({ data, onClickButton, buttonClass }: buttonData) {
+  const { id, name } = data;
+
+  return (
+    <button className={buttonClass === id ? "select" : ""} onClick={() => onClickButton(id, name)}>
+      {name}
+    </button>
+  );
+}
+
+export default Button;

src/components/FolderTabList/FolderAddButton.jsx → src/components/FolderTabList/FolderAddButton.tsx

@@ -1,10 +1,11 @@
+import React from "react";
 import "./FolderAddButton.css";
 import addBtnImg from "../../assets/icon/svg/add-button-img.svg";
 import ModalContext from "../Modal/ModalContext";
 import { useContext } from "react";
 
 function FolderAddButton() {
-  const { openModal, setModalType } = useContext(ModalContext);
+  const { openModal, setModalType } = useContext(ModalContext)!;
 
   const onClickButton = () => {
     setModalType("add");