From f22cd7259122422071d2757824aae069574021a4 Mon Sep 17 00:00:00 2001
From: Minju9187 <alswn1583@naver.com>
Date: Thu, 5 Dec 2024 14:38:51 +0900
Subject: [PATCH 1/2] =?UTF-8?q?refactor=20:=20input=20=EC=B0=BD=20?=
 =?UTF-8?q?=ED=81=B4=EB=A6=AD=EC=8B=9C=20=EB=B3=B5=EC=82=AC=20=EA=B0=80?=
 =?UTF-8?q?=EB=8A=A5=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Modal/ShareModal.tsx | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Modal/ShareModal.tsx b/client/src/components/Modal/ShareModal.tsx
index 391d58f7..ff100397 100644
--- a/client/src/components/Modal/ShareModal.tsx
+++ b/client/src/components/Modal/ShareModal.tsx
@@ -10,8 +10,7 @@ interface ShareModalProps {
 
 export default function ShareModal({ open, closeModal }: ShareModalProps) {
   const [copySuccess, setCopySuccess] = useState(false);
-
-  const currentUrl = window.location.href;
+  const [currentUrl, setCurrentUrl] = useState(window.location.href);
 
   async function copyLink() {
     try {
@@ -23,6 +22,15 @@ export default function ShareModal({ open, closeModal }: ShareModalProps) {
     setTimeout(() => setCopySuccess(false), 2000);
   }
 
+  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    e.preventDefault();
+    setCurrentUrl(e.target.value);
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    e.stopPropagation();
+  }
+
   return (
     <Modal open={open} closeModal={closeModal}>
       <div className="py-4">
@@ -30,8 +38,10 @@ export default function ShareModal({ open, closeModal }: ShareModalProps) {
         <Input
           type="text"
           value={currentUrl}
-          readOnly
-          className="pointer-events-none h-10 w-full truncate rounded-lg bg-grayscale-200 px-3 py-2 text-grayscale-500"
+          onChange={handleChange}
+          onClick={(e) => e.currentTarget.select()}
+          onKeyDown={handleKeyDown}
+          className="h-10 w-full truncate rounded-lg bg-grayscale-200 px-3 py-2 text-grayscale-500 focus:border-transparent focus:outline-none"
         />
         <Button
           onClick={copyLink}

From 300187634ba92b84d320ca60e9fecb70930e639c Mon Sep 17 00:00:00 2001
From: Minju9187 <alswn1583@naver.com>
Date: Thu, 5 Dec 2024 22:26:34 +0900
Subject: [PATCH 2/2] =?UTF-8?q?feat=20:=20=EC=A0=95=EB=A0=AC=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Dashboard/MindMapInfoItem.tsx  |   5 +-
 .../components/Dashboard/UserDashBoard.tsx    | 101 ++++++++++++++++--
 2 files changed, 95 insertions(+), 11 deletions(-)

diff --git a/client/src/components/Dashboard/MindMapInfoItem.tsx b/client/src/components/Dashboard/MindMapInfoItem.tsx
index ade0ee33..538729b5 100644
--- a/client/src/components/Dashboard/MindMapInfoItem.tsx
+++ b/client/src/components/Dashboard/MindMapInfoItem.tsx
@@ -1,4 +1,3 @@
-import profile from "@/assets/profile.png";
 import useModal from "@/hooks/useModal";
 import { Button } from "@headlessui/react";
 import extractDate from "@/utils/extractDate";
@@ -13,9 +12,10 @@ import { useConnectionStore } from "@/store/useConnectionStore";
 interface MindMapInfoItemProps {
   data: DashBoard;
   index: number;
+  onDelete: (id: number) => void;
 }
 
-export default function MindMapInfoItem({ data, index }: MindMapInfoItemProps) {
+export default function MindMapInfoItem({ data, index, onDelete }: MindMapInfoItemProps) {
   const { open, openModal, closeModal } = useModal();
   const keywordData = data.keyword.slice(0, 4);
   const navigate = useNavigate();
@@ -31,6 +31,7 @@ export default function MindMapInfoItem({ data, index }: MindMapInfoItemProps) {
   function handleDelete() {
     mutation.mutate();
     closeModal();
+    onDelete(data.id);
   }
 
   function navigateToMindMap() {
diff --git a/client/src/components/Dashboard/UserDashBoard.tsx b/client/src/components/Dashboard/UserDashBoard.tsx
index 3f86ebc5..3cd6c0c9 100644
--- a/client/src/components/Dashboard/UserDashBoard.tsx
+++ b/client/src/components/Dashboard/UserDashBoard.tsx
@@ -1,16 +1,22 @@
 import MindMapInfoItem from "./MindMapInfoItem";
 import { Button, Input } from "@headlessui/react";
 import { useEffect, useState } from "react";
-import { FaPlus, FaSearch } from "react-icons/fa";
+import { FaArrowDown, FaPlus, FaArrowUp } from "react-icons/fa";
 import { useNavigate } from "react-router-dom";
 import useDashBoard from "@/api/fetchHooks/useDashBoard";
 import NoMindMap from "@/components/Dashboard/NoMindMap";
 import { useConnectionStore } from "@/store/useConnectionStore";
 import { IoSearch } from "react-icons/io5";
 
+type SortKey = "title" | "ownerName" | "createDate";
+type SortOrder = "asc" | "desc";
+
 export default function UserDashBoard() {
   const { data } = useDashBoard();
-  const [searchContent, setSearchContent] = useState("");
+  const [filteredData, setFilteredData] = useState(data);
+  const [sortKey, setSortKey] = useState<SortKey>("createDate");
+  const [sortOrder, setSortOrder] = useState<SortOrder>("desc");
+  const [searchQuery, setSearchQuery] = useState("");
   const navigate = useNavigate();
   const createConnection = useConnectionStore((state) => state.createConnection);
   const updateOwnedMindMap = useConnectionStore((state) => state.updateOwnedMindMap);
@@ -21,17 +27,96 @@ export default function UserDashBoard() {
     }
   }, [data]);
 
+  useEffect(() => {
+    applyFilters(data, searchQuery);
+  }, [sortKey, sortOrder]);
+
   function searchData(content: string) {
-    if (!data) return [];
     return data.filter((item) => item.title.includes(content) || item.keyword.some((k) => k.includes(content)));
   }
 
-  const filteredData = searchData(searchContent);
+  function sortData(items, key: SortKey, order: SortOrder) {
+    return [...items].sort((a, b) => {
+      const valueA = key === "createDate" ? new Date(a[key]).getTime() : a[key];
+      const valueB = key === "createDate" ? new Date(b[key]).getTime() : b[key];
+
+      if (order === "asc") return valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
+      return valueA > valueB ? -1 : valueA < valueB ? 1 : 0;
+    });
+  }
+
+  function applyFilters(originalData, query: string) {
+    let result = query ? searchData(query) : originalData;
+    result = sortData(result, sortKey, sortOrder);
+    setFilteredData(result);
+  }
+
+  function handleSearchChange(query: string) {
+    setSearchQuery(query);
+    applyFilters(data, query);
+  }
+
+  function handleSortChange(key: SortKey, order: SortOrder) {
+    setSortKey(key);
+    setSortOrder(order);
+    applyFilters(data, searchQuery);
+  }
+
+  function handleDeleteMindMap(id: number) {
+    setFilteredData((prevData) => prevData.filter((item) => item.id !== id));
+  }
 
   if (!data.length) return <NoMindMap />;
 
+  const buttonBaseClass = "flex items-center gap-0.5 text-sm";
+  const buttonInactiveClass = "text-grayscale-300 hover:text-white";
+  const buttonActiveClass = "text-white";
+
   return (
-    <div className="relative flex h-full w-full flex-col rounded-[20px] bg-grayscale-700 px-8 pb-24 pt-8">
+    <div className="relative flex h-full w-full flex-col rounded-[20px] bg-grayscale-700 px-8 pb-24 pt-3">
+      <div className="mb-2 flex items-center justify-end gap-2">
+        <Button
+          className={`${buttonBaseClass} ${sortKey === "createDate" && sortOrder === "desc" ? buttonActiveClass : buttonInactiveClass}`}
+          onClick={() => handleSortChange("createDate", "desc")}
+        >
+          최신 순
+        </Button>
+        <span>|</span>
+        <Button
+          className={`${buttonBaseClass} ${sortKey === "createDate" && sortOrder === "asc" ? buttonActiveClass : buttonInactiveClass}`}
+          onClick={() => handleSortChange("createDate", "asc")}
+        >
+          오래된 순
+        </Button>
+        <span>|</span>
+        <Button
+          className={`${buttonBaseClass} ${sortKey === "title" && sortOrder === "asc" ? buttonActiveClass : buttonInactiveClass}`}
+          onClick={() => handleSortChange("title", "asc")}
+        >
+          제목 순<FaArrowUp />
+        </Button>
+        <span>|</span>
+        <Button
+          className={`${buttonBaseClass} ${sortKey === "title" && sortOrder === "desc" ? buttonActiveClass : buttonInactiveClass}`}
+          onClick={() => handleSortChange("title", "desc")}
+        >
+          제목 순<FaArrowDown />
+        </Button>
+        <span>|</span>
+        <Button
+          className={`${buttonBaseClass} ${sortKey === "ownerName" && sortOrder === "asc" ? buttonActiveClass : buttonInactiveClass}`}
+          onClick={() => handleSortChange("ownerName", "asc")}
+        >
+          소유자 이름 순<FaArrowUp />
+        </Button>
+        <span>|</span>
+        <Button
+          className={`${buttonBaseClass} ${sortKey === "ownerName" && sortOrder === "desc" ? buttonActiveClass : buttonInactiveClass}`}
+          onClick={() => handleSortChange("ownerName", "desc")}
+        >
+          소유자 이름 순<FaArrowDown />
+        </Button>
+      </div>
       <header className="flex items-center justify-between px-3 py-2 font-bold">
         <div className="min-w-72 pl-2">제목</div>
         <div className="min-w-60 pl-8">키워드</div>
@@ -40,7 +125,7 @@ export default function UserDashBoard() {
       </header>
       <div className="no-scrollbar h-[calc(100%-40px)] overflow-y-scroll border-b-[1px] border-t-[1px] border-grayscale-500">
         {filteredData.map((info, i) => (
-          <MindMapInfoItem key={`dashboard-${i}`} data={info} index={i} />
+          <MindMapInfoItem key={`dashboard-${info.id}`} data={info} index={i} onDelete={handleDeleteMindMap} />
         ))}
       </div>
       <div className="absolute bottom-8 right-8">
@@ -55,9 +140,7 @@ export default function UserDashBoard() {
       <div className="absolute right-0 top-[-47px] flex items-center gap-2 rounded-2xl bg-grayscale-700 px-4 py-2 text-grayscale-200">
         <Input
           className="w-48 bg-inherit text-xs focus:outline-none"
-          onChange={(e) => {
-            setSearchContent(e.target.value);
-          }}
+          onChange={(e) => handleSearchChange(e.target.value)}
           placeholder="키워드나 제목을 입력하세요"
         />
         <IoSearch size={24} />