feat: tanstack-query 적용 (#114)

* feat: axios instance 재설정

* feat: 방 정보 불러오기 api 분리

* chore: tanstack-query 초기 세팅 - 쿼리 키 생성

* feat: tanstack-query 도입

* feat: 방 생성 쿼리 작성

* feat: 참여자가 등록한 시간 불러오기 api 쿼리 작성

* feat: 일정 등록/수정 api 쿼리 작성

* feat: 후보 시간 조회 api tanstack-query 도입

* feat: 로그인 api tanstack-query 도입

* feat: 날짜 없는 방에도 tanstack-query 적용

* chore: 기존의 axios instance 제거

* fix: 후보 시간 불러오기 에러 해결

* chore: 폴더 구조 변경

package.json

@@ -27,7 +27,6 @@
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
     "react-multi-date-picker": "^3.3.4",
-    "react-query": "^3.39.3",
     "react-router-dom": "^6.8.1",
     "react-scripts": "5.0.1",
     "react-scrollable-picker": "^1.0.2",

src/api/auth.ts

@@ -0,0 +1,11 @@
+import { PostAuthParamsType } from '../types/auth';
+import { instance } from './instance';
+
+export const postUserInfo = async ({ roomUUID, form }: PostAuthParamsType) => {
+  const { data } = await instance.post(
+    `/api/room/${roomUUID}/login`,
+    JSON.stringify(form)
+  );
+
+  return data;
+};

src/api/availableTimes.ts

@@ -0,0 +1,33 @@
+import { instance } from './instance';
+import { PutAvailableTimesParamsType } from '../types/addTime';
+
+export const putAvailableTimes = async ({
+  roomUUID,
+  payload,
+}: PutAvailableTimesParamsType) => {
+  const { data } = await instance.put(
+    `/api/room/${roomUUID}/available-time`,
+    JSON.stringify(payload)
+  );
+
+  return data;
+};
+
+export const getAvailableTimesByOne = async (
+  roomUUID: string,
+  userName: string
+) => {
+  const { data } = await instance.get(
+    `/api/room/${roomUUID}/available-time?name=${userName}`
+  );
+
+  return data;
+};
+
+export const getAvailableTimesByGroup = async (roomUUID: string) => {
+  const { data } = await instance.get(
+    `/api/room/${roomUUID}/available-time/group`
+  );
+
+  return data;
+};

src/utils/API.ts → src/api/instance.ts

@@ -1,8 +1,9 @@
 import axios from 'axios';
 
-export const API = axios.create({
+export const instance = axios.create({
   baseURL: process.env.REACT_APP_API_PATH,
   headers: {
     'Content-Type': 'application/json',
+    withCredentials: true,
   },
 });

src/api/result.ts

@@ -0,0 +1,13 @@
+import { instance } from './instance';
+
+export const getCandidateTimesInfo = async (
+  roomUUID: string,
+  sort: string,
+  name: string
+) => {
+  const { data } = await instance.get(
+    `/api/room/${roomUUID}/adjustment-result?sorted=${sort}&${name}`
+  );
+
+  return data;
+};

src/api/room.ts

@@ -0,0 +1,14 @@
+import { instance } from './instance';
+import { PostRoomTypes } from '../types/roomInfo';
+
+export const getRoomInfo = async (roomUUID: string) => {
+  const { data } = await instance.get(`/api/room/${roomUUID}`);
+
+  return data;
+};
+
+export const createRoom = async (payload: PostRoomTypes) => {
+  const { data } = await instance.post(`/api/room`, JSON.stringify(payload));
+
+  return data;
+};

src/assets/data/initialCreateRoomData.ts

@@ -0,0 +1,8 @@
+export const initialCreateRoomData = {
+  headCount: null,
+  dates: [],
+  startTime: null,
+  endTime: null,
+  timer: null,
+  title: '',
+};

src/assets/data/initialRoomInfoData.ts

@@ -0,0 +1,9 @@
+export const initialRoomInfoData = {
+  title: '',
+  headCount: 0,
+  participants: [],
+  deadLine: null,
+  dates: [],
+  startTime: null,
+  endTime: null,
+};

src/atoms/createRoomAtoms.ts

@@ -0,0 +1,16 @@
+import { atom, selector } from 'recoil';
+import { PostRoomTypes } from '../types/roomInfo';
+import { initialCreateRoomData } from '../assets/data/initialCreateRoomData';
+
+export const createRoomAtoms = atom<PostRoomTypes>({
+  key: 'recoilRoomAtoms',
+  default: initialCreateRoomData,
+});
+
+export const createRoomInfoState = selector({
+  key: 'recoilRoomInfoState', // 고유한 키 값
+  get: ({ get }) => {
+    const roomInfo = get(createRoomAtoms);
+    return roomInfo;
+  },
+});

src/components/addCalendar/AddCalendar.tsx

@@ -16,15 +16,16 @@ import {
 } from './AddCalendar.styles';
 import BottomButton from '../bottomButton/BottomButton';
 
-import { API } from '../../utils/API';
+import { useGetAvailableTimesByOne } from '../../queries/availableTimes/useGetAvailableTimesByOne';
+import { usePutAvailableTimes } from '../../queries/availableTimes/usePutAvailableTimes';
 
 const AddCalendar = ({
   dates,
   selected,
   setSelected,
   selectedMethod,
 }: AddCalendarType) => {
-  const { roomUUID } = useParams();
+  const { roomUUID } = useParams() as { roomUUID: string };
   const navigate = useNavigate();
   const userName = localStorage.getItem('userName') || '';
 
@@ -67,16 +68,14 @@ const AddCalendar = ({
     }
   }, [date]);
 
+  const { data } = useGetAvailableTimesByOne(roomUUID, userName);
+  const { mutate, isSuccess } = usePutAvailableTimes();
+
   useEffect(() => {
-    const getPreviousSelectedTimes = async () => {
-      const { data } = await API.get(
-        `/api/room/${roomUUID}/available-time?name=${userName}`
-      );
+    if (data) {
       setSelected(data.availableDateTimes);
-    };
-
-    getPreviousSelectedTimes();
-  }, []);
+    }
+  }, [data]);
 
   useEffect(() => {
     setSelected([]);
@@ -86,23 +85,6 @@ const AddCalendar = ({
     navigate(`/current/${roomUUID}`);
   };
 
-  const putAvailableTime = async (payload: {
-    name: string;
-    hasTime: boolean;
-    availableDateTimes: string[];
-  }) => {
-    const response = await API.put(
-      `/api/room/${roomUUID}/available-time`,
-      JSON.stringify(payload)
-    );
-
-    if (response.status === 200) {
-      goToCurrent();
-    } else {
-      alert('처리 중 오류가 발생했습니다!');
-    }
-  };
-
   const handleApplyClick = () => {
     if (selectedMethod === 'possible') {
       const payload = {
@@ -111,7 +93,7 @@ const AddCalendar = ({
         availableDateTimes: [...selected],
       };
 
-      putAvailableTime(payload);
+      mutate({ roomUUID, payload });
     }
 
     if (selectedMethod === 'impossible') {
@@ -124,10 +106,16 @@ const AddCalendar = ({
         availableDateTimes: filteredTime,
       };
 
-      putAvailableTime(payload);
+      mutate({ roomUUID, payload });
     }
   };
 
+  useEffect(() => {
+    if (isSuccess) {
+      goToCurrent();
+    }
+  }, [isSuccess]);
+
   return (
     <>
       <Wrapper>