[Feature] #51 소셜로그인, 회원가입 기능 구현

package.json

@@ -48,6 +48,8 @@
     "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^7.8.0",
     "@typescript-eslint/parser": "^7.8.0",
+    "@types/ol": "^7.0.0",
+    "@types/react-textarea-autosize": "^8.0.0",
     "@vite-pwa/assets-generator": "^0.2.4",
     "@vitejs/plugin-react": "^4.2.1",
     "@vitejs/plugin-react-swc": "^3.5.0",

src/App.tsx

@@ -12,12 +12,10 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 
 const queryClient = new QueryClient()
-
 function App() {
   //* 다크모드 확장성 고려
   const [theme, setTheme] = useState(lightTheme)
   const toggleTheme = () => setTheme(prev => (prev === lightTheme ? darkTheme : lightTheme))
-
   return (
     <>
       <WebSocketProvider>

src/apis/axiosInstance.ts

@@ -3,6 +3,7 @@ import axios, { AxiosInstance } from 'axios'
 export const axiosInstance: AxiosInstance = axios.create({
   baseURL: import.meta.env.VITE_SERVER_URL,
   timeout: 5000,
+  withCredentials: true,
   headers: {
     'Content-Type': 'application/json',
   },

src/apis/dog/createDogProfile.ts

@@ -0,0 +1,44 @@
+import { AxiosError } from 'axios'
+import { APIResponse, ErrorResponse } from '~types/api'
+import { axiosInstance } from '~apis/axiosInstance'
+
+interface CreateDogProfileResponse {
+  dogId: number
+  name: string
+  breed: string
+  birthDate: string
+  weight: number
+  gender: 'MALE' | 'FEMALE'
+  profileImg: File
+  isNeutered: 'TRUE' | 'FALSE'
+  familyId: number
+  comment: string
+}
+
+export const createDogProfile = async (formData: FormData): Promise<APIResponse<CreateDogProfileResponse>> => {
+  try {
+    const { data } = await axiosInstance.post<APIResponse<CreateDogProfileResponse>>('/dogs/create', formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    })
+    return data
+  } catch (error) {
+    if (error instanceof AxiosError) {
+      const { response, request } = error as AxiosError<ErrorResponse>
+
+      if (response) {
+        console.error('반려견 등록 오류:', response.data)
+        throw new Error(response.data.message ?? '요청 실패')
+      }
+
+      if (request) {
+        console.error('요청 에러:', request)
+        throw new Error('네트워크 연결을 확인해주세요')
+      }
+    }
+
+    console.error('예상치 못한 에러:', error)
+    throw new Error('다시 시도해주세요')
+  }
+}

src/apis/dog/deleteDogProfile.ts

@@ -0,0 +1,31 @@
+import { AxiosError } from 'axios'
+import { APIResponse, ErrorResponse } from '~types/api'
+import { axiosInstance } from '~apis/axiosInstance'
+
+interface DeleteDogProfileResponse {
+  data: Record<string, never>
+}
+
+export const deleteDogProfile = async (id: number): Promise<APIResponse<DeleteDogProfileResponse>> => {
+  try {
+    const { data } = await axiosInstance.delete<APIResponse<DeleteDogProfileResponse>>(`/dogs/${id}`)
+    return data
+  } catch (error) {
+    if (error instanceof AxiosError) {
+      const { response, request } = error as AxiosError<ErrorResponse>
+
+      if (response) {
+        console.error('반려견 삭제 오류:', response.data)
+        throw new Error(response.data.message ?? '요청 실패')
+      }
+
+      if (request) {
+        console.error('요청 에러:', request)
+        throw new Error('네트워크 연결을 확인해주세요')
+      }
+    }
+
+    console.error('예상치 못한 에러:', error)
+    throw new Error('다시 시도해주세요')
+  }
+}

src/apis/dog/fetchDogProfile.ts

@@ -0,0 +1,44 @@
+import { AxiosError } from 'axios'
+import { APIResponse, ErrorResponse } from '~types/api'
+import { axiosInstance } from '~apis/axiosInstance'
+
+interface DogProfileDetail {
+  dogId: number
+  name: string
+  breed: string
+  birthDate: string
+  weight: number
+  gender: 'MALE' | 'FEMALE'
+  profileImg: string
+  isNeutered: 'TRUE' | 'FALSE'
+  familyId: number
+  comment: string
+}
+
+export interface FetchDogProfileResponse {
+  data: DogProfileDetail
+}
+
+export const fetchDogProfile = async (id: number): Promise<APIResponse<FetchDogProfileResponse>> => {
+  try {
+    const { data } = await axiosInstance.get<APIResponse<FetchDogProfileResponse>>(`/dogs/${id}`)
+    return data
+  } catch (error) {
+    if (error instanceof AxiosError) {
+      const { response, request } = error as AxiosError<ErrorResponse>
+
+      if (response) {
+        console.error('반려견 조회 오류:', response.data)
+        throw new Error(response.data.message ?? '요청 실패')
+      }
+
+      if (request) {
+        console.error('요청 에러:', request)
+        throw new Error('네트워크 연결을 확인해주세요')
+      }
+    }
+
+    console.error('예상치 못한 에러:', error)
+    throw new Error('다시 시도해주세요')
+  }
+}

src/apis/family/joinFamily.ts

@@ -0,0 +1,33 @@
+import { AxiosError } from 'axios'
+import { APIResponse, ErrorResponse } from '~types/api'
+import { axiosInstance } from '~apis/axiosInstance'
+
+interface JoinFamilyResponse {
+  familyId: number
+  memberId: number
+  familyName: string
+}
+
+export const joinFamily = async (inviteCode: string): Promise<APIResponse<JoinFamilyResponse>> => {
+  try {
+    const { data } = await axiosInstance.post<APIResponse<JoinFamilyResponse>>('/family/join', { inviteCode })
+    return data
+  } catch (error) {
+    if (error instanceof AxiosError) {
+      const { response, request } = error as AxiosError<ErrorResponse>
+
+      if (response) {
+        console.error('가족 참여 오류:', response.data)
+        throw new Error(response.data.message ?? '요청 실패')
+      }
+
+      if (request) {
+        console.error('요청 에러:', request)
+        throw new Error('네트워크 연결을 확인해주세요')
+      }
+    }
+
+    console.error('예상치 못한 에러:', error)
+    throw new Error('다시 시도해주세요')
+  }
+}

src/apis/logout/deleteLogoutMember.ts

@@ -0,0 +1,40 @@
+import { AxiosError } from 'axios'
+import { ErrorResponse } from '~types/api'
+import { axiosInstance } from '~apis/axiosInstance'
+
+export type DeleteLogoutMemberResponse = {
+  code: number
+  status: '100 CONTINUE'
+  message: string
+  data: string
+}
+
+export const deleteLogoutMember = async (): Promise<DeleteLogoutMemberResponse> => {
+  try {
+    const { data } = await axiosInstance.delete<DeleteLogoutMemberResponse>(`/member/logout`)
+    return data
+  } catch (error) {
+    if (error instanceof AxiosError) {
+      const { response } = error as AxiosError<ErrorResponse>
+
+      if (response) {
+        const { code, message } = response.data
+        switch (code) {
+          case 400:
+            throw new Error(message || '잘못된 요청입니다.')
+          case 401:
+            throw new Error(message || '인증에 실패했습니다.')
+          case 500:
+            throw new Error(message || '서버 오류가 발생했습니다.')
+          default:
+            throw new Error(message || '알 수 없는 오류가 발생했습니다.')
+        }
+      }
+
+      throw new Error('네트워크 연결을 확인해주세요')
+    }
+
+    console.error('예상치 못한 에러:', error)
+    throw new Error('다시 시도해주세요')
+  }
+}

src/apis/myPage/deleteMember.ts

@@ -0,0 +1,36 @@
+import { AxiosError } from 'axios'
+import { APIResponse, ErrorResponse } from '~types/api'
+import { axiosInstance } from '~apis/axiosInstance'
+
+export type DeleteMemberResponse = Record<string, never>
+
+export const deleteMember = async (): Promise<APIResponse<DeleteMemberResponse>> => {
+  try {
+    const { data } = await axiosInstance.delete<APIResponse<DeleteMemberResponse>>(`/member/delete`)
+    return data
+  } catch (error) {
+    if (error instanceof AxiosError) {
+      const { response } = error as AxiosError<ErrorResponse>
+
+      if (response) {
+        const { code, message } = response.data
+        switch (code) {
+          case 400:
+            throw new Error(message || '잘못된 요청입니다.')
+          case 401:
+            throw new Error(message || '인증에 실패했습니다.')
+          case 500:
+            throw new Error(message || '서버 오류가 발생했습니다.')
+          default:
+            throw new Error(message || '알 수 없는 오류가 발생했습니다.')
+        }
+      } else {
+        // 요청 자체가 실패한 경우
+        throw new Error('네트워크 연결을 확인해주세요')
+      }
+    }
+
+    console.error('예상치 못한 에러:', error)
+    throw new Error('다시 시도해주세요')
+  }
+}

src/apis/myPage/fetchMypage.ts

@@ -0,0 +1,55 @@
+import { AxiosError } from 'axios'
+import { APIResponse, CommonAPIResponse, ErrorResponse } from '~types/api'
+import { axiosInstance } from '~apis/axiosInstance'
+
+export type FetchMypageResponse = Pick<
+  CommonAPIResponse,
+  | 'memberId'
+  | 'name'
+  | 'address'
+  | 'gender'
+  | 'familyRole'
+  | 'profileImg'
+  | 'isMatched'
+  | 'totalDistance'
+  | 'walkCount'
+  | 'countWalksWithMember'
+  | 'dog'
+  | 'dogId'
+  | 'breed'
+  | 'birthDate'
+  | 'weight'
+  | 'isNeutered'
+  | 'familyId'
+  | 'comment'
+>
+
+export const fetchMypage = async (): Promise<APIResponse<FetchMypageResponse>> => {
+  try {
+    const { data } = await axiosInstance.get<APIResponse<FetchMypageResponse>>(`/member/mypage`)
+    return data
+  } catch (error) {
+    if (error instanceof AxiosError) {
+      const { response } = error as AxiosError<ErrorResponse>
+
+      if (response) {
+        const { code, message } = response.data
+        switch (code) {
+          case 400:
+            throw new Error(message || '잘못된 요청입니다.')
+          case 401:
+            throw new Error(message || '인증에 실패했습니다.')
+          case 500:
+            throw new Error(message || '서버 오류가 발생했습니다.')
+          default:
+            throw new Error(message || '알 수 없는 오류가 발생했습니다.')
+        }
+      }
+      // 요청 자체가 실패한 경우
+      throw new Error('네트워크 연결을 확인해주세요')
+    }
+
+    console.error('예상치 못한 에러:', error)
+    throw new Error('다시 시도해주세요')
+  }
+}

src/apis/register/createRegister.ts

@@ -0,0 +1,51 @@
+import { AxiosError } from 'axios'
+import { APIResponse, CommonAPIRequest, ErrorResponse } from '~types/api'
+import { axiosInstance } from '~apis/axiosInstance'
+
+export type CreateRegisterRequest = Pick<
+  CommonAPIRequest,
+  'email' | 'provider' | 'name' | 'gender' | 'address' | 'familyRole' | 'profileImg'
+>
+
+export type CreateRegisterResponse = Pick<
+  CommonAPIRequest,
+  'memberId' | 'name' | 'email' | 'provider' | 'gender' | 'address' | 'familyRole' | 'profileImg'
+>
+
+export const createRegister = async (req: CreateRegisterRequest): Promise<APIResponse<CreateRegisterResponse>> => {
+  try {
+    const response = await axiosInstance.post<APIResponse<CreateRegisterResponse>>(`/member/join`, req)
+
+    // 토큰 추출 및 저장
+    const accessToken = response.headers['authorization']
+    if (accessToken) {
+      localStorage.setItem('token', accessToken)
+      axiosInstance.defaults.headers.common['Authorization'] = accessToken
+    }
+
+    return response.data
+  } catch (error) {
+    if (error instanceof AxiosError) {
+      const { response } = error as AxiosError<ErrorResponse>
+
+      if (response) {
+        const { code, message } = response.data
+        switch (code) {
+          case 400:
+            throw new Error(message || '잘못된 요청입니다.')
+          case 401:
+            throw new Error(message || '인증에 실패했습니다.')
+          case 500:
+            throw new Error(message || '서버 오류가 발생했습니다.')
+          default:
+            throw new Error(message || '알 수 없는 오류가 발생했습니다.')
+        }
+      }
+      // 요청 자체가 실패한 경우
+      throw new Error('네트워크 연결을 확인해주세요')
+    }
+
+    console.error('예상치 못한 에러:', error)
+    throw new Error('다시 시도해주세요')
+  }
+}