feat :: 카테고리 분리

src/components/home/member/index.tsx

@@ -3,16 +3,13 @@ import Table from "../table/index";
 import MemberTable from "./memberTable/index";
 import { SearchBar } from "../searchBar/searchBar";
 import { MEMBER_TABLE_ITEMS } from "@/constant/member/Member.constant";
-import { useMemberSearchStore } from "@/store/member";
-import SkeletonComponent from "@/components/common/skleton/index";
-import ErrorBoundary from "@/components/common/error";
-import { Suspense, useState } from "react";
+import { useMemberSearchStore , useSelectClick} from "@/store/member";
 import UseMember from "@/hooks/Home/member/useMember";
 
 const Member = () => {
-
+  const {selectClick}=useSelectClick();
   const { memberSearch, setMemberSearch } = useMemberSearchStore();
-const {selectClick,hadleSelect}=UseMember();
+const {hadleSelect}=UseMember();
   return (
     <S.Main>
       <S.member>

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

@@ -1,11 +1,10 @@
-'use client';
 import React from "react";
 import defaultImg from "@/assets/img/home/Avatar1.png";
 import Image from "next/image";
 import * as S from "./style";
 import { MemberType, MemeberResponse } from "@/types/member/member.type";
 import { FilterMember } from "@/utils/member/FilterMember";
-import { useMemberSearchStore } from "@/store/member/index";
+import { useMemberSearchStore, useSelectClick } from "@/store/member/index";
 import { useGetMemberList } from "@/queries/Member/Member.query";
 import UseMember from "@/hooks/Home/member/useMember";
 import convertText from "@/utils/textSplit/comvertText";
@@ -15,9 +14,8 @@ import { USER_STATUS } from "@/constant/userStatus/userStatus.constant";
 
 const MemberTable = () => {
   const { ...useMember } = UseMember();
-  console.log(useMember.selectClick);
-
-  const {data} = useGetMemberList(useMember.selectClick);
+  const {selectClick} = useSelectClick();
+  const {data} = useGetMemberList(selectClick);
   const searchValue = useMemberSearchStore();
 
 

src/hooks/Home/member/useMember.ts

@@ -1,10 +1,8 @@
-import { useState } from "react";
-import { USER_STATUS } from "@/constant/userStatus/userStatus.constant";
+import { useRef, useState } from "react";
 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";
+import { useSelectClick } from "@/store/member";
 interface MemberProps {
   idx: number;
   member: MemberType;
@@ -14,9 +12,8 @@ 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 {setSelectClick} = useSelectClick();
 
   const memberBanSetting = ({ idx, member }: MemberProps) => {
     setButtonId(idx);
@@ -36,9 +33,9 @@ const UseMember = () => {
     memberBanSetting,
     MemberSettingDenial,
     hadleSelect,
-    selectClick,
     moreButton,
     buttonId,
+
   };
 };
 

src/store/member/index.ts

@@ -1,4 +1,6 @@
 import {create} from 'zustand';
+import { USER_STATUS } from "@/constant/userStatus/userStatus.constant";
+
 
 type MemberSearchState = {
     memberSearch: string;
@@ -8,4 +10,15 @@ type MemberSearchState = {
   export const useMemberSearchStore = create<MemberSearchState>((set) => ({
     memberSearch: '',
     setMemberSearch: (value) => set({ memberSearch: value }),
-  }));
+  }));
+
+
+type MemberSelectState = {
+  selectClick: string;
+  setSelectClick: (value: string) => void;
+}
+
+export const useSelectClick = create<MemberSelectState>((set)=>({
+  selectClick: USER_STATUS[0],
+  setSelectClick: (value)=> set({selectClick: value}),
+}))