feat #57 - 메인페이지, 마이페이지 버튼 페이지 이동 연결

HYU-IL · Nov 30, 2024 · 067f981 · 067f981
1 parent 6bb626f
commit 067f981
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 36 deletions.
diff --git a/src/app/main/page.tsx b/src/app/main/page.tsx
@@ -1,19 +1,20 @@
-import Banner from "../../components/sliders/Banner";
+import Banner from "@/components/sliders/Banner";
 import LargeListItem from "@/components/sliders/LargeListItem";
 import MediumInnerTitleItem from "@/components/sliders/MediumInnerTitleItem";
 import MediumListItem from "@/components/sliders/MediumListItem";
 import SmallListItem from "@/components/sliders/SmallListItem";
 import { GrFormNext } from "react-icons/gr";
+import Link from 'next/link';
 
 export default function Main() {
 
   const MenuOptions = [
-    { icon: "/assets/icons/WorkationIcon.svg", title: "워케이션", description: "공유오피스와 숙박" },
-    { icon: "/assets/icons/CampingIcon.svg", title: "캠핑", description: "녹지와 푸른 숲" },
-    { icon: "/assets/icons/RecreationIcon.svg", title: "휴양", description: "해변과 템플스테이" },
-    { icon: "/assets/icons/MapIcon.svg", title: "지도선택", description: "탐색" },
-    { icon: "/assets/icons/LeisureIcon.svg", title: "레저", description: "스포츠와 놀이" },
-    { icon: "/assets/icons/FestivalIcon.svg", title: "지역축제", description: "강원 페스티벌" },
+    { icon: "/assets/icons/WorkationIcon.svg", title: "워케이션", description: "공유오피스와 숙박", url:"/workation" },
+    { icon: "/assets/icons/CampingIcon.svg", title: "캠핑", description: "녹지와 푸른 숲", url:"/camping" },
+    { icon: "/assets/icons/RecreationIcon.svg", title: "휴양", description: "해변과 템플스테이", url:"/resort" },
+    { icon: "/assets/icons/MapIcon.svg", title: "지도선택", description: "탐색", url:"/select-map" },
+    { icon: "/assets/icons/LeisureIcon.svg", title: "레저", description: "스포츠와 놀이", url:"/leisure" },
+    { icon: "/assets/icons/FestivalIcon.svg", title: "지역축제", description: "강원 페스티벌", url:"/festival" },
 ];
 
   const largeListItem = [
@@ -52,6 +53,16 @@ export default function Main() {
     { label: "강릉 모던 프라이빗 공간 | 휴휴가", imgurl: "/hotelImage.png", addr: "강릉시 황리단 민속마을" },
   ];
 
+  function season (){
+    const today = new Date();
+    const month = Number(today.getMonth()+1);
+
+    if(3 <= month && month <= 4) return "봄";
+    else if (5 <= month && month <= 8) return "여름";
+    else if (9 <= month && month <= 10) return "가을";
+    else if (11 <= month && month <= 12 || 1 <= month && month <=2 ) return "겨울";
+  }
+
     return (
       <div className="w-full ">
         <div className="w-full flex justify-between">
@@ -61,10 +72,10 @@ export default function Main() {
             <div className="bg-white w-[80%]">
               <div className="flex h-[46px] bg-[#ededed] justify-center rounded-tl-[23px]">
                 <button className="bg-white w-[44px] h-[44px] m-[3px] rounded-[13px] border-[0.5px] border-[#dbdbdb] flex justify-center items-center">
-                  <img src={"assets/icons/User.svg"}/>
+                  <Link href="/mypage"><img src={"assets/icons/User.svg"}/></Link>
                 </button>
                 <button className="bg-white w-[44px] h-[44px] m-[3px] rounded-[13px] border-[0.5px] border-[#dbdbdb] flex justify-center items-center">
-                  <img src={"/assets/icons/Bell.svg"}/>
+                  <Link href="/mypage/alert"><img src={"/assets/icons/Bell.svg"}/></Link>
                 </button>
               </div>
             </div>
@@ -77,11 +88,13 @@ export default function Main() {
           <div className="text-subtitle3 text-secondary-core mx-[24px] pb-[10px]">원하는 휴일을 선택하세요</div>
           <div className="flex justify-center my-[5px] flex-wrap">
             {MenuOptions.map((option, index) => (
+              <Link href={option.url}>
               <div key={index} className="w-[96px] h-[96px] bg-white rounded-[16px] border-[0.5px] border-[#dbdbdb] flex flex-col justify-center items-center mx-[6px] my-[3px]">
                 <img src={option.icon} />
                 <p className="text-body2 m-[1px]">{option.title}</p>
                 <p className="text-caption3 text-gray-500">{option.description}</p>
               </div>
+              </Link>
             ))}
           </div>
 
@@ -101,9 +114,11 @@ export default function Main() {
                 <span className="text-primary-core text-title2">놀면서 일하자! </span>
                 <span className="text-primary-900 text-title2"> 인기 워케이션</span>
               </div>
+              <Link href="/workation">
                 <button className="text-caption2 text-gray-800 mx-[10px] flex items-center">
                   <span>더보기</span><GrFormNext className="text-[13px]"/>
                 </button>
+              </Link>
             </div>
           </div>
           <div className="whitespace-nowrap overflow-x-auto flex gap-x-[8px] scrollbar-hide">
@@ -115,10 +130,12 @@ export default function Main() {
           <div className="h-[40px]"/>
 
           <div className="flex justify-between items-center ">
-            <div className="text-primary-900 text-title2 my-[7px]">강원도의 가을 축제</div>
-            <button className="text-caption2 text-gray-800 mx-[10px] flex items-center">
-              <span>더보기</span><GrFormNext className="text-[13px]"/>
-            </button>
+            <div className="text-primary-900 text-title2 my-[7px]">강원도의 {season()} 축제</div>
+            <Link href="/festival">
+              <button className="text-caption2 text-gray-800 mx-[10px] flex items-center">
+                <span>더보기</span><GrFormNext className="text-[13px]"/>
+              </button>
+            </Link>
           </div>
           <div className="whitespace-nowrap overflow-x-auto flex gap-x-[8px] scrollbar-hide">
           {smallListItems.map((item, index) => (
@@ -133,9 +150,11 @@ export default function Main() {
               <span className="text-primary-core text-title2">놀면서 일하자! </span>
               <span className="text-primary-900 text-title2"> 인기 워케이션</span>
             </div>
+            <Link href="/workation">
               <button className="text-caption2 text-gray-800 mx-[10px] flex items-center">
                 <span>더보기</span><GrFormNext className="text-[13px]"/>
               </button>
+            </Link>
           </div>
           <div className="text-gray-700 text-subtitle3 mb-[7px]">#호캉스 #프라이빗 공간</div>
           <div className="whitespace-nowrap overflow-x-auto flex gap-x-[8px] scrollbar-hide">
@@ -148,9 +167,11 @@ export default function Main() {
 
           <div className="flex justify-between items-center mb-[10px]">
           <div className="text-primary-900 text-title2 my-[7px]">이번주 HOT 인기 레저활동</div>
+          <Link href="/leisure">
             <button className="text-caption2 text-gray-800 mx-[10px] flex items-center">
               <span>더보기</span><GrFormNext className="text-[13px]"/>
             </button>
+            </Link>
           </div>
           <div className="whitespace-nowrap overflow-x-auto flex gap-x-[8px] scrollbar-hide">
           {mediumListItems.map((item, index) => (

diff --git a/src/app/mypage/alert/page.tsx b/src/app/mypage/alert/page.tsx
@@ -1,12 +1,19 @@
+"use client";
 import { GrPrevious } from "react-icons/gr";
-import CategoryTitle from "@/components/common/CategoryTitle";
+import { useRouter } from "next/navigation";
 
 
 export default function Alert() {
+    const router = useRouter();
+
+    const handleBack = () => {
+      router.back();
+    };
+
   return (
     <div className="w-full h-[100vh]">
         <div className="relative flex justify-between items-center p-[14px] border-b border-[#ededed]">
-            <GrPrevious className="ml-0 w-[20px] h-[20px] text-gray-600"/>
+              <GrPrevious className="ml-0 w-[20px] h-[20px] text-gray-600" onClick={handleBack}/>
             <div className="absolute left-1/2 transform -translate-x-1/2 text-primary-core text-title2">알림함</div>
         </div>
         <div className="w-[90%] m-auto">

diff --git a/src/app/mypage/like/page.tsx b/src/app/mypage/like/page.tsx
@@ -1,5 +1,6 @@
+"use client";
 import Image from 'next/image';
-import CategoryTitle from "@/components/common/CategoryTitle";
+import { useRouter } from "next/navigation";
 import { GrPrevious } from "react-icons/gr";
 
 const LikeList = [
@@ -8,10 +9,16 @@ const LikeList = [
 ];
 
 export default function Like() {
+    const router = useRouter();
+
+    const handleBack = () => {
+      router.back();
+    };
+
   return (
     <div className="w-full h-[100vh]">
       <div className="relative flex justify-between items-center p-[14px] border-b border-[#ededed]">
-            <GrPrevious className="ml-0 w-[20px] h-[20px] text-gray-600"/>
+            <GrPrevious className="ml-0 w-[20px] h-[20px] text-gray-600" onClick={handleBack}/>
             <div className="absolute left-1/2 transform -translate-x-1/2 text-primary-core text-title2">나의 찜</div>
         </div>
       <div className="w-[90%] m-auto">

diff --git a/src/app/mypage/notice/page.tsx b/src/app/mypage/notice/page.tsx
@@ -1,13 +1,21 @@
+"use client";
 import { GrPrevious } from "react-icons/gr";
-import CategoryTitle from "@/components/common/CategoryTitle";
+import { useRouter } from "next/navigation";
 
 
 export default function Notice() {
+    const router = useRouter();
+
+    const handleBack = () => {
+      router.back();
+    };
+
   return (
     <div className="w-full h-[100vh]">
         <div className="relative flex justify-between items-center p-[14px] border-b border-[#ededed]">
-            <GrPrevious className="ml-0 w-[20px] h-[20px] text-gray-600"/>
+            <GrPrevious className="ml-0 w-[20px] h-[20px] text-gray-600" onClick={handleBack}/>
             <div className="absolute left-1/2 transform -translate-x-1/2 text-primary-core text-title2">공지사항</div>
+
         </div>
         <div className="w-[90%] m-auto">
             <div className="w-full my-[30px]">

diff --git a/src/app/mypage/page.tsx b/src/app/mypage/page.tsx
@@ -1,12 +1,21 @@
+"use client";
 import { GrPrevious } from "react-icons/gr";
 import { GrFormNext } from "react-icons/gr";
 import Image from 'next/image';
+import Link from 'next/link';
+import { useRouter } from "next/navigation";
 
 export default function MyPage() {
+    const router = useRouter();
+
+    const handleBack = () => {
+      router.back();
+    };
+
   return (
     <div className="w-full">
         <div className="relative flex justify-between items-center p-[14px] border-b border-[#ededed]">
-            <GrPrevious className="ml-0 w-[20px] h-[20px] text-gray-600"/>
+              <GrPrevious className="ml-0 w-[20px] h-[20px] text-gray-600" onClick={handleBack}/>
             <div className="absolute left-1/2 transform -translate-x-1/2 text-primary-core text-title2">마이페이지</div>
         </div>
 
@@ -22,29 +31,37 @@ export default function MyPage() {
                 </div>
             </div>
             <div className="flex my-[10px] items-center justify-between">
-                <div className="flex flex-col jsutify-center items-center w-[30%]">
-                    <Image src="/assets/icons/heart.svg" width={24} height={24} alt="찜 아이콘"/>
-                    <div className="text-caption2 text-gray-900 my-[5px]">나의 찜</div>
-                </div>
+                <Link href="/mypage/like" className="w-[30%]">
+                    <div className="flex flex-col justify-center items-center">
+                        <Image src="/assets/icons/heart.svg" width={24} height={24} alt="찜 아이콘"/>
+                        <div className="text-caption2 text-gray-900 my-[5px]">나의 찜</div>
+                    </div>
+                </Link>
                 <span className="text-[18px] text-center m-[10px] text-[#ededed]">|</span>
-                <div className="flex flex-col jsutify-center items-center w-[35%]">
-                    <Image src="/assets/icons/clock.svg" width={24} height={24} alt="시계 아이콘콘" />
-                    <div className="text-caption2 text-gray-900 my-[5px]">최근 본 상품</div>
-                </div>
+                <Link href="/mypage" className="w-[35%]">
+                    <div className="flex flex-col justify-center items-center">
+                        <Image src="/assets/icons/clock.svg" width={24} height={24} alt="시계 아이콘" />
+                        <div className="text-caption2 text-gray-900 my-[5px]">최근 본 상품</div>
+                    </div>
+                </Link>
                 <span className="text-[18px] text-center m-[10px] text-[#ededed]">|</span>
-                <div className="flex flex-col jsutify-center items-center w-[30%]">
-                    <Image src="/assets/icons/alert.svg" width={24} height={24} alt="벨 아이콘"/>
-                    <div className="text-caption2 text-gray-900 my-[5px]">알림함</div>
-                </div>
+                <Link href="/mypage/alert" className="w-[30%]">
+                    <div className="flex flex-col justify-center items-center">
+                        <Image src="/assets/icons/alert.svg" width={24} height={24} alt="벨 아이콘"/>
+                        <div className="text-caption2 text-gray-900 my-[5px]">알림함</div>
+                    </div>
+                </Link>
             </div>
         </div>
         <div className="bg-primary-100 w-[90%] h-[50px] bg-[#d3f9da] rounded-[4px] m-auto"></div>
         <div className="w-[90%] m-auto my-[25px]">
             <div className="text-gray-900 text-subtitle3 my-[20px]">내 정보</div>
+
             <div className="flex justify-between items-center my-[15px]">
                 <div className="text-body1 text-gray-900">내 정보 관리</div>
                 <GrFormNext className="text-[20px] text-[#767676]"/>
             </div>
+
             <div className="flex justify-between items-center my-[15px]">
                 <div className="text-body1 text-gray-900">나의 워케이션 취향</div>
                 <GrFormNext className="text-[20px] text-[#767676]"/>
@@ -53,10 +70,12 @@ export default function MyPage() {
         <hr className="w-[90%] m-auto"/>
         <div className="w-[90%] m-auto my-[25px]">
             <div className="text-gray-900 text-subtitle3 my-[20px]">서비스 이용</div>
-            <div className="flex justify-between items-center my-[15px]">
-            <div className="text-body1 text-gray-900 ">공지사항</div>
-                <GrFormNext className="text-[20px] text-[#767676]"/>
-            </div>
+            <Link href="/mypage/notice">
+                <div className="flex justify-between items-center my-[15px]">
+                <div className="text-body1 text-gray-900 ">공지사항</div>
+                    <GrFormNext className="text-[20px] text-[#767676]"/>
+                </div>
+            </Link>
             <div className="flex justify-between items-center my-[15px]">
                 <div className="text-body1 text-gray-900 ">설정</div>
                 <GrFormNext className="text-[20px] text-[#767676]"/>