From d5d0eafa79c1c0bd927e63cc4a08a85cd4a7c07f Mon Sep 17 00:00:00 2001
From: happppi <102276917+hhbb0081@users.noreply.github.com>
Date: Thu, 8 Aug 2024 22:02:54 +0900
Subject: [PATCH 1/7] =?UTF-8?q?Feat:=20=EB=AA=A8=EC=9E=84=20=EA=B0=80?=
 =?UTF-8?q?=EC=9E=85=20=EC=9A=94=EC=B2=AD=20=EC=88=98=EB=9D=BD=20&=20?=
 =?UTF-8?q?=EA=B1=B0=EC=A0=88=20api=20=EC=97=B0=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/info/manage/join/ManageJoin.tsx  | 66 +++++++++++--------
 .../manage/join/components/ManageJoinBox.tsx  |  3 +-
 .../join/components/ManageJoinHeader.tsx      | 14 +++-
 .../manage/join/components/ManageJoinList.tsx |  6 +-
 src/hook/info/useClubJoinAcceptMutation.ts    | 14 ++--
 src/hook/info/useClubJoinDenyMutation.ts      | 14 ++--
 src/types/info/types.ts                       |  2 +-
 7 files changed, 70 insertions(+), 49 deletions(-)

diff --git a/src/features/info/manage/join/ManageJoin.tsx b/src/features/info/manage/join/ManageJoin.tsx
index 58e96d7..1c9bd98 100644
--- a/src/features/info/manage/join/ManageJoin.tsx
+++ b/src/features/info/manage/join/ManageJoin.tsx
@@ -6,37 +6,45 @@ import ManageJoinHeader from "./components/ManageJoinHeader";
 import ManageJoinList from "./components/ManageJoinList";
 import ManageJoinWrapper from "./components/ManageJoinWrapper";
 
+import { ClubJoin } from "@/types/info";
 import { useState } from "react";
 import "./components/ManageJoin.css";
