feat :: member

src/components/home/approve/approveTable/index.tsx

@@ -2,29 +2,22 @@
 import Image from "next/image";
 import * as S from "./style";
 import MoreImage from "@/assets/img/home/ic_round-more-horiz.svg";
+import { useGetMemberList } from "@/queries/Member/Member.query";
+import { USER_STATUS } from "@/constant/userStatus/userStatus.constant";
 
 const ApproveTable = () => {
+  const {data} = useGetMemberList(USER_STATUS[1]);
+
   return (
     <>
       <S.TBody>
+        {data?.data.map((approveMember, idx)=>(
         <S.TR>
-          <S.TD>신민호</S.TD>
-          <S.TD>신민호</S.TD>
-          <S.TD>신민호</S.TD>
-          <Image src={MoreImage} alt="더보기" />
-        </S.TR>
-        <S.TR>
-          <S.TD>신민호</S.TD>
-          <S.TD>신민호</S.TD>
-          <S.TD>신민호</S.TD>
-          <Image src={MoreImage} alt="더보기" />
-        </S.TR>
-        <S.TR>
-          <S.TD>신민호</S.TD>
-          <S.TD>신민호</S.TD>
-          <S.TD>신민호</S.TD>
+          <S.TD>{approveMember.name}</S.TD>
           <Image src={MoreImage} alt="더보기" />
         </S.TR>
+        ))}
+
       </S.TBody>
     </>
   );

src/components/home/member/index.tsx

@@ -7,15 +7,31 @@ import { useMemberSearchStore } from "@/store/member";
 import SkeletonComponent from "@/components/common/skleton/index";
 import ErrorBoundary from "@/components/common/error";
 import { Suspense, useState } from "react";
+import UseMember from "@/hooks/Home/member/useMember";
+
 const Member = () => {
-  const { memberSearch, setMemberSearch } = useMemberSearchStore();
 
+  const { memberSearch, setMemberSearch } = useMemberSearchStore();
+const {selectClick,hadleSelect}=UseMember();
   return (
     <S.Main>
       <S.member>
-        <S.searchBox>
+        <S.headerBox>
+          <S.selectBox>
+            <S.selectMain value={selectClick} onChange={hadleSelect}>
+            <option value="COOMMON">
+              멤버조회
+            </option>
+            <option value="REJECT">
+              신고멤버
+            </option>
+            <option value="PENDING">
+              대기멤버
+            </option>
+            </S.selectMain>
+          </S.selectBox>
           <SearchBar onChange={setMemberSearch} value={memberSearch} />
-        </S.searchBox>
+        </S.headerBox>
         <table>
           <Table constant={MEMBER_TABLE_ITEMS} />
         </table>

src/components/home/member/memberTable/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+import React from "react";
 import defaultImg from "@/assets/img/home/Avatar1.png";
 import Image from "next/image";
 import * as S from "./style";
@@ -12,21 +14,17 @@ import MoreButton from "../../moreaction/index";
 import { USER_STATUS } from "@/constant/userStatus/userStatus.constant";
 
 const MemberTable = () => {
-  const memberListQuery = useGetMemberList(USER_STATUS[0]);
-  const searchValue = useMemberSearchStore();
   const { ...useMember } = UseMember();
-
-  if (!memberListQuery) {
-    // 데이터가 로딩 중일 때 처리할 내용
-    return <div>Loading...</div>;
-  }
-
-  const { data } = memberListQuery as MemeberResponse;
+  console.log(useMember.selectClick);
+
+  const {data} = useGetMemberList(useMember.selectClick);
+  const searchValue = useMemberSearchStore();
+
 
   return (
     <>
       <S.Tbody>
-        {FilterMember(searchValue, data ?? []).map((member: MemberType, idx) => (
+        {data?.data.map((member: MemberType, idx) => (
           <S.TR key={member.userId}>
             <S.TD>
               <Image src={defaultImg} alt="프로필사진" />

src/components/home/member/style.ts

@@ -14,11 +14,38 @@ export const member = styled.div`
   width: 95%;
   height: 100%;
 `;
-export const searchBox = styled.div`
+export const selectBox = styled.div`
+  display: flex;
+  gap: 0px;
+  -webkit-box-pack: start;
+  justify-content: start;
+  align-items: flex-start;
+  flex-direction: row;
+`
+export const selectMain = styled.select`
+    width: 100px;
+    height: 35px;
+    display: flex;
+    -webkit-box-align: center;
+    align-items: center;
+    padding: 0px 8px;
+    border: 1px solid rgb(222, 226, 230);
+    border-radius: 5px;
+    position: relative;
+    column-gap: 15px;
+    cursor: pointer;
+    margin-bottom: 30px;
+    :focus{
+      outline: none;
+    }
+`
+
+export const headerBox = styled.div`
   display: flex;
   align-items: flex-end;
   width: 100%;
   height: 200px;
+  gap: 20px;
 `;
 export const memberMain = styled.div`
   display: flex;

src/components/home/table/style.ts

@@ -4,6 +4,7 @@ export const memberThead = styled.thead`
   width: 100%;
   height: 50px;
   border-top: 1px solid rgb(222, 226, 230);
+  border-bottom: 1px solid rgb(220, 221, 222);
 `;
 export const memberTableTr = styled.tr<{ customStyle?: CSSObject }>`
   width: 83%;
@@ -14,7 +15,6 @@ export const memberTableTr = styled.tr<{ customStyle?: CSSObject }>`
   align-items: center;
   justify-content: space-between;
   border-top: 0.5px solid rgb(220, 221, 222);
-  border-bottom: 1px solid rgb(220, 221, 222);
 
   ${({ customStyle }) => customStyle}
 `;

src/constant/userStatus/userStatus.constant.ts

@@ -1 +1 @@
-export const USER_STATUS = ["COMMON", "PENDING", "REJECT"]
+export const USER_STATUS = ["COMMON", "REJECT", "PENDING"]

src/hooks/Home/member/useMember.ts

@@ -1,6 +1,10 @@
 import { useState } from "react";
-
+import { USER_STATUS } from "@/constant/userStatus/userStatus.constant";
 import { MemberType } from "@/types/member/member.type";
+import { useQueryClient } from "@tanstack/react-query";
+import { DearQueryKey } from "@/queries/queryKeys";
+import { useGetMemberList } from "@/queries/Member/Member.query";
+import { MemeberResponse } from "@/types/member/member.type";
 interface MemberProps {
   idx: number;
   member: MemberType;
@@ -10,19 +14,29 @@ const UseMember = () => {
   const [moreButton, setMoreButton] = useState(false);
   const [buttonId, setButtonId] = useState<number>(0);
   const [user, setUser] = useState<MemberType>();
+  const [selectClick, setSelectClick] = useState(USER_STATUS[0]);
+  const queryClient = useQueryClient();
+
 
   const memberBanSetting = ({ idx, member }: MemberProps) => {
     setButtonId(idx);
     setMoreButton((prev) => !prev);
     setUser(member);
   };
+  const hadleSelect = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>):void=>{
+    setSelectClick(e.target.value);
+    queryClient.invalidateQueries({queryKey:[DearQueryKey.member.getMember]})
+
+  }
   const MemberSettingDenial = () => {
     setMoreButton(false);
   };
 
   return {
     memberBanSetting,
     MemberSettingDenial,
+    hadleSelect,
+    selectClick,
     moreButton,
     buttonId,
   };

src/queries/Member/Member.query.ts

@@ -18,7 +18,7 @@ export const useGetMemberList = (userStatus: string) => {
     refetchInterval: 3600000, // 1시간
   });
   queryClient.invalidateQueries({queryKey:[DearQueryKey.profile.getMy]})
-  return useGetMember.data ? useGetMember.data : undefined;
+  return useGetMember;
 };
 
 export const useMemebrQuit = ( )=>{