Merge pull request #85 from TripInfoWeb/dev_informations

Skeleton 컴포넌트 생성

src/app/informations/(detail)/[category]/[id]/page.tsx

@@ -0,0 +1,45 @@
+import RecommendationList from "@/components/informations/RecommendationList";
+import RecommendationListSkeleton from "@/components/skeleton/informations/RecommendationListSkeleton";
+import { CATEGORY_TEXT } from "@/constants/informations/category";
+import InformationViewerContainer from "@/containers/informations/InformationViewerContainer";
+import { Suspense } from "react";
+
+type MyProps = {
+  params: { category: string; id: string };
+};
+
+export async function generateMetadata({ params: { category, id } }: MyProps) {
+  const postId = Number(id);
+  if (postId <= 0 || !Number.isSafeInteger(postId)) {
+    throw Error("Not Found");
+  }
+
+  return {
+    title: `정보 - ${CATEGORY_TEXT[category]} - ${postId}`,
+    description: "Solitour의 정보 상세 페이지",
+  };
+}
+
+export default function page({ params: { category, id } }: MyProps) {
+  if (
+    category !== "restaurant" &&
+    category !== "accommodation" &&
+    category !== "activity"
+  ) {
+    throw Error("Not Found");
+  }
+
+  const postId = Number(id);
+  if (postId < 1 || !Number.isSafeInteger(postId)) {
+    throw Error("Not Found");
+  }
+
+  return (
+    <div className="flex flex-col items-center">
+      <InformationViewerContainer category={category} id={postId} />
+      <Suspense fallback={<RecommendationListSkeleton />}>
+        <RecommendationList />
+      </Suspense>
+    </div>
+  );
+}

src/app/informations/list/[category]/page.tsx

@@ -0,0 +1,38 @@
+import CategoryLinks from "@/components/informations/CategoryLinks";
+import InformationListSkeleton from "@/components/skeleton/informations/InformationListSkeleton";
+import { CATEGORY_TEXT } from "@/constants/informations/category";
+import InformationListContainer from "@/containers/informations/InformationListContainer";
+import { Suspense } from "react";
+
+type MyProps = {
+  params: { category: string };
+  searchParams: { [key: string]: string | undefined };
+};
+
+export async function generateMetadata({ params: { category } }: MyProps) {
+  return {
+    title: `정보 - ${CATEGORY_TEXT[category]}`,
+    description: "Solitour의 정보 목록 페이지",
+  };
+}
+
+export default function page({ params, searchParams }: MyProps) {
+  return (
+    <div className="flex flex-col items-center">
+      <CategoryLinks category={params.category} />
+      <Suspense
+        fallback={
+          <InformationListSkeleton
+            category={params.category}
+            subCategory={searchParams["subCategory"]!}
+          />
+        }
+      >
+        <InformationListContainer
+          category={params.category}
+          subCategory={searchParams["subCategory"]!}
+        />
+      </Suspense>
+    </div>
+  );
+}

src/app/informations/list/layout.tsx

@@ -1,5 +1,7 @@
+import TopListSkeleton from "@/components/skeleton/common/TopListSkeleton";
 import BannerContainer from "@/containers/common/BannerContainer";
 import TopListContainer from "@/containers/informations/TopListContainer";
+import { Suspense } from "react";
 
 export default function RootLayout({
   children,
@@ -9,7 +11,9 @@ export default function RootLayout({
   return (
     <div className="flex flex-col items-center">
       <BannerContainer />
-      <TopListContainer category="여행" />
+      <Suspense fallback={<TopListSkeleton title="여행" />}>
+        <TopListContainer category="여행" />
+      </Suspense>
       {children}
     </div>
   );

src/app/page.tsx

@@ -1,16 +1,25 @@
 import TabList from "@/components/home/TabList";
+import BestInformationListSkeleton from "@/components/skeleton/home/BestInformationListSkeleton";
+import NewMeetingListSkeleton from "@/components/skeleton/home/NewMeetingListSkeleton";
 import BestInformationListContainer from "@/containers/home/BestInformationListContainer";
 import HomeCarouselContainer from "@/containers/home/HomeCarouselContainer";
 import NewMeetingListContainer from "@/containers/home/NewMeetingListContainer";
+import { Suspense } from "react";
 
 // todo
 export default function Home() {
   return (
     <div className="flex flex-col items-center">
       <HomeCarouselContainer />
       <TabList />
-      <BestInformationListContainer />
-      <NewMeetingListContainer />
+
+      {/* TODO: async 사용 시 마우스 스크롤 문제 */}
+      <Suspense fallback={<BestInformationListSkeleton />}>
+        <BestInformationListContainer />
+      </Suspense>
+      <Suspense fallback={<NewMeetingListSkeleton />}>
+        <NewMeetingListContainer />
+      </Suspense>
     </div>
   );
 }

src/components/common/HeaderSidebar.tsx

@@ -84,15 +84,15 @@ const HeaderSidebar = ({ onClose }: MyProps) => {
                 </Link>
                 <Link
                   className="flex flex-row items-center space-x-2 text-sm hover:bg-gray-100"
-                  href="/informations/list/accommondation?subCategory=all"
+                  href="/informations/list/accommodation?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/list/activity?tag=all"
+                  href="/informations/list/activity?subCategory=all"
                   onClick={onClose}
                 >
                   <FiActivity />

src/components/common/InformationItem.tsx

@@ -15,13 +15,13 @@ type MyProps = {
 const InformationItem = ({ id, category, title, image }: MyProps) => {
   let style = "";
   switch (category) {
-    case "맛집":
+    case "restaurant":
       style = "border-[#FFDDEF] bg-[#FFF2F9] text-[#C5006A]";
       break;
-    case "숙박":
+    case "accommodation":
       style = "border-[#BEEDEA] bg-[#E7FFFB] text-[#009CBE]";
       break;
-    case "액티비티":
+    case "activity":
       style = "border-[#DDE5FF] bg-[#F2F6FF] text-[#0036C2]";
       break;
     default:
@@ -43,7 +43,7 @@ const InformationItem = ({ id, category, title, image }: MyProps) => {
         <p
           className={`w-fit rounded-full border-[0.0625rem] px-4 py-[0.375rem] text-xs font-semibold shadow ${style}`}
         >
-          {category}
+          {CATEGORY_TEXT[category]}
         </p>
         <div className="cursor-pointer text-white hover:scale-110">
           <CiBookmark size={"2rem"} />
@@ -52,7 +52,7 @@ const InformationItem = ({ id, category, title, image }: MyProps) => {
       <div className="flex h-28 flex-col justify-between bg-white px-5 py-4">
         <Link
           className="p-1 font-bold hover:text-main"
-          href={`/informations/${CATEGORY_TEXT[category]}/${id}`}
+          href={`/informations/${category}/${id}`}
         >
           {title}
         </Link>

src/components/common/TopList.tsx

@@ -21,7 +21,9 @@ const titleList: { [key: string]: string[] } = {
   ],
 };
 
-const TopList = ({ title }: MyProps) => {
+const TopList = async ({ title }: MyProps) => {
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+
   return (
     <div className="z-10 -mt-28 flex h-fit w-[60rem] flex-col justify-center rounded-2xl bg-white px-24 py-16 shadow shadow-[#CCECE2] max-[1024px]:w-[39.75rem] max-[1024px]:px-8 max-[1024px]:py-12 max-[744px]:-mt-24 max-[744px]:w-[calc(100%_-_48px)]">
       <h2 className="mb-9 border-b-2 border-gray3 pb-3 text-2xl font-semibold text-black">