Merge pull request #236 from TripInfoWeb/dev_gathering

Dev gathering
TripInfoWeb · Aug 28, 2024 · 06f5882 · 06f5882
2 parents 9a5be09 + ff7de8d
commit 06f5882
Show file tree

Hide file tree

Showing 8 changed files with 153 additions and 89 deletions.
diff --git a/src/app/api/gathering/applyHandler/route.ts → src/app/api/gathering/apply/route.ts b/src/app/api/gathering/applyHandler/route.ts → src/app/api/gathering/apply/route.ts
@@ -9,8 +9,6 @@ export async function POST(
     const url = new URL(request.url);
     const id = url.searchParams.get("id");
 
-
-    // Back-end API 호출
     const response = await fetch(
       `${process.env.BACKEND_URL}/api/gatherings/applicants/${id}`,
       {
@@ -37,44 +35,42 @@ export async function POST(
   }
 }
 
-// export async function PUT(
-//   request: NextRequest,
-//   { params }: { params: { id: string } },
-// ) {
-//   try {
-//     const cookie = request.cookies.get("access_token");
+export async function PUT(
+  request: NextRequest,
+) {
+  try {
+    const cookie = request.cookies.get("access_token");
+    const data = await request.json();
 
-//     // Back-end API 호출
-//     const response = await fetch(
-//       `${process.env.BACKEND_URL}/api/gatherings/applicants/${params.id}`,
-//       {
-//         method: "PUT",
-//         headers: {
-//           Cookie: `${cookie?.name}=${cookie?.value}`,
-//           "Content-Type": "application/json",
-//         },
-//         cache: "no-store",
-//       },
-//     );
+    const response = await fetch(
+      `${process.env.BACKEND_URL}/api/gatherings/applicants/${data.applyId}`,
+      {
+        method: "PUT",
+        headers: {
+          Cookie: `${cookie?.name}=${cookie?.value}`,
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          userId: data.userId,
+          gatheringStatus: data.gatheringStatus,
+        }),
+        cache: "no-store",
+      },
+    );
 
-//     if (!response.ok) {
-//       throw new Error(response.statusText);
-//     }
-//     await revalidatePath(`/gathering/${params.id}`);
-//     // return NextResponse.redirect(
-//     //   new URL(`/getGathering/${params.id}`),
-//     // );
-
-//     return response;
-//   } catch (e) {
-//     return new Response(JSON.stringify({ error: "Failed to update data." }), {
-//       status: 500,
-//       headers: {
-//         "Content-Type": "application/json",
-//       },
-//     });
-//   }
-// }
+    if (!response.ok) {
+      throw new Error(response.statusText);
+    }
+    return response;
+  } catch (e) {
+    return new Response(JSON.stringify({ error: "Failed to update data." }), {
+      status: 500,
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+  }
+}
 
 //  * 모임 글 삭제
 export async function DELETE(

diff --git a/src/app/gathering/[id]/page.tsx b/src/app/gathering/[id]/page.tsx
@@ -1,19 +1,23 @@
 import GatheringRecommendationList from "@/components/gathering/GatheringRecommendationList";
 import GatheringViewerContainer from "@/components/gathering/GatheringViewerContainer";
 import { GatheringDetailResponseDto } from "@/types/GatheringDto";
+import { cookies } from "next/headers";
 import { NextResponse } from "next/server";
 
 interface PageProps {
   params: { id: string };
 }
 
 async function getGathering(id: number): Promise<GatheringDetailResponseDto> {
+  const cookie = cookies().get("access_token");
   try {
     const response = await fetch(
       `${process.env.BACKEND_URL}/api/gatherings/${id}`,
       {
-        headers: { "Content-Type": "application/json" },
-        credentials: "include",
+        method: "GET",
+        headers: {
+          Cookie: `${cookie?.name}=${cookie?.value}`,
+        },
         cache: "no-store",
         // next: { revalidate: 60, tags: [`gathering/${id}`] },
       },

diff --git a/src/app/gathering/page.tsx b/src/app/gathering/page.tsx
@@ -20,8 +20,6 @@ async function getData() {
     },
   );
 
-  console.log("page.tsx 파일 : ", res.status);
-
   if (!res.ok) {
     throw new Error("Failed to fetch data");
   }

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -32,7 +32,6 @@ export default function RootLayout({
       <body
         className={`${notoSansKr.className} flex h-full flex-col`}
       >
-        {/* <body className={"flex h-full flex-col"}> */}
         <HeaderContainer />
         <div className="flex w-full items-center justify-center">
           <div className="flex w-[60rem] flex-col items-center max-[1024px]:w-full max-[1024px]:px-[3.375rem] max-[744px]:px-6">

diff --git a/src/components/gathering/GatheringApplicantList.tsx b/src/components/gathering/GatheringApplicantList.tsx
@@ -5,19 +5,24 @@ interface IApplicant {
     nickname: string;
     age: number;
     sex: "male" | "female";
+    id: number;
   };
   gatheringStatus: "WAIT" | "CONSENT" | "REFUSE";
 }
 
 interface IGatheringApplicantList {
   applicants: IApplicant[];
+  updateGatheringApplicantStatus: (
+    status: "WAIT" | "CONSENT" | "REFUSE",
+    userId: number,
+  ) => void;
 }
 
 const GatheringApplicantList = (props: IGatheringApplicantList) => {
   return (
-    <div className="mt-[3.625rem] flex w-full flex-col text-sm outline outline-[1px] outline-offset-[-1px] outline-[#E3E3E3] rounded-[1rem]">
-      <div className="flex w-full px-4 py-1 font-bold border-b-[1px] border-b-gray3">
-        <div className="flex w-1/12 flex-col max-[600px]:text-xs items-center">
+    <div className="mt-[3.625rem] flex max-h-[28.5rem] w-full flex-col rounded-[1rem] text-sm outline outline-[1px] outline-offset-[-1px] outline-[#E3E3E3]">
+      <div className="flex h-[3.5rem] w-full border-b-[1px] border-b-gray3 px-4 py-1 font-bold">
+        <div className="flex w-1/12 flex-col items-center justify-center max-[600px]:text-xs">
           <span> 프로필 </span>
           <span> 이미지 </span>
         </div>
@@ -28,43 +33,71 @@ const GatheringApplicantList = (props: IGatheringApplicantList) => {
           모임 신청 상태
         </div>
       </div>
-      {props.applicants.map((applicant, index) => (
-        <div key={index} className="flex w-full items-center border-b p-4 ">
-          <div className="w-1/12">
-            <img
-              src={applicant.userGatheringResponse.profileUrl}
-              alt="Profile"
-              className="h-12 w-12 rounded-full object-cover"
-            />
+      <div className="max-h-[25rem] overflow-y-scroll">
+        {props.applicants.map((applicant, index) => (
+          <div
+            key={index}
+            className="flex h-[5rem] w-full items-start border-b p-4"
+          >
+            <div className="flex w-1/12 items-center justify-center">
+              <img
+                src={applicant.userGatheringResponse.profileUrl}
+                alt="Profile"
+                className="h-12 w-12 rounded-full object-cover"
+              />
+            </div>
+            <div className="flex h-full w-1/6 items-center justify-center">
+              {applicant.userGatheringResponse.nickname}
+            </div>
+            <div className="flex h-full w-1/6 flex-col items-center justify-center">
+              <span> {applicant.userGatheringResponse.age}년 </span>
+              <span>
+                {"("}
+                {new Date().getFullYear() - applicant.userGatheringResponse.age}
+                살{")"}
+              </span>
+            </div>
+            <div className="flex h-full w-1/6 items-center justify-center">
+              {applicant.userGatheringResponse.sex === "male" ? "남성" : "여성"}
+            </div>
+            <div className="flex w-5/12 items-center justify-center space-x-2">
+              <button
+                className={`h-[3.25rem] w-[6.75rem] rounded-[2rem] py-2 ${applicant.gatheringStatus === "CONSENT" ? "bg-main text-white" : "bg-white outline outline-[1px] outline-offset-[-1px] outline-[#E3E3E3]"}`}
+                onClick={() =>
+                  props.updateGatheringApplicantStatus(
+                    "CONSENT",
+                    applicant.userGatheringResponse.id,
+                  )
+                }
+              >
+                승인
+              </button>
+              <button
+                className={`h-[3.25rem] w-[6.75rem] rounded-[2rem] py-2 ${applicant.gatheringStatus === "REFUSE" ? "bg-[#EE4C4A] text-white" : "bg-white outline outline-[1px] outline-offset-[-1px] outline-[#E3E3E3]"}`}
+                onClick={() =>
+                  props.updateGatheringApplicantStatus(
+                    "REFUSE",
+                    applicant.userGatheringResponse.id,
+                  )
+                }
+              >
+                거절
+              </button>
+              <button
+                className={`h-[3.25rem] w-[6.75rem] rounded-[2rem] py-2 ${applicant.gatheringStatus === "WAIT" ? "bg-gray2 text-white" : "bg-white outline outline-[1px] outline-offset-[-1px] outline-[#E3E3E3]"}`}
+                onClick={() =>
+                  props.updateGatheringApplicantStatus(
+                    "WAIT",
+                    applicant.userGatheringResponse.id,
+                  )
+                }
+              >
+                대기
+              </button>
+            </div>
           </div>
-          <div className="flex w-1/6 items-center justify-center">
-            {applicant.userGatheringResponse.nickname}
-          </div>
-          <div className="flex w-1/6 items-center justify-center">
-            {applicant.userGatheringResponse.age}년
-          </div>
-          <div className="flex w-1/6 items-center justify-center">
-            {applicant.userGatheringResponse.sex === "male" ? "남성" : "여성"}
-          </div>
-          <div className="flex w-5/12 items-center justify-center space-x-2">
-            <button
-              className={`rounded-[2rem] h-[3.25rem]  w-[6.75rem] py-2 ${applicant.gatheringStatus === "CONSENT" ? "bg-main text-white" : "bg-white outline outline-[1px] outline-offset-[-1px] outline-[#E3E3E3]"}`}
-            >
-              승인
-            </button>
-            <button
-              className={`rounded-[2rem] h-[3.25rem]  w-[6.75rem] py-2 ${applicant.gatheringStatus === "REFUSE" ? "bg-[#EE4C4A] text-white" : "bg-white outline outline-[1px] outline-offset-[-1px] outline-[#E3E3E3]"}`}
-            >
-              거절
-            </button>
-            <button
-              className={`rounded-[2rem] h-[3.25rem]  w-[6.75rem] py-2 ${applicant.gatheringStatus === "WAIT" ? "bg-gray2 text-white" : "bg-white outline outline-[1px] outline-offset-[-1px] outline-[#E3E3E3]"}`}
-            >
-              대기
-            </button>
-          </div>
-        </div>
-      ))}
+        ))}
+      </div>
     </div>
   );
 };

diff --git a/src/components/gathering/GatheringViewerContainer.tsx b/src/components/gathering/GatheringViewerContainer.tsx
@@ -1,7 +1,6 @@
 "use client"
 
 import useModalState from "@/hooks/useModalState";
-import useAuthStore from "@/store/authStore";
 import { GatheringDetailResponseDto } from "@/types/GatheringDto";
 import GatheringViewer from "./GatheringViewer";
 
@@ -12,7 +11,6 @@ interface IGatheringViewerContainer {
 const GatheringViewerContainer = ({ data, postId }: IGatheringViewerContainer) => {
 
   const modalState = useModalState();
-  const authStore = useAuthStore();
 
   return (
     <GatheringViewer

diff --git a/src/containers/gathering/GatheringApplicantListContainer.tsx b/src/containers/gathering/GatheringApplicantListContainer.tsx
@@ -2,6 +2,9 @@
 
 import GatheringApplicantList from "@/components/gathering/GatheringApplicantList";
 import useAuthStore from "@/store/authStore";
+import { fetchWithAuth } from "@/utils/fetchWithAuth";
+import { useParams } from "next/navigation";
+import { useState } from "react";
 
 
 interface IApplicant {
@@ -10,6 +13,7 @@ interface IApplicant {
     nickname: string;
     age: number;
     sex: "male" | "female";
+    id: number;
   };
   gatheringStatus: "WAIT" | "CONSENT" | "REFUSE";
 }
@@ -20,12 +24,44 @@ interface IGatheringApplicantListContainer {
 }
 
 const GatheringApplicantListContainer =
-  ({postUserId, applicants}: IGatheringApplicantListContainer) => {
+  (props: IGatheringApplicantListContainer) => {
     const authStore = useAuthStore();
-    if (postUserId == authStore.id) {
-      return <GatheringApplicantList applicants={applicants} />
+    const [applicants, setApplicants] = useState(props.applicants);
+    const params = useParams();
+
+
+    const updateGatheringApplicantStatus = async (
+      status: "WAIT" | "CONSENT" | "REFUSE",
+      userId: number,
+    ) => {
+      const res = await fetchWithAuth(`/api/gathering/apply`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          userId: userId,
+          gatheringStatus: status,
+          applyId: params.id,
+        }),
+      });
+
+      if (res.ok) {
+        const temp = applicants.map((i) => {
+          if (i.userGatheringResponse.id == userId) {
+            i.gatheringStatus = status;
+          }
+          return i;
+        });
+        setApplicants(temp);
+      }
+    };
+
+    if (props.postUserId == authStore.id && applicants) {
+      return <GatheringApplicantList applicants={applicants} updateGatheringApplicantStatus={updateGatheringApplicantStatus} />
     }
 
     return <></>;
+
   };
 export default GatheringApplicantListContainer
diff --git a/src/containers/gathering/GatheringSupportManagementContainer.tsx b/src/containers/gathering/GatheringSupportManagementContainer.tsx
@@ -12,13 +12,13 @@ const GatheringSupportManagementContainer = ({
     const params = useParams();
 
     const applyGathering = async () => {
-        const res = await fetch(`/api/gathering/applyHandler?id=${params.id}`, {
+        const res = await fetch(`/api/gathering/apply?id=${params.id}`, {
             method: "POST"
         })
     }
 
     const cancelGathering = async () => {
-        const res = await fetch(`/api/gathering/applyHandler?id=${params.id}`, {
+        const res = await fetch(`/api/gathering/apply?id=${params.id}`, {
           method: "DELETE",
         });
     }
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,8 +20,6 @@ async function getData() { @@
         },
       );
-      console.log("page.tsx 파일 : ", res.status);
       if (!res.ok) {
         throw new Error("Failed to fetch data");
       }
@@ Expand Down @@