-export const ManageJoin = () => {
-    const { data: joinList } = useClubJoinQuery();
-    console.log(joinList);
 
-    const [selectJoins, setSelectJoins] = useState<number[]>([]);
+const ManageJoinContent = ({ 
+    joinList
+}: {
+    joinList: ClubJoin[]
+}) => {
+  const [selectJoins, setSelectJoins] = useState<number[]>([]);
+
+  return (
+    <>
+      <ManageJoinHeader 
+        memberCnt={joinList.length}
+        selectJoins={selectJoins}
+      />
+      <ManageJoinList 
+        joinList={joinList}
+        selectJoins={selectJoins}
+        setSelectJoins={setSelectJoins}
+      />
+    </>
+  );
+};
+
+export const ManageJoin = () => {
+  const { data: joinList } = useClubJoinQuery();
+  console.log(joinList);
 
-    return(
-        <>
-            <HistoryHeader 
-                title="모임 가입 신청 관리"
-            />
-            <ManageJoinWrapper>
-                {
-                    joinList &&
-                    joinList.data &&
-                    <>
-                        <ManageJoinHeader 
-                            memberCnt={joinList.data.length}
-                            selectJoins={selectJoins}
-                        />
-                        <ManageJoinList 
-                            joinList={joinList.data}
-                            selectJoins={selectJoins}
-                            setSelectJoins={setSelectJoins}
-                        />
-                    </>
-                }
-            </ManageJoinWrapper>
-            <Nav />
-        </>
-    )
+  return (
+    <>
+      <HistoryHeader title="모임 가입 신청 관리" />
+      <ManageJoinWrapper>
+        {joinList && joinList.data && (
+          <ManageJoinContent joinList={joinList.data} />
+        )}
+      </ManageJoinWrapper>
+      <Nav />
+    </>
+  );
 };
\ No newline at end of file
diff --git a/src/features/info/manage/join/components/ManageJoinBox.tsx b/src/features/info/manage/join/components/ManageJoinBox.tsx
index d3c08ed..533267e 100644
--- a/src/features/info/manage/join/components/ManageJoinBox.tsx
+++ b/src/features/info/manage/join/components/ManageJoinBox.tsx
@@ -1,6 +1,7 @@
 import { Checkbox } from "@/components/atoms/checkbox/Checkbox";
 import { Text } from "@/components/atoms/text";
 import { COLORS } from "@/styles";
+import moment from "moment";
 
 interface manageJoinBoxProps {
   idx: number;
@@ -45,7 +46,7 @@ export default function ManageJoinBox({
             color={COLORS.white}
             fontSize="0.75rem"
             fontWeight="500"
-          >{date}</Text>
+          >{moment(date).format("YYYY년 MM월 DD일")}</Text>
         </p>
       </div>
       <Checkbox
diff --git a/src/features/info/manage/join/components/ManageJoinHeader.tsx b/src/features/info/manage/join/components/ManageJoinHeader.tsx
index 4680ed9..285668e 100644
--- a/src/features/info/manage/join/components/ManageJoinHeader.tsx
+++ b/src/features/info/manage/join/components/ManageJoinHeader.tsx
@@ -3,6 +3,8 @@ import { COLORS } from "@/styles";
 import { BTN, NUMBER, TOTAL } from "../constants";
 
 import { Text } from "@/components/atoms/text";
+import { useClubJoinAcceptMutation } from "@/hook/info/useClubJoinAcceptMutation";
+import { useClubJoinDenyMutation } from "@/hook/info/useClubJoinDenyMutation";
 import "./ManageJoin.css";
 
 export default function ManageJoinHeader({
@@ -12,8 +14,18 @@ export default function ManageJoinHeader({
   memberCnt: number;
   selectJoins: number[];
 }) {
+  const { mutate: acceptMutate } = useClubJoinAcceptMutation();
+  const { mutate: denyMutate } = useClubJoinDenyMutation();
+  
   const mutationJoin = (type: boolean) => {
-
+    console.log(type, selectJoins);
+    if (type) {
+      console.log("Calling acceptMutate");
+      acceptMutate(selectJoins);
+    } else {
+      console.log("Calling denyMutate");
+      denyMutate(selectJoins);
+    }
   }
   return (
     <div className="manageJoinHeader">
diff --git a/src/features/info/manage/join/components/ManageJoinList.tsx b/src/features/info/manage/join/components/ManageJoinList.tsx
index b70f5f5..af75db2 100644
--- a/src/features/info/manage/join/components/ManageJoinList.tsx
+++ b/src/features/info/manage/join/components/ManageJoinList.tsx
@@ -48,10 +48,10 @@ export default function ManageJoinList({
       <div className="manageJoinList__content">
         {
           joinList
-            ?.map((item) => 
+            ?.map((item, idx) => 
               <ManageJoinBox
-                key={item.id}
-                idx={item.id}
+                key={idx}
+                idx={idx}
                 joinId={item.id}
                 name={item.userName}
                 date={item.createdAt}
diff --git a/src/hook/info/useClubJoinAcceptMutation.ts b/src/hook/info/useClubJoinAcceptMutation.ts
index f4225b7..4743ada 100644
--- a/src/hook/info/useClubJoinAcceptMutation.ts
+++ b/src/hook/info/useClubJoinAcceptMutation.ts
@@ -1,19 +1,19 @@
 import { http } from "@/apis/http"
-import { JoinRequestParam } from "@/types/info"
+import { FormatClubId } from "@/utils/extractPathElements"
 import useToast from "@/utils/useToast"
 import { useMutation, useQueryClient } from "@tanstack/react-query"
 import { AxiosError, AxiosResponse } from "axios"
 
 // 멤버 가입요청 수락 (/clubs/{clubId}/join/{clubJoinRequestId}/accept)
-export const useClubJoinAcceptMutation = ({
-  clubId,
-  clubJoinRequestId
-}: JoinRequestParam) => {
+export const useClubJoinAcceptMutation = () => {
   const { showToast } = useToast();
   const queryClient = useQueryClient();
+  const clubId = FormatClubId();
 
-  return useMutation<AxiosResponse<string>, Error>({
-    mutationFn: () => http.post(`/${clubId}/join/${clubJoinRequestId}/accept`),
+  return useMutation<AxiosResponse<string>, Error, number[]>({
+    mutationFn: async (selectJoins: number[]) => {
+      return await http.post(`/clubs/${clubId}/join/accept`, selectJoins)
+    },
     onSuccess: (data) => {
       console.log(data);
       if (data.status === 200) {
diff --git a/src/hook/info/useClubJoinDenyMutation.ts b/src/hook/info/useClubJoinDenyMutation.ts
index ac812a6..f53b6fc 100644
--- a/src/hook/info/useClubJoinDenyMutation.ts
+++ b/src/hook/info/useClubJoinDenyMutation.ts
@@ -1,5 +1,5 @@
 import { http } from "@/apis/http"
-import { JoinRequestParam } from "@/types/info"
+import { FormatClubId } from "@/utils/extractPathElements"
 import useToast from "@/utils/useToast"
 import { useMutation, useQueryClient } from "@tanstack/react-query"
 import { AxiosError, AxiosResponse } from "axios"
@@ -11,15 +11,15 @@ interface ErrorData {
 }
 
 // 멤버 가입요청 거절 (/clubs/{clubId}/join/{clubJoinRequestId}/deny)
-export const useClubJoinDenyMutation = ({
-  clubId,
-  clubJoinRequestId
-}: JoinRequestParam) => {
+export const useClubJoinDenyMutation = () => {
   const { showToast } = useToast();
   const queryClient = useQueryClient();
+  const clubId = FormatClubId();
 
-  return useMutation<AxiosResponse<string>, Error>({
-    mutationFn: () => http.post(`/${clubId}/join/${clubJoinRequestId}/deny`),
+  return useMutation<AxiosResponse<string>, Error, number[]>({
+    mutationFn: async (selectJoins: number[]) => {
+      return await http.post(`/clubs/${clubId}/join/deny`, selectJoins)
+    },
     onSuccess: (data) => {
       console.log(data);
       if (data.status === 200) {
diff --git a/src/types/info/types.ts b/src/types/info/types.ts
index f0fa021..a8483e9 100644
--- a/src/types/info/types.ts
+++ b/src/types/info/types.ts
@@ -40,5 +40,5 @@ export interface ClubJoin {
 
 export interface JoinRequestParam {
   clubId: number;
-  clubJoinRequestId: number;
+  clubJoinRequestId?: number;
 }
\ No newline at end of file

From 0420667e701f3c30cf12b53d7ba1690cd13fe0b7 Mon Sep 17 00:00:00 2001
From: happppi <102276917+hhbb0081@users.noreply.github.com>
Date: Thu, 8 Aug 2024 23:03:33 +0900
Subject: [PATCH 2/7] =?UTF-8?q?design:=20=EB=8D=94=EB=B3=B4=EA=B8=B0=20?=
 =?UTF-8?q?=ED=97=A4=EB=8D=94=20padding?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/layout.tsx                | 1 -
 src/features/info/ManagerInfo.tsx | 4 +++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 37a89cc..eec532b 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -22,7 +22,6 @@ export default function RootLayout({
   const historyHeaderList = ["/user/onboarding", "/user/club"];
 
   const clubHeaderList = [
-    "/info",
     "/member/attendance",
   ];
 
diff --git a/src/features/info/ManagerInfo.tsx b/src/features/info/ManagerInfo.tsx
index f2ca31e..2499af0 100644
--- a/src/features/info/ManagerInfo.tsx
+++ b/src/features/info/ManagerInfo.tsx
@@ -7,7 +7,9 @@ export default function ManagerInfo () {
     return(
         <>
             <Wrapper isHeader={true}>
-                <MemberContent />
+                <div style={{ paddingTop: '4.25rem' }}>   
+                    <MemberContent />
+                </div>
                 <div className="memberInfo">
                     <MemberBtn />
                     <Nav />

From 824242b696e495addeeaf64a7c849d2221d2ff2a Mon Sep 17 00:00:00 2001
From: happppi <102276917+hhbb0081@users.noreply.github.com>
Date: Thu, 8 Aug 2024 23:04:44 +0900
Subject: [PATCH 3/7] =?UTF-8?q?Feat:=20=EB=A9=A4=EB=B2=84=20=EC=B4=88?=
 =?UTF-8?q?=EA=B8=B0=20=ED=94=84=EB=A1=9C=ED=95=84=20=EC=84=A4=EC=A0=95=20?=
 =?UTF-8?q?=EC=98=88=EC=99=B8=20=EC=B2=98=EB=A6=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/molecules/headerInfo/HeaderInfo.tsx          | 6 +++++-
 src/features/home/SetHome.tsx                               | 2 +-
 .../info/manage/join/components/ManageJoinHeader.tsx        | 2 --
 src/hook/info/useMyCommentQuery.ts                          | 2 +-
 src/hook/member/useMemberAuthQuery.ts                       | 6 +++---
 5 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/molecules/headerInfo/HeaderInfo.tsx b/src/components/molecules/headerInfo/HeaderInfo.tsx
index 0271756..bf5dcc5 100644
--- a/src/components/molecules/headerInfo/HeaderInfo.tsx
+++ b/src/components/molecules/headerInfo/HeaderInfo.tsx
@@ -45,7 +45,11 @@ export function HeaderInfo({
 }: isHeaderInfo) {
   const router = useRouter();
   const saveData = useSelector((state: RootState) => state.club.children);
-  const { data: loadData } = useMemberAuthQuery();
+  const { data: loadData, isError, error } = useMemberAuthQuery();
+  if (isError) {
+    console.log(error.response?.status);
+    if (error.response?.status) router.push('/user/onboarding');
+  }
   if (loadData === undefined) return;
   const clubInfo = saveData.memberId === -1 ? loadData.data : saveData;
   return (
diff --git a/src/features/home/SetHome.tsx b/src/features/home/SetHome.tsx
index fce3fd9..83d58a2 100644
--- a/src/features/home/SetHome.tsx
+++ b/src/features/home/SetHome.tsx
@@ -38,7 +38,7 @@ const SetHome = () => {
   return (
     <ScheduleContext.Provider value={{ value, onChange: setValue }}>
       <HeaderInfo isClubInfo={true} isMyInfo={true} />
-      <div style={{ height: "100%", paddingBottom: "4.25rem", paddingTop: "4.25rem" }}>
+      <div style={{ height: "100%", paddingBottom: "4.25rem", paddingTop: "4.25rem", backgroundColor: "#2B2B2B" }}>
         <HomeHeader mark={mark} />
         <HomeDateWrapper dateList={filteredData} isLoading={isLoading} />
       </div>
diff --git a/src/features/info/manage/join/components/ManageJoinHeader.tsx b/src/features/info/manage/join/components/ManageJoinHeader.tsx
index 285668e..2ba65b6 100644
--- a/src/features/info/manage/join/components/ManageJoinHeader.tsx
+++ b/src/features/info/manage/join/components/ManageJoinHeader.tsx
@@ -20,10 +20,8 @@ export default function ManageJoinHeader({
   const mutationJoin = (type: boolean) => {
     console.log(type, selectJoins);
     if (type) {
-      console.log("Calling acceptMutate");
       acceptMutate(selectJoins);
     } else {
-      console.log("Calling denyMutate");
       denyMutate(selectJoins);
     }
   }
diff --git a/src/hook/info/useMyCommentQuery.ts b/src/hook/info/useMyCommentQuery.ts
index 2a1d048..e7ec6b4 100644
--- a/src/hook/info/useMyCommentQuery.ts
+++ b/src/hook/info/useMyCommentQuery.ts
@@ -12,7 +12,7 @@ export const useMyCommentQuery = ({
   sort="",
 }: MyPostProps) => {
   const clubId = FormatClubId();
-  const myPostUrl = `/clubs/${clubId}/comment/my?page=${page}&size=${size}`;
+  const myPostUrl = `/clubs/${clubId}/posts/my-comment-list?page=${page}&size=${size}`;
   return useQuery<CommonRes<PostList>>({
     queryKey: ["postMyComment", { clubId, size, page, sort }],
     queryFn: async () => 
diff --git a/src/hook/member/useMemberAuthQuery.ts b/src/hook/member/useMemberAuthQuery.ts
index 6b5aca7..4f85ceb 100644
--- a/src/hook/member/useMemberAuthQuery.ts
+++ b/src/hook/member/useMemberAuthQuery.ts
@@ -1,15 +1,15 @@
 import { http } from "@/apis/http";
-import { CommonNoPageRes } from "@/types";
 import { MemberAuthInfo } from "@/types/member";
 import { FormatClubId } from "@/utils/extractPathElements";
 import { useQuery } from "@tanstack/react-query";
+import { AxiosError, AxiosResponse } from "axios";
 // 클럽 auth 조회
 export const useMemberAuthQuery = () => {
   const clubId = FormatClubId();
-  return useQuery<CommonNoPageRes<MemberAuthInfo>>({
+  return useQuery<AxiosResponse<MemberAuthInfo>, AxiosError>({
     queryKey: ["myClubAuth", [clubId]],
     queryFn: async () => {
-      const response = await http.get<CommonNoPageRes<MemberAuthInfo>>(
+      const response = await http.get<AxiosResponse<MemberAuthInfo>>(
         `/clubs/${clubId}/member/my/auth`
       );
       return response;

From 247e47ee7ea7a8f315ce8cacb04dbfebc1e36007 Mon Sep 17 00:00:00 2001
From: KKangHHee <skh8609@gmail.com>
Date: Fri, 9 Aug 2024 21:58:23 +0900
Subject: [PATCH 4/7] =?UTF-8?q?Feat:=20=EB=AC=B4=ED=95=9C=20=EC=8A=A4?=
 =?UTF-8?q?=ED=81=AC=EB=A1=A4=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/types.ts                  | 18 ++++-----
 src/utils/useCustomInfiniteQuery.ts | 21 ++++++++++
 src/utils/useScrollHandler.ts       | 61 +++++++++++++++++++++++++++++
 3 files changed, 91 insertions(+), 9 deletions(-)
 create mode 100644 src/utils/useCustomInfiniteQuery.ts
 create mode 100644 src/utils/useScrollHandler.ts

diff --git a/src/types/types.ts b/src/types/types.ts
index 8635a1e..7369776 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -1,10 +1,10 @@
 export interface Pageable {
-  pageNumber: number;
+  pageNumber: number; //현재 페이지 번호
   pageSize: number;
   sort: {
-      empty: boolean;
-      sorted: boolean;
-      unsorted: boolean;
+    empty: boolean;
+    sorted: boolean;
+    unsorted: boolean;
   };
   offset: number;
   paged: boolean;
@@ -16,14 +16,14 @@ export interface CommonPage<T> {
   content: T[];
   pageable: Pageable;
   last: boolean;
-  totalPages: number;
+  totalPages: number; // 전체 페이지 번호
   totalElements: number;
   size: number;
   number: number;
   sort: {
-      empty: boolean;
-      sorted: boolean;
-      unsorted: boolean;
+    empty: boolean;
+    sorted: boolean;
+    unsorted: boolean;
   };
   first: boolean;
   numberOfElements: number;
@@ -31,7 +31,7 @@ export interface CommonPage<T> {
 }
 
 export interface CommonRes<T> {
-  data: CommonPage<T>
+  data: CommonPage<T>;
 }
 
 export interface CommonNoPageRes<T> {
diff --git a/src/utils/useCustomInfiniteQuery.ts b/src/utils/useCustomInfiniteQuery.ts
new file mode 100644
index 0000000..3465a55
--- /dev/null
+++ b/src/utils/useCustomInfiniteQuery.ts
@@ -0,0 +1,21 @@
+import { CommonPage } from "@/types";
+import { useInfiniteQuery } from "@tanstack/react-query";
+
+export function useCustomInfiniteQuery<T>({
+  queryKey,
+  customQueryFn,
+}: {
+  queryKey: any;
+  customQueryFn: (pageParam: number) => Promise<CommonPage<T>>;
+}) {
+  return useInfiniteQuery<CommonPage<T>, Error>({
+    queryKey: queryKey,
+    queryFn: async ({ pageParam = 0 }) => customQueryFn(pageParam as number),
+    getNextPageParam: (lastPage) => {
+      return lastPage.last ? undefined : lastPage.pageable.pageNumber + 1;
+    },
+    retry: 3,
+    refetchOnWindowFocus: false,
+    initialPageParam: undefined,
+  });
+}
diff --git a/src/utils/useScrollHandler.ts b/src/utils/useScrollHandler.ts
new file mode 100644
index 0000000..c98d196
--- /dev/null
+++ b/src/utils/useScrollHandler.ts
@@ -0,0 +1,61 @@
+import { useEffect, useRef, useState } from "react";
+
+// export function useScrollHandler(onScrollEnd: () => void) {
+//   return useCallback(
+//     (e: React.UIEvent<HTMLDivElement, UIEvent>) => {
+//       const target = e.currentTarget;
+//       const isBottom =
+//         target.scrollHeight - target.scrollTop <= target.clientHeight;
+//       if (isBottom) {
+//         console.log("끝");
+//         onScrollEnd();
+//       }
+//     },
+//     [onScrollEnd]
+//   );
+// }
+
+export function useScrollHandler(onScrollEnd: () => void) {
+  const [isEnd, setIsEnd] = useState<boolean>(false);
+  const observer = useRef<IntersectionObserver | null>(null);
+  const targetRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!("IntersectionObserver" in window)) return; // IntersectionObserver 지원 확인용
+
+    const handleIntersect = ([entry]: IntersectionObserverEntry[]) => {
+      if (entry.isIntersecting) {
+        setIsEnd(true);
+      }
+    };
+
+    // IntersectionObserver를 초기화하고 handleIntersect 콜백 연결
+    observer.current = new IntersectionObserver(handleIntersect, {
+      root: null, // viewport를 root로 설정
+      rootMargin: "0px", // root와 대상 요소 사이의 여백 설정
+      threshold: 1.0, // 요소의 100%가 보일 때 트리거
+    });
+
+    const currentObserver = observer.current;
+    const targetElement = targetRef.current;
+
+    if (currentObserver && targetElement) {
+      currentObserver.observe(targetElement);
+    }
+
+    return () => {
+      if (currentObserver && targetElement) {
+        currentObserver.unobserve(targetElement);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (isEnd) {
+      onScrollEnd();
+      setIsEnd(false);
+    }
+  }, [isEnd, onScrollEnd]);
+
+  return targetRef;
+}

From 604194987a2a66f6089aef40ffd232d9b45085f2 Mon Sep 17 00:00:00 2001
From: KKangHHee <skh8609@gmail.com>
Date: Fri, 9 Aug 2024 21:59:07 +0900
Subject: [PATCH 5/7] =?UTF-8?q?Docs:=20=EB=AC=B4=ED=95=9C=20=EC=8A=A4?=
 =?UTF-8?q?=ED=81=AC=EB=A1=A4=20=EC=A0=81=EC=9A=A9(=EB=8C=93=EA=B8=80,=20?=
 =?UTF-8?q?=EA=B2=8C=EC=8B=9C=EA=B8=80)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../molecules/commentList/CommentList.tsx     | 39 ++++++++++-----
 src/features/board/components/Board.css       |  2 +-
 src/features/board/components/Board.tsx       | 48 +++++++++++--------
 src/features/board/components/BoardDetail.css |  3 +-
 src/features/board/components/BoardList.tsx   |  6 +--
 src/hook/comment/useCommentsQuery.ts          | 33 ++++++-------
 src/hook/post/usePostListQuery.ts             | 31 ++++++------
 7 files changed, 90 insertions(+), 72 deletions(-)

diff --git a/src/components/molecules/commentList/CommentList.tsx b/src/components/molecules/commentList/CommentList.tsx
index fde9bbb..93d084b 100644
--- a/src/components/molecules/commentList/CommentList.tsx
+++ b/src/components/molecules/commentList/CommentList.tsx
@@ -4,14 +4,17 @@ import { Text } from "@/components/atoms/text";
 import useCommentsQuery from "@/hook/comment/useCommentsQuery";
 import { CommentsListProps } from "@/types/comment";
 import { FormatClubId, FormatPostId } from "@/utils/extractPathElements";
+import { useScrollHandler } from "@/utils/useScrollHandler";
 import React, { useImperativeHandle, useState } from "react";
 export const CommentList = React.forwardRef(
   ({ commentCount }: CommentsListProps, ref) => {
-    const { data: commentList } = useCommentsQuery({
+    const {
+      data: commentList,
+      fetchNextPage,
+      hasNextPage,
+    } = useCommentsQuery({
       clubId: FormatClubId(),
       postId: FormatPostId(),
-      size: 100,
-      page: 0,
     });
     const [targetComment, setTargetComment] = useState<undefined | number>(
       undefined
@@ -22,9 +25,14 @@ export const CommentList = React.forwardRef(
     const handleOffTargetComment = () => {
       setTargetComment(undefined);
     };
+    const handleMoreNextComment = () => {
+      if (hasNextPage) fetchNextPage();
+    };
+    const targetRef = useScrollHandler(handleMoreNextComment);
     useImperativeHandle(ref, () => ({
       handleOffTargetComment: () => handleOffTargetComment(),
     })); //부모 컴포넌트로 토스
+
     return (
       <>
         <div className="board__detail__comment__warpper" />
@@ -35,16 +43,21 @@ export const CommentList = React.forwardRef(
             </Text>
           </div>
           <div>
-            {commentList?.data.content &&
-              commentList.data.content.slice().map((comment, index: number) => (
-                <div key={index}>
-                  <CommentItem
-                    item={comment}
-                    onClick={handleTargetComment}
-                    targetCommentId={targetComment}
-                  />
-                </div>
-              ))}
+            {commentList?.pages.flatMap((page) => page.content) &&
+              commentList?.pages
+                .flatMap((page) => page.content)
+                .slice()
+                .map((comment, index: number) => (
+                  <div key={index}>
+                    <CommentItem
+                      item={comment}
+                      onClick={handleTargetComment}
+                      targetCommentId={targetComment}
+                    />
+                  </div>
+                ))}
+            <div ref={targetRef} style={{ height: "1px" }} />
+            {/* 해당을 통해 끝라인 확인 */}
           </div>
         </div>
         <CommentInput parentId={targetComment} />
diff --git a/src/features/board/components/Board.css b/src/features/board/components/Board.css
index 9af3d36..b198a52 100644
--- a/src/features/board/components/Board.css
+++ b/src/features/board/components/Board.css
@@ -1,7 +1,7 @@
 /* 5.5rem: bottom에 대한 값 */
 .board {
   padding: 5rem 0; 
-  height: calc(100vh - 5.5rem);
+  /* height: calc(100vh - 5.5rem); */
   display: flex;
   flex-direction: column;
   align-items: center;
diff --git a/src/features/board/components/Board.tsx b/src/features/board/components/Board.tsx
index 8224384..039659d 100644
--- a/src/features/board/components/Board.tsx
+++ b/src/features/board/components/Board.tsx
@@ -2,6 +2,7 @@ import { Floating } from "@/components/atoms/floating";
 import { ICONS } from "@/constants/images";
 import usePostListQuery from "@/hook/post/usePostListQuery";
 import { FormatPostCategory } from "@/utils/extractPathElements";
+import { useScrollHandler } from "@/utils/useScrollHandler";
 import { usePathname, useRouter } from "next/navigation";
 import React from "react";
 import "./Board.css";
@@ -11,10 +12,8 @@ const Board = () => {
   const router = useRouter();
   const pathname = usePathname();
   const category = FormatPostCategory() === "notice" ? "NOTICE" : "FREE";
-  const { data } = usePostListQuery({
+  const { data, fetchNextPage, hasNextPage } = usePostListQuery({
     category: category,
-    page: 0,
-    size: 10,
   });
   const inPlusStyle: React.CSSProperties = {
     width: "1.625rem",
@@ -24,25 +23,36 @@ const Board = () => {
   const handleRouteBoard = () => {
     router.push(`${pathname}/regis`);
   };
+  const handleMoreContent = () => {
+    if (hasNextPage) fetchNextPage();
+  };
+  const targetRef = useScrollHandler(handleMoreContent);
   return (
     <div className="board">
-      <div className="board__content__list__top"/>
+      <div className="board__content__list__top" />
       <div className="board__content__meeting">
-        {data?.data.content.map((item, index) => (
-          <BoardItem
-            key={index}
-            id={item.postId}
-            title={item.postTitle}
-            content={item.postContent}
-            createdAt={item.createdAt}
-            commentCount={item.commentCount}
-            // contentImgs={item.uploadImage}
-            contentImgs={Object.values(item.uploadImage)[0]}
-            hearts={item.postLikeCount}
-            isHeart={item.isLiked}
-            writer={{ name: item.writerName, profile: item.writerProfileImage }}
-          />
-        ))}
+        {data?.pages
+          .flatMap((page) => page.content)
+          .map((item, index) => (
+            <BoardItem
+              key={index}
+              id={item.postId}
+              title={item.postTitle}
+              content={item.postContent}
+              createdAt={item.createdAt}
+              commentCount={item.commentCount}
+              // contentImgs={item.uploadImage}
+              contentImgs={Object.values(item.uploadImage)[0]}
+              hearts={item.postLikeCount}
+              isHeart={item.isLiked}
+              writer={{
+                name: item.writerName,
+                profile: item.writerProfileImage,
+              }}
+            />
+          ))}
+        <div ref={targetRef} style={{ height: "1px" }} />
+        {/* 해당을 통해 끝라인 확인 */}
       </div>
       <div className="board__content__floating">
         <Floating
diff --git a/src/features/board/components/BoardDetail.css b/src/features/board/components/BoardDetail.css
index 1cbdbac..cc5b129 100644
--- a/src/features/board/components/BoardDetail.css
+++ b/src/features/board/components/BoardDetail.css
@@ -1,6 +1,7 @@
 .board__detail__wrapper {
   overflow-y: auto;
-  padding: 5rem 0;
+  height: 100%;
+  padding: 5rem 0 0 0;
 }
 .board__detail__wrapper::-webkit-scrollbar {
   display: none;
diff --git a/src/features/board/components/BoardList.tsx b/src/features/board/components/BoardList.tsx
index 1f20803..b2bc4f5 100644
--- a/src/features/board/components/BoardList.tsx
+++ b/src/features/board/components/BoardList.tsx
@@ -7,12 +7,10 @@ import BoardListBox from "./BoardListBox";
 const BoardList = () => {
   const { data: noticeList } = usePostListQuery({
     category: "NOTICE",
-    page: 0,
     size: 7,
   });
   const { data: freeList } = usePostListQuery({
     category: "FREE",
-    page: 0,
     size: 7,
   });
   return (
@@ -21,12 +19,12 @@ const BoardList = () => {
       <BoardListBox
         boardType={"공지"}
         boardTypeAddress="notice"
-        data={noticeList?.data.content}
+        data={noticeList?.pages.flatMap((page) => page.content)}
       />
       <BoardListBox
         boardType={"자유"}
         boardTypeAddress="free"
-        data={freeList?.data.content}
+        data={freeList?.pages.flatMap((page) => page.content)}
       />
     </div>
   );
diff --git a/src/hook/comment/useCommentsQuery.ts b/src/hook/comment/useCommentsQuery.ts
index 5140d17..98a20c5 100644
--- a/src/hook/comment/useCommentsQuery.ts
+++ b/src/hook/comment/useCommentsQuery.ts
@@ -1,28 +1,23 @@
 import { http } from "@/apis/http";
 import { commentKeys } from "@/constants/keys/postKey";
-import { CommonRes } from "@/types";
+import { CommonPage, CommonRes } from "@/types";
 import { Comment } from "@/types/comment";
 import { PostDetailProps } from "@/types/post";
-import { useQuery } from "@tanstack/react-query";
+import { useCustomInfiniteQuery } from "@/utils/useCustomInfiniteQuery";
 
-interface commentListProps extends PostDetailProps {
-  size: number;
-  page: number;
-}
+export const useCommentsQuery = ({ clubId, postId }: PostDetailProps) => {
+  const size = 10;
 
-export const useCommentsQuery = ({
-  clubId,
-  postId,
-  size,
-  page,
-}: commentListProps) => {
-  return useQuery<CommonRes<Comment>>({
+  const getCommentList = async (page: number): Promise<CommonPage<Comment>> => {
+    const response = await http.get<CommonRes<Comment>>(
+      `/clubs/${clubId}/comment/${postId}?size=${size}&page=${page}`
+    );
+    const data = await response;
+    return data.data;
+  };
+  return useCustomInfiniteQuery<Comment>({
     queryKey: [commentKeys.comment({ clubId, postId })],
-    queryFn: async () =>
-      await http.get<CommonRes<Comment>>(
-        `/clubs/${clubId}/comment/${postId}?size=${size}&page=${page}`
-      ),
+    customQueryFn: getCommentList,
   });
 };
-
-export default useCommentsQuery;
+export default useCommentsQuery;
\ No newline at end of file
diff --git a/src/hook/post/usePostListQuery.ts b/src/hook/post/usePostListQuery.ts
index e988376..de37018 100644
--- a/src/hook/post/usePostListQuery.ts
+++ b/src/hook/post/usePostListQuery.ts
@@ -1,39 +1,40 @@
 "use client";
-
 import { http } from "@/apis/http";
-import { CommonRes } from "@/types";
+import { CommonPage, CommonRes } from "@/types";
 import { PostList } from "@/types/post";
 import { FormatClubId } from "@/utils/extractPathElements";
-import { useQuery } from "@tanstack/react-query";
+import { useCustomInfiniteQuery } from "@/utils/useCustomInfiniteQuery";
 
 interface props {
   keyword?: string;
   category: "NOTICE" | "FREE";
   startData?: string;
   endData?: string;
-  page: number;
-  size: number;
+  size?: number;
   sort?: string;
 }
+
 export const usePostListQuery = ({
   keyword = "",
   category,
   startData,
   endData,
-  page,
-  size,
+  size = 10,
   sort = "string",
 }: props) => {
   const clubId = FormatClubId();
-  const keywordUrl = `/clubs/${clubId}/posts?keyword=${keyword}&sortBy=createAt&category=${category}&page=${page}&size=${size}`;
-  const datePullUrl = `/clubs/${clubId}/posts?keyword=${keyword}&startDate=${startData}&endData=${endData}&sortBy=createAt&page=${page}&size=${size}`;
-  return useQuery<CommonRes<PostList>>({
-    queryKey: ["postList", { clubId, category, size, page, sort }],
-    queryFn: async () =>
-      await http.get<CommonRes<PostList>>(keywordUrl, {
-        headers: { accept: "*/*" },
-      }),
+  const getPostList = async (page: number): Promise<CommonPage<PostList>> => {
+    const response = await http.get<CommonRes<PostList>>(
+      `/clubs/${clubId}/posts?keyword=${keyword}&sortBy=createAt&category=${category}&page=${page}&size=${size}`
+    );
+    const data = await response;
+    return data.data;
+  };
+  return useCustomInfiniteQuery<PostList>({
+    queryKey: ["postList", { clubId, category, size, sort }],
+    customQueryFn: getPostList,
   });
 };
 
+
 export default usePostListQuery;

From 298f4d17f3bf275b550f3a37622b8636a0a9d52b Mon Sep 17 00:00:00 2001
From: happppi <102276917+hhbb0081@users.noreply.github.com>
Date: Fri, 9 Aug 2024 23:11:19 +0900
Subject: [PATCH 6/7] =?UTF-8?q?Feat:=20=EB=82=B4=EA=B0=80=20=EC=93=B4=20?=
 =?UTF-8?q?=EB=8C=93=EA=B8=80=20api=20=EC=97=B0=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../info/board/comment/InfoBoardComment.tsx   | 35 +++++++++-------
 .../components/RealnameOnboarding.tsx         | 37 +++++++++++++----
 src/hook/info/useMyCommentQuery.ts            |  9 ++--
 src/hook/member/useMemberProfileMutation.ts   | 35 ++++++++++++++++
 src/types/info/types.ts                       | 41 +++++++++++++++++++
 5 files changed, 128 insertions(+), 29 deletions(-)
 create mode 100644 src/hook/member/useMemberProfileMutation.ts

diff --git a/src/features/info/board/comment/InfoBoardComment.tsx b/src/features/info/board/comment/InfoBoardComment.tsx
index 9f7918d..054cfce 100644
--- a/src/features/info/board/comment/InfoBoardComment.tsx
+++ b/src/features/info/board/comment/InfoBoardComment.tsx
@@ -25,21 +25,26 @@ export const InfoBoardComment = () => {
                 <div>Loading...</div> :
                 (
                     <div className="infoBoard">
-                        {commentInfo?.data?.content?.map((item: any) => (
-                            <BoardItem
-                                key={item.postId}
-                                // boardAddress={boardTypeAddress}
-                                id={item.postId}
-                                title={item.postTitle}
-                                content={item.postContent}
-                                createdAt={item.createdAt}
-                                commentCount={item.commentCount}
-                                contentImgs={item.uploadImage ?? []}
-                                hearts={item.postLikeCount}
-                                isHeart={item.isLiked}
-                                writer={{ name: item.writerName, profile: item.writerProfileImage ?? IMAGES.profile }}
-                            />
-                        ))}
+                        {commentInfo
+                            ?.data
+                            ?.myCommentList
+                            ?.content
+                            ?.map((item: any) => (
+                                <BoardItem
+                                    key={item.post.postId}
+                                    // boardAddress={boardTypeAddress}
+                                    id={item.post.postId}
+                                    title={item.post.postTitle}
+                                    content={item.post.postContent}
+                                    createdAt={item.post.createdAt}
+                                    commentCount={item.post.commentCount}
+                                    contentImgs={item.post.uploadImage ?? IMAGES.profile}
+                                    hearts={item.post.postLikeCount}
+                                    isHeart={item.post.isLiked}
+                                    writer={{ name: item.post.writerName, profile: item.post.writerProfileImage ?? IMAGES.profile }}
+                                />
+                            ))
+                        }
                     </div>
                 )
             }
diff --git a/src/features/user/onboarding/components/RealnameOnboarding.tsx b/src/features/user/onboarding/components/RealnameOnboarding.tsx
index bceb363..f57a315 100644
--- a/src/features/user/onboarding/components/RealnameOnboarding.tsx
+++ b/src/features/user/onboarding/components/RealnameOnboarding.tsx
@@ -3,27 +3,46 @@ import { FileUpload } from "@/components/atoms/fileUpload";
 import { Text } from "@/components/atoms/text";
 import { InputBox } from "@/components/molecules/inputBox";
 import { Wrapper } from "@/components/organisms/Wrapper";
+import { useMemberProfileMutation } from "@/hook/member/useMemberProfileMutation";
 import { COLORS } from "@/styles";
-import React from "react";
+import React, { useState } from "react";
 import { useForm } from "react-hook-form";
 import { ONBOARDING_BTN, ONBOARDING_INPUT_ARR } from "../constants/const";
 
 interface FormData {
-    name: string;
-    introduce: string;
-    emailPublic: boolean;
-    mobilePublic: boolean;
+    memberName: string;
+    memberIntro: string;
+    profileImage: string | File;
+    isEmailPublic: boolean;
+    isPhonePublic: boolean;
 }
 
 const RealnameOnboarding = () => {
-    const methods = useForm<FormData>({
-        mode: 'onChange'
+    const { control, handleSubmit, setValue } =
+    useForm<FormData>({
+      mode: "onChange",
+      defaultValues: {
+        memberName: '',
+        memberIntro: '',
+        profileImage: '',
+        isEmailPublic: false,
+        isPhonePublic: false,
+      }
     });
+    const [imageUrl, setImageUrl] = useState<string | undefined>();
+    const handleChangeImage = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const files = e.target.files;
+        if (!files || files.length === 0) return;
+        const selectedFile = files[0];
+        const newImageUrl = URL.createObjectURL(selectedFile);
+        setImageUrl(newImageUrl);
+        setValue("profileImage", selectedFile);
+    };
 
-    const { handleSubmit, control } = methods;
-
+    const { mutate } = useMemberProfileMutation()
     const submitOnboarding = (data: FormData) => {
         console.log(data);
+        // mutate(data);
     }
     return (
         <form onSubmit={handleSubmit(submitOnboarding)}>
diff --git a/src/hook/info/useMyCommentQuery.ts b/src/hook/info/useMyCommentQuery.ts
index e7ec6b4..332f59f 100644
--- a/src/hook/info/useMyCommentQuery.ts
+++ b/src/hook/info/useMyCommentQuery.ts
@@ -1,9 +1,8 @@
 import { http } from "@/apis/http";
-import { CommonRes } from "@/types";
-import { MyPostProps } from "@/types/info";
-import { PostList } from "@/types/post";
+import { MyCommentWrapperType, MyPostProps } from "@/types/info";
 import { FormatClubId } from "@/utils/extractPathElements";
 import { useQuery } from "@tanstack/react-query";
+import { AxiosResponse } from "axios";
 
 // 내가 쓴 댓글
 export const useMyCommentQuery = ({
@@ -13,10 +12,10 @@ export const useMyCommentQuery = ({
 }: MyPostProps) => {
   const clubId = FormatClubId();
   const myPostUrl = `/clubs/${clubId}/posts/my-comment-list?page=${page}&size=${size}`;
-  return useQuery<CommonRes<PostList>>({
+  return useQuery<AxiosResponse<MyCommentWrapperType>>({
     queryKey: ["postMyComment", { clubId, size, page, sort }],
     queryFn: async () => 
-      await http.get<CommonRes<PostList>>(myPostUrl)
+      await http.get<AxiosResponse<MyCommentWrapperType>>(myPostUrl)
   });
 };
 
diff --git a/src/hook/member/useMemberProfileMutation.ts b/src/hook/member/useMemberProfileMutation.ts
new file mode 100644
index 0000000..adf182c
--- /dev/null
+++ b/src/hook/member/useMemberProfileMutation.ts
@@ -0,0 +1,35 @@
+import { http } from "@/apis/http";
+import { FormatClubId } from "@/utils/extractPathElements";
+import useToast from "@/utils/useToast";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useRouter } from "next/navigation";
+
+export function useMemberProfileMutation() {
+  const router = useRouter();
+  const { showToast } = useToast();
+  const queryClient = useQueryClient();
+  const clubId = FormatClubId();
+
+  return useMutation({
+    mutationFn: (data: FormData) =>
+      http.post(`/clubs/${clubId}/member/profile`, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["clubMemberList", [clubId]],
+      });
+      console.log("프로필 등록 성공");
+      showToast({
+        message: "프로필 등록 성공",
+        type: "success",
+      });
+      router.back();
+    },
+    onError: (error) => {
+      console.log("프로필 등록 실패", error);
+      showToast({
+        message: "프로필 등록 실패",
+        type: "error",
+      });
+    },
+  });
+}
diff --git a/src/types/info/types.ts b/src/types/info/types.ts
index a8483e9..3d2e920 100644
--- a/src/types/info/types.ts
+++ b/src/types/info/types.ts
@@ -1,3 +1,5 @@
+import { CommonPage } from "../types";
+
 export interface MyPostProps {
   clubId?: number;
   userId?: number;
@@ -41,4 +43,43 @@ export interface ClubJoin {
 export interface JoinRequestParam {
   clubId: number;
   clubJoinRequestId?: number;
+}
+
+export interface MyCommentWrapperType {
+  clubMemberImage: string;
+  memberId: number;
+  memberName: string;
+  myCommentList: CommonPage<MyCommentContent>;
+}
+
+export interface MyCommentContent {
+  comment: MyCommentDetail;
+  post: MyCommentPost;
+}
+
+export interface MyCommentDetail {
+  commentId: number;
+  content: string;
+  createAt: string;
+  deleteAt?: string;
+  parentId?: number;
+  postId: number;
+  profileImage: string;
+  updateAt: string;
+  writerId: number;
+  writerName: string;
+}
+
+export interface MyCommentPost {
+  commentCount: number;
+  createdAt: string;
+  isLiked: boolean;
+  postCategory: "NOTICE" | "FREE";
+  postContent: string;
+  postId: number;
+  postLikeCount: number;
+  postTitle: string;
+  uploadImage?: {};
+  writerName: string;
+  writerProfileImage: string;
 }
\ No newline at end of file

From 876e87b824121a36ae672855fa1208eb7e6351d5 Mon Sep 17 00:00:00 2001
From: happppi <102276917+hhbb0081@users.noreply.github.com>
Date: Mon, 12 Aug 2024 22:52:04 +0900
Subject: [PATCH 7/7] =?UTF-8?q?Feat:=20=EB=AA=A8=EC=9E=84=20=EC=A0=95?=
 =?UTF-8?q?=EB=B3=B4=20=EC=88=98=EC=A0=95=20custom=20hook=20(useClubsInfoM?=
 =?UTF-8?q?utation)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modify/components/ClubInfoModifyForm.tsx  |  48 +++++---
 src/hook/club/ClubInfoModifyForm.ts           |  19 ++++
 src/hook/club/useClubsInfoMutation.ts         | 103 ++++++++++++++++++
 src/types/club/types.ts                       |  10 ++
 4 files changed, 166 insertions(+), 14 deletions(-)
 create mode 100644 src/hook/club/ClubInfoModifyForm.ts
 create mode 100644 src/hook/club/useClubsInfoMutation.ts

diff --git a/src/features/info/club/modify/components/ClubInfoModifyForm.tsx b/src/features/info/club/modify/components/ClubInfoModifyForm.tsx
index ce211af..0862e49 100644
--- a/src/features/info/club/modify/components/ClubInfoModifyForm.tsx
+++ b/src/features/info/club/modify/components/ClubInfoModifyForm.tsx
@@ -8,23 +8,24 @@ import { Wrapper } from "@/components/organisms/Wrapper";
 import { useClubsInfoQuery } from "@/hook/club/useClubsInfoQuery";
 import { COLORS } from "@/styles";
 import { FormatClubId } from "@/utils/extractPathElements";
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { CLUBINFO_MODIFY_INPUT_ARR } from "../constants";
 
+import { useClubsInfoMutation } from "@/hook/club/useClubsInfoMutation";
 import "../components/ClubInfoModify.css";
 
 interface ImageType {
-  url: string;
-  imageFile: File;
+  url?: string;
+  imageFile?: File;
 };
 
-interface FormData {
-  clubName?: string;
-  clubIntro?: string;
-  contactMeans?: string;
-  link?: string;
-  clubProfileImage?: string | ImageType;
+export interface ClubModifyFormData {
+  clubName: string;
+  clubIntro: string;
+  contactMeans: string;
+  link: string;
+  clubProfileImage: string | File;
 }
 
 const ClubInfoModifyForm = () => {
@@ -38,7 +39,7 @@ const ClubInfoModifyForm = () => {
 
     const defaultValues = infoData?.data;
 
-    const methods = useForm<FormData>({
+    const methods = useForm<ClubModifyFormData>({
       mode: 'onChange',
       defaultValues: {
         clubName: defaultValues?.clubName || '',
@@ -49,9 +50,20 @@ const ClubInfoModifyForm = () => {
       }
     });
 
-    const { handleSubmit, control, reset } = methods;
+    const { handleSubmit, control, reset, setValue } = methods;
+
+    const [imageUrl, setImageUrl] = useState<string | undefined>();
+    const handleChangeImage = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const files = e.target.files;
+      if (!files || files.length === 0) return;
+      const selectedFile = files[0];
+      const newImageUrl = URL.createObjectURL(selectedFile);
+      setImageUrl(newImageUrl);
+      setValue("clubProfileImage", selectedFile);
+    };
 
     useEffect(() => {
+      if (infoData?.data === undefined) return;
       if (defaultValues) {
         reset({
           clubName: defaultValues.clubName,
@@ -60,11 +72,19 @@ const ClubInfoModifyForm = () => {
           link: defaultValues.link,
           clubProfileImage: defaultValues?.clubProfileImage
         });
-      }
-    }, [defaultValues, reset]);
+        setImageUrl(defaultValues.clubProfileImage);
+      };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [infoData]);
 
-    const submitModifyInfo = (data: FormData) => {
+    const { mutate } = useClubsInfoMutation()
+    const submitModifyInfo = (data: ClubModifyFormData) => {
+      const imageIsChanged = infoData?.data.clubProfileImage !== data.clubProfileImage;
       console.log(data);
+      mutate({
+        data: data,
+        imageIsChanged: imageIsChanged
+      });
     }
 
     return (
diff --git a/src/hook/club/ClubInfoModifyForm.ts b/src/hook/club/ClubInfoModifyForm.ts
new file mode 100644
index 0000000..8ba7ab5
--- /dev/null
+++ b/src/hook/club/ClubInfoModifyForm.ts
@@ -0,0 +1,19 @@
+// import { MemberProfileUpdata } from "@/types/member";
+
+// export const ClubInfoModifyForm = (
+//   propData: MemberProfileUpdata,
+//   isChange: boolean
+// ) => {
+//   const resData = new FormData();
+//   resData.append("clubName", propData.clubName);
+//   resData.append("clubIntro", propData.clubIntro);
+//   resData.append("contactMeans", propData.contactMeans);
+//   resData.append("link", propData.link);
+//   if (isChange) {
+//     resData.append("ImageIsChanged", String(true));
+//     resData.append("profileImage", propData.profileImage);
+//   } else {
+//     resData.append("ImageIsChanged", String(false));
+//   }
+//   return resData;
+// };
diff --git a/src/hook/club/useClubsInfoMutation.ts b/src/hook/club/useClubsInfoMutation.ts
new file mode 100644
index 0000000..501a0e3
--- /dev/null
+++ b/src/hook/club/useClubsInfoMutation.ts
@@ -0,0 +1,103 @@
+import { http } from "@/apis/http";
+import { ClubModifyFormData } from "@/features/info/club/modify/components/ClubInfoModifyForm";
+import { FormatClubId } from "@/utils/extractPathElements";
+import useToast from "@/utils/useToast";
+import { useMutation } from "@tanstack/react-query";
+import { AxiosError, AxiosResponse } from "axios";
+import { useRouter } from "next/navigation";
+
+interface ModifyClubProps {
+  data: ClubModifyFormData,
+  imageIsChanged: boolean;
+};
+
+// 모임 수정 (/clubs)
+async function modifyClubs({
+  data,
+  imageIsChanged
+}: ModifyClubProps
+): Promise<AxiosResponse<string>> {
+  const resData = new FormData();
+  resData.append(
+    "request",
+    new Blob(
+      [
+        JSON.stringify({
+          clubName: data.clubName,
+          clubIntro: data.clubIntro,
+          contactMeans: data.contactMeans,
+          link: data.link,
+          imageIsChanged: imageIsChanged
+        }),
+      ],
+      { type: "application/json" }
+    )
+  );
+  if (typeof data.clubProfileImage === "object" && "imageFile" in data.clubProfileImage)
+    resData.append("profileImage", String(data.clubProfileImage));
+
+  const config = {
+    headers: {
+      accept: "*/*",
+      "Content-Type": "multipart/form-data",
+    },
+  };
+  try {
+    const clubId = FormatClubId();
+    const res = await http.patch<AxiosResponse<string>>(`/clubs/${clubId}/info`, resData, config);
+    console.log(res);
+    if (res.status) {
+      return res;
+    } else {
+      throw new Error("Failed to create club");
+    }
+  } catch (error: any) {
+    alert(error.response.data.errors[0].message);
+    console.error("Error creating board:", error);
+    throw error;
+  }
+}
+
+interface UseModifyClubs {
+  mutate: ({
+    data,
+    imageIsChanged
+  } : ModifyClubProps
+  ) => void;
+}
+
+// interface ClubResType {
+//   clubId: number;
+// }
+
+export function useClubsInfoMutation(): UseModifyClubs {
+  const router = useRouter();
+  const { showToast } = useToast();
+
+  const { mutate } = useMutation<AxiosResponse<string>, Error, ModifyClubProps>({
+    mutationFn: modifyClubs,
+    onSuccess: (res) => {
+      const clubId = FormatClubId();
+      if (res.status === 200) {
+        showToast({
+          message: "모임 수정이 완료되었습니다.",
+          type: "success"
+        });
+        console.log(res);
+        router.push(`/info/${clubId}`);
+      }
+    },
+    onError: (error) => {
+      if ((error as AxiosError).isAxiosError) {
+        const axiosError = error as AxiosError<any>;
+        if (axiosError.response) {
+          showToast({
+            message: `${axiosError.response.data.message.errors[0].message}`,
+            type: 'error'
+          });
+        }
+      }
+    },
+  });
+  return { mutate };
+}
diff --git a/src/types/club/types.ts b/src/types/club/types.ts
index c7e80e5..ed3dc4d 100644
--- a/src/types/club/types.ts
+++ b/src/types/club/types.ts
@@ -72,3 +72,13 @@ export interface ClubInfos {
   link?: string;
   privateCode?: string;
 }
+
+// 클럽 수정
+
+export interface ClubModifyFormData {
+  clubName: string;
+  clubIntro: string;
+  contactMeans: string;
+  link: string;
+  profileImage?: imageState;
+}
\ No newline at end of file