fix: 기존 fetch 들어내고, axiosIntance 사용 api 및 쿼리로 변경

src/app/activity/api/api.ts

@@ -0,0 +1,18 @@
+import { http } from '@/api'
+import {
+  SelectedActivityResponse,
+  SeletedActivityDone,
+} from '@/types/activityTypes'
+
+export const postSelectedData = (data: SeletedActivityDone) => {
+  return http.post<SelectedActivityResponse>({
+    url: '/activities',
+    data,
+  })
+}
+
+export const patchActivityDone = (activityId: number) => {
+  return http.patch({
+    url: `/activities/${activityId}/finish`,
+  })
+}

src/app/activity/api/queries.ts

@@ -0,0 +1,17 @@
+import { useMutation } from '@tanstack/react-query'
+import { SeletedActivityDone } from '@/types/activityTypes'
+import { patchActivityDone, postSelectedData } from './api'
+
+export const usePatchActivityDone = () => {
+  return useMutation({
+    mutationKey: ['activity-edit'],
+    mutationFn: (activityId: number) => patchActivityDone(activityId),
+  })
+}
+
+export const usePostSelectedData = () => {
+  return useMutation({
+    mutationKey: ['activity-dataPost'],
+    mutationFn: (data: SeletedActivityDone) => postSelectedData(data),
+  })
+}

src/app/activity/page.tsx

@@ -2,14 +2,11 @@
 
 import { useRouter } from 'next/navigation'
 import { useEffect, useState, useRef } from 'react'
-import Cookies from 'js-cookie'
 import { Button } from '@/components'
 import useUserInfo from '@/store/useUserInfo'
-import {
-  SeletedActivityDone,
-  SelectedActivityResponse,
-} from '@/types/activityTypes'
+import { SeletedActivityDone } from '@/types/activityTypes'
 import Image from 'next/image'
