fix: 백엔드 response 변경 사항 반영 (#203)

* fix: 동호회 관리 수정 * chore: 스키마 변경사항 반영 * fix: 동호회 신청 수정 * fix: url 변경 * fix: 동호회 리그 일정 조회 수정 * fix: league detail route url 변경 * fix: 동호회원 조회 변경 * fix: 동호회원 관리 fix * fix: member리스트 response 변경사항 반영
Kernel360 · Nov 13, 2024 · b87fb4d · b87fb4d
1 parent f9cfd21
commit b87fb4d
Show file tree

Hide file tree

Showing 24 changed files with 453 additions and 257 deletions.
diff --git a/app/club/[clubId]/layout.tsx b/app/club/[clubId]/layout.tsx
@@ -1,22 +1,22 @@
 "use client";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/Tabs";
+import { useGetClubMembersCheck } from "@/lib/api/hooks/clubMemberHook";
 // import { useGetIsClubMember } from "@/lib/api/hooks/memberHook";
 import { headers } from "next/headers";
 import Link from "next/link";
 import { useParams, usePathname } from "next/navigation";
 import type React from "react";
 
 function ClubLayout({ children }: { children: React.ReactNode }) {
-  const params = useParams();
-  const clubId = Number(params.clubId);
+  const { clubId } = useParams();
 
   const pathname = usePathname();
   const clubPath = pathname.split("/")[3];
 
-  // const { data: isJoined } = useGetIsClubMember();
+  const { data: isJoined } = useGetClubMembersCheck(clubId as string);
 
   const activeTab = () => {
-    if (clubPath === undefined) return "intro";
+    if (Array.isArray(clubPath) || clubPath === undefined) return "intro";
     return clubPath;
   };
 
@@ -29,27 +29,27 @@ function ClubLayout({ children }: { children: React.ReactNode }) {
           </TabsTrigger>
         </Link>
 
-        {/* {isJoined?.club_ === clubId && ( */}
         <>
-          <Link href={`/club/${clubId}/schedule`}>
-            <TabsTrigger value="schedule" color="gray">
+          <Link href={`/club/${clubId}/league`}>
+            <TabsTrigger value="league" color="gray">
               일정
             </TabsTrigger>
           </Link>
-          <Link href={`/club/${clubId}/member`}>
-            <TabsTrigger value="member" color="gray">
-              회원
-            </TabsTrigger>
-          </Link>
-          {/* {isJoined?.role === "ROLE_OWNER" && ( */}
-          <Link href={`/club/${clubId}/manage`}>
-            <TabsTrigger value="manage" color="gray">
-              관리
-            </TabsTrigger>
-          </Link>
-          {/* )} */}
+          {isJoined?.is_club_member && (
+            <Link href={`/club/${clubId}/member`}>
+              <TabsTrigger value="member" color="gray">
+                회원
+              </TabsTrigger>
+            </Link>
+          )}
+          {isJoined?.role === "ROLE_OWNER" && (
+            <Link href={`/club/${clubId}/manage`}>
+              <TabsTrigger value="manage" color="gray">
+                관리
+              </TabsTrigger>
+            </Link>
+          )}
         </>
-        {/* )} */}
       </TabsList>
       <div className="overflow-hidden rounded-[0.5rem] border bg-background shadow flex-1 space-y-4 p-8 min-h-[530px]">
         {children}

diff --git a/components/club/ClubInputImage.tsx b/components/club/ClubInputImage.tsx
@@ -19,11 +19,11 @@ const ClubInputImage = ({
 
   return (
     <div className="relative w-[400px] h-[400px] flex flex-col items-center box-content rounded-md">
-      <Image
+      <img
         src={imagePreview}
         width={400}
         height={400}
-        alt="club image"
+        alt="club_banner"
         className="rounded-md object-cover w-[400px] h-[400px] "
       />
       <input

diff --git a/components/club/LeagueList.tsx b/components/club/LeagueList.tsx
@@ -3,6 +3,7 @@ import { Text } from "@/components/ui/Text";
 import { useGetDateLeagues } from "@/lib/api/hooks/leagueHook";
 // import { useGetMyInfo } from "@/lib/api/hooks/memberHook";
 import type { components } from "@/schemas/schema";
+import type { GetLeagueDateData } from "@/types/leagueTypes";
 import { getLeagueType } from "@/utils/getLeagueType";
 import { getTierWithEmoji } from "@/utils/getTierWithEmoji";
 import { format } from "date-fns";
@@ -15,26 +16,24 @@ interface ScheduleListProps {
   selectedDate: Date;
 }
 
-type DateLeagues = components["schemas"]["LeagueByDateResponse"];
-
 function ScheduleList(props: ScheduleListProps) {
   const { selectedDate } = props;
   const { clubId } = useParams();
-  const { data: schedules } = useGetDateLeagues(
+  const { data: schedules, refetch: schedulesRefetch } = useGetDateLeagues(
     clubId as string,
     format(selectedDate, "yyyy-MM-dd"),
   );
-  // const { data: myData } = useGetMyInfo(true);
-  // useEffect(() => {
-  //   refetch();
-  // }, [selectedDate]);
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  useEffect(() => {
+    schedulesRefetch();
+  }, [selectedDate, schedulesRefetch]);
 
   const renderSchedule = () => {
     if (schedules !== undefined && schedules.length > 0) {
-      return schedules.map((schedule: DateLeagues) => (
+      return schedules.map((schedule: GetLeagueDateData) => (
         <Link
           key={schedule.league_id}
-          href={`/club/${clubId}/schedule/${schedule.league_id}`}
+          href={`/club/${clubId}/league/${schedule.league_id}`}
         >
           <div className="bg-white py-4 px-6 rounded-xl border border-solid hover:shadow-lg transform transition-transform duration-300 cursor-pointer">
             <div className="flex justify-between items-start mb-4">
@@ -80,8 +79,7 @@ function ScheduleList(props: ScheduleListProps) {
 
   return (
     <div className="w-full px-6 py-3 bg-white relative">
-      {/* {myData?.club_member_my_page_response?.role !== "ROLE_USER" && ( */}
-      <Link href={`/club/${clubId}/schedule/create`}>
+      <Link href={`/club/${clubId}/league/create`}>
         <IconButton
           size="sm"
           color="transparent"
@@ -91,7 +89,6 @@ function ScheduleList(props: ScheduleListProps) {
           <CalendarPlus className="text-primary group-hover:text-white" />
         </IconButton>
       </Link>
-      {/* )} */}
       <div className="mb-5 text-center">
         <h1 className="text-2xl font-extrabold text-gray-800">
           {format(selectedDate, "yyyy년 MM월 dd일")}

diff --git a/components/club/MemberExpelModal.tsx b/components/club/MemberExpelModal.tsx
@@ -5,7 +5,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { usePatchClubMembersExpel } from "@/lib/api/hooks/clubMemberHook";
-import { usePathname } from "next/navigation";
+import { useParams, usePathname } from "next/navigation";
 import { useState } from "react";
 
 interface MemberExpelModalProps {
@@ -19,11 +19,10 @@ function MemberExpelModal({
   openExpelModal,
   handleExpelModal,
 }: MemberExpelModalProps) {
-  const pathname = usePathname();
-  const clubId = Number(pathname.split("/")[2]);
+  const { clubId } = useParams();
   const [expelReason, setExpelReason] = useState("");
   const { mutate: patchClubMembersExpel } = usePatchClubMembersExpel(
-    clubId,
+    clubId as string,
     clubMemberId,
   );
 

diff --git a/components/club/MemberInfo.tsx b/components/club/MemberInfo.tsx
@@ -20,18 +20,18 @@ function MemberInfo({ memberData, isOpen, onToggle }: MemberInfoProps) {
   // const { win_count, lose_count, draw_count, match_count } =
   // (memberData.league_record_info_response as LeagueRecordInfoResponse) || 0;
 
-  // const changeRoleWord = (role: string) => {
-  //   switch (role) {
-  //     case "ROLE_OWNER":
-  //       return "회장";
-  //     case "ROLE_MANAGER":
-  //       return "매니저";
-  //     case "ROLE_USER":
-  //       return "회원";
-  //     default:
-  //       return "";
-  //   }
-  // };
+  const changeRoleWord = (role: string) => {
+    switch (role) {
+      case "ROLE_OWNER":
+        return "회장";
+      case "ROLE_MANAGER":
+        return "매니저";
+      case "ROLE_USER":
+        return "회원";
+      default:
+        return "";
+    }
+  };
 
   return (
     <div className="flex justify-center">
@@ -44,16 +44,19 @@ function MemberInfo({ memberData, isOpen, onToggle }: MemberInfoProps) {
         <p className="text-black">{memberData.name}</p>
       </div>
       <div className="flex flex-[1] items-center">
-        {/* <p className="text-black">{changeRoleWord(memberData.role ?? "")}</p> */}
+        <p className="text-black">{changeRoleWord(memberData.role ?? "")}</p>
       </div>
       <div className="flex flex-[1] items-center">
         <p className="text-black">
-          {/* {getTierWithEmoji(memberData.tier as string)} */}
+          {getTierWithEmoji(memberData.tier as string)}
         </p>
       </div>
       <div className="flex flex-[1] items-center justify-between relative">
         <p className="text-black">
-          {/* {match_count}전 | {win_count}승 | {draw_count}무 | {lose_count}패 */}
+          {memberData.league_record.match_count}전 |{" "}
+          {memberData.league_record.win_count}승 |{" "}
+          {memberData.league_record.draw_count}무 |{" "}
+          {memberData.league_record.lose_count}패
         </p>
         <IconButton size="sm" color="transparent" onClick={onToggle}>
           <AlignJustify width="80%" height="80%" className="text-gray-400" />

diff --git a/components/club/MemberRoleModal.tsx b/components/club/MemberRoleModal.tsx
@@ -6,7 +6,7 @@ import {
 } from "@/components/ui/dialog";
 import { usePatchClubMembersRole } from "@/lib/api/hooks/clubMemberHook";
 import type { components } from "@/schemas/schema";
-import { usePathname } from "next/navigation";
+import { useParams, usePathname } from "next/navigation";
 import { useState } from "react";
 
 interface MemberRoleModalProps {
@@ -23,11 +23,10 @@ function MemberRoleModal({
   openRoleModal,
   handleRoleModal,
 }: MemberRoleModalProps) {
-  const pathname = usePathname();
-  const clubId = Number(pathname.split("/")[2]);
+  const { clubId } = useParams();
   const [selectedRole, setSelectedRole] = useState("");
   const { mutate: patchClubMembersRole } = usePatchClubMembersRole(
-    clubId,
+    clubId as string,
     clubMemberId,
   );
 

diff --git a/components/club/MemberSuspendedModal.tsx b/components/club/MemberSuspendedModal.tsx
@@ -5,7 +5,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { usePatchClubMembersBan } from "@/lib/api/hooks/clubMemberHook";
-import { usePathname } from "next/navigation";
+import { useParams, usePathname } from "next/navigation";
 import { useState } from "react";
 
 interface MemberSuspendedModalProps {
@@ -19,12 +19,11 @@ function MemberSuspendedModal({
   openSuspendedModal,
   handleSuspendedModal,
 }: MemberSuspendedModalProps) {
-  const pathname = usePathname();
-  const clubId = Number(pathname.split("/")[2]);
+  const { clubId } = useParams();
   const [selectedSuspendedDay, setSelectedSuspendedDay] = useState(0);
   const [banReason, setBanReason] = useState("");
   const { mutate: patchClubMembersBan } = usePatchClubMembersBan(
-    clubId,
+    clubId as string,
     clubMemberId,
   );
 

diff --git a/components/pages/Login.tsx b/components/pages/Login.tsx
@@ -4,8 +4,8 @@ import brand from "@/public/images/main-logo.png";
 import Link from "next/link";
 
 const NAVER_OAUTH_URL = process.env.NEXT_NAVER_OAUTH_URL || "";
-const GOOGLE_OAUTH_URL = process.env.NEXT_NAVER_OAUTH_URL || "";
-const KAKAO_OAUTH_URL = process.env.NEXT_NAVER_OAUTH_URL || "";
+const GOOGLE_OAUTH_URL = process.env.NEXT_GOOGLE_OAUTH_URL || "";
+const KAKAO_OAUTH_URL = process.env.NEXT_KAKAO_OAUTH_URL || "";
 
 function Login() {
   return (

diff --git a/components/pages/club/ClubIntro.tsx b/components/pages/club/ClubIntro.tsx
@@ -1,6 +1,11 @@
 "use client";
 
+import { postClubMembers } from "@/lib/api/functions/clubMemberFn";
 import { useGetClubsById } from "@/lib/api/hooks/clubHook";
+import {
+  useGetClubMembersCheck,
+  usePostClubMembers,
+} from "@/lib/api/hooks/clubMemberHook";
 import { format } from "date-fns";
 import Image from "next/image";
 import { useParams, usePathname } from "next/navigation";
@@ -9,7 +14,7 @@ function ClubIntro() {
   const { clubId } = useParams();
 
   const { data: clubData, isLoading } = useGetClubsById(clubId as string);
-  // const { mutate: postClubMembers } = usePostClubMembers(clubId);
+  const { mutate: postClubMembers } = usePostClubMembers(clubId as string);
 
   if (isLoading) {
     return (
@@ -23,27 +28,26 @@ function ClubIntro() {
     return <div>No data available</div>;
   }
 
-  // const handlePostClubMember = () => {
-  //   postClubMembers(undefined, {
-  //     onSuccess: () => alert("동호회 가입에 성공하였습니다!"),
-  //   });
-  // };
+  // TODO: applyReason dialog 생성하기
+  const handlePostClubMember = () => {
+    postClubMembers();
+  };
 
   return (
     <div className="flex space-x-8 w-full h-[464px] items-center">
       <div className="w-[400px] flex flex-col items-center gap-2">
-        <Image
-          src={clubData?.club_image as string}
+        <img
+          src={(clubData?.club_image as string) || "/images/dummy-image.jpg"}
           width={400}
           height={400}
-          alt="club image"
+          alt="club_banner"
           className="rounded-md object-cover h-[400px] w-[400px]"
         />
         {!clubData.is_club_member && (
           <button
             className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-md"
             type="button"
-            // onClick={handlePostClubMember}
+            onClick={handlePostClubMember}
           >
             동호회 참여하기
           </button>

diff --git a/components/pages/club/ClubLeague.tsx b/components/pages/club/ClubLeague.tsx
@@ -4,19 +4,20 @@ import DayCell from "@/components/DayCell";
 import LeagueList from "@/components/club/LeagueList";
 import { Calendar } from "@/components/ui/calendar";
 import { useGetMonthLeagues } from "@/lib/api/hooks/leagueHook";
-import type { components } from "@/schemas/schema";
+import type { GetLeagueMonthData } from "@/types/leagueTypes";
 import { format } from "date-fns";
 import { ko } from "date-fns/locale";
-import { usePathname } from "next/navigation";
+import { useParams } from "next/navigation";
 import { useEffect, useState } from "react";
 
-type MonthLeagues = components["schemas"]["LeagueReadResponse"];
-
 function ClubLeague() {
   const [date, setDate] = useState<Date>(new Date());
   const [month, setMonth] = useState<string>(format(new Date(), "yyyy-MM"));
-  const clubId = Number(usePathname().split("/")[2]);
-  const { data: leagueList, refetch } = useGetMonthLeagues(clubId, month);
+  const { clubId } = useParams();
+  const { data: leagueList, refetch } = useGetMonthLeagues(
+    clubId as string,
+    month,
+  );
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   useEffect(() => {
@@ -55,7 +56,7 @@ function ClubLeague() {
             <DayCell
               date={dayProps.date}
               displayMonth={dayProps.displayMonth}
-              scheduleList={leagueList as MonthLeagues[]}
+              scheduleList={leagueList as GetLeagueMonthData[]}
             />
           ),
         }}