[Feature] 메인 화면 API 연결

src/api/home/dateCourse.ts

@@ -0,0 +1,12 @@
+import type { IDateCourseSavedCountResponse } from '../../types/home/dateCourse';
+import { axiosInstance } from '../axiosInstance';
+
+// 데이트 코스 저장 횟수 조회 API
+export const getDateCourseSavedCount = async (): Promise<IDateCourseSavedCountResponse> => {
+    try {
+        const response = await axiosInstance.get('/api/v1/logs/datecourses/saved-count');
+        return response.data;
+    } catch {
+        throw new Error('데이트 코스 저장 횟수를 가져오는데 실패했습니다.');
+    }
+};

src/api/home/datePlace.ts

@@ -0,0 +1,7 @@
+import type { TMonthlyDatePlaceResponse } from '../../types/home/datePlace';
+import { axiosInstance } from '../axiosInstance';
+
+export const getMonthlyDatePlaceStates = async (): Promise<TMonthlyDatePlaceResponse> => {
+    const { data } = await axiosInstance.get('/api/v1/logs/dateplaces/monthly');
+    return data;
+};

src/api/home/dateTimes.ts

@@ -0,0 +1,17 @@
+import type { TGetDateTimeStats, TMonthlyDatePlaceResponse } from '../../types/home/datePlace';
+import { axiosInstance } from '../axiosInstance';
+
+// 월별 데이트 장소 수 조회 API
+export const getMonthlyDatePlaceStats = async (): Promise<TMonthlyDatePlaceResponse> => {
+    try {
+        const response = await axiosInstance.get('/api/v1/logs/dateplaces/monthly');
+        return response.data;
+    } catch {
+        throw new Error('월별 데이트 장소 통계를 가져오는데 실패했습니다.');
+    }
+};
+
+export const getDateTimeStats = async (): Promise<TGetDateTimeStats> => {
+    const { data } = await axiosInstance.get('/api/v1/logs/datecourses/average');
+    return data;
+};

src/api/home/keyword.ts

@@ -0,0 +1,8 @@
+import type { TWeeklyKeywordResponse } from '../../types/home/keyword';
+import { axiosInstance } from '../axiosInstance';
+
+// 이번 주 인기 키워드 조회 API
+export const getWeeklyKeywords = async (): Promise<TWeeklyKeywordResponse> => {
+    const { data } = await axiosInstance.get('/api/v1/logs/keyword/weekly');
+    return data;
+};

src/api/home/level.ts

@@ -0,0 +1,8 @@
+import type { TUserGradeResponse } from '../../types/home/level';
+import { axiosInstance } from '../axiosInstance';
+
+// 사용자 등급 조회 API
+export const getUserGrade = async (): Promise<TUserGradeResponse> => {
+    const { data } = await axiosInstance.get('/api/v1/members/grade');
+    return data;
+};

src/api/home/region.ts

@@ -0,0 +1,8 @@
+import type { TPatchUserRegionRequest, TPatchUserRegionResponse } from '@/types/home/region';
+
+import { axiosInstance } from '@/api/axiosInstance';
+
+export const patchUserRegion = async ({ regionId }: TPatchUserRegionRequest): Promise<TPatchUserRegionResponse> => {
+    const { data } = await axiosInstance.patch('/api/v1/regions/users', { regionId });
+    return data;
+};

src/api/home/weather.ts

@@ -0,0 +1,21 @@
+import type {
+    TGetPrecipitationRequest,
+    TGetPrecipitationResponse,
+    TGetWeeklyWeatheerRecommendationRequest,
+    TGetWeeklyWeatheerRecommendationResponse,
+} from '@/types/home/weather';
+
+import { axiosInstance } from '../axiosInstance';
+
+// 주간 날씨 추천 조회 API
+export const getWeeklyWeatherRecommendation = async ({
+    regionId,
+    startDate,
+}: TGetWeeklyWeatheerRecommendationRequest): Promise<TGetWeeklyWeatheerRecommendationResponse> => {
+    const { data } = await axiosInstance.get(`/api/v1/weather/${regionId}/weekly`, { params: { startDate: startDate } });
+    return data;
+};
+export const getPrecipitation = async ({ regionId, startDate }: TGetPrecipitationRequest): Promise<TGetPrecipitationResponse> => {
+    const { data } = await axiosInstance.get(`/api/v1/weather/${regionId}/precipitation`, { params: { startDate: startDate } });
+    return data;
+};

