Merge pull request #79 from gyoyeon-kim/card-table

[Fix] Table : 초대받은 대시보드

Author: hhjin1

src/api/members.ts

@@ -24,8 +24,6 @@ export const getMembers = async (dashboardId?: string | string[]) => {
       },
     }
   );
-  console.log(response.data);
-  console.log(response.data.members);
 
   return response.data.members || [];
 };

src/components/modal/ChangeBebridge.tsx

@@ -2,29 +2,29 @@ import { useState } from "react";
 import { useRouter } from "next/router";
 import Input from "../input/Input";
 import Image from "next/image";
-import axios from "axios";
+import axiosInstance from "@/api/axiosInstance";
+import { apiRoutes } from "@/api/apiRoutes";
 
-export default function ChangeBebridge() {
+const ChangeBebridge = () => {
   const router = useRouter();
-  const { dashboardId } = router.query;
+  const { dashboardId } = router.query; // dashboardId 쿼리값 받기
   const [title, setTitle] = useState("");
   const [selected, setSelected] = useState<number | null>(null);
-
   const colors = ["#7ac555", "#760DDE", "#FF9800", "#76A5EA", "#E876EA"];
-
   const token = process.env.NEXT_PUBLIC_API_TOKEN;
 
   const handleUpdate = async () => {
-    if (!dashboardId || selected === null || !title) return;
+    const dashboardIdNumber = Number(dashboardId); // string dashboradId 값 number로 변경
+    if (!dashboardId || !title || selected === null) return;
 
     const payload = {
       title,
       color: colors[selected],
     };
 
     try {
-      const response = await axios.put(
-        `https://sp-taskify-api.vercel.app/13-4/dashboards/${dashboardId}`,
+      const response = await axiosInstance.put(
+        apiRoutes.DashboardDetail(dashboardIdNumber),
         payload,
         {
           headers: {
@@ -34,15 +34,16 @@ export default function ChangeBebridge() {
         }
       );
       console.log("업데이트 성공:", response.data);
-      alert("대시보드가 업데이트되었습니다!");
+      alert("대시보드가 업데이트되었습니다!"); // 추후에 toast로 변경
+      window.location.reload();
     } catch (error) {
       console.error("업데이트 실패:", error);
-      alert("업데이트에 실패했습니다.");
+      alert("업데이트에 실패했습니다."); // 추후에 toast로 변경
     }
   };
 
   return (
-    <div className="sm:w-[584px] sm:h-[344px] w-[327px] h-[312px] bg-white sm:rounded-[16px] rounded-[8px] shadow-md p-[24px] flex flex-col">
+    <div className="sm:w-[620px] sm:h-[344px] w-[327px] h-[312px] bg-white sm:rounded-[16px] rounded-[8px] p-[24px] flex flex-col">
       <h2 className="text-sm sm:text-[24px] font-bold">비브리지</h2>
       <Input
         type="text"
@@ -58,29 +59,31 @@ export default function ChangeBebridge() {
             <button
               className={`cursor-pointer w-[30px] h-[30px] rounded-[15px] mr-2`}
               style={{ backgroundColor: color }}
-              onClick={() => setSelected(index)}
+              onClick={() => setSelected(index)} // 색상 선택 시 selected 업데이트
             />
             {selected === index && (
               <Image
                 src="/svgs/check.svg"
                 alt="선택됨"
                 width={23}
                 height={23}
-                className=" ursor-pointer absolute top-4 left-3.5 transform -translate-x-1/2 -translate-y-1/2"
+                className="cursor-pointer absolute top-4 left-3.5 transform -translate-x-1/2 -translate-y-1/2"
               />
             )}
           </div>
         ))}
       </div>
-      <div className="mt-8 flex ">
+      <div className="mt-8 flex">
         <button
-          onClick={handleUpdate}
-          disabled={!title || selected === null}
-          className={`cursor-pointer sm:w-[564px] sm:h-[54px] w-[252px] h-[54px] rounded-[8px] border border-[var(--color-gray3)] bg-[var(--primary)] text-[var(--color-white)]   ${!title || selected === null ? "bg-gray-300 cursor-not-allowed" : "bg-[var(--primary)]"}`}
+          onClick={handleUpdate} // 버튼 클릭 시 handleUpdate 함수 호출
+          disabled={!title || selected === null} // title 또는 color가 없으면 버튼 비활성화
+          className={`cursor-pointer sm:w-[564px] sm:h-[54px] w-[252px] h-[54px] rounded-[8px] border border-[var(--color-gray3)] bg-[var(--primary)] text-[var(--color-white)] ${!title || selected === null ? "bg-gray-300 cursor-not-allowed" : "bg-[var(--primary)]"}`}
         >
           변경
         </button>
       </div>
     </div>
   );
-}
+};
+
+export default ChangeBebridge;

src/components/table/InviteRecords.tsx

@@ -35,7 +35,7 @@ const InviteRecords = () => {
   };
 
   return (
-    <div className="relative bg-white p-4 rounded-lg shadow-md max-w-md w-full sm:max-w-lg md:max-w-xl lg:max-w-2xl mx-auto">
+    <div className="relative bg-white p-4 rounded-lg shadow-md max-w-md w-[620px] lg:h-[474px] sm:max-w-lg md:max-w-xl lg:max-w-2xl mx-auto">
       <div className="flex justify-between items-start sm:items-center">
         {/* 제목 */}
         <p className="sm:text-2xl text-xl font-bold">초대 내역</p>

src/components/table/invited/InvitedDashBoard.tsx

@@ -1,13 +1,14 @@
 import { useState, useEffect, useRef, ChangeEvent } from "react";
 import Image from "next/image";
-import NoDashboardMessage from "./NoResultDashBoard";
+import NoResultDashBoard from "./NoResultDashBoard";
 import EmptyInvitations from "./EmptyInvitations";
 
 interface Invite {
   title: string;
   nickname: string;
 }
 
+// api데이터로 추후 변경
 const invitedData: Invite[] = [
   { title: "프로덕트 디자인", nickname: "손동희" },
   { title: "새로운 기획 문서", nickname: "안귀영" },
@@ -24,9 +25,9 @@ const invitedData: Invite[] = [
 const ITEMS_PER_PAGE = 6; // 한 번에 보여줄 개수
 
 function InvitedList({ searchTitle }: { searchTitle: string }) {
-  const [displayedData, setDisplayedData] = useState<Invite[]>([]); // 보여줄 데이터 상태
-  const [page, setPage] = useState(1); // 페이지 번호
-  const observerRef = useRef<HTMLDivElement | null>(null); // IntersectionObserver를 위한 ref
+  const [displayedData, setDisplayedData] = useState<Invite[]>([]);
+  const [page, setPage] = useState(1);
+  const observerRef = useRef<HTMLDivElement | null>(null);
 
   const hasMore = displayedData.length < invitedData.length;
 
@@ -41,13 +42,10 @@ function InvitedList({ searchTitle }: { searchTitle: string }) {
       (entries) => {
         entries.forEach((entry) => {
           if (entry.isIntersecting) {
-            console.log("스크롤이 바닥에 도달했습니다.");
             if (hasMore) {
               console.log("Scroll reached the end. Loading more data...");
               setPage((prevPage) => prevPage + 1);
             }
-          } else {
-            console.log("스크롤이 바닥에서 벗어났습니다.");
           }
         });
       },
@@ -60,15 +58,15 @@ function InvitedList({ searchTitle }: { searchTitle: string }) {
 
     return () => {
       if (observerRef.current) {
-        observer.unobserve(observerRef.current); // cleanup
+        observer.unobserve(observerRef.current);
       }
     };
   }, [hasMore]);
 
-  // 데이터를 로드하는 함수
+  // 데이터를 로드 함수
   const loadMoreData = () => {
-    const nextData = invitedData.slice(0, page * ITEMS_PER_PAGE); // 페이지에 맞는 데이터만 가져옴
-    setDisplayedData(nextData); // 데이터를 갱신
+    const nextData = invitedData.slice(0, page * ITEMS_PER_PAGE);
+    setDisplayedData(nextData);
   };
 
   // 검색 기능
@@ -81,10 +79,10 @@ function InvitedList({ searchTitle }: { searchTitle: string }) {
   return (
     <div className="relative bg-white w-[260px] sm:w-[504px] lg:w-[1022px] h-[770px] sm:h-[592px] lg:h-[620px] mx-auto mt-[40px]">
       {filteredData.length > 0 && (
-        <div className="p-6 flex w-full h-[26px] justify-start items-center pl-[43px] pr-[76px] md:gap-x-[130px] lg:gap-x-[280px]">
+        <div className="hidden sm:flex p-6 w-full h-[26px] justify-start items-center pl-[43px] pr-[76px] md:gap-x-[130px] lg:gap-x-[280px]">
           <p className="lg:ml-10 font-normal text-[var(--color-gray2)]">이름</p>
           <p className="font-normal text-[var(--color-gray2)]">초대자</p>
-          <p className="lg:ml-6 font-normal text-[var(--color-gray2)]">
+          <p className="lg:ml-13 font-normal text-[var(--color-gray2)]">
             수락여부
           </p>
         </div>
@@ -94,15 +92,39 @@ function InvitedList({ searchTitle }: { searchTitle: string }) {
           ? filteredData.map((invite, index) => (
               <div
                 key={index}
-                className="pb-5 mb-[20px] w-[260px] sm:w-[504px] lg:w-[1022px] h-[50px] sm:grid sm:grid-cols-[1fr_1fr_1fr] sm:items-center flex flex-col gap-2 border-b border-[var(--color-gray4)]"
+                className="pb-5 mb-[20px] w-[260px] sm:w-[504px] lg:w-[1022px] h-auto sm:h-[50px] sm:grid sm:grid-cols-[1fr_1fr_1fr] sm:items-center flex flex-col gap-10 border-b border-[var(--color-gray4)]"
               >
-                <p className="lg:ml-21 ml-9 flex justify-left mt-1 w-full">
+                {/* 모바일 레이아웃 */}
+                <div className="flex flex-col sm:hidden">
+                  <p className="ml-9 mt-1 w-full">
+                    {" "}
+                    <span className="mr-8 text-[var(--color-gray2)]">이름</span>
+                    <span className="text-[#333236]">{invite.title}</span>
+                  </p>
+                  <p className="ml-9 mt-1 w-full">
+                    <span className="mr-3.5 text-[var(--color-gray2)]">
+                      초대자
+                    </span>{" "}
+                    <span className="text-[#333236]">{invite.nickname}</span>
+                  </p>
+                  <div className="flex gap-2 mt-2 justify-center">
+                    <button className="cursor-pointer bg-[var(--primary)] text-white px-3 py-1 rounded-md w-[84px] h-[32px]">
+                      수락
+                    </button>
+                    <button className="cursor-pointer border px-3 py-1 rounded-md w-[84px] h-[32px] text-[var(--primary)] border-[var(--color-gray3)]">
+                      거절
+                    </button>
+                  </div>
+                </div>
+
+                {/* 웹, 태블릿 레이아웃 */}
+                <p className="lg:ml-21 md:ml-11 ml-9 justify-left mt-1 w-full hidden sm:flex">
                   {invite.title}
                 </p>
-                <p className="lg:ml-12 ml-9 justify-center mt-1">
+                <p className="lg:mr-25 md:mr-10 ml-9 justify-left mt-1 hidden sm:flex">
                   {invite.nickname}
                 </p>
-                <div className="lg:mr-2 flex gap-2 mt-1 justify-between sm:justify-start">
+                <div className="lg:mr-5 gap-2 mt-1 mr-2 justify-between sm:justify-start hidden sm:flex">
                   <button className="cursor-pointer bg-[var(--primary)] text-white px-3 py-1 rounded-md w-[84px] h-[32px]">
                     수락
                   </button>
@@ -112,16 +134,15 @@ function InvitedList({ searchTitle }: { searchTitle: string }) {
                 </div>
               </div>
             ))
-          : !hasMore && <NoDashboardMessage searchTitle={searchTitle} />}
-
+          : !hasMore && <NoResultDashBoard searchTitle={searchTitle} />}{" "}
+        {/* 검색 내역이 없을 경우*/}
         {filteredData.length > 0 && !hasMore && (
-          <p className="text-center text-gray-400 py-4">
+          <p className="lg:mr-18 text-center text-gray-400 py-4">
             더 이상 초대 목록이 없습니다.
           </p>
         )}
-
         {hasMore && (
-          <div ref={observerRef} className="h-[50px] bg-transparent"></div> // 마지막 요소로 스크롤을 감지
+          <div ref={observerRef} className="h-[50px] bg-transparent"></div> // 마지막 요소로 스크롤 감지
         )}
       </div>
     </div>
@@ -135,19 +156,19 @@ export default function InvitedDashBoard() {
     setSearchTitle(event.target.value);
   };
 
-  // invitedData가 비어 있으면 EmptyInvitations만 렌더링
+  // invitedData가 비어 있으면 EmptyInvitations만 렌더링 > 초대내역이 아예 없을 경우
   if (invitedData.length === 0) {
     return <EmptyInvitations />;
   }
 
   return (
     <div>
       <div className="relative bg-white rounded-lg shadow-md w-[260px] sm:w-[504px] lg:w-[1022px] h-[770px] sm:h-[592px] lg:h-[620px] max-w-none mx-auto">
-        <div className="p-6 relative w-[966px] h-[104px]">
+        <div className="p-6 relative w-full h-[104px]">
           <div className="flex justify-between items-center mb-[32px]">
             <p className="text-xl sm:text-2xl font-bold">초대받은 대시보드</p>
           </div>
-          <div className="relative w-[260px] sm:w-[448px] lg:w-[966px]">
+          <div className="relative w-[228px] sm:w-[448px] lg:w-[966px]">
             <input
               id="title"
               placeholder="검색"

src/components/table/member/MemberList.tsx

@@ -52,7 +52,7 @@ const MemberList: React.FC<HeaderBebridgeProps> = ({ dashboardId }) => {
   }, [dashboardId]);
 
   return (
-    <div className="relative bg-white p-6 rounded-lg shadow-md max-w-md w-full sm:max-w-lg md:max-w-xl lg:max-w-2xl mx-auto">
+    <div className="lg:h-[404px] relative bg-white p-6 rounded-lg max-w-md w-full lg:w-[620px] sm:max-w-lg md:max-w-xl lg:max-w-2xl mx-auto">
       <div className="flex justify-between items-center">
         <p className="text-xl sm:text-2xl font-bold">구성원</p>
         <Pagination

src/pages/dashboard/[dashboardId]/edit.tsx

@@ -2,6 +2,8 @@ import { useRouter } from "next/router";
 import ChangeBebridge from "@/components/modal/ChangeBebridge";
 import HeaderBebridge from "@/components/Gnb/HeaderBebridge";
 import MemberList from "@/components/table/member/MemberList";
+// import SideMenu from "@/components/SideMenu/SideMenu";
+import InviteRecords from "@/components/table/InviteRecords";
 
 export default function EditDashboard() {
   const router = useRouter();
@@ -10,11 +12,14 @@ export default function EditDashboard() {
   return (
     <div>
       <HeaderBebridge dashboardId={dashboardId} />
-      <h1>대시보드 수정 페이지 </h1>
-      <br />
-      <h1>dashboardId : {dashboardId}</h1>
+      <h3>돌아가기</h3>
+
+      <div className="flex justify-center items-center">
+        <ChangeBebridge />
+      </div>
+
       <MemberList dashboardId={dashboardId} />
-      <ChangeBebridge />
+      <InviteRecords />
     </div>
   );
 }