[POP-IT]팝업상세페이지

productList.ts

@@ -0,0 +1,18 @@
+
+const productsURL = "./products.json";
+
+export interface Product {
+  id: number;
+  itemNm: string;
+  price: number;
+  image: string;
+}
+
+export const productList = async () => {
+  try {
+    const response = await fetch(productsURL);
+    return await response.json();
+  } catch (error) {
+    console.log(`Error: ${error}`);
+  }
+};

products.json

@@ -0,0 +1,122 @@
+[
+  {
+    "id": 1,
+    "itemNm": "Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops",
+    "price": 109.95,
+    "image": "https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg"
+  },
+  {
+    "id": 2,
+    "itemNm": "Mens Casual Premium Slim Fit T-Shirts ",
+    "price": 22.3,
+    "image": "https://fakestoreapi.com/img/71-3HjGNDUL._AC_SY879._SX._UX._SY._UY_.jpg"
+  },
+  {
+    "id": 3,
+    "itemNm": "Mens Cotton Jacket",
+    "price": 55.99,
+    "image": "https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
+  },
+  {
+    "id": 4,
+    "itemNm": "Mens Casual Slim Fit",
+    "price": 15.99,
+    "image": "https://fakestoreapi.com/img/71YXzeOuslL._AC_UY879_.jpg"
+  },
+  {
+    "id": 5,
+    "itemNm": "John Hardy Women's Legends Naga Gold & Silver Dragon Station Chain Bracelet",
+    "price": 695,
+    "image": "https://fakestoreapi.com/img/71pWzhdJNwL._AC_UL640_QL65_ML3_.jpg"
+  },
+  {
+    "id": 6,
+    "itemNm": "Solid Gold Petite Micropave ",
+    "price": 168,
+    "image": "https://fakestoreapi.com/img/61sbMiUnoGL._AC_UL640_QL65_ML3_.jpg"
+  },
+  {
+    "id": 7,
+    "itemNm": "White Gold Plated Princess",
+    "price": 9.99,
+    "image": "https://fakestoreapi.com/img/71YAIFU48IL._AC_UL640_QL65_ML3_.jpg"
+  },
+  {
+    "id": 8,
+    "itemNm": "Pierced Owl Rose Gold Plated Stainless Steel Double",
+    "price": 10.99,
+    "image": "https://fakestoreapi.com/img/51UDEzMJVpL._AC_UL640_QL65_ML3_.jpg"
+  },
+  {
+    "id": 9,
+    "itemNm": "WD 2TB Elements Portable External Hard Drive - USB 3.0 ",
+    "price": 64,
+    "image": "https://fakestoreapi.com/img/61IBBVJvSDL._AC_SY879_.jpg"
+  },
+  {
+    "id": 10,
+    "itemNm": "SanDisk SSD PLUS 1TB Internal SSD - SATA III 6 Gb/s",
+    "price": 109,
+    "image": "https://fakestoreapi.com/img/61U7T1koQqL._AC_SX679_.jpg"
+  },
+  {
+    "id": 11,
+    "itemNm": "Silicon Power 256GB SSD 3D NAND A55 SLC Cache Performance Boost SATA III 2.5",
+    "price": 109,
+    "image": "https://fakestoreapi.com/img/71kWymZ+c+L._AC_SX679_.jpg"
+  },
+  {
+    "id": 12,
+    "itemNm": "WD 4TB Gaming Drive Works with Playstation 4 Portable External Hard Drive",
+    "price": 114,
+    "image": "https://fakestoreapi.com/img/61mtL65D4cL._AC_SX679_.jpg"
+  },
+  {
+    "id": 13,
+    "itemNm": "Acer SB220Q bi 21.5 inches Full HD (1920 x 1080) IPS Ultra-Thin",
+    "price": 599,
+    "image": "https://fakestoreapi.com/img/81QpkIctqPL._AC_SX679_.jpg"
+  },
+  {
+    "id": 14,
+    "itemNm": "Samsung 49-Inch CHG90 144Hz Curved Gaming Monitor (LC49HG90DMNXZA) – Super Ultrawide Screen QLED ",
+    "price": 999.99,
+    "image": "https://fakestoreapi.com/img/81Zt42ioCgL._AC_SX679_.jpg"
+  },
+  {
+    "id": 15,
+    "itemNm": "BIYLACLESEN Women's 3-in-1 Snowboard Jacket Winter Coats",
+    "price": 56.99,
+    "image": "https://fakestoreapi.com/img/51Y5NI-I5jL._AC_UX679_.jpg"
+  },
+  {
+    "id": 16,
+    "itemNm": "Lock and Love Women's Removable Hooded Faux Leather Moto Biker Jacket",
+    "price": 29.95,
+    "image": "https://fakestoreapi.com/img/81XH0e8fefL._AC_UY879_.jpg"
+  },
+  {
+    "id": 17,
+    "itemNm": "Rain Jacket Women Windbreaker Striped Climbing Raincoats",
+    "price": 39.99,
+    "image": "https://fakestoreapi.com/img/71HblAHs5xL._AC_UY879_-2.jpg"
+  },
+  {
+    "id": 18,
+    "itemNm": "MBJ Women's Solid Short Sleeve Boat Neck V ",
+    "price": 9.85,
+    "image": "https://fakestoreapi.com/img/71z3kpMAYsL._AC_UY879_.jpg"
+  },
+  {
+    "id": 19,
+    "itemNm": "Opna Women's Short Sleeve Moisture",
+    "price": 7.95,
+    "image": "https://fakestoreapi.com/img/51eg55uWmdL._AC_UX679_.jpg"
+  },
+  {
+    "id": 20,
+    "itemNm": "DANVOUY Womens T Shirt Casual Cotton Short",
+    "price": 12.99,
+    "image": "https://fakestoreapi.com/img/61pHAEJ4NML._AC_UX679_.jpg"
+  }
+]

