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

이것저것 수정

Author: han-kimm

atoms/atoms.ts

@@ -0,0 +1,4 @@
+import { DashBoardData } from "@/types/api.type";
+import { atom } from "jotai";
+
+export const dashboardListAtom = atom<DashBoardData[]>([]);

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";
 

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);
 

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>
   );

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 && (

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");

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;

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");
 

package-lock.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",