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

Moal : 새로운 대시보드(위치, 뒷배경 수정) + Header : HeaderBebridge api 데이터 저장

Author: hhjin1

src/api/members.ts

@@ -1,9 +1,31 @@
 import axios from "axios";
 import { MemberType } from "@/components/Gnb/members";
 
-export const getMembers = async () => {
-  const response = await axios.get<{ results: MemberType[] }>(
-    "https://sp-taskify-api.vercel.app/13-4/members"
+interface ApiResponse {
+  members: MemberType[]; // 실제 데이터
+  totalCount: number;
+}
+
+export const getMembers = async (dashboardId?: string | string[]) => {
+  if (!dashboardId) {
+    console.error("dashboardID가 없습니다.");
+    return [];
+  }
+
+  const token = process.env.NEXT_PUBLIC_API_TOKEN;
+  const numericDashboardId =
+    typeof dashboardId === "string" ? Number(dashboardId) : undefined;
+
+  const response = await axios.get<ApiResponse>(
+    `https://sp-taskify-api.vercel.app/13-4/members?page=1&size=20&dashboardId=${numericDashboardId}`,
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    }
   );
-  return response.data.results || [];
+  console.log(response.data);
+  console.log(response.data.members);
+
+  return response.data.members || [];
 };

src/components/Gnb/HeaderBebridge.tsx

@@ -4,20 +4,26 @@ import { MemberType } from "@/components/Gnb/members";
 import { getMembers } from "@/api/members";
 import RandomProfile from "../table/member/RandomProfile";
 import ModalInviting from "./ModalInviting";
+import NewDashboard from "../modal/NewDashboard";
+
+interface HeaderBebridgeProps {
+  dashboardId?: string | string[];
+}
 
 /*dummy data*/
 const user = {
   nickname: "배유철",
-  profileImageUrl: "../svgs/dummy-icon.png",
+  profileImageUrl: "",
 };
 
-const HeaderBebridge = () => {
+const HeaderBebridge: React.FC<HeaderBebridgeProps> = ({ dashboardId }) => {
+  // dashboardId 받을 수 있게 변경
+
   /*멤버 목록 profileImageUrl loading*/
   const [isLoading, setIsLoading] = useState(true);
   const [members, setMembers] = useState<MemberType[]>([]);
   /*관리 버튼 클릭 이벤트 함수*/
   const router = useRouter();
-  const { dashboardId } = router.query;
   const goToDashboardEdit = () => {
     router.push(`/dashboard/${dashboardId}/edit`);
   };
@@ -34,8 +40,10 @@ const HeaderBebridge = () => {
   useEffect(() => {
     const fetchMembers = async () => {
       try {
-        const members = await getMembers();
-        setMembers(members);
+        if (dashboardId) {
+          const members = await getMembers(dashboardId);
+          setMembers(members);
+        }
       } catch (error) {
         console.error("멤버 불러오기 실패:", error);
       } finally {
@@ -44,7 +52,7 @@ const HeaderBebridge = () => {
     };
 
     fetchMembers();
-  }, []);
+  }, [dashboardId]);
 
   return (
     <header className="w-full h-[50px] sm:h-[60px] md:h-[70px] flex items-center justify-center bg-white border-b-[1px] border-b-[#D9D9D9]">
@@ -86,7 +94,8 @@ const HeaderBebridge = () => {
               <span className="text-sm md:text-base text-gray1">초대하기</span>
             </button>
             {/*임시 컴포넌트명, 추후 정식 초대 모달 컴포넌트로 교체*/}
-            {isModalOpen && <ModalInviting onClose={closeInviteModal} />}
+
+            {isModalOpen && <NewDashboard onClose={closeInviteModal} />}
           </div>
 
           {/*4개의 프로필 아이콘 표시, 나머지 멤버 숫자 +n 아이콘으로 표시*/}
@@ -96,12 +105,17 @@ const HeaderBebridge = () => {
             ) : (
               <>
                 {members.slice(0, 4).map((member) => (
-                  <img
-                    key={member.id}
-                    src={member.profileImageUrl || "/svgs/dummy-icon.png"}
-                    alt={member.nickname}
-                    className="w-[34px] h-[34px] md:w-[38px] md:h-[38px] rounded-full border-[2px] border-white"
-                  />
+                  <div key={member.id}>
+                    {member.profileImageUrl ? (
+                      <img
+                        src={member.profileImageUrl}
+                        alt={member.nickname}
+                        className="w-[34px] h-[34px] md:w-[38px] md:h-[38px] rounded-full border-[2px] border-white"
+                      />
+                    ) : (
+                      <RandomProfile name={member.nickname} />
+                    )}
+                  </div>
                 ))}
                 {members.length > 4 && (
                   <div className="w-[34px] h-[34px] md:w-[38px] md:h-[38px] flex items-center justify-center rounded-full border-[2px] border-white bg-[#F4D7DA] font-16m text-[#D25B68]">
@@ -127,9 +141,10 @@ const HeaderBebridge = () => {
                   className="w-full h-full rounded-full object-cover"
                 />
               ) : (
-                <RandomProfile name={user.nickname} index={2} />
+                <RandomProfile name={user.nickname} />
               )}
             </div>
+
             <span className="hidden md:block text-black3 md:text-base md:font-medium">
               {user.nickname}
             </span>

src/components/card/Profile.tsx

@@ -61,7 +61,6 @@ export default function ProfileCard() {
             onChange={setEmail}
             pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"
             invalidMessage="유효한 이메일 주소를 입력하세요."
-            className="mb-2"
           />
 
           <Input

src/components/modal/NewDashboard.tsx

@@ -31,6 +31,7 @@ export default function NewDashboard({ onClose }: { onClose?: () => void }) {
         }
       );
       console.log("대시보드 생성 성공:", response.data);
+      alert("대시보드가 성공적으로 생성되었습니다.");
       console.log(loading);
 
       onClose?.(); // 모달 닫기
@@ -42,54 +43,56 @@ export default function NewDashboard({ onClose }: { onClose?: () => void }) {
   };
 
   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">
-      <h2 className="text-sm sm:text-[24px] font-bold">새로운 대시보드</h2>
-      <Input
-        type="text"
-        onChange={setTitle}
-        label="대시보드 이름"
-        labelClassName="text-lg sm:text-base text-black3 mt-6"
-        placeholder="뉴프로젝트"
-        className="max-w-[620px] mb-1"
-      />
+    <div className="fixed inset-0 flex items-center justify-center bg-black/35 z-50">
+      <div className="bg-white p-6 rounded-lg shadow-lg w-[327px] sm:w-[584px] sm:h-[344px]">
+        <h2 className="text-sm sm:text-[24px] font-bold">새로운 대시보드</h2>
+        <Input
+          type="text"
+          onChange={setTitle}
+          label="대시보드 이름"
+          labelClassName="text-lg sm:text-base text-black3 mt-6"
+          placeholder="뉴프로젝트"
+          className="max-w-[620px] mb-1"
+        />
 
-      <div className="mt-3 flex relative">
-        {colors.map((color, index) => (
-          <div key={index} className="relative">
-            <button
-              className="cursor-pointer w-[30px] h-[30px] rounded-full mr-2"
-              style={{ backgroundColor: color }}
-              onClick={() => setSelected(index)}
-            />
-            {selected === index && (
-              <Image
-                src="/svgs/check.svg"
-                alt="선택표시 이미지"
-                width={23}
-                height={23}
-                className="absolute top-4 left-4 transform -translate-x-1/2 -translate-y-1/2"
+        <div className="mt-3 flex relative">
+          {colors.map((color, index) => (
+            <div key={index} className="relative">
+              <button
+                className="cursor-pointer w-[30px] h-[30px] rounded-full mr-2"
+                style={{ backgroundColor: color }}
+                onClick={() => setSelected(index)}
               />
-            )}
-          </div>
-        ))}
-      </div>
+              {selected === index && (
+                <Image
+                  src="/svgs/check.svg"
+                  alt="선택표시 이미지"
+                  width={23}
+                  height={23}
+                  className="absolute top-4 left-4 transform -translate-x-1/2 -translate-y-1/2"
+                />
+              )}
+            </div>
+          ))}
+        </div>
 
-      <div className="mt-8 flex justify-between">
-        <button
-          onClick={onClose}
-          className="cursor-pointer sm:w-[256px] sm:h-[54px] w-[295px] h-[54px] rounded-[8px] border border-[var(--color-gray3)] text-[var(--color-gray1)]"
-        >
-          취소
-        </button>
-        <button
-          onClick={handleSubmit}
-          disabled={!title || selected === null}
-          className={`cursor-pointer sm:w-[256px] sm:h-[54px] w-[295px] h-[54px] rounded-[8px] 
+        <div className="mt-8 flex justify-between">
+          <button
+            onClick={onClose}
+            className="cursor-pointer sm:w-[256px] sm:h-[54px] w-[295px] h-[54px] rounded-[8px] border border-[var(--color-gray3)] text-[var(--color-gray1)]"
+          >
+            취소
+          </button>
+          <button
+            onClick={handleSubmit}
+            disabled={!title || selected === null}
+            className={`cursor-pointer sm:w-[256px] sm:h-[54px] w-[295px] h-[54px] rounded-[8px] 
                       border border-[var(--color-gray3)] text-[var(--color-white)] 
           ${!title || selected === null ? "bg-gray-300 cursor-not-allowed" : "bg-[var(--primary)]"}`}
-        >
-          생성
-        </button>
+          >
+            생성
+          </button>
+        </div>
       </div>
     </div>
   );