Merge pull request #58 from harigari/fix/정진

이것저것 수정
harigari · Jan 4, 2024 · 9fbeb4c · 9fbeb4c
2 parents 4cf153a + a1490b1
commit 9fbeb4c
Show file tree

Hide file tree

Showing 21 changed files with 257 additions and 126 deletions.
diff --git a/atoms/atoms.ts b/atoms/atoms.ts
@@ -0,0 +1,4 @@
+import { DashBoardData } from "@/types/api.type";
+import { atom } from "jotai";
+
+export const dashboardListAtom = atom<DashBoardData[]>([]);
diff --git a/components/Buttons/InviteButton/InviteButton.tsx b/components/Buttons/InviteButton/InviteButton.tsx
@@ -9,6 +9,7 @@ import HeaderButton from "@/components/Header/HeaderButton/HeaderButton";
 import headerButtonStyles from "@/components/Header/Header.module.css";
 import { Member, InvitationData } from "@/types/api.type";
 import { useRouter } from "next/router";
+import Head from "next/head";
 
 type Usage = "header" | "edit_page";
 

diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx
@@ -9,6 +9,8 @@ import Members from "../Members/Members";
 import ProfileIcon from "../Members/ProfileIcon";
 import styles from "./Header.module.css";
 import HeaderButton from "./HeaderButton/HeaderButton";
