feat: 인사말 api 연결

app/api/greeting/route.ts

@@ -0,0 +1,13 @@
+import { NextResponse } from 'next/server';
+
+import { Response } from '@/apis';
+import { fetchData } from '@/apis/fetch-data';
+
+export async function GET() {
+  const data = await fetchData<Response<{ message: string }>>(
+    '/greeting',
+    'GET',
+  );
+
+  return NextResponse.json(data);
+}

features/main/components/calendar/organisms/user-calendar-profile.tsx

@@ -3,7 +3,7 @@
 import { useAtomValue } from 'jotai';
 
 import { Image } from '@/components/atoms';
-import { useCurrentMemberInfo } from '@/hooks';
+import { useCurrentMemberInfo, useGreetingText } from '@/hooks';
 import SwimieCharacterImage from '@/public/images/swimie-character.png';
 import { calendarSwimCountAtom } from '@/store';
 import { css, cx } from '@/styled-system/css';
@@ -14,12 +14,17 @@ import { Calendar } from '../molecules';
 
 export const UserCalendarProfile = () => {
   const { data, isLoading } = useCurrentMemberInfo();
+  const {
+    data: greetingTextData,
+    isLoading: isGreetingTextDataLoading,
+    isSuccess: isGreetingTextDataSuccess,
+  } = useGreetingText();
   const totalSwimCount = useAtomValue(calendarSwimCountAtom);
   const isEmptyCount = totalSwimCount === 0;
 
   return (
     <>
-      {isLoading ? (
+      {isLoading || isGreetingTextDataLoading ? (
         <UserProfileSkeleton />
       ) : (
         <div className={cx(profileContainerStyles, profileColorStyle)}>
@@ -33,9 +38,11 @@ export const UserCalendarProfile = () => {
           <div className={userInfoStyles}>
             <p className={nicknameStyles}>{data?.data.nickname}님,</p>
             <p className={descriptionStyles}>
-              {isEmptyCount
-                ? '이번달 수영 기록을 해볼까요?'
-                : `이번달 수영을 ${totalSwimCount}번 다녀왔어요!`}
+              {isGreetingTextDataSuccess
+                ? greetingTextData.data.message
+                : isEmptyCount
+                  ? '이번달 수영 기록을 해볼까요?'
+                  : `이번달 수영을 ${totalSwimCount}번 다녀왔어요!`}
             </p>
           </div>
         </div>

hooks/apis/index.ts

@@ -3,3 +3,4 @@ export * from './use-cheer-eligibility';
 export * from './use-current-member-info';
 export * from './use-follow-mutate';
 export * from './use-following-state';
+export * from './use-greeting-text';

hooks/apis/use-greeting-text.ts

@@ -0,0 +1,21 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { Response } from '@/apis';
+
+export const getGreetingText = async () => {
+  const res = await fetch(`/api/greeting`, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+
+  return res.json();
+};
+
+export const useGreetingText = () => {
+  return useQuery<Response<{ message: string }>>({
+    queryKey: ['greetingText'],
+    queryFn: () => getGreetingText(),
+  });
+};