Merge pull request #84 from TripInfoWeb/dev_informations

화면 전환 없이 탭만 전환하도록 수정
TripInfoWeb · Jun 29, 2024 · 6bb39f2 · 6bb39f2
2 parents 0922240 + 804c3a0
commit 6bb39f2
Show file tree

Hide file tree

Showing 13 changed files with 27 additions and 24 deletions.
diff --git a/...informations/accommondation/[id]/page.tsx → ...ons/(detail)/accommondation/[id]/page.tsx b/...informations/accommondation/[id]/page.tsx → ...ons/(detail)/accommondation/[id]/page.tsx
diff --git a/src/app/informations/activity/[id]/page.tsx → ...ormations/(detail)/activity/[id]/page.tsx b/src/app/informations/activity/[id]/page.tsx → ...ormations/(detail)/activity/[id]/page.tsx
diff --git a/...app/informations/restaurant/[id]/page.tsx → ...mations/(detail)/restaurant/[id]/page.tsx b/...app/informations/restaurant/[id]/page.tsx → ...mations/(detail)/restaurant/[id]/page.tsx
diff --git a/src/app/informations/layout.tsx b/src/app/informations/layout.tsx
diff --git a/src/app/informations/accommondation/page.tsx → ...informations/list/accommondation/page.tsx b/src/app/informations/accommondation/page.tsx → ...informations/list/accommondation/page.tsx
@@ -16,8 +16,6 @@ export const metadata: Metadata = {
 export default function page({ searchParams }: MyProps) {
   return (
     <div className="flex flex-col items-center">
-      <BannerContainer />
-      <TopListContainer category="여행" />
       <CategoryLinks category="숙박" />
       <InformationListContainer
         category="숙박"

diff --git a/src/app/informations/activity/page.tsx → src/app/informations/list/activity/page.tsx b/src/app/informations/activity/page.tsx → src/app/informations/list/activity/page.tsx
@@ -16,8 +16,6 @@ export const metadata: Metadata = {
 export default function page({ searchParams }: MyProps) {
   return (
     <div className="flex flex-col items-center">
-      <BannerContainer />
-      <TopListContainer category="여행" />
       <CategoryLinks category="액티비티" />
       <InformationListContainer
         category="액티비티"

diff --git a/src/app/informations/list/layout.tsx b/src/app/informations/list/layout.tsx
@@ -0,0 +1,16 @@
+import BannerContainer from "@/containers/common/BannerContainer";
+import TopListContainer from "@/containers/informations/TopListContainer";
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <div className="flex flex-col items-center">
+      <BannerContainer />
+      <TopListContainer category="여행" />
+      {children}
+    </div>
+  );
+}
diff --git a/src/app/informations/restaurant/page.tsx → ...app/informations/list/restaurant/page.tsx b/src/app/informations/restaurant/page.tsx → ...app/informations/list/restaurant/page.tsx
@@ -16,8 +16,6 @@ export const metadata: Metadata = {
 export default function page({ searchParams }: MyProps) {
   return (
     <div className="flex flex-col items-center">
-      <BannerContainer />
-      <TopListContainer category="여행" />
       <CategoryLinks category="맛집" />
       <InformationListContainer
         category="맛집"

diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
@@ -73,7 +73,7 @@ const Header = ({
                           : "font-medium text-gray1"
                       } ` + "text-sm hover:text-main"
                     }
-                    href="/informations/restaurant?subCategory=all"
+                    href="/informations/list/restaurant?subCategory=all"
                   >
                     정보
                   </Link>

diff --git a/src/components/common/HeaderSidebar.tsx b/src/components/common/HeaderSidebar.tsx
@@ -13,7 +13,7 @@ type MyProps = {
 
 const HeaderSidebar = ({ onClose }: MyProps) => {
   return (
-    <aside className="animate-sidebarFadeIn fixed left-0 top-0 z-50 flex h-full w-[200%]">
+    <aside className="fixed left-0 top-0 z-50 flex h-full w-[200%] animate-sidebarFadeIn">
       <div className="bg-black/25">
         <nav className="h-full w-[18.75rem] rounded-r-2xl bg-white p-4">
           <div className="flex h-10 w-full items-center justify-between">
@@ -67,7 +67,7 @@ const HeaderSidebar = ({ onClose }: MyProps) => {
             <li className="border-b-2 px-1 py-4">
               <Link
                 className="flex flex-row items-center space-x-2 text-xl hover:bg-gray-100"
-                href="/informations/restaurant?subCategory=all"
+                href="/informations/list/restaurant?subCategory=all"
                 onClick={onClose}
               >
                 <IoMdInformationCircleOutline />
@@ -76,23 +76,23 @@ const HeaderSidebar = ({ onClose }: MyProps) => {
               <div className="flex flex-col space-y-2 pl-4 pt-4">
                 <Link
                   className="flex flex-row items-center space-x-2 text-sm hover:bg-gray-100"
-                  href="/informations/restaurant?subCategory=all"
+                  href="/informations/list/restaurant?subCategory=all"
                   onClick={onClose}
                 >
                   <IoRestaurant />
                   <p>맛집</p>
                 </Link>
                 <Link
                   className="flex flex-row items-center space-x-2 text-sm hover:bg-gray-100"
-                  href="/informations/accommondation?subCategory=all"
+                  href="/informations/list/accommondation?subCategory=all"
                   onClick={onClose}
                 >
                   <FaHotel />
                   <p>숙박</p>
                 </Link>
                 <Link
                   className="flex flex-row items-center space-x-2 text-sm hover:bg-gray-100"
-                  href="/informations/activity?tag=all"
+                  href="/informations/list/activity?tag=all"
                   onClick={onClose}
                 >
                   <FiActivity />

diff --git a/src/components/home/TabList.tsx b/src/components/home/TabList.tsx
@@ -6,7 +6,7 @@ const TabList = () => {
     <div className="mt-20 flex w-[60rem] flex-row items-center justify-between max-[1024px]:w-[39.75rem] max-[744px]:w-[calc(100%_-_48px)] max-[744px]:flex-col max-[744px]:gap-4">
       <Link
         className="flex h-72 w-[29.375rem] flex-col justify-between rounded-2xl bg-gradient-to-br from-[#CBF6FF] to-[#EBE0FA] p-12 duration-300 hover:scale-105 max-[1024px]:h-48 max-[1024px]:w-[19.25rem] max-[1024px]:p-6 max-[744px]:w-full"
-        href="/informations/restaurant?subCategory=all"
+        href="/informations/list/restaurant?subCategory=all"
       >
         <div className="space-y-2">
           <h2 className="text-2xl font-bold text-black max-[1024px]:text-lg">

diff --git a/src/components/informations/CategoryLinks.tsx b/src/components/informations/CategoryLinks.tsx
@@ -20,7 +20,7 @@ const CategoryLinks = ({ category }: MyProps) => {
                 " " +
                 "hover:main"
               }
-              href="/informations/restaurant?subCategory=all"
+              href="/informations/list/restaurant?subCategory=all"
             >
               맛집
             </Link>
@@ -36,7 +36,7 @@ const CategoryLinks = ({ category }: MyProps) => {
                 " " +
                 "hover:text-main"
               }
-              href="/informations/accommondation?subCategory=all"
+              href="/informations/list/accommondation?subCategory=all"
             >
               숙박
             </Link>
@@ -52,7 +52,7 @@ const CategoryLinks = ({ category }: MyProps) => {
                 " " +
                 "hover:text-main"
               }
-              href="/informations/activity?subCategory=all"
+              href="/informations/list/activity?subCategory=all"
             >
               액티비티
             </Link>

diff --git a/src/components/informations/SubCategoryList.tsx b/src/components/informations/SubCategoryList.tsx
@@ -19,7 +19,7 @@ const SubCategoryList = ({ category, subCategory }: MyProps) => {
             `${subCategory === value.query ? "border-main bg-main text-white" : "text-gray1"} ` +
             "rounded-full border-[0.0625rem] border-[#E9EBED] px-3 py-[0.375rem] text-sm font-medium hover:scale-105"
           }
-          href={`/informations/${CATEGORY_TEXT[category]}?subCategory=${value.query}`}
+          href={`/informations/list/${CATEGORY_TEXT[category]}?subCategory=${value.query}`}
         >
           {value.buttonText}
         </Link>