Merge pull request #151 from prgrms-web-devcourse-final-project/48-fe…

…ature/familyddang-update

[Feature] #48 패밀리댕 (견주,댕 정보수정)

src/apis/family/fetchFamilyDDang.ts

@@ -0,0 +1,49 @@
+import { AxiosError } from 'axios'
+import { APIResponse, CommonAPIResponse, ErrorResponse } from '~types/api'
+import { axiosInstance } from '~apis/axiosInstance'
+import { DayOfWeek } from '~types/common'
+
+export type FetchFamilyDDangResponse = Pick<
+  CommonAPIResponse,
+  'familyId' | 'dogs' | 'totalWalkCount' | 'totalDistanceInKilometers' | 'totalCalorie'
+> & {
+  members: (CommonAPIResponse['members'][number] & {
+    walkScheduleInfoList: {
+      walkScheduleId: number
+      dayOfWeek: DayOfWeek
+      walkTime: string
+    }[]
+    totalWalkCount: number // 추가된 속성
+  })[]
+}
+
+export const fetchFamilyDDang = async (): Promise<APIResponse<FetchFamilyDDangResponse>> => {
+  try {
+    const { data } = await axiosInstance.get<APIResponse<FetchFamilyDDangResponse>>(`/family`)
+    console.log('패밀리댕 정보 바인딩 : ', data)
+    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/family/fetchOwnerProfile.ts

@@ -0,0 +1,39 @@
+import { AxiosError } from 'axios'
+import { APIResponse, CommonAPIResponse, ErrorResponse } from '~types/api'
+import { axiosInstance } from '~apis/axiosInstance'
+
+export type FetchOwnerProfileResponse = Pick<
+  CommonAPIResponse,
+  'memberId' | 'name' | 'gender' | 'familyRole' | 'profileImg'
+>
+
+export const fetchOwnerProfile = async (): Promise<APIResponse<FetchOwnerProfileResponse>> => {
+  try {
+    const { data } = await axiosInstance.get<APIResponse<FetchOwnerProfileResponse>>(`/member/update`)
+    console.log('잘 오나?', data)
+    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/family/updateOwnerProfile.ts

@@ -0,0 +1,42 @@
+import { AxiosError } from 'axios'
+import { APIResponse, CommonAPIRequest, ErrorResponse, CommonAPIResponse } from '~types/api'
+import { axiosInstance } from '~apis/axiosInstance'
+
+export type UpdateOwnerProfileRequest = Pick<CommonAPIRequest, 'name' | 'gender' | 'familyRole' | 'profileImg'>
+
+export type UpdateOwnerProfileResponse = Pick<
+  CommonAPIResponse,
+  'memberId' | 'name' | 'gender' | 'familyRole' | 'profileImg'
+>
+
+export const updateOwnerProfile = async (
+  req: UpdateOwnerProfileRequest
+): Promise<APIResponse<UpdateOwnerProfileResponse>> => {
+  try {
+    const { data } = await axiosInstance.patch<APIResponse<UpdateOwnerProfileResponse>>(`/member/update`, req)
+    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/components/DogProfile/styles.ts

@@ -60,6 +60,17 @@ export const OneLineIntro = styled(Box)`
   }
 `
 
+// export const EditIconWrapper = styled.div`
+//   width: 2rem;
+//   height: 2rem;
+//   background-color: ${({ theme }) => theme.colors.brand.lighten_2};
+//   border-radius: 50%;
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
+//   margin-left: auto;
+// `
+
 export const InviteBtn = styled.button`
   width: 57px;
   height: 36px;

src/components/WalkCountArea/index.tsx

@@ -1,27 +1,32 @@
 import * as S from './styles'
+import { useQuery } from '@tanstack/react-query'
+import { fetchFamilyDDang, FetchFamilyDDangResponse } from '~apis/family/fetchFamilyDDang'
+import { APIResponse } from '~types/api'
 
-interface CountSectionProps {
-  walkCount: number
-  totalDistance: number
-  gangCount: number
-}
+export default function WalkCountArea() {
+  const { data } = useQuery<APIResponse<FetchFamilyDDangResponse>>({
+    queryKey: ['familyList'],
+    queryFn: fetchFamilyDDang,
+  })
+  const totalCalorie = data?.data?.totalCalorie
+  const totalDistanceInKilometers = data?.data?.totalDistanceInKilometers
+  const totalWalkCount = data?.data?.totalWalkCount
 
-export default function WalkCountArea({ walkCount, totalDistance, gangCount }: CountSectionProps) {
   return (
     <S.CountSection>
       <S.CountArea>
-        <S.CountWrapperBig>{walkCount}회</S.CountWrapperBig>
+        <S.CountWrapperBig>{totalCalorie}회</S.CountWrapperBig>
         <S.CountWrapperSmall>누적 산책 횟수</S.CountWrapperSmall>
       </S.CountArea>
 
       <S.CountArea>
-        <S.CountWrapperBig>{totalDistance}km</S.CountWrapperBig>
+        <S.CountWrapperBig>{totalDistanceInKilometers}km</S.CountWrapperBig>
         <S.CountWrapperSmall>총 산책거리</S.CountWrapperSmall>
       </S.CountArea>
 
       <S.CountArea>
-        <S.CountWrapperBig>{gangCount}회</S.CountWrapperBig>
-        <S.CountWrapperSmall>강번따 횟수</S.CountWrapperSmall>
+        <S.CountWrapperBig>{totalWalkCount}kcal</S.CountWrapperBig>
+        <S.CountWrapperSmall>소요 칼로리</S.CountWrapperSmall>
       </S.CountArea>
     </S.CountSection>
   )

src/constants/familyRole.ts

@@ -9,3 +9,8 @@ export const FAMILY_ROLE = {
   GRANDMOTHER: '할머니',
   '': '',
 }
+export type FamilyRoleKey = keyof typeof FAMILY_ROLE
+export type FamilyRoleValue = (typeof FAMILY_ROLE)[FamilyRoleKey]
+export const REVERSE_FAMILY_ROLE = Object.fromEntries(
+  Object.entries(FAMILY_ROLE).map(([key, value]) => [value, key])
+) as { [key in FamilyRoleValue]: FamilyRoleKey }

src/constants/queryKey.ts

@@ -20,7 +20,10 @@ export const queryKey = {
   },
   myPage: () => ['myPage'],
   family: {
-    inviteCode: () => ['family', 'inviteCode'],
+    familyList: ()=> ['familyList'],
+    prevOwnerInto: () => ['prevOwnerInfo'],
+    UpdateOwner: () => ['updateOwnerInfo'],
+       inviteCode: () => ['family', 'inviteCode'],
     profile: () => ['family', 'dogProfile'],
   },
-}
+} as const