Feat: 데이터 연동 및 페이지 연결

Feat: 데이터 연동 및 페이지 연결

src/app/camping/more/page.tsx

@@ -1,32 +1,38 @@
+"use client";
 import ViewMoreCampingItem from "@/components/common/ViewMoreCampingItem";
 import { GrPrevious } from "react-icons/gr";
-
-
-const datas = [
-  {imgurl:"/hotelImage.png", address:"연곡면", name:"강릉 솔향기 캠핑장", type:"글램핑", season:"봄-여름", liked:false, popular:true, mountain:true, ocean:false},
-]
+import {campingData} from "@/data/campingData"; 
+import Link from "next/link";
+import { useRouter } from "next/navigation";
 
 export default function More() {
+  const router = useRouter();
+
+  const handleBack = () => {
+    router.back();
+  };
+
+  const camping_data = campingData
   return (
     <div className="w-full">
         <div className="flex items-center p-[14px] border-b border-[#ededed] sticky top-0 bg-white z-10">
-          <GrPrevious className="w-[20px] h-[20px] text-gray-600" />
+          <Link href=""><GrPrevious className="w-[20px] h-[20px] text-gray-600" onClick={handleBack}/></Link>
           <p className="text-title2 mx-[10px]">휴일이 추천하는 강원도 캠핑</p>
         </div>
-        {datas.map((data, index) => (
+        {camping_data.map((data, index) => (
+          <Link href="../detail/camping" key={index}>
             <ViewMoreCampingItem
-              key={index}
-              imgurl={data.imgurl}
-              address={data.address}
+              imgurl={data.image}
+              address={data.rdnm_adr}
               name={data.name}
-              type={data.type}
-              season={data.season}
-              liked={data.liked}
-              popular={data.popular}
+              type={data.camping_type}
+              season={data.oper_time}
+              liked={false}
+              popular={index%3 === 0 ? true : false}
               mountain={data.mountain}
               ocean={data.ocean}
-
             />
+          </Link>
         ))}
     </div>
   );

src/app/camping/page.tsx

@@ -8,13 +8,15 @@ import Private from "../../../public/assets/images/Private.svg";
 import MediumCardItem from "@/components/common/MediumCardItem";
 import MediumInnerTitleItem from "@/components/sliders/MediumInnerTitleItem";
 import Carousel from "@/components/sliders/Carousel";
+import {campingData} from "@/data/campingData"; 
 
 export default function CampingPage() {
+  const camping_data = campingData
   return (
     <div className="w-full min-h-screen flex flex-col items-center justify-start">
       {/* 상단바 */}
       <div className="grid grid-cols-3 w-full px-[16px] py-3 items-center">
-        <Link href="" className="flex justify-start">
+        <Link href="/main" className="flex justify-start">
           <Image src={left} alt="left" />
         </Link>
         <div className="flex justify-center">
@@ -31,12 +33,12 @@ export default function CampingPage() {
               <span className="text-primary-core">휴일</span>이 추천하는 강릉
               캠핑
             </div>
-            <Link href="" className="text-caption2 text-gray-800">
+            <Link href="/camping/more" className="text-caption2 text-gray-800">
               더보기 &gt;
             </Link>
           </div>
           <div className="items-center justify-center w-full h-[248px]">
-            <Carousel/>
+            <Carousel datas={campingData}/>
           </div>
         </div>
       </div>
@@ -54,7 +56,7 @@ export default function CampingPage() {
           <span className="text-primary-core text-subtitle3">
             푸른 산 속에서 캠핑 하룻밤
           </span>
-          <Link href="" className="text-caption2 text-gray-800">
+          <Link href="/camping/more" className="text-caption2 text-gray-800">
             더보기 &gt;
           </Link>
         </div>
@@ -65,12 +67,12 @@ export default function CampingPage() {
         {/* 캠핑 리스트(4개 고정) */}
         <div className="grid grid-cols-1 w-full gap-y-6 mt-3 place-content-center">
           <div className="w-full flex justify-between items-center">
-            <MediumCardItem label="강릉 디프라이빗 캠핑" />
-            <MediumCardItem label="강릉 디프라이빗 캠핑" />
+            <MediumCardItem label={camping_data[4].name} imgurl={camping_data[4].image} />
+            <MediumCardItem label={camping_data[3].name} imgurl={camping_data[3].image}/>
           </div>
           <div className="flex justify-between items-center w-full">
-            <MediumCardItem label="강릉 디프라이빗 캠핑" />
-            <MediumCardItem label="강릉 디프라이빗 캠핑" />
+            <MediumCardItem label={camping_data[2].name} imgurl={camping_data[2].image} />
+            <MediumCardItem label={camping_data[1].name} imgurl={camping_data[1].image} />
           </div>
         </div>
       </div>
@@ -81,18 +83,18 @@ export default function CampingPage() {
           <div className="text-subtitle3 text-gray-800">
             <span className="text-primary-core">고민 끝! </span>인기 캠핑 모음
           </div>
-          <Link href="" className="text-caption2 text-gray-800">
+          <Link href="/camping/more" className="text-caption2 text-gray-800">
             더보기 &gt;
           </Link>
         </div>
         <span className="text-gray-800 text-caption2">
           #인기 캠핑 #낭만적인 워케이션
         </span>
         <div className="w-full whitespace-nowrap overflow-x-auto flex gap-x-[8px] scrollbar-hide pt-3">
-          <MediumInnerTitleItem label="강릉시-황리단 민속마을" />
-          <MediumInnerTitleItem label="강릉시-황리단 민속마을" />
-          <MediumInnerTitleItem label="강릉시-황리단 민속마을" />
-          <MediumInnerTitleItem label="강릉시-황리단 민속마을" />
+          <MediumInnerTitleItem label={camping_data[0].name} imgurl={camping_data[0].image} />
+          <MediumInnerTitleItem label={camping_data[1].name} imgurl={camping_data[1].image}/>
+          <MediumInnerTitleItem label={camping_data[2].name} imgurl={camping_data[2].image} />
+          <MediumInnerTitleItem label={camping_data[3].name} imgurl={camping_data[3].image} />
         </div>
       </div>
 

src/app/detail/_component/Appbar.tsx

@@ -1,16 +1,25 @@
+"use client";
+import { useRouter } from "next/navigation";
 import Image from "next/image";
 import LEFT from "../../../../public/assets/icons/left.svg";
 import HEART from "../../../../public/assets/icons/heart.svg";
 
+
 interface AppbarProps {
   adr?: string;
 }
 
 function Appbar({ adr }: AppbarProps) {
+  const router = useRouter();
+
+  const handleBack = () => {
+    router.back();
+  };
+
   return (
     <div className="flex flex-col w-full fixed top-0 left-0 bg-opacity-0 z-50">
     <div className="w-full h-[48px] items-center justify-between flex border-b bg-white px-6">
-      <Image src={LEFT} alt="left" />
+      <Image src={LEFT} alt="left" onClick={handleBack}/>
       <Image src={HEART} alt="heart" />
     </div>
   </div>

src/app/detail/beach/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 import Image from "next/image";
-import BeachImage from "../../../../public/assets/images/bg_ocean.png";
+import BeachImage from "../../../../public/assets/images/mockimg/beach1.png";
 import beachData from "@/data/beachData";
 import LocationBox from "../_component/LocationBox";
 import Appbar from "../_component/Appbar";

src/app/detail/camping/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 import Image from "next/image";
-import TMP from "../../../../public/assets/images/bg_camping.png";
+import TMP from "../../../../public/assets/images/mockimg/camping1.png";
 import campingData from "@/data/campingData";
 import LocationBox from "../_component/LocationBox";
 import Appbar from "../_component/Appbar";

src/app/detail/festival/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 import Image from "next/image";
-import TMP from "../../../../public/assets/images/bg_festival.png";
+import TMP from "../../../../public/assets/images/mockimg/festival1.png";
 import festivalData from "@/data/festivalData";
 import Appbar from "../_component/Appbar";
 import TitleBox from "../_component/TitleBox";

src/app/detail/leisure/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 import Image from "next/image";
-import TMP from "../../../../public/assets/images/bg_leisure.png";
+import TMP from "../../../../public/assets/images//mockimg/leisure1.png";
 import leisureData from "@/data/leisureData";
 import Appbar from "../_component/Appbar";
 import SearchButton from "../_component/SearchButton";

src/app/detail/residence/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 import Image from "next/image";
-import TMP from "../../../../public/assets/images/bg_resort.png";
+import TMP from "../../../../public/assets/images/mockimg/residence1.png";
 import residenceData from "@/data/residenceData";
 import LocationBox from "../_component/LocationBox";
 import Appbar from "../_component/Appbar";

src/app/detail/temple/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 import Image from "next/image";
-import TMP from "../../../../public/assets/images/bg_mountain.png";
+import TMP from "../../../../public/assets/images/mockimg/temple1.png";
 import templestayData from "@/data/templestayData";
 import LocationBox from "../_component/LocationBox";
 import Appbar from "../_component/Appbar";

src/app/detail/workation/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 import Image from "next/image";
-import TMP from "../../../../public/assets/images/bg_resort.png";
+import TMP from "../../../../public/assets/images/mockimg/office1.png";
 import workationData from "@/data/workationData";
 import LocationBox from "../_component/LocationBox";
 import Appbar from "../_component/Appbar";

src/app/festival/more/page.tsx

@@ -1,34 +1,38 @@
+"use client"
 import ViewMoreFestivalItem from "@/components/common/ViewMoreFestivalItem";
 import { GrPrevious } from "react-icons/gr";
+import {festivalData} from "@/data/festivalData"; 
+import Link from "next/link";
+import { useRouter } from "next/navigation";
 
+export default function More() {
+    const router = useRouter();
 
-const datas = [
-  // 지역, 축제장소 분리 필요해보이나 일단은 address 하나로 통합해놓음
-  // 페이지 넘어가면서 지역 전달받는 방식 정해진 뒤에 수정 예정
-  {imgurl:"/hotelImage.png", address:"춘천", name:"춘천남이섬축제", startdate:"2024-11-11", enddate:"2024-11-28", liked:false, popular:true, mountain:true, ocean:false},
-]
+    const handleBack = () => {
+      router.back();
+    };
 
-export default function More() {
+  const festival_data = festivalData
   return (
     <div className="w-full">
         <div className="flex items-center p-[14px] border-b border-[#ededed] sticky top-0 bg-white z-10">
-          <GrPrevious className="w-[20px] h-[20px] text-gray-600" />
+          <Link href=""><GrPrevious className="w-[20px] h-[20px] text-gray-600" onClick={handleBack}/></Link>
           <p className="text-title2 mx-[10px]">휴일이 추천하는 강원도 축제</p>
         </div>
-        {datas.map((data, index) => (
-            <ViewMoreFestivalItem
-            key={index}
-              imgurl={data.imgurl}
-              address={data.address}
-              name={data.name}
-              startdate={data.startdate}
-              enddate={data.enddate}
-              liked={data.liked}
-              popular={data.popular}
-              mountain={data.mountain}
-              ocean={data.ocean}
-
-            />
+        {festival_data.map((data, index) => (
+            <Link href="../detail/festival" key={index}>
+              <ViewMoreFestivalItem
+                imgurl={data.image}
+                address={data.place}
+                name={data.name}
+                startdate={data.start_date}
+                enddate={data.end_date}
+                liked={false}
+                popular={index%4===0 ? true : false}
+                mountain={data.mountain}
+                ocean={data.ocean}
+              />
+            </Link>
         ))}
     </div>
   );

src/app/festival/page.tsx

@@ -7,13 +7,15 @@ import MediumCardItem from "@/components/common/MediumCardItem";
 import Carousel from "@/components/sliders/Carousel";
 import BannerImage1 from "../../../public/assets/images/BannerImage1.svg";
 import SmallListItem from "@/components/sliders/SmallListItem";
+import {festivalData} from "@/data/festivalData"; 
 
 export default function FestivalPage() {
+  const festival_data = festivalData
   return (
     <div className="w-full min-h-screen flex flex-col items-center justify-start">
       {/* 상단바 */}
       <div className="grid grid-cols-3 w-full px-[16px] py-3 items-center">
-        <Link href="" className="flex justify-start">
+        <Link href="/main" className="flex justify-start">
           <Image src={left} alt="left" />
         </Link>
         <div className="flex justify-center">
@@ -32,12 +34,12 @@ export default function FestivalPage() {
             </div>
           </div>
           <div className="w-full flex justify-end px-2">
-            <Link href="" className="text-caption2 text-gray-800">
+            <Link href="/festival/more" className="text-caption2 text-gray-800">
               더보기 &gt;
             </Link>
           </div>
           <div className="items-center justify-center w-full h-[248px]">
-            <Carousel />
+            <Carousel datas={festivalData}/>
           </div>
         </div>
       </div>
@@ -56,7 +58,7 @@ export default function FestivalPage() {
           <div className="text-subtitle3 text-gray-800">
             <span className="text-primary-core">얼마남지 않은</span> 축제
           </div>
-          <Link href="" className="text-caption2 text-gray-800">
+          <Link href="/festival/more" className="text-caption2 text-gray-800">
             더보기 &gt;
           </Link>
         </div>
@@ -67,12 +69,12 @@ export default function FestivalPage() {
         {/* 캠핑 리스트(4개 고정) */}
         <div className="grid grid-cols-1 w-full gap-y-6 mt-3 place-content-center">
           <div className="w-full flex justify-between items-center">
-            <MediumCardItem label="강릉 디프라이빗 캠핑" />
-            <MediumCardItem label="강릉 디프라이빗 캠핑" />
+            <MediumCardItem label={festival_data[0].name} imgurl={festival_data[0].image}/>
+            <MediumCardItem label={festival_data[4].name} imgurl={festival_data[4].image}/>
           </div>
           <div className="flex justify-between items-center w-full">
-            <MediumCardItem label="강릉 디프라이빗 캠핑" />
-            <MediumCardItem label="강릉 디프라이빗 캠핑" />
+            <MediumCardItem label={festival_data[1].name} imgurl={festival_data[1].image}/>
+            <MediumCardItem label={festival_data[2].name} imgurl={festival_data[2].image}/>
           </div>
         </div>
       </div>
@@ -82,16 +84,16 @@ export default function FestivalPage() {
         <SubInfoTypo label="모든 직장인들이 선택한" />
         <div className="flex items-center justify-between w-full text-subtitle3 text-primary-core">
           BEST 인기 축제
-          <Link href="" className="text-caption2 text-gray-800">
+          <Link href="/festival/more" className="text-caption2 text-gray-800">
             더보기 &gt;
           </Link>
         </div>
       </div>
       <div className="w-full whitespace-nowrap overflow-x-auto flex gap-x-[8px] scrollbar-hide pt-3 px-[16px] pb-[50px]">
-        <SmallListItem label="강릉 그랑블루요트" imgurl="/tmp.jpg" />
-        <SmallListItem label="강릉 그랑블루요트" imgurl="/tmp.jpg" />
-        <SmallListItem label="강릉 그랑블루요트" imgurl="/tmp.jpg" />
-        <SmallListItem label="강릉 그랑블루요트" imgurl="/tmp.jpg" />
+        <SmallListItem label={festival_data[3].name} imgurl={festival_data[3].image} />
+        <SmallListItem label={festival_data[1].name} imgurl={festival_data[1].image} />
+        <SmallListItem label={festival_data[2].name} imgurl={festival_data[2].image} />
+        <SmallListItem label={festival_data[0].name} imgurl={festival_data[0].image} />
       </div>
 
       {/* bottom div */}