Api(client): arcons get api 연결

apps/client/.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.env

apps/client/src/layout/Layout.tsx

@@ -6,7 +6,9 @@ const Layout = () => {
     <>
       <div className="flex h-screen">
         <Sidebar />
-        <Outlet />
+        <main className="flex-1 overflow-y-auto">
+          <Outlet />
+        </main>
       </div>
     </>
   );

apps/client/src/main.tsx

@@ -2,7 +2,7 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App.tsx';
 import { QueryClientProvider } from '@tanstack/react-query';
-import getQueryClient from '@shared/apis/query/getQueryClient.ts';
+import getQueryClient from '@shared/apis/setting/query/getQueryClient.ts';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 const queryClient = getQueryClient();

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

@@ -6,16 +6,21 @@ 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 '@shared/apis/queries';
 
 export default function Level() {
-  const acorns = 1; // TODO: API 연결되면 교체
-  const info = getTreeLevel(acorns);
+  const { data, isPending, isError } = useGetArcons();
+
+  if (isPending) return <div></div>;
+  if (isError) return <div></div>;
+
+  const acornCount = data.acornCount;
+  const info = getTreeLevel(acornCount);
 
   return (
     <div className={cn('bg-subcolor mx-auto h-dvh w-full overflow-hidden')}>
       <div className="relative h-full w-full overflow-hidden rounded-[1.2rem]">
         <LevelScene level={info.level as TreeLevel} />
-
         <div className="absolute inset-0">
           <div className="flex flex-col items-start gap-[2rem] px-[8rem] py-[5.2rem]">
             <div className="flex flex-row items-center gap-[0.8rem]">
@@ -42,9 +47,13 @@ export default function Level() {
               </div>
             </div>
 
-            <Badge text="오늘 모은 도토리 개수" countNum={acorns} isActive={true} />
+            <Badge
+              text="오늘 모은 도토리 개수"
+              countNum={acornCount}
+              isActive={true}
+            />
             <div className="flex">
-              <TreeStatusCard acorns={acorns} />
+              <TreeStatusCard acorns={acornCount} />
             </div>
           </div>
         </div>

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

@@ -0,0 +1,22 @@
+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');
+  return data.data;
+};
+
+export const postCategory = async (categoryName: string) => {
+  const response = await apiRequest.post('/api/v1/categories', {
+    categoryName,
+  });
+  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/shared/components/sidebar/apis/queries.ts → apps/client/src/shared/apis/queries.ts

@@ -1,10 +1,8 @@
 import { useMutation, useQuery, UseQueryResult } from '@tanstack/react-query';
-import {
-  getDashboardCategories,
-  postCategory,
-} from '@shared/components/sidebar/apis/axios';
+import { getDashboardCategories, postCategory } from '@shared/apis/axios';
 import { AxiosError } from 'axios';
-import { DashboardCategoriesResponse } from '@shared/components/sidebar/types/api';
+import { DashboardCategoriesResponse, AcornsResponse } from '@shared/types/api';
+import { getAcorns } from './axios';
 
 export const useGetDashboardCategories = (): UseQueryResult<
   DashboardCategoriesResponse,
@@ -21,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/shared/components/sidebar/Sidebar.tsx

@@ -13,7 +13,8 @@ import PopupPortal from './PopupPortal';
 import {
   useGetDashboardCategories,
   usePostCategory,
-} from '@shared/components/sidebar/apis/queries';
+  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 <div></div>;
+  if (isError) return <div></div>;
+  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/components/sidebar/types/api.ts → apps/client/src/shared/types/api.ts

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

apps/client/src/shared/utils/formatDateTime.ts

@@ -0,0 +1,9 @@
+export const formatLocalDateTime = (date: Date = new Date()) => {
+  const yyyy = date.getFullYear();
+  const mm = String(date.getMonth() + 1).padStart(2, '0');
+  const dd = String(date.getDate()).padStart(2, '0');
+  const hh = String(date.getHours()).padStart(2, '0');
+  const mi = String(date.getMinutes()).padStart(2, '0');
+  const ss = String(date.getSeconds()).padStart(2, '0');
+  return `${yyyy}-${mm}-${dd}T${hh}:${mi}:${ss}`;
+};