src/App.tsx

@@ -5,11 +5,13 @@ import SignUp from "./pages/SignUp";
 import Review from "./pages/Review";
 import PopupListPage from "./pages/PopupListPage";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
+import PopupDetail from "./pages/PopupDetailPage";
 
 function App() {
   return (
     <>
       <PopupListPage />
+      {/* <PopupDetail /> */}
     </>
   );
 }

src/pages/PopupDetailPage.tsx

@@ -0,0 +1,51 @@
+import { Product, productList } from "../../productList.ts";
+import { useEffect, useState } from "react";
+import { CartIcon } from "../assets/icons/Icons.tsx";
+
+export default function PopupDetail() {
+  const [products, setProducts] = useState<Product[]>([]);
+
+  useEffect(() => {
+    productList()
+      .then((data) => setProducts(data))
+      .catch((error) => console.log(`Error: ${error}`));
+  }, []);
+
+  return (
+    <>
+      <div className="flex flex-col mb-10 justify-center text-center lg:flex-row md:flex-row md:text-left sm:flex-col sm: items-center sm:text-center">
+        <figure className="bg-gray-500 mb-2 w-96 h-60 sm:mb-2">
+          <img src="" alt="" />
+          <span className="text-neutral-50 flex justify-center">
+            이미지없음
+          </span>
+        </figure>
+        <div className="ml-5">
+          <h3 className="font-bold mb-2">팝업스토어 1</h3>
+          <p>운영시간 : 10:00 ~ 20:00</p>
+          <p>진행기간 : 2023.06.01 ~ 2023.06.31</p>
+          <p>더 현대 지하 1층</p>
+        </div>
+      </div>
+      <h4 className="text-center font-extrabold text-2xl mb-10">판매상품</h4>
+      <div className="grid grid-cols-1 gap-4 lg:grid-cols-4 md:grid-cols-2 sm:grid-cols-1">
+        {products.map((product: Product) => (
+          <div key={product.id} className="border border-gray-400 rounded-xl">
+            <div className="m-4 divide-y divide-slate-300">
+              <img src={product.image} alt="" className="h-40 mx-auto mb-4" />
+              <div className="flex justify-between items-center">
+                <div className="w-3/4 mt-2 text-left">
+                  <p className="line-clamp-1 font-semibold">{product.itemNm}</p>
+                  <p>{product.price}원</p>
+                </div>
+                <button className="btn btn-ghost btn-circle">
+                  <CartIcon width={30} height={30} fill="black" />
+                </button>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}