Merge branch 'develop' into feat/#29-work-qa

src/api/api.ts

@@ -12,6 +12,26 @@ const getInstance = async <T>(url: string): Promise<T> => {
   return response.json();
 };
 
+const postInstance = async <T, U>(url: string, data: U): Promise<T> => {
+  const response = await fetch(`${BASE_URL}${url}`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(data),
+  });
+
+  if (!response.ok) {
+    throw new Error('서버에 데이터를 전송하는 중 문제가 생겼습니다.');
+  }
+
+  return response.json();
+};
+
 export function get<T>(...args: Parameters<typeof getInstance>) {
   return getInstance<T>(args[0]);
 }
+
+export function post<T, U>(url: string, data: U) {
+  return postInstance<T, U>(url, data);
+}

src/api/queyrClient.ts

@@ -0,0 +1,40 @@
+import { MutationCache, QueryCache, QueryClient } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+import { ResponseType } from '../types/types';
+
+// [TODO] 체크 필요
+const queryClient = new QueryClient({
+  queryCache: new QueryCache({
+    onError: (error, query) => {
+      console.log('🔯 Query onError');
+      console.log(error, query.meta);
+
+      handleAxiosError(error);
+    },
+  }),
+  mutationCache: new MutationCache({
+    onError: (error, _variables, _context) => {
+      console.log('🔯 Mutation onError');
+      console.log(error);
+
+      handleAxiosError(error);
+    },
+  }),
+});
+
+function isAxiosError(error: any): error is AxiosError {
+  return (error as AxiosError).isAxiosError !== undefined;
+}
+
+function handleAxiosError(error: any) {
+  if (isAxiosError(error) && error.response) {
+    const errorCode = error.response.data as ResponseType<string>;
+    const errorMessage = (error.response.data as ResponseType<string>).message;
+
+    if (errorCode) {
+      error.message = `[${errorCode}] ${errorMessage}`;
+    }
+  }
+}
+
+export default queryClient;

src/constants/QueryKey.ts

@@ -9,4 +9,13 @@ const WORK_KEYS = {
   detail: (name: string, title: string) => [...WORK_KEYS.details(), name, title] as const,
 };
 
-export { WORK_KEYS };
+const GUEST_KEYS = {
+  all: ['guest'] as const,
+  lists: () => [...GUEST_KEYS.all, 'list'] as const,
+  list: (category: string, currentPage: number) =>
+    [...GUEST_KEYS.lists(), category, currentPage] as const,
+  details: () => [...GUEST_KEYS.all, 'detail'] as const,
+  detail: (name: string, title: string) => [...GUEST_KEYS.details(), name, title] as const,
+};
+
+export { WORK_KEYS, GUEST_KEYS };

src/hooks/mutations/guestBook/usePostGuestBook.tsx

@@ -0,0 +1,24 @@
+import { useMutation } from '@tanstack/react-query';
+import { post } from '../../../api/api';
+
+export interface IGuestBookData {
+  nickname: string;
+  content: string;
+}
+
+/**
+ *  방명록 전송
+ */
+
+export const postGuestBook = async (data: IGuestBookData) => {
+  const res = await post(`guestbook`, data);
+  return res;
+};
+
+export const usePostGuestBook = () => {
+  const GuestBookMutation = useMutation({
+    mutationFn: (data: IGuestBookData) => postGuestBook(data),
+  });
+
+  return { GuestBookMutation };
+};

src/hooks/queries/guestBook/useGetGuestBook.tsx

@@ -0,0 +1,25 @@
+import { useQuery } from '@tanstack/react-query';
+import { get } from '../../../api/api';
+import { GUEST_KEYS } from '../../../constants/QueryKey';
+import { GuestBookListResponseType } from '../../../types/types';
+
+/**
+ *  방명록 리스트 조회
+ */
+
+export const getGuestBook = async () => {
+  const data = await get<GuestBookListResponseType>(`guestbook`);
+  console.log('=====방명록 조회 성공=====', data.result.guestbooks);
+  return data.result;
+};
+
+export const useGetGuestBookList = () => {
+  const QUERY_KEY = GUEST_KEYS.all;
+
+  const { data, isPending, isError, refetch } = useQuery({
+    queryKey: QUERY_KEY,
+    queryFn: () => getGuestBook().then((res) => res),
+  });
+
+  return { data, isPending, isError, refetch };
+};