feat #57 - 지도 선택 페이지 데이터 연동

HYU-IL · Dec 7, 2024 · cb5aef2 · cb5aef2
1 parent 3c24576
commit cb5aef2
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 16 deletions.
diff --git a/src/components/sliders/MapSmallInnerTitleSlider.tsx b/src/components/sliders/MapSmallInnerTitleSlider.tsx
@@ -1,12 +1,27 @@
 import SmallInnerTitleItem from "./SmallInnerTitleItem";
 import Link from 'next/link';
+import {campingData} from "@/data/campingData"; 
+import {festivalData} from "@/data/festivalData"; 
+import {leisureData} from "@/data/leisureData"; 
+import {workationData} from "@/data/workationData"; 
+import {beachData} from "@/data/beachData";
+import { residenceData } from "@/data/residenceData";
+import { LikeData } from "@/data/likeData";
 
 interface MapSmallInnerTitleSliderProps {
   id: number;
   location: string;
 }
 
 const MapSmallInnerTitleSlider = ({ id, location }: MapSmallInnerTitleSliderProps) => {
+  const like_data = LikeData;
+  const camping_data = campingData;
+  const festival_data = festivalData;
+  const leisure_data = leisureData;
+  const workation_data = workationData;
+  const beach_data = beachData;
+  const residence_data = residenceData;
+
   const locationDescription = (location: string) => {
     switch (location) {
       case "철원":
@@ -69,6 +84,25 @@ const MapSmallInnerTitleSlider = ({ id, location }: MapSmallInnerTitleSliderProp
     }
   };
 
+  const slider_data = (id: number) => {
+    switch (id) {
+      case 0:
+        return like_data;
+      case 1:
+        return workation_data;
+      case 2:
+        return camping_data;
+      case 3:
+        return beach_data;
+      case 4:
+        return leisure_data;
+      case 5:
+        return festival_data;
+      default:
+        return workation_data;
+    }
+  };
+
   const Description = locationDescription(location);
 
   const renderDescription = (category: string) => (
@@ -89,7 +123,7 @@ const MapSmallInnerTitleSlider = ({ id, location }: MapSmallInnerTitleSliderProp
             <p className="text-subtitle3 text-gray-900">내가 선택한</p>
             <p className="text-subtitle3 text-primary-core">찜</p>
           </div>
-          <div className="text-caption2 text-gray-800 mr-[16px]">더보기 {'>'} </div>
+          <Link href={"/mypage/like"}><div className="text-caption2 text-gray-800 mr-[16px]">더보기 {'>'} </div></Link>
         </div>
       )}
       {id === 1 && renderDescription("에서 워케이션!")}
@@ -99,12 +133,9 @@ const MapSmallInnerTitleSlider = ({ id, location }: MapSmallInnerTitleSliderProp
       {id === 5 && renderDescription("에서 지역축제!")}
 
       <div className="whitespace-nowrap overflow-x-auto flex gap-x-[8px] scrollbar-hide">
-        <SmallInnerTitleItem />
-        <SmallInnerTitleItem />
-        <SmallInnerTitleItem />
-        <SmallInnerTitleItem />
-        <SmallInnerTitleItem />
-        <SmallInnerTitleItem />
+        {(slider_data(id)).map((item, index) => (
+          <SmallInnerTitleItem key={index} label={item.name} imgurl={item.image} />
+        ))}
       </div>
       <div className="h-[48px]" />
     </div>

diff --git a/src/components/sliders/MediumInnerTitleItem.tsx b/src/components/sliders/MediumInnerTitleItem.tsx
@@ -4,18 +4,18 @@ import tmp from "../../../public/tmp.jpg";
 interface MediumInnerTitleItemProps {
   label?: string;
   imgurl?: string;
-  children?: React.ReactElement;
+  // children?: React.ReactElement;
 }
 
 function MediumInnerTitleItem({
   label,
   imgurl,
-  children,
-  ...props
+  // children,
+  // ...props
 }: MediumInnerTitleItemProps) {
   return (
     <div className="border-black rounded-[12px] min-w-[210px] h-[235px] relative overflow-hidden">
-      <Image alt={"backgroundImg"} layout="fill" src={tmp} objectFit="cover" />
+      <Image alt={"backgroundImg"} layout="fill" src={imgurl ? imgurl : tmp} objectFit="cover" />
       <div className="flex justify-center items-center w-full h-[30px] bg-black opacity-50 z-10 absolute bottom-0 rounded-b-[12px]">
         <span className="text-white text-[12px] font-Pretendard">{label && label}</span>
       </div>

diff --git a/src/components/sliders/SmallInnerTitleItem.tsx b/src/components/sliders/SmallInnerTitleItem.tsx
@@ -3,20 +3,20 @@ import tempImage from "../../../public/tempImage.png";
 
 interface SmallInnerTitleItemProps {
   label?: string;
-  //   imgurl?: string;
+  imgurl?: string;
 }
 
 function SmallInnerTitleItem({
   label,
-  //   imgurl,
-  ...props
+  imgurl,
+  //...props
 }: SmallInnerTitleItemProps) {
   return (
-    <div className="relative border-black rounded-[4px] w-[160px] h-[121px] overflow-hidden">
+    <div className="relative border-black rounded-[4px] min-w-[160px] h-[121px] overflow-hidden">
       <Image
         alt={"backgroundImg"}
         layout="fill"
-        src={tempImage}
+        src={imgurl ? imgurl : tempImage}
         objectFit="cover"
       />
       <div className="flex absolute justify-center items-center w-full h-[17.6px] bg-black opacity-40 z-10  bottom-0 rounded-b-[4px]">