api: 사이드바 도토리 get api 연결

Author: jjangminii

apps/client/src/pages/level/Level.tsx

@@ -6,7 +6,7 @@ import TreeStatusCard from '@pages/level/components/TreeStatusCard';
 import { getTreeLevel } from '@shared/utils/treeLevel';
 import { TreeLevel } from '@pages/level/types/treeLevelType';
 import { Badge } from '@pinback/design-system/ui';
-import { useGetArcons } from './apis/queries';
+import { useGetArcons } from '@shared/apis/queries';
 
 export default function Level() {
   const { data, isPending, isError } = useGetArcons();

apps/client/src/pages/level/apis/axios.ts

@@ -1,4 +1,5 @@
 import apiRequest from '@shared/apis/setting/axiosInstance';
+import { formatLocalDateTime } from '@shared/utils/formatDateTime';
 
 export const getDashboardCategories = async () => {
   const { data } = await apiRequest.get('/api/v1/categories/dashboard');
@@ -11,3 +12,11 @@ export const postCategory = async (categoryName: string) => {
   });
   return response;
 };
+
+export const getAcorns = async () => {
+  const now = formatLocalDateTime(new Date());
+  const { data } = await apiRequest.get('/api/v1/users/acorns?now=', {
+    params: { now },
+  });
+  return data.data;
+};

apps/client/src/pages/level/apis/queries.ts

@@ -1,7 +1,8 @@
 import { useMutation, useQuery, UseQueryResult } from '@tanstack/react-query';
 import { getDashboardCategories, postCategory } from '@shared/apis/axios';
 import { AxiosError } from 'axios';
-import { DashboardCategoriesResponse } from '@shared/types/api';
+import { DashboardCategoriesResponse, AcornsResponse } from '@shared/types/api';
+import { getAcorns } from './axios';
 
 export const useGetDashboardCategories = (): UseQueryResult<
   DashboardCategoriesResponse,
@@ -18,3 +19,10 @@ export const usePostCategory = () => {
     mutationFn: (categoryName: string) => postCategory(categoryName),
   });
 };
+
+export const useGetArcons = (): UseQueryResult<AcornsResponse, AxiosError> => {
+  return useQuery({
+    queryKey: ['arcons'],
+    queryFn: () => getAcorns(),
+  });
+};

apps/client/src/pages/level/types/api.ts

@@ -13,6 +13,7 @@ import PopupPortal from './PopupPortal';
 import {
   useGetDashboardCategories,
   usePostCategory,
+  useGetArcons,
 } from '@shared/apis/queries';
 import { useState } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
@@ -23,6 +24,7 @@ export function Sidebar() {
 
   const { data: categories } = useGetDashboardCategories();
   const { mutate: createCategory } = usePostCategory();
+  const { data, isPending, isError } = useGetArcons();
 
   const {
     activeTab,
@@ -65,6 +67,10 @@ export function Sidebar() {
     });
   };
 
+  if (isPending) return console.log('로딩중...');
+  if (isError) return console.log('에러...');
+  const acornCount = data.acornCount;
+
   return (
     <aside className="bg-white-bg sticky top-0 h-screen w-[24rem] border-r border-gray-300">
       <div className="flex h-full flex-col px-[0.8rem]">
@@ -134,7 +140,7 @@ export function Sidebar() {
 
         <footer className="pb-[2.8rem] pt-[1.2rem]">
           <MyLevelItem
-            acorns={0}
+            acorns={acornCount}
             isActive={activeTab === 'level'}
             onClick={() => {
               setSelectedCategoryId(null);

apps/client/src/shared/apis/axios.ts

@@ -7,3 +7,8 @@ export interface Category {
 export interface DashboardCategoriesResponse {
   categories: Category[];
 }
+
+export type AcornsResponse = {
+  acornCount: number;
+  remindDateTime: string;
+};