+import { useAtom, useAtomValue } from "jotai";
+import { dashboardListAtom } from "@/atoms/atoms";
 
 const WELCOME_MESSAGE = [
   "우리가 하는 일은 큰 일이죠. 큰일나기 전까지는요.",
@@ -21,11 +23,17 @@ interface HeaderProps {
   dashboard?: DashBoardData;
 }
 
-const Header = ({ dashboard }: HeaderProps) => {
+const Header = () => {
   const router = useRouter();
   const boardId = router?.query.boardId;
   const [memberList, setMemberList] = useState<Member[]>([]);
   const [myData, setMyData] = useState<ExtendedUserType>();
+
+  const dashboardList = useAtomValue(dashboardListAtom);
+  const dashboard = dashboardList.find((item) => {
+    return item.id === Number(boardId);
+  });
+
   const isOwner = memberList?.find((v) => v.userId === myData?.id)?.isOwner;
   const [title, setTitle] = useState(dashboard?.title);
 

diff --git a/components/MenuLayout/MenuLayout.tsx b/components/MenuLayout/MenuLayout.tsx
@@ -7,10 +7,9 @@ import useDragScroll from "@/hooks/useDragScroll";
 
 interface Props {
   children: ReactNode;
-  dashboard?: DashBoardData;
 }
 
-const MenuLayout = ({ dashboard, children }: Props) => {
+const MenuLayout = ({ children }: Props) => {
   const dragRef = useRef<HTMLDivElement>(null);
   useDragScroll(dragRef);
 
@@ -20,10 +19,10 @@ const MenuLayout = ({ dashboard, children }: Props) => {
         <Sidemenu />
       </div>
       <div className={styles.grid__header}>
-        <Header dashboard={dashboard} />
-      </div>
-      <div className={styles.grid__main} ref={dragRef}>
-        {children}
+        <Header />
+        <div className={styles.grid__main} ref={dragRef}>
+          {children}
+        </div>
       </div>
     </div>
   );

diff --git a/components/Sidemenu/Sidemenu.tsx b/components/Sidemenu/Sidemenu.tsx
@@ -15,55 +15,51 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { FormEvent, useEffect, useState } from "react";
 import styles from "./Sidemenu.module.css";
-
-type Pagination = {
-  size: number;
-  page?: number;
-  cursorId?: number;
-};
+import { useAtomValue } from "jotai";
+import { dashboardListAtom } from "@/atoms/atoms";
 
 const Sidemenu = () => {
   const router = useRouter();
   const [isOpen, setIsOpen] = useState(false);
   const [selectedColor, setSelectedColor] = useState<ColorType>("#7ac555");
 
-  const [list, setList] = useState<DashBoardData[]>([]);
+  const dashboardList = useAtomValue(dashboardListAtom);
 
-  const { isVisible, setIsVisible, myRef } = useInfScroll();
+  // const { isVisible, setIsVisible, myRef } = useInfScroll();
 
-  const [pagination, setPagination] = useState<Pagination>({
-    size: 100,
-  });
+  // const [pagination, setPagination] = useState<Pagination>({
+  //   size: 100,
+  // });
 
-  const getDashboardList = async () => {
-    const accessToken = getAccessTokenFromDocument("accessToken");
+  // const getDashboardList = async () => {
+  //   const accessToken = getAccessTokenFromDocument("accessToken");
 
-    const { size, cursorId } = pagination;
+  //   const { size, cursorId } = pagination;
 
-    let res;
-    if (cursorId) {
-      res = await sender.get({ path: "dashboards", method: "infiniteScroll", size, cursorId, accessToken });
-    } else {
-      res = await sender.get({ path: "dashboards", method: "infiniteScroll", size, accessToken });
-    }
-    if (res.status !== 200) return;
+  //   let res;
+  //   if (cursorId) {
+  //     res = await sender.get({ path: "dashboards", method: "infiniteScroll", size, cursorId, accessToken });
+  //   } else {
+  //     res = await sender.get({ path: "dashboards", method: "infiniteScroll", size, accessToken });
+  //   }
+  //   if (res.status !== 200) return;
 
-    const { dashboards, cursorId: cursor } = res.data;
+  //   const { dashboards, cursorId: cursor } = res.data;
 
-    setPagination((prev) => {
-      return { ...prev, cursorId: cursor };
-    });
+  //   setPagination((prev) => {
+  //     return { ...prev, cursorId: cursor };
+  //   });
 
-    setList((prev) => [...prev, ...dashboards]);
-    setIsVisible(false);
-  };
+  //   setList((prev) => [...prev, ...dashboards]);
+  //   setIsVisible(false);
+  // };
 
-  useEffect(() => {
-    if (pagination.cursorId === null) return;
-    if (isVisible) {
-      getDashboardList();
-    }
-  }, [isVisible]);
+  // useEffect(() => {
+  //   if (pagination.cursorId === null) return;
+  //   if (isVisible) {
+  //     getDashboardList();
+  //   }
+  // }, [isVisible]);
 
   const column = useInputController({
     inputConfig: {
@@ -125,8 +121,8 @@ const Sidemenu = () => {
         </button>
       </div>
       <ul className={styles.list}>
-        {list?.map((board) => (
-          <li key={board.id}>
+        {dashboardList?.map((board, i) => (
+          <li key={i}>
             <Link
               href={`/dashboard/${board.id}`}
               className={clsx(styles.item__button, { [styles.selected]: board.id === Number(router.query.boardId) })}
@@ -145,7 +141,7 @@ const Sidemenu = () => {
             </Link>
           </li>
         ))}
-        <p ref={myRef}></p>
+        {/* <p ref={myRef}></p> */}
       </ul>
 
       {isOpen && (

diff --git a/components/Table/TableList/TableList.tsx b/components/Table/TableList/TableList.tsx
@@ -11,6 +11,8 @@ import { Dispatch, SetStateAction, useState, FormEvent, RefObject, Fragment } fr
 import styles from "./TableList.module.css";
 import Image from "next/image";
 import clsx from "clsx";
+import { useAtom } from "jotai";
+import { dashboardListAtom } from "@/atoms/atoms";
 type TableIndexType = {
   [a: string]: "nickname" | "dashboard" | "inviter" | "email" | "deleteButton" | "acceptButton" | "cancelButton";
 };
@@ -35,6 +37,8 @@ const TableList = ({ data, tableIndex, setData, myRef }: TableListProps) => {
     setIsMemberDeleteModalOpen((prev) => !prev);
   };
 
+  const [dashboardList, setDashboardList] = useAtom(dashboardListAtom);
+
   return (
     <ul className={clsx(styles.list, { [styles.list__mobile]: isAccept })}>
       {data.map((data, idx) => {
@@ -91,6 +95,34 @@ const TableList = ({ data, tableIndex, setData, myRef }: TableListProps) => {
                     accessToken,
                   });
 
+                  if (res.status === 200 && res.data.inviteAccepted === true) {
+                    const { data } = await sender.get({ path: "dashboard", id: res.data.dashboard.id, accessToken });
+
+                    setDashboardList((prevList) => {
+                      prevList.push(data);
+                      prevList.sort((a, b) => {
+                        if (a.createdByMe !== b.createdByMe) {
+                          // createdByMe가 다른 경우 true를 우선하여 정렬
+                          return a.createdByMe ? -1 : 1;
+                        } else if (a.createdByMe && b.createdByMe) {
+                          // createdByMe가 둘 다 true인 경우 createdAt으로 최신 순으로 정렬
+                          return Number(b.createdAt) - Number(a.createdAt);
+                        } else if (!a.createdByMe && !b.createdByMe) {
+                          // createdByMe가 둘 다 false인 경우 userId로 정렬
+                          if (b.userId !== a.userId) {
+                            return b.userId - a.userId;
+                          } else {
+                            // userId가 같으면 createdAt으로 최신 순으로 정렬
+                            return Number(b.createdAt) - Number(a.createdAt);
+                          }
+                        }
+                        return 0;
+                      });
+
+                      return prevList;
+                    });
+                  }
+
                   if (res.status < 300) {
                     setData((prev) => prev.filter((v) => v.id !== data.id));
                     router.push("/mydashboard");

diff --git a/components/Table/TableScroll/TableScroll.tsx b/components/Table/TableScroll/TableScroll.tsx
@@ -41,6 +41,7 @@ const TableScroll = ({ title, type, tableIndex, invite = false, search = false }
     size: 5,
   });
   const [data, setData] = useState<(Member | InvitationData)[]>([]);
+
   const getScrollData = async () => {
     const accessToken = getAccessTokenFromDocument("accessToken");
     const { id, size, cursorId } = pagination;

diff --git a/modals/components/Comment/Comment.tsx b/modals/components/Comment/Comment.tsx
@@ -20,7 +20,6 @@ interface CommentProps {
 }
 
 const Comment = ({ data, setCommentList, setEditingId, usage, handleEditCancel }: CommentProps) => {
-  // console.log(data);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const accessToken = getAccessTokenFromDocument("accessToken");
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
   "dependencies": {
     "@hello-pangea/dnd": "^16.5.0",
     "clsx": "^2.0.0",
+    "jotai": "^2.6.1",
     "next": "14.0.4",
     "react": "^18",
     "react-datepicker": "^4.25.0",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -2,7 +2,15 @@ import "@/public/fonts/PretendardStd/PretendardStd.css";
 import "@/styles/globals.css";
 import "@/styles/reset.css";
 import type { AppProps } from "next/app";
+import Head from "next/head";
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+  return (
+    <>
+      <Head>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <Component {...pageProps} />
+    </>
+  );
 }
diff --git a/pages/dashboard/[boardId]/edit/index.tsx b/pages/dashboard/[boardId]/edit/index.tsx
@@ -16,13 +16,14 @@ import { useRouter } from "next/router";
 import { FormEvent, useState } from "react";
 import styles from "./DashboardEdit.module.css";
 import MenuLayout from "@/components/MenuLayout/MenuLayout";
+import { useAtom } from "jotai";
+import { dashboardListAtom } from "@/atoms/atoms";
+import Head from "next/head";
 
 export const getServerSideProps = async (context: GetServerSidePropsContext) => {
   const accessToken = getAccessTokenFromCookie(context) as string;
   const boardId = Number(context.query["boardId"]);
 
-  const { data: dashboard } = await sender.get({ path: "dashboard", id: boardId, accessToken });
-
   if (!accessToken) {
     return {
       redirect: {
@@ -32,6 +33,10 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
     };
   }
 
+  const {
+    data: { dashboards },
+  } = await sender.get({ path: "dashboards", method: "pagination", size: 999, accessToken: accessToken });
+
   const {
     data: { members },
   } = await sender.get({ path: "members", id: Number(boardId), accessToken });
@@ -50,24 +55,38 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
   }
 
   return {
-    props: { dashboard, accessToken, members, invitations },
+    props: { accessToken, members, dashboards, invitations },
   };
 };
 
 const DashboardEdit = ({
-  dashboard,
   members,
   accessToken,
+  dashboards,
   invitations,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) => {
+  const [dashboardList, setDashboardList] = useAtom(dashboardListAtom);
+  if (!dashboardList.length) {
+    setDashboardList(dashboards);
+  }
+
   const router = useRouter();
   const boardId = router?.query.boardId;
-  const [prevColor, setPrevColor] = useState(dashboard?.color ?? "#760dde");
+
+  const dashboard = dashboardList.find((item) => {
+    return item.id === Number(boardId);
+  });
+
+  const dashboardData = dashboardList.find((v) => v.id === Number(boardId));
+
+  const [prevColor, setPrevColor] = useState(dashboardData?.color ?? "#760dde");
+
   const [color, setColor] = useState<ColorType>(prevColor);
 
   const [memberList, setMemberList] = useState<(Member | InvitationData)[]>(members);
 
   const [invitationList, setInvitationList] = useState<(Member | InvitationData)[]>(invitations);
+
   const [boardName, setBoardName] = useState(dashboard?.title);
 
   const [isOpenDashboardDeleteModal, setIsOpenDashboardDeleteModal] = useState(false);
@@ -102,6 +121,12 @@ const DashboardEdit = ({
     });
 
     if (res?.status === 200) {
+      setDashboardList((prevValue) => {
+        const index = prevValue.findIndex((dashboard) => dashboard.id === res.data.id);
+        prevValue.splice(index, 1, res.data);
+
+        return [...prevValue];
+      });
       setColor(color);
       setPrevColor(color);
       input.setValue("");
@@ -112,7 +137,11 @@ const DashboardEdit = ({
 
   return (
     <>
-      <MenuLayout dashboard={dashboard}>
+      <Head>
+        <title>Taskify - 대시보드 수정</title>
+      </Head>
+
+      <MenuLayout>
         <div className={styles.body}>
           <Link href={`/dashboard/${boardId}`} className={styles.back_button}>
             <Image width={20} height={20} alt="왼쪽 화살표 아이콘 " src="/icons/icon-arrowleft.svg" />