[김민재] Sprint12

.env

@@ -0,0 +1 @@
+BASE_URL = https://panda-market-api.vercel.app

next.config.mjs

@@ -2,11 +2,24 @@
 const nextConfig = {
   reactStrictMode: true,
   images: {
-    domains: [
-      "sprint-fe-project.s3.ap-northeast-2.amazonaws.com",
-      "example.com",
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "sprint-fe-project.s3.ap-northeast-2.amazonaws.com",
+        port: "",
+        pathname: "**",
+      },
+      {
+        protocol: "https",
+        hostname: "example.com",
+        port: "",
+        pathname: "**",
+      },
     ],
   },
+  env: {
+    BASE_URL: process.env.BASE_URL,
+  },
 };
 
 export default nextConfig;

package.json

@@ -9,6 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.51.4",
+    "@tanstack/react-query-devtools": "^5.51.4",
     "axios": "^1.7.2",
     "next": "14.2.3",
     "react": "18.2.0",

src/apis/article/getArticles.ts

@@ -22,7 +22,7 @@ interface GetArticlesParams {
 const getArticles = async (
   option: GetArticlesParams = {
     page: 1,
-    pageSize: "",
+    pageSize: 10,
     orderBy: "like",
     keyword: "",
   }

src/apis/axiosInstance.ts

@@ -1,7 +1,7 @@
 import axios, { AxiosRequestConfig } from "axios";
-// git push origin Next.js-김민재-sprint10  실수하지않을려고 push config설정 안했는데 브랜치이름 너무 치기어려워서 넣었습니다.
+
 const axiosConfig: AxiosRequestConfig = {
-  baseURL: "https://panda-market-api.vercel.app/",
+  baseURL: process.env.BASE_URL,
   headers: {
     "Content-Type": "application/json",
     Accept: "application/json",

src/apis/product/getProducts.ts

@@ -0,0 +1,30 @@
+import createQueryParams from "@/utils/createQueryParams";
+import axiosInstance from "../axiosInstance";
+import { GetProductsResponse } from "@/types/products.type";
+
+export interface GetProductsParams {
+  page?: number;
+  pageSize?: number | string;
+  orderBy?: "recent" | "favorite";
+}
+
+const getProducts = async (
+  option: GetProductsParams = {
+    page: 1,
+    pageSize: 10,
+    orderBy: "favorite",
+  }
+) => {
+  const ProductsParams = createQueryParams(option);
+  try {
+    const { data } = await axiosInstance.get<GetProductsResponse>(
+      `/products?${ProductsParams}`
+    );
+    return data;
+  } catch (error) {
+    console.error(`Failed to fetch data: ${error}`);
+    throw error;
+  }
+};
+
+export default getProducts;

src/components/addBoardComponents/FormTitle.tsx

@@ -13,9 +13,7 @@ function FormTitle({ isValid, handleSubmit }: FormTitleProps) {
     <div className={hstack({ justifyContent: "space-between" })}>
       <h2 className={subTitle}>게시글 쓰기</h2>
       <button
-        className={buttonRecipe(
-          isValid ? { visual: "small" } : { visual: "smallDisabled" }
-        )}
+        className={buttonRecipe({ visual: isValid ? "small" : "large" })}
         onClick={handleSubmit}
       >
         글쓰기

src/components/itemsComponents/AllProductList.tsx

@@ -0,0 +1,18 @@
+import { GetProductsResponse } from "@/types/products.type";
+import ProductCard from "./ProductCard";
+
+function AllProductList({
+  products: { list },
+}: {
+  products: GetProductsResponse;
+}) {
+  return (
+    <div>
+      {list.map((item, index) => (
+        <ProductCard item={item} key={item.id} />
+      ))}
+    </div>
+  );
+}
+
+export default AllProductList;

src/components/itemsComponents/BestProducts.tsx

@@ -0,0 +1,17 @@
+import { GetProductsResponse } from "@/types/products.type";
+import ProductCard from "./ProductCard";
+
+function BestProductList({
+  products: { list },
+}: {
+  products: GetProductsResponse;
+}) {
+  return (
+    <div>
+      {list.map((item, index) => (
+        <ProductCard item={item} key={item.id} index={index} />
+      ))}
+    </div>
+  );
+}
+export default BestProductList;

src/components/itemsComponents/ControlBar.tsx

@@ -0,0 +1,14 @@
+import SearchBar from "../shared/SearchBar";
+import SortBy from "../shared/SortBy";
+
+function ControlBar() {
+  return (
+    <div>
+      {/* <SearchBar />
+      <button>상품 등록하기</button>
+      <SortBy sortByText="최애순" /> */}
+    </div>
+  );
+}
+
+export default ControlBar;

src/components/itemsComponents/ProductCard.tsx

@@ -0,0 +1,37 @@
+import { css } from "@/styled-system/css";
+import { Product } from "@/types/products.type";
+import favoriteIcon from "@/assets/icons/heart_ic.svg";
+import Image from "next/image";
+import React from "react";
+import { hstack } from "@/styled-system/patterns/hstack.mjs";
+// index를 프롭으로 받게되면서 범용성이 많이 떨어짐 전체 상품에서도 쓸만했는데..
+function ProductCard({ item, index }: { item: Product; index?: number }) {
+  const { images, name, price, favoriteCount } = item;
+  const imageSize = index ? 343 : 211;
+  return (
+    <div
+      className={css({
+        display: {
+          base: typeof index === "number" && index > 0 ? "none" : "block",
+          md: typeof index === "number" && index > 1 ? "none" : "block",
+          xl: "block",
+        },
+      })}
+    >
+      <Image
+        src={images[0]}
+        alt={`${name}" 사진"`}
+        width={imageSize}
+        height={imageSize}
+      />
+      <h1>{name}</h1>
+      <p>{price}</p>
+      <div className={hstack()}>
+        <Image src={favoriteIcon} alt="좋아요 아이콘" width={16} height={16} />
+        <p>{favoriteCount}</p>
+      </div>
+    </div>
+  );
+}
+
+export default ProductCard;

src/hooks/useResponsive.ts

@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react";
 import { useMediaQuery } from "react-responsive";
 
 interface Responsive {
@@ -7,11 +8,21 @@ interface Responsive {
 }
 
 function useResponsive(): Responsive {
-  const isPc = useMediaQuery({ query: "(min-width: 1280px)" });
-  const isTablet = useMediaQuery({
+  const [isPc, setIsPc] = useState(false);
+  const [isTablet, setIsTablet] = useState(false);
+  const [isMobile, setIsMobile] = useState(true); // 초기값을 모바일로 설정
+
+  const pcQuery = useMediaQuery({ query: "(min-width: 1280px)" });
+  const tabletQuery = useMediaQuery({
     query: "(min-width: 768px) and (max-width: 1280px)",
   });
-  const isMobile = useMediaQuery({ query: "(max-width: 767px)" });
+  const mobileQuery = useMediaQuery({ query: "(max-width: 767px)" });
+
+  useEffect(() => {
+    setIsPc(pcQuery);
+    setIsTablet(tabletQuery);
+    setIsMobile(mobileQuery);
+  }, [pcQuery, tabletQuery, mobileQuery]);
 
   return { isPc, isTablet, isMobile };
 }

src/pages/_app.tsx

@@ -1,6 +1,26 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import "../css/common/index.css";
 import type { AppProps } from "next/app";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import React from "react";
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+  const [queryClient] = React.useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 60 * 1000,
+            gcTime: 60 * 1000 * 10,
+          },
+        },
+      })
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Component {...pageProps} />
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  );
 }

src/pages/items/index.tsx

@@ -1,9 +1,61 @@
+import getProducts, { GetProductsParams } from "@/apis/product/getProducts";
+import AllProductList from "@/components/itemsComponents/AllProductList";
+import BestProductList from "@/components/itemsComponents/BestProducts";
+import ControlBar from "@/components/itemsComponents/ControlBar";
 import Header from "@/components/shared/Header/Header";
+import { GetProductsResponse } from "@/types/products.type";
+import { useQuery } from "@tanstack/react-query";
+
+export async function getServerSideProps(context: any) {
+  const userAgent = context.req.headers["user-agent"];
+  const isMobile = /mobile/i.test(userAgent);
+  const bestProductsOption: GetProductsParams = {
+    page: 1,
+    pageSize: 3,
+    orderBy: "favorite",
+  };
+  console.log(isMobile);
+  const allProductsOption: GetProductsParams = {
+    page: 1,
+    pageSize: isMobile ? 5 : 10,
+    orderBy: "recent",
+  };
+
+  const bestProducts = await getProducts(bestProductsOption);
+  const allProducts = await getProducts(allProductsOption);
+
+  return { props: { bestProducts, allProducts } };
+}
+
+function Items({
+  bestProducts,
+  allProducts,
+}: {
+  bestProducts: GetProductsResponse;
+  allProducts: GetProductsResponse;
+}) {
+  const { data: bestProductsData } = useQuery({
+    queryKey: ["bestProductsData"],
+    queryFn: () => getProducts({ orderBy: "favorite", pageSize: 3, page: 1 }),
+    initialData: bestProducts,
+  });
+
+  const { data: allProductsData } = useQuery({
+    queryKey: ["allProductsData"],
+    queryFn: () => getProducts({ orderBy: "recent", pageSize: 10, page: 1 }),
+    initialData: allProducts,
+  });
 
-function Items() {
   return (
     <div>
       <Header />
+      <h1>베스트 상품</h1>
+      <BestProductList products={bestProductsData} />
+      <div>
+        <h1>판매중인 상품</h1>
+        <ControlBar />
+        <AllProductList products={allProductsData} />
+      </div>
     </div>
   );
 }

src/types/products.type.ts

@@ -0,0 +1,16 @@
+export interface GetProductsResponse {
+  list: Product[];
+  totalCount: number;
+}
+export interface Product {
+  createdAt: string;
+  description: string;
+  favoriteCount: number;
+  id: number;
+  images: string[];
+  name: string;
+  ownerId: number;
+  price: number;
+  tags: string[];
+  updatedAt: string;
+}