[JiWon] httpClient 적용

package.json

@@ -11,16 +11,19 @@
   "dependencies": {
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@hookform/resolvers": "^3.3.4",
     "axios": "^1.6.8",
     "date-fns": "^3.6.0",
     "next": "13.5.6",
     "react": "^18",
     "react-color": "^2.19.3",
     "react-datepicker": "^6.9.0",
     "react-dom": "^18",
+    "react-hook-form": "^7.51.4",
     "react-intersection-observer": "^9.10.0",
     "sass": "^1.75.0",
-    "stylelint-config-standard": "^36.0.0"
+    "stylelint-config-standard": "^36.0.0",
+    "yup": "^1.4.0"
   },
   "devDependencies": {
     "@types/node": "^20",

src/apis/authService.ts

@@ -1,5 +1,6 @@
-import httpClient from './httpClient';
-import { AxiosError } from 'axios';
+import createHttpClient from './createHttpClient';
+
+const httpClient = createHttpClient();
 
 interface UserData {
   email: string;
@@ -12,32 +13,7 @@ interface Credentials {
   password: string;
 }
 
-// 회원가입
-export const registerUser = async (userData: UserData) => {
-  try {
-    const response = await httpClient.post('/users', userData);
-    return response.data;
-  } catch (error) {
-    const typedError = error as AxiosError; // 타입 단언
-    if (typedError.response) {
-      throw typedError.response.data; // 오류 응답 바디 접근
-    } else {
-      throw new Error('An unknown error occurred');
-    }
-  }
-};
-
-// 로그인
-export const login = async (credentials: Credentials) => {
-  try {
-    const response = await httpClient.post('/auth/login', credentials);
-    return response.data;
-  } catch (error) {
-    const typedError = error as AxiosError;
-    if (typedError.response) {
-      throw typedError.response.data || 'Login failed';
-    } else {
-      throw new Error('Network error');
-    }
-  }
+export const authService = {
+  registerUser: async (userData: UserData) => await httpClient.post('/users', userData),
+  login: async (credentials: Credentials) => await httpClient.post('/auth/login', credentials),
 };

src/apis/createHttpClient.ts

@@ -1,9 +1,9 @@
 import httpClient from './httpClient';
 
 export const createHttpClient = () => {
-  async function get<R>(url: string) {
+  async function get<R>(url: string, options?: { params?: any; headers?: any }) {
     try {
-      const response = await httpClient.get<R>(url);
+      const response = await httpClient.get<R>(url, options);
       return response.data;
     } catch (error) {
       // location.href = '../pages/NotFoundPage';
@@ -16,8 +16,8 @@ export const createHttpClient = () => {
     return response.data;
   }
 
-  async function put<T, P>(url: string, data: P) {
-    const response = await httpClient.put<T>(url, data);
+  async function put<T, P>(url: string, data: P, options?: { headers?: any }) {
+    const response = await httpClient.put<T>(url, data, options);
     return response.data;
   }
 

src/apis/invitationService.ts

@@ -1,4 +1,7 @@
-import httpClient from './httpClient';
+import createHttpClient from './createHttpClient';
+import { InvitationResponse } from '@/src/apis/schema/dashboardResponse';
+
+const httpClient = createHttpClient();
 
 interface FetchInvitationsParams {
   teamId: string;
@@ -13,38 +16,14 @@ interface UpdateInvitationParams {
   accept: boolean;
 }
 
-// 초대된 대시보듬 목록 GET
-export const fetchInvitations = async (params: FetchInvitationsParams) => {
-  const { teamId, size, cursorId, title } = params;
-  try {
-    const response = await httpClient.get(`/invitations`, {
-      params: {
-        teamId,
-        size,
-        cursorId,
-        title,
-      },
-    });
-    console.log(response.data);
-    return response.data;
-  } catch (error) {
-    console.error('Failed to load invitations', error);
-    throw error;
-  }
-};
-
-// 수락, 거절 버튼 클릭 시 PUT
-export const updateInvitation = async ({ teamId, invitationId, accept }: UpdateInvitationParams) => {
-  const body = { inviteAccepted: accept };
-  try {
-    const response = await httpClient.put(`/invitations/${invitationId}`, body, {
-      params: {
-        teamId,
-      },
-    });
-    return response.data;
-  } catch (error) {
-    console.error('Error updating invitation', error);
-    throw error;
-  }
+export const invitationService = {
+  fetchInvitations: async (params: FetchInvitationsParams) =>
+    await httpClient.get<InvitationResponse>('/invitations', { params }),
+  updateInvitation: async ({ teamId, invitationId, accept }: UpdateInvitationParams) =>
+    await httpClient.put<InvitationResponse, { inviteAccepted: boolean }>(
+      `/invitations/${invitationId}?teamId=${teamId}`,
+      {
+        inviteAccepted: accept,
+      }
+    ),
 };

src/apis/myDashboardService.ts

@@ -1,7 +1,8 @@
-import axios from 'axios';
-import httpClient from './httpClient';
+import createHttpClient from './createHttpClient';
+import { DashboardListResponse } from '@/src/apis/schema/dashboardResponse';
+const httpClient = createHttpClient();
 
-interface fetchDashboardsParams {
+interface FetchDashboardsParams {
   teamId: string;
   navigationMethod: 'infiniteScroll' | 'pagination';
   cursorId?: number;
@@ -10,22 +11,7 @@ interface fetchDashboardsParams {
 }
 
 // 대시보드 목록 불러오기
-export const fetchDashboards = async (params: fetchDashboardsParams) => {
-  try {
-    const { teamId, navigationMethod, cursorId, page, size } = params;
-    const response = await httpClient.get('/dashboards', {
-      params: {
-        teamId,
-        navigationMethod,
-        cursorId,
-        page,
-        size,
-      },
-    });
-    console.log(response.data);
-    return response.data;
-  } catch (error) {
-    console.error('대시보드 데이터를 불러오는데 실패했습니다:', error);
-    throw error;
-  }
+export const myDashboardService = {
+  fetchDashboards: async (params: FetchDashboardsParams) =>
+    await httpClient.get<DashboardListResponse>('/dashboards', { params }),
 };

src/apis/schema/dashboardResponse.ts

@@ -87,3 +87,31 @@ export interface UserInfoResponse {
   createdAt: string;
   updatedAt: string;
 }
+
+export interface Invitation {
+  id: number;
+  inviter: {
+    nickname: string;
+    email: string;
+    id: number;
+  };
+  teamId: string;
+  dashboard: {
+    title: string;
+    id: number;
+  };
+  invitee: {
+    nickname: string;
+    email: string;
+    id: number;
+  };
+  inviteAccepted: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface InvitationResponse {
+  totalCount: number;
+  cursorId: any;
+  invitations: Invitation[];
+}

src/pages/Login/index.tsx

@@ -2,7 +2,7 @@ import styles from './Login.module.scss';
 import Input from '@/src/components/common/Input';
 import BaseButton from '@/src/components/common/Button/BaseButton';
 import React, { useState, useEffect } from 'react';
-import { login } from '@/src/apis/authService';
+import { authService } from '@/src/apis/authService';
 import { saveTokenToLocalStorage } from '@/src/utils/authUtils';
 import Logo from '@/src/assets/images/Logo.png';
 import Title from '@/src/assets/images/Title.png';
@@ -81,7 +81,7 @@ export default function Login() {
     e.preventDefault();
     if (!isSubmitEnabled) return;
     try {
-      const data = await login(formData);
+      const data = (await authService.login(formData)) as any;
       console.log('로그인 성공', data);
       saveTokenToLocalStorage(data.accessToken);
       window.location.href = '/Mydashboard';