src/components/common/modalProvider.tsx

@@ -6,6 +6,8 @@ import DateCourseSearchFilterModal from '@/components/modal/dateCourseSearchFilt
 import ErrorModal from '@/components/modal/errorModal';
 import SettingsModal from '@/components/modal/SettingModal';
 
+import RegionModal from '../modal/regionModal';
+
 import useModalStore from '@/store/useModalStore';
 
 // 모달 타입 정의 -> 만약 다른 모달을 추가하고 싶다면 여기에 타입을 추가하고, MODAL_COMPONENTS에 컴포넌트를 추가하면 됩니다.
@@ -15,13 +17,15 @@ export const MODAL_TYPES = {
     DateCourseSearchFilterModal: 'DateCourseSearchFilterModal',
     SettingsModal: 'SettingsModal', //설정 모달 추가
     AlarmModal: 'AlarmModal',
+    RegionModal: 'RegionModal',
 };
 
 export const MODAL_COMPONENTS = {
     [MODAL_TYPES.ErrorModal]: ErrorModal,
     [MODAL_TYPES.DateCourseSearchFilterModal]: DateCourseSearchFilterModal,
     [MODAL_TYPES.SettingsModal]: SettingsModal,
     [MODAL_TYPES.AlarmModal]: AlarmModal,
+    [MODAL_TYPES.RegionModal]: RegionModal,
 };
 
 export default function ModalProvider() {

src/components/home/banner.tsx

@@ -12,21 +12,25 @@ const slides = [
         title: '서울 성수동 : 옛것과 새로운 것이 교차하는 하루',
         description: '1960년대부터 조성된 오래된 공장 건물과 최근 벽돌 건물들의 분위기',
         tags: ['#활발한 활동', '#레트로 감성', '#서울 핫플'],
+        img: scroll,
     },
     {
         title: '한강 자전거 데이트 : 바람 따라 달리는 낭만',
         description: '도심 속 자연을 만끽하며 힐링 타임',
         tags: ['#운동 데이트', '#자연과 함께', '#저녁노을'],
+        img: scroll,
     },
     {
         title: '이태원 세계 음식 투어 : 입 안 가득 여행',
         description: '세계 각국의 맛을 한 자리에서 즐기기',
         tags: ['#미식가 커플', '#이국적인 분위기', '#도심 속 여행'],
+        img: scroll,
     },
     {
         title: '북촌 한옥마을 산책 : 전통의 미를 따라 걷기',
         description: '골목골목 숨어있는 사진 명소',
         tags: ['#한옥', '#조용한 산책', '#전통과 현대'],
+        img: scroll,
     },
 ];
 
@@ -52,11 +56,11 @@ function Banner() {
         setCurrentIndex((prevIndex) => (prevIndex + 1) % slides.length);
     };
 