+import { usePatchActivityDone, usePostSelectedData } from './api/queries'
 
 export default function ActivityPage() {
   const router = useRouter()
@@ -21,41 +18,43 @@ export default function ActivityPage() {
   const [elapsedTime, setElapsedTime] = useState<number>(0)
   const [activityId, setActivityId] = useState<number>(0)
   const [spareTimeLocal, setSpareTimeLocal] = useState<number>()
-  const [accessToken, setAccessToken] = useState<string>()
 
   // 타이머 ID를 useRef로 관리하여 리렌더링 방지
   const intervalId = useRef<number | null>(null)
   const timeoutId = useRef<number | null>(null)
 
-  const activityDone = async () => {
-    if (localStorage.getItem('activityCompleted')) {
-      return
-    }
-
-    try {
-      const activityDonePatch = await fetch(
-        `https://cnergy.p-e.kr/v1/activities/${activityId}/finish`,
-        {
-          method: 'PATCH',
-          headers: {
-            'Content-Type': 'application/json',
-            Authorization: `Bearer ${accessToken}`,
-          },
-        },
-      )
-
-      if (!activityDonePatch.ok) {
-        throw new Error(`HTTP error! status: ${activityDonePatch.status}`)
-      }
-
-      const toJson = await activityDonePatch.json()
-      console.log('받은 데이터', toJson)
-
-      localStorage.setItem('activityCompleted', 'true')
-    } catch (error) {
-      console.error('Error sending POST request:', error)
-    }
-  }
+  const { mutate: activityPatch } = usePatchActivityDone()
+  const { mutate: postSeletData } = usePostSelectedData()
+
+  // const activityDone = async () => {
+  //   if (localStorage.getItem('activityCompleted')) {
+  //     return
+  //   }
+
+  //   try {
+  //     const activityDonePatch = await fetch(
+  //       `https://cnergy.p-e.kr/v1/activities/${activityId}/finish`,
+  //       {
+  //         method: 'PATCH',
+  //         headers: {
+  //           'Content-Type': 'application/json',
+  //           Authorization: `Bearer ${accessToken}`,
+  //         },
+  //       },
+  //     )
+
+  //     if (!activityDonePatch.ok) {
+  //       throw new Error(`HTTP error! status: ${activityDonePatch.status}`)
+  //     }
+
+  //     const toJson = await activityDonePatch.json()
+  //     console.log('받은 데이터', toJson)
+
+  //     localStorage.setItem('activityCompleted', 'true')
+  //   } catch (error) {
+  //     console.error('Error sending POST request:', error)
+  //   }
+  // }
 
   const calculateSavedTime = (spareTime: number, elapsedMinutes: number) => {
     let savedTime: number = 0
@@ -82,7 +81,7 @@ export default function ActivityPage() {
 
     if (remainingTimeMsRm <= 0) {
       setIsTimeUp(true)
-      activityDone()
+      activityPatch(activityId)
 
       if (intervalId.current !== null) {
         clearInterval(intervalId.current)
@@ -104,7 +103,6 @@ export default function ActivityPage() {
       return () => {}
     }
 
-    const token = Cookies.get('accessToken')
     const selectedActivityLocal: SeletedActivityDone =
       JSON.parse(getActivityData)
     const spareTimeInUseEffect = selectedActivityLocal.spareTime
@@ -113,38 +111,43 @@ export default function ActivityPage() {
     const now = Date.now()
     const remainActivityId = localStorage.getItem('activityId')
 
-    setAccessToken(token)
     setSpareTimeLocal(spareTimeInUseEffect)
 
-    const postSelectData = async () => {
-      try {
-        const response = await fetch('https://cnergy.p-e.kr/v1/activities', {
-          method: 'POST',
-          body: JSON.stringify(selectedActivityLocal),
-          headers: {
-            'Content-Type': 'application/json',
-            Authorization: `Bearer ${token}`,
-          },
-        })
-
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`)
-        }
-
-        const { data } = await response.json()
-        const responseData: SelectedActivityResponse = data
-        console.log('받은 데이터', responseData)
-
-        localStorage.setItem('activityId', responseData.id.toString())
-
-        setActivityId(responseData.id)
-      } catch (error) {
-        console.error('Error sending POST request:', error)
-      }
-    }
+    // const postSelectData = async () => {
+    //   try {
+    //     const response = await fetch('https://cnergy.p-e.kr/v1/activities', {
+    //       method: 'POST',
+    //       body: JSON.stringify(selectedActivityLocal),
+    //       headers: {
+    //         'Content-Type': 'application/json',
+    //         Authorization: `Bearer ${token}`,
+    //       },
+    //     })
+
+    //     if (!response.ok) {
+    //       throw new Error(`HTTP error! status: ${response.status}`)
+    //     }
+
+    //     const { data } = await response.json()
+    //     const responseData: SelectedActivityResponse = data
+    //     console.log('받은 데이터', responseData)
+
+    //     localStorage.setItem('activityId', responseData.id.toString())
+
+    //     setActivityId(responseData.id)
+    //   } catch (error) {
+    //     console.error('Error sending POST request:', error)
+    //   }
+    // }
 
     if (!remainActivityId) {
-      postSelectData()
+      postSeletData(selectedActivityLocal, {
+        onSuccess: (data) => {
+          const response = data.data
+          localStorage.setItem('activityId', response.id.toString())
+          setActivityId(response.id)
+        },
+      })
     } else {
       setActivityId(parseInt(remainActivityId, 10))
     }
@@ -170,11 +173,11 @@ export default function ActivityPage() {
     if (elapsed >= spareTimeMs) {
       // 시간이 이미 지난 경우
       setIsTimeUp(true)
-      activityDone()
+      activityPatch(activityId)
     } else {
       timeoutId.current = window.setTimeout(() => {
         setIsTimeUp(true)
-        activityDone()
+        activityPatch(activityId)
       }, remainingTimeMs)
       updateRemainingTime(startTimeValue, spareTimeMs)
 
@@ -223,7 +226,7 @@ export default function ActivityPage() {
         setElapsedTime(0)
       }
 
-      activityDone()
+      activityPatch(activityId)
     }
 
     // 활동 종료 처리

src/app/archive/api/api.ts

@@ -0,0 +1,12 @@
+import { http } from '@/api'
+import { KeywordMonthDataResponse } from '../keyword-detail/types/type'
+
+export const getMonthData = (
+  reqyear: number,
+  reqmonth: number,
+  reqkeyword: string,
+) => {
+  return http.get<KeywordMonthDataResponse>({
+    url: `/activities?year=${reqyear}&month=${reqmonth}&keywordCategory=${reqkeyword}`,
+  })
+}

src/app/archive/api/queries.ts

@@ -1,5 +1,6 @@
-import { useSuspenseQuery } from '@tanstack/react-query'
+import { useQuery, useSuspenseQuery } from '@tanstack/react-query'
 import { getCalendarData, getKeywordsData } from '.'
+import { getMonthData } from './api'
 
 export const useGetCalendarData = (year: number, month: number) =>
   useSuspenseQuery({
@@ -14,3 +15,15 @@ export const useGetKeywordsData = (year: number, month: number) =>
     queryFn: () => getKeywordsData(year, month),
     select: (data) => data.data,
   })
+
+export const useGetKeywordMonthData = (
+  year: number,
+  month: number,
+  keyword: string,
+) => {
+  return useQuery({
+    queryKey: ['keywords-month', year, month, keyword],
+    queryFn: () => getMonthData(year, month, keyword),
+    enabled: !!year && !!month && !!keyword,
+  })
+}

src/app/archive/api/types.ts

@@ -54,3 +54,21 @@ export const categoryLabels: Record<string, string> = {
   RELAXATION: '휴식',
   SOCIAL: '소셜',
 }
+
+export interface KeywordActivityData {
+  title: string
+  savedTime: number
+  dateOfActivity: string
+}
+
+export interface KeyWordData {
+  category: Category
+  image: string
+}
+
+export interface KeywordMontDataResponse {
+  totalSavedTimeByKeywordInMonth: number
+  totalActivityCountByKeywordInMonth: number
+  activities: KeywordActivityData[]
+  Keyword: KeyWordData
+}