zustand store

src/api/auth/auth.get.api.ts

@@ -1,10 +1,10 @@
 // import { ICommon } from '../types/common';
 import { getRequest } from '../request';
-import { IUpdateProfile } from '../types/auth';
+import { UserInfoType } from '../types/auth';
 
 /* 회원 상세정보 */
 
 export const userinfo = async () => {
-  const response = await getRequest<IUpdateProfile>('members');
+  const response = await getRequest<UserInfoType>('members');
   return response;
 };

src/api/auth/auth.post.api.ts

@@ -29,6 +29,7 @@ export const signup = async ({
     memberPhone,
     memberSmsAgree
   });
+  //retrun nll 처리를 하면 react query의 onSuccess 작동
   return response;
 };
 

src/api/types/auth.ts

@@ -31,8 +31,8 @@ export interface IUserInfo {
   memberEmail: string;
   memberName: string;
   memberJob: string;
-  memberPhone: string;
-  memberBirthDate: string;
+  memberNickName: string;
+  memberSmsAgree: string;
 }
 
 export interface IWithdraw {

src/pages/index.tsx

@@ -1,16 +1,24 @@
 // import { Inter } from 'next/font/google';
-// import { userinfo } from '@/api/auth/auth.get.api';
+import { userinfo } from '@/api/auth/auth.get.api';
 // import Layout from '@/components/layout/Layout';
+import { useMember, useSetMember } from '@/stores/user';
 import Image from 'next/image';
-// import { useEffect } from 'react';
+import { useEffect } from 'react';
+import { useQuery } from 'react-query';
 
 // const inter = Inter({ subsets: ['latin'] });
 
 export default function Home() {
-  // useEffect(() => {
-  //   userinfo();
-  // }, []);
-
+  ////////////// zustand 테스트 부분//////////////////
+  const member = useMember();
+  const { data: memberData } = useQuery('userinfo', userinfo);
+  const setmember = useSetMember();
+  useEffect(() => {
+    console.log(memberData);
+    setmember(memberData?.data);
+  }, [memberData, setmember]);
+  console.log(member);
+  /////////////////////////////////////////////////////
   return (
     <main className={`flex min-h-screen flex-col items-center justify-between p-24 `}>
       <div className=" z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
@@ -30,6 +38,10 @@ export default function Home() {
               height={24}
               priority
             />
+            {/*
+             */}
+            {/* 여기서 test */}
+            {member?.memberEmail}
           </a>
         </div>
       </div>

src/stores/user.ts

@@ -0,0 +1,38 @@
+import { IUserInfo } from '@/api/types/auth';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+/* eslint-disable no-unused-vars */
+
+interface IMember {
+  member: IUserInfo;
+  setmember: (payload: IUserInfo | undefined) => void;
+}
+
+const useMemberStore = create(
+  persist<IMember>(
+    (set) => ({
+      member: {
+        memberEmail: '',
+        memberName: '',
+        memberNickName: '',
+        memberJob: '',
+        memberSmsAgree: ''
+      },
+      setmember: (payload: IUserInfo | undefined) =>
+        set((state) => ({
+          ...state,
+          member: {
+            ...state.member,
+            ...payload
+          }
+        }))
+    }),
+    {
+      name: 'member'
+    }
+  )
+);
+
+export const useMember = () => useMemberStore((state) => state.member);
+export const useSetMember = () => useMemberStore((state) => state.setmember);