-    const { title, description, tags } = slides[currentIndex];
+    const { title, description, tags, img } = slides[currentIndex];
 
     return (
         <div className="relative w-full">
-            <img src={scroll} alt="배너" className="w-full h-[450px] object-cover" />
+            <img src={img} alt="배너" className="w-full h-[450px] object-cover" />
 
             {/* 내용 */}
             <div className="absolute inset-0 flex flex-col justify-start px-4 sm:px-12 py-10 text-white z-10">

src/components/home/dateCourseStore.tsx

@@ -1,8 +1,18 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { useDateCourseSavedCount } from '@/hooks/home/useDateCourseStats';
+
 import MainCard from './mainCard';
 
 import ArchiveBlank from '@/assets/icons/Archive_Blank.svg?react';
 
 function DateCourseStore() {
+    const navigate = useNavigate();
+    const { data, isLoading, error } = useDateCourseSavedCount();
+    if (error) {
+        navigate('/error');
+    }
     return (
         <MainCard>
             <div className="flex flex-col px-4 sm:px-8 lg:px-[20px] py-8 lg:py-[28px] h-full justify-center">
@@ -11,11 +21,16 @@ function DateCourseStore() {
                 </div>
                 <div className="flex text-sm sm:text-base lg:text-m bold-medium text-[#616161] mb-1">내 데이트 코스를</div>
                 <div className="flex gap-1 items-center">
-                    <div className="text-lg sm:text-xl font-bold text-primary-700 whitespace-nowrap">2,345명</div>
+                    {isLoading ? (
+                        <div className="text-lg sm:text-xl font-bold text-primary-700 whitespace-nowrap">로딩...</div>
+                    ) : (
+                        <div className="text-lg sm:text-xl font-bold text-primary-700 whitespace-nowrap">{data?.result.count}명</div>
+                    )}
                     <div className="text-sm sm:text-base lg:text-m bold-medium text-[#616161] whitespace-nowrap">이 저장했어요.</div>
                 </div>
             </div>
         </MainCard>
     );
 }
-export default DateCourseStore;
+
+export default React.memo(DateCourseStore);

src/components/home/dateLocation.tsx

@@ -1,34 +1,36 @@
+import React, { useMemo } from 'react';
+
+import { useMontlyPlaceStates } from '@/hooks/home/useDatePlaceStates';
+
 import MainCard from '@/components/home/mainCard';
 
 function DateLocation() {
+    const { data } = useMontlyPlaceStates();
+    const maxCount = useMemo(() => {
+        return data?.result?.datePlaceLogList?.reduce((max, cur) => Math.max(max, cur.count), 0) ?? 0;
+    }, [data]);
     return (
         <MainCard>
             <div className="py-[28px] flex flex-col">
                 <div className="text-xl font-bold text-[#616161] mb-6">WithTime에 등록된 데이트 장소 수</div>
                 <div className="flex items-end gap-8 w-full justify-center">
-                    <div className="flex flex-col items-center">
-                        <span className="text-xs text-default-gray-500 mb-1">230</span>
-                        <div className="h-16 w-10 bg-default-gray-400 mb-2 flex items-start justify-center" />
-                        <div className="text-default-gray-500 mt-1">2022</div>
-                    </div>
-                    <div className="flex flex-col items-center">
-                        <span className="text-xs text-default-gray-500 mb-1">430</span>
-                        <div className="h-24 w-10 bg-default-gray-400 mb-2 flex items-start justify-center" />
-                        <div className="text-default-gray-500 mt-1">2023</div>
-                    </div>
-                    <div className="flex flex-col items-center">
-                        <span className="text-xs text-default-gray-500 mb-1">830</span>
-                        <div className="h-36 w-10 bg-default-gray-400 mb-2 flex items-start justify-center" />
-                        <div className="text-default-gray-500 mt-1">2024</div>
-                    </div>
-                    <div className="flex flex-col items-center">
-                        <span className="text-xs text-default-gray-500 mb-1">1,230</span>
-                        <div className="h-48 w-10 bg-default-gray-400 mb-2 flex items-start justify-center" />
-                        <div className="text-default-gray-500 mt-1">2025</div>
-                    </div>
+                    {data?.result.datePlaceLogList.map((graph, idx) => {
+                        // 비율 계산
+                        const height = maxCount ? (graph.count / maxCount) * 200 : 0; // 최대 높이 200px 기준
+                        return (
+                            <div className="flex flex-col items-center" key={idx}>
+                                <span className="text-xs text-default-gray-500 mb-1">{graph.count}</span>
+                                <div
+                                    className="w-10 bg-default-gray-400 mb-2 flex items-start justify-center transition-all duration-300"
+                                    style={{ height: `${height}px` }}
+                                />
+                                <div className="text-default-gray-500 mt-1">{graph.month}월</div>
+                            </div>
+                        );
+                    })}
                 </div>
             </div>
         </MainCard>
     );
 }
-export default DateLocation;
+export default React.memo(DateLocation);