Feat: 메인화면 Api 모두 적용, 페이지네이션 적용

ssumai-kr · Jul 14, 2024 · 843bdfb · 843bdfb
1 parent 08d3def
commit 843bdfb
Show file tree

Hide file tree

Showing 7 changed files with 186 additions and 107 deletions.
diff --git a/components/Lander/AllActivities.tsx b/components/Lander/AllActivities.tsx
@@ -52,11 +52,11 @@ function AllActivity({
             </span>
           </div>
         </div>
-        <div className="t:h-[50px] m:h-[30px] m:w-[160px] font-sans text-[24px] m:text-[18px] font-[600] mt-[10px]">
+        <div className="h-[70px] t:h-[50px] m:h-[30px] m:w-[160px] font-sans text-[24px] m:text-[18px] font-[600] mt-[10px]">
           {title}
         </div>
-        <div className="font-sans text-[28px] text-[20px] font-[700] mt-[15px]">
-          ₩ {price}
+        <div className="font-sans text-[28px] text-[20px] font-[700] p:mt-[0px] mt-[15px]">
+          ₩ {price} {' '}
           <span className="font-sans text-[20px] text-[16px] font-[400]">
             / 인
           </span>
@@ -68,13 +68,16 @@ function AllActivity({
 
 function AllActivities() {
   const router = useRouter();
-  const [currentPage, setCurrentPage] = useState<number>(
-    router.query.page ? parseInt(router.query.page as string, 10) : 1
-  );
+  // const [currentPage, setCurrentPage] = useState<number>(
+  //   router.query.page ? parseInt(router.query.page as string, 10) : 1
+  // );
   const [MainPageState, setMainPageState] = useRecoilState(mainPageState);
 
-  const { itemsPerPage: items_per_page, selectedSorted } =
-    useRecoilValue(mainPageState);
+  const {
+    itemsPerPage: items_per_page,
+    selectedSorted,
+    currentPage,
+  } = useRecoilValue(mainPageState);
 
   const setItemsPerPage = () => {
     if (typeof window !== 'undefined') {
@@ -94,23 +97,9 @@ function AllActivities() {
         ...prevState,
         itemsPerPage,
       }));
-
-      console.log(`Current items per page: ${itemsPerPage}`);
     }
   };
 
-  useEffect(() => {
-    setItemsPerPage();
-    if (typeof window !== 'undefined') {
-      window.addEventListener('resize', setItemsPerPage);
-    }
-    return () => {
-      if (typeof window !== 'undefined') {
-        window.removeEventListener('resize', setItemsPerPage);
-      }
-    };
-  }, []);
-
   const params: getActivityListParams = {
     method: 'offset',
     cursorId: null,
@@ -131,10 +120,26 @@ function AllActivities() {
   });
 
   const handlePageChange = (page: number) => {
-    setCurrentPage(page);
+    //setCurrentPage(page);
+    setMainPageState((prevState) => ({
+      ...prevState,
+      currentPage: page,
+    }));
     //router.push(`/?page=${page}`);
   };
 
+  useEffect(() => {
+    setItemsPerPage();
+    if (typeof window !== 'undefined') {
+      window.addEventListener('resize', setItemsPerPage);
+    }
+    return () => {
+      if (typeof window !== 'undefined') {
+        window.removeEventListener('resize', setItemsPerPage);
+      }
+    };
+  }, []);
+
   useEffect(() => {
     const params: getActivityListParams = {
       method: 'offset',
@@ -152,8 +157,8 @@ function AllActivities() {
       <div className="flex justify-between">
         <div className="relative t:w-[520px] m:w-[230px]">
           <div className="flex gap-[24px] t:gap-[14px] m:gap-[8px] t:w-[520px] m:w-[230px] overflow-auto scrollbar-hide">
-            {Kategories.map((Kategorie) => (
-              <CatergoryBtn categoryName={Kategorie} />
+            {Kategories.map((Kategorie, index) => (
+              <CatergoryBtn key={index} categoryName={Kategorie} />
             ))}
           </div>
           <div className="p:hidden absolute top-0 right-0 w-20 m:w-3 h-full pointer-events-none bg-gradient-to-l from-white to-transparent"></div>

diff --git a/components/Lander/BestActivities.tsx b/components/Lander/BestActivities.tsx
@@ -2,26 +2,36 @@ import Image from 'next/image';
 import { PaginationArrowButton } from '../Button/Button';
 import StarImg from '@/public/icon/Star.svg';
 import { useEffect, useState } from 'react';
-import {
-  ActivityDetail,
-  BestActivitiesProps,
-  BestActivityProps,
-} from './BestActivities.type';
+import { ActivityDetail, BestActivityProps } from './BestActivities.type';
 import usePagination from '@/hooks/usePagination';
+import {
+  getActivityListParams,
+  getActivityListResponse,
+} from '@/pages/api/activities/apiactivities.types';
+import { useQuery } from '@tanstack/react-query';
+import { getActivityList } from '@/pages/api/activities/apiactivities';
+import { useRouter } from 'next/router';
+import { useRecoilState } from 'recoil';
 
 function BestActivity({
   title,
   price,
   rating,
   reviewCount,
+  bannerImageUrl,
   id,
 }: BestActivityProps) {
+  const router = useRouter();
+
+  const handleClick = () => {
+    router.push(`/activity-details/${id}`);
+  };
+
   return (
-    <div
+    <div onClick={handleClick}
       className="relative w-[384px] m:w-[186px] h-[384px] m:h-[186px] rounded-3xl border bg-gray-300 flex flex-col justify-center bg-[url('/image/Testimage.jpg')] cursor-pointer shrink-0 bg-cover bg-center"
       style={{
-        backgroundImage:
-          'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 33.33%, rgba(0, 0, 0, 0.80) 91.67%), url("/image/Testimage.jpg")',
+        backgroundImage: `linear-gradient(180deg, rgba(0, 0, 0, 0.00) 33.33%, rgba(0, 0, 0, 0.80) 91.67%), url(${bannerImageUrl})`,
       }}
     >
       <div className="flex gap-[5px] absolute left-[20px] bottom-[166px] m:bottom-[98px]">
@@ -45,55 +55,63 @@ function BestActivity({
   );
 }
 
-const fetchBestActivities = async (
-  page: number
-): Promise<BestActivitiesProps | null> => {
-  try {
-    const response = await fetch('/mockData/roadActivitiesData.json');
-    if (!response.ok) {
-      throw new Error('Network response was not ok');
-    }
-    const data: BestActivitiesProps = await response.json();
-    return data;
-  } catch (error) {
-    console.error('Failed to fetch mock data:', error);
-    return { activities: [], totalCount: 0, cursorId: null };
-  }
-};
+function BestActivities() {
+  const [bestCurrentPage, setBestCurrentPage] = useState(1);
 
-const ITEMS_PER_PAGE = 3;
+  const params: getActivityListParams = {
+    method: 'offset',
+    cursorId: null,
+    category: null,
+    keyword: null,
+    sort: 'most_reviewed',
+    page: bestCurrentPage,
+    size: 3,
+  };
 
-function BestActivities() {
-  const [bestActivities, setBestActivities] = useState<BestActivitiesProps>({
-    activities: [],
-    totalCount: 0,
+  const paramsNotPc: getActivityListParams = {
+    method: 'offset',
     cursorId: null,
+    category: null,
+    keyword: null,
+    sort: 'most_reviewed',
+    page: 1,
+    size: 9,
+  }
+
+  const {
+    data: bestActivitiesData,
+    error,
+    isLoading,
+  } = useQuery<getActivityListResponse>({
+    queryKey: ['BestActivities', params],
+    queryFn: () => getActivityList(params),
   });
 
-  useEffect(() => {
-    async function fetchData() {
-      const data = await fetchBestActivities(1); // 페이지는 1로 고정하거나 필요에 따라 변경할 수 있음
-      if (data) {
-        setBestActivities(data);
-      }
-    }
-    fetchData();
-  }, []);
+  const {
+    data: bestActivitiesDataNotPc,
+    error: errorNotPc,
+    isLoading: isLoadingNotPc,
+  } = useQuery<getActivityListResponse>({
+    queryKey: ['BestActivitiesNotPc', paramsNotPc],
+    queryFn: () => getActivityList(paramsNotPc),
+  });
 
   const {
-    currentItems,
     items,
     currentPage,
-    totalPages,
     isFirstPage,
     isLastPage,
     handlePrevClick,
     handleNextClick,
   } = usePagination({
-    fetchData: fetchBestActivities,
-    itemsPerPage: ITEMS_PER_PAGE,
+    data: bestActivitiesData,
+    itemsPerPage: 3,
   });
 
+  useEffect(() => {
+    setBestCurrentPage(currentPage);
+  }, [currentPage]);
+
   return (
     <div>
       <div className="flex justify-between items-center">
@@ -115,31 +133,32 @@ function BestActivities() {
       </div>
       {items && items.length > 0 ? (
         <div className="flex gap-[32px] m:gap-[16px] mt-[34px] overflow-auto scrollbar-hide t:hidden m:hidden">
-          {currentItems.map((item: ActivityDetail) => (
+          {items.map((item: ActivityDetail) => (
             <BestActivity
               key={item.id}
               title={item.title}
               price={item.price}
               rating={item.rating}
               reviewCount={item.reviewCount}
-              id= {item.id}
+              id={item.id}
+              bannerImageUrl={item.bannerImageUrl}
             />
           ))}
         </div>
       ) : (
         <div>No activities found</div>
       )}
-
-      {bestActivities.activities && bestActivities.activities.length > 0 ? (
+      {bestActivitiesDataNotPc?.activities && bestActivitiesDataNotPc.activities.length > 0 ? (
         <div className="flex gap-[32px] m:gap-[16px] mt-[34px] overflow-auto scrollbar-hide p:hidden">
-          {bestActivities.activities.map((item: ActivityDetail) => (
+          {bestActivitiesDataNotPc.activities.map((item: ActivityDetail) => (
             <BestActivity
               key={item.id}
               title={item.title}
               price={item.price}
               rating={item.rating}
               reviewCount={item.reviewCount}
-              id= {item.id}
+              id={item.id}
+              bannerImageUrl={item.bannerImageUrl}
             />
           ))}
         </div>

diff --git a/components/Lander/BestActivities.type.ts b/components/Lander/BestActivities.type.ts
@@ -9,8 +9,8 @@ export interface ActivityDetail {
   bannerImageUrl: string;
   rating: number;
   reviewCount: number;
-  createdAt: Date;
-  updatedAt: Date;
+  createdAt: string;
+  updatedAt: string;
 }
 
 export interface BestActivitiesProps {

diff --git a/components/Lander/Main.tsx b/components/Lander/Main.tsx
@@ -3,25 +3,52 @@ import Testimgae from './TestImage.jpg';
 import SearchBar from '../SearchBar/Searchbar';
 import BestActivities from './BestActivities';
 import AllActivities from './AllActivities';
+import { useQuery } from '@tanstack/react-query';
+import { getActivityListParams, getActivityListResponse } from '@/pages/api/activities/apiactivities.types';
+import { getActivityList } from '@/pages/api/activities/apiactivities';
+import Spinner from '../Spinner/Spinner';
 
 function Main() {
   const date = new Date();
   const month = date.getMonth() + 1;
+  //const {id, title, bannerImageUrl} = useRecoilValue(BestOfmonth);
+
+  const params: getActivityListParams = {
+    method: 'offset',
+    cursorId: null,
+    category: null,
+    keyword: null,
+    sort: 'most_reviewed',
+    page: 1,
+    size: 1,
+  };
+  const {
+    data: BestOfmonth,
+    error,
+    isLoading,
+  } = useQuery<getActivityListResponse>({
+    queryKey: ['BestActivities', params],
+    queryFn: () => getActivityList(params),
+  });
+
+  if(isLoading) {
+    return (<Spinner />)
+  }
 
   return (
+
     <main className="flex flex-col justift-center items-center h-auto">
       <section
         className="z-0 w-screen h-[550px] m:h-[240px] overflow-hidden absolute left-0 top-[70px] bg-cover bg-center bg-[url('/image/Testimage.jpg')] flex items-center "
         style={{
           backgroundImage:
-            'linear-gradient(90deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.40) 100%), url("/image/Testimage.jpg")',
+            `linear-gradient(90deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.40) 100%), url(${BestOfmonth?.activities[0].bannerImageUrl})`,
         }}
       ></section>
       <div className="z-10 t:w-[696px] m:w-[343px]">
         <div className=" mt-[160px] m:mt-[74px] flex flex-col gap-[20px]">
-          <h1 className="text-white font-sans text-[68px] m:text-[24px] font-[700] leading-[1.2]">
-            Test <br />
-            Test
+          <h1 className="w-[600px] t:w-[450px] m:w-[200px] text-white font-sans text-[68px] t:text-[54px] m:text-[24px] font-[700] leading-[1.2]">
+            {BestOfmonth?.activities[0].title}
           </h1>
           <span className="text-white font-sans test-[24px] m:text-[14px] font-[700]">
             {month} 월의 인기 체험 BEST 🔥