Merge pull request #128 from prgrms-web-devcourse-final-project/127-f…

…eature/homepage-data-binding

[Feature] #127 홈페이지 데이터 바인딩

src/apis/main/fetchHomePageData.ts

@@ -0,0 +1,39 @@
+import { AxiosError } from 'axios'
+import { APIResponse, CommonAPIResponse, ErrorResponse } from '~types/api'
+import { axiosInstance } from '~apis/axiosInstance'
+
+export type FetchHomePageDataResponse = Pick<
+  CommonAPIResponse,
+  'memberId' | 'familyRole' | 'dogName' | 'timeDuration' | 'totalDistanceMeter' | 'totalCalorie' | 'memberProfileImgUrl'
+>
+
+export const fetchHomePageData = async (): Promise<APIResponse<FetchHomePageDataResponse>> => {
+  try {
+    const { data } = await axiosInstance.get<APIResponse<FetchHomePageDataResponse>>(`/main`)
+    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/main/useHomePageData.tsx

@@ -0,0 +1,12 @@
+import { useSuspenseQuery, UseSuspenseQueryResult } from '@tanstack/react-query'
+import { AxiosError } from 'axios'
+import { queryKey } from '~constants/queryKey'
+import { fetchHomePageData, FetchHomePageDataResponse } from './fetchHomePageData'
+
+export const useHomePageData = (): UseSuspenseQueryResult<FetchHomePageDataResponse, AxiosError> => {
+  return useSuspenseQuery<FetchHomePageDataResponse, AxiosError>({
+    queryKey: queryKey.home(),
+    queryFn: () => fetchHomePageData().then(data => data.data),
+    staleTime: 5 * 60 * 1000, // 5분
+  })
+}

src/components/Button/CloseBtn.ts

@@ -0,0 +1,6 @@
+import { styled } from 'styled-components'
+import Close from '~assets/buttons/close_btn.svg?react'
+
+export const CloseBtn = styled(Close)`
+  cursor: pointer;
+`

src/components/Button/PrevBtn.ts

@@ -0,0 +1,6 @@
+import { styled } from 'styled-components'
+import BackBtn from '~assets/buttons/back_btn.svg?react'
+
+export const PrevBtn = styled(BackBtn)`
+  cursor: pointer;
+`

src/components/Header/styles.ts

@@ -1,6 +1,6 @@
 import styled from 'styled-components'
-import CloseButton from '~components/Button/CloseButton'
-import PrevButton from '~components/Button/PrevButton'
+import { CloseBtn } from '~components/Button/CloseBtn'
+import { PrevBtn } from '~components/Button/PrevBtn'
 import { Typo17 } from '~components/Typo'
 import { HEADER_HEIGHT, HEADER_HEIGHT_LG, HEADER_Z_INDEX } from '~constants/layout'
 import { HeaderType } from '~types/headerType'
@@ -24,10 +24,10 @@ export const Header = styled.header<HeaderProps>`
   z-index: ${HEADER_Z_INDEX};
 `
 
-export const HeaderPrevBtn = styled(PrevButton)`
+export const HeaderPrevBtn = styled(PrevBtn)`
   margin-right: 8px;
 `
-export const HeaderCloseBtn = styled(CloseButton)`
+export const HeaderCloseBtn = styled(CloseBtn)`
   position: absolute;
   right: 1.25rem;
 `

src/constants/queryKey.ts

@@ -4,4 +4,5 @@ export const queryKey = {
     friendList: () => ['friendList'],
   },
   profile: (memberId: number) => ['profile', memberId],
+  home: () => ['homePageData'],
 }

src/modals/NotificationModal/index.tsx

@@ -1,17 +1,13 @@
-import PrevButton from '~components/Button/PrevButton'
-import * as S from './styles'
-import { Typo17 } from '~components/Typo'
+import Header from '~components/Header'
 import NotificationList from '~components/NotificationList'
 import { useModalStore } from '~stores/modalStore'
+import * as S from './styles'
 
 export default function NotificationModal() {
   const { popModal } = useModalStore()
   return (
     <S.NotificationModal>
-      <PrevButton onClick={popModal} />
-      <S.Header>
-        <Typo17 $weight='700'>알림</Typo17>
-      </S.Header>
+      <Header prevBtn onClickPrev={popModal} type='sm' title='알림' />
       <NotificationList />
     </S.NotificationModal>
   )

src/modals/NotificationModal/styles.ts

@@ -7,14 +7,3 @@ export const NotificationModal = styled.div`
   overflow: auto;
   padding-top: ${HEADER_HEIGHT}px;
 `
-export const Header = styled.header`
-  position: fixed;
-  background-color: ${({ theme }) => theme.colors.grayscale.gc_4};
-  z-index: 3;
-  width: 100%;
-  top: 0;
-  height: ${HEADER_HEIGHT}px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`