Merge pull request #136 from Onion-City/dev

Feat: 무한 스크롤 구현 && 관리자 더보기 api 연동
Onion-City · Aug 12, 2024 · 27d5064 · 27d5064
2 parents 43863b8 + f7e501e
commit 27d5064
Show file tree

Hide file tree

Showing 30 changed files with 556 additions and 181 deletions.
diff --git 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/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/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/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
@@ -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
@@ -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
@@ -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/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/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 />

diff --git 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/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 (