[강대원] sprint11

app/(auth)/layout.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+
+const queryClient = new QueryClient();
+
+export default function AuthLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <div className="flex min-h-screen flex-col pt-[75px]">
+        <main className="flex-grow">{children}</main>
+      </div>
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  );
+}

app/articles/page.tsx → app/(routes)/articles/page.tsx

@@ -4,7 +4,7 @@ import BestArticles from "@/components/articles/BestArticles";
 const ArticlePage = () => {
   return (
     <article className="p-4 md:p-6">
-      <div className="mx-auto min-w-[325px] max-w-[1200px]">
+      <div className="max-w-container mx-auto min-w-[325px]">
         <BestArticles />
         <AllArticles />
       </div>

app/items/[id]/edit/page.tsx → app/(routes)/items/[id]/edit/page.tsx

@@ -28,7 +28,7 @@ const ProductUpdatePage = ({ params }: { params: { id: string } }) => {
   };
 
   return (
-    <section className="mx-auto box-border max-w-[1200px] px-6 pb-40 pt-6">
+    <section className="max-w-container mx-auto box-border px-6 pb-40 pt-6">
       <ProductForm
         defaultValues={productData}
         productId={productId}

app/items/create/page.tsx → app/(routes)/items/create/page.tsx

@@ -2,7 +2,7 @@ import ProductForm from "@/components/items/ProductForm";
 
 const ProductCreatePage = () => {
   return (
-    <section className="mx-auto box-border max-w-[1200px] px-6 pb-40 pt-6">
+    <section className="max-w-container mx-auto box-border px-6 pb-40 pt-6">
       <ProductForm />
     </section>
   );

app/(routes)/items/page.tsx

@@ -0,0 +1,38 @@
+import AllProducts from "@/components/items/AllProducts";
+import BestProducts from "@/components/items/BestProducts";
+import { BASE_URL } from "@/lib/axios";
+
+const ItemsPage = async () => {
+  // User Agent를 활용한 pageSize 결정은 app 디렉토리에서는 어렵기 때문에 기본값 사용
+  const pageSize = 4;
+  let bestProducts = null;
+  try {
+    bestProducts = await getBestProducts(pageSize);
+  } catch (error) {
+    console.error("Error fetching best products:", error);
+  }
+
+  return (
+    <article className="px-6 py-7">
+      <section className="max-w-container mx-auto flex flex-col gap-10">
+        <BestProducts items={bestProducts} />
+        <AllProducts />
+      </section>
+    </article>
+  );
+};
+
+// SSR을 사용하면 대신 fetch API를 직접 사용합니다.
+async function getBestProducts(pageSize: number) {
+  console.log(BASE_URL);
+  const res = await fetch(
+    `${BASE_URL}/products?page=1&pageSize=${pageSize}&orderBy=favorite`,
+    { cache: "no-store" },
+  );
+  if (!res.ok) {
+    throw new Error("Failed to fetch");
+  }
+  return res.json();
+}
+
+export default ItemsPage;

app/ClientLayout.tsx → app/(routes)/layout.tsx

@@ -1,34 +1,23 @@
 "use client";
 
-import { usePathname } from "next/navigation";
-import Nav from "@/components/common/nav/Nav";
-import Footer from "@/components/common/footer/Footer";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-
-// 숨길 페이지를 객체로 관리
-const hiddenRoutes = {
-  login: "/login",
-  signup: "/signin",
-};
+import Nav from "@/components/common/nav/Nav";
+import Footer from "@/components/common/footer/Footer";
 
 const queryClient = new QueryClient();
 
-export default function ClientLayout({
+export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  const pathname = usePathname();
-  // 현재 경로가 숨길 페이지에 포함되는지 확인
-  const hideNavAndFooter = Object.values(hiddenRoutes).includes(pathname);
-
   return (
     <QueryClientProvider client={queryClient}>
       <div className="flex min-h-screen flex-col pt-[75px]">
-        {!hideNavAndFooter && <Nav />}
+        <Nav />
         <main className="flex-grow">{children}</main>
-        {!hideNavAndFooter && <Footer />}
+        <Footer />
       </div>
       <ReactQueryDevtools initialIsOpen={false} />
     </QueryClientProvider>

app/page.tsx → app/(routes)/page.tsx

@@ -2,20 +2,30 @@ import HomeBanner from "@/components/home/HomeBanner";
 import topBannerImage from "@/public/images/home/hero-image.png";
 import bottomBannerImage from "@/public/images/home/bottom-banner-image.png";
 
+// SSG 
 export default function HomePage() {
   return (
-    <>
+    <main>
+    <h1 className="sr-only">판다마켓 - 안전한 중고거래 플랫폼</h1>
+    <section aria-label="메인 배너">
       <HomeBanner
         title="일상의 모든 물건을 거래해 보세요"
         buttonText="구경하러 가기"
         buttonLink="/login"
         imageSrc={topBannerImage}
       />
+    </section>
+    <article className="features">
+      <h2 className="sr-only">판다마켓 주요 기능</h2>
+      {/* 기능 소개 섹션들 */}
+    </article>
+    <section aria-label="신뢰성 배너">
       <HomeBanner
-        title="믿을 수 있는 <br /> 판다마켓 중고 거래"
+        title="믿을 수 있는 판다마켓 중고 거래"
         imageSrc={bottomBannerImage}
         isFooter
       />
-    </>
+    </section>
+  </main>
   );
 }

app/post/[id]/page.tsx → app/(routes)/post/[id]/page.tsx

@@ -9,7 +9,7 @@ const PostDetailPage = ({ params }: { params: { id: string } }) => {
   const { id: productId } = params;
 
   return (
-    <article className="mx-auto max-w-[1200px]">
+    <article className="max-w-container mx-auto">
       {/* 게시글 내용 */}
       <PostDetailContent />
 

app/post/page.tsx → app/(routes)/post/page.tsx

@@ -4,7 +4,7 @@ import PostList from "@/components/post/PostList/PostList";
 const PostPage = () => {
   return (
     <article className="p-4 md:p-6">
-      <div className="mx-auto min-w-[325px] max-w-[1200px]">
+      <div className="max-w-container mx-auto min-w-[325px]">
         <BestPost />
         <PostList />
       </div>

app/layout.tsx

@@ -1,7 +1,6 @@
 import type { Metadata } from "next";
 import localFont from "next/font/local";
 import "./globals.css";
-import ClientLayout from "./ClientLayout";
 
 const pretendard = localFont({
   src: "./fonts/PretendardVariable.woff2",
@@ -11,11 +10,46 @@ const pretendard = localFont({
 });
 
 export const metadata: Metadata = {
-  title: "판다 마켓",
-  description: "Generated by 대원",
+  title: "판다마켓 | 안전한 중고거래 플랫폼",
+  description:
+    "일상의 모든 물건을 거래하는 안전한 중고거래 플랫폼. 패션, 전자기기, 가전 등 다양한 카테고리의 상품을 만나보세요. 판다마켓에서 믿을 수 있는 거래를 시작하세요.",
+  keywords:
+    "판다마켓, 중고거래, 중고마켓, 중고물품, 중고판매, 중고구매, 안전거래",
+  metadataBase: new URL("https://panda-marketplace.vercel.app"),
+  alternates: {
+    canonical: "/",
+  },
+
   icons: {
     icon: "/icons/favicon/favicon.ico",
   },
+  openGraph: {
+    title: "판다마켓 | 안전한 중고거래 플랫폼",
+    description: "일상의 모든 물건을 거래하는 안전한 중고거래 플랫폼",
+    url: "https://panda-marketplace.vercel.app",
+    siteName: "판다마켓",
+    images: [
+      {
+        url: "/public/images/logo/logo.svg",
+        width: 1200,
+        height: 630,
+        alt: "판다마켓 대표 이미지",
+      },
+    ],
+    locale: "ko_KR",
+    type: "website",
+  },
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      "max-video-preview": -1,
+      "max-image-preview": "large",
+      "max-snippet": -1,
+    },
+  },
 };
 
 export default function RootLayout({
@@ -27,9 +61,7 @@ export default function RootLayout({
     <>
       <html lang="ko" className={`${pretendard.variable} antialiased`}>
         <body className={pretendard.className}>
-          <div className="flex min-h-screen flex-col">
-            <ClientLayout>{children}</ClientLayout>
-          </div>
+          <div className="flex min-h-screen flex-col">{children}</div>
         </body>
       </html>
     </>

components/articles/AllArticleCard.tsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 import { formattedDate } from "@/utils/formattedDate";
 import HeartIcon from "@/components/SVG/HeartIcon";
 import profileIcon from "@/public/icons/ic_profile.png";
-import { DEFAULT_IMAGE } from "@/utils/defaultImage";
+import { DEFAULT_IMAGE_PATH } from "@/utils/defaultImage";
 
 type AllArticleCardProps = {
   article: ArticleCreateResponse;
@@ -24,7 +24,7 @@ const AllArticleCard = ({
           <p className="grow text-xl font-semibold text-black">{title}</p>
           <div className="h-[72px] w-[72px] shrink-0 rounded-lg border border-gray-light bg-white p-3">
             <Image
-              src={image ?? DEFAULT_IMAGE}
+              src={image ?? DEFAULT_IMAGE_PATH}
               alt="post thumbnail image"
               height={48}
               width={48}

components/articles/AllArticles.tsx

@@ -12,17 +12,19 @@ import searchIcon from "@/public/icons/ic_search.svg";
 import sortButton from "@/public/images/btn_sort.png";
 import { getArticleList } from "@/services/articleApi";
 import { ArticleListResponse } from "@/types/articles";
+import ArticleListWrapper from "./ArticleListWrapper";
+import { MINUTES } from "@/constants";
 
 const AllArticles = () => {
   const [sortOrder, setSortOrder] = useState<"recent" | "like">("recent");
 
   const { data: articles, isLoading } = useQuery<ArticleListResponse>({
     queryKey: ["AllArticles"],
     queryFn: () => getArticleList(1, 10, sortOrder, ""),
-    staleTime: 1000 * 60 * 5,
-    gcTime: 1000 * 60 * 30,
+    staleTime: 5 * MINUTES,
+    gcTime: 30 * MINUTES,
     refetchOnWindowFocus: false,
-    refetchInterval: 1000 * 60 * 10,
+    refetchInterval: 10 * MINUTES,
   });
 
   if (isLoading) {
@@ -73,11 +75,13 @@ const AllArticles = () => {
       </div>
 
       {/* 게시글 리스트 */}
-      <ul>
-        {articles?.list?.map((article) => (
-          <AllArticleCard key={article.id} article={article} />
-        ))}
-      </ul>
+      <ArticleListWrapper>
+        <ul>
+          {articles?.list?.map((article) => (
+            <AllArticleCard key={article.id} article={article} />
+          ))}
+        </ul>
+      </ArticleListWrapper>
     </section>
   );
 };

components/articles/ArticleListWrapper.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import React from "react";
+
+type ArticleListWrapperProps = {
+  children: React.ReactNode;
+};
+
+const ArticleListWrapper = ({ children }: ArticleListWrapperProps) => {
+  return <div className="article-list-wrapper">{children}</div>;
+};
+
+export default ArticleListWrapper;

components/common/comment/CommentInput.tsx

@@ -6,7 +6,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 type CommentInputProps = {
   title: string;
   placeholder: string;
-  productId: string | number;
+  productId: string;
 };
 
 const CommentInput = ({ title, placeholder, productId }: CommentInputProps) => {