From d02ff99d9549b2a77e31d99d6d418695fb8f339f Mon Sep 17 00:00:00 2001 From: heartggs Date: Wed, 14 Jun 2023 14:58:29 +0900 Subject: [PATCH] =?UTF-8?q?=ED=8C=9D=EC=97=85=EC=83=81=EC=84=B8=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- productList.ts | 18 +++++ products.json | 122 ++++++++++++++++++++++++++++++++++ src/App.tsx | 2 + src/pages/PopupDetailPage.tsx | 51 ++++++++++++++ 4 files changed, 193 insertions(+) create mode 100644 productList.ts create mode 100644 products.json create mode 100644 src/pages/PopupDetailPage.tsx diff --git a/productList.ts b/productList.ts new file mode 100644 index 0000000..482054d --- /dev/null +++ b/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}`); + } +}; diff --git a/products.json b/products.json new file mode 100644 index 0000000..a7aacd3 --- /dev/null +++ b/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" + } +] diff --git a/src/App.tsx b/src/App.tsx index 5e80cbc..fd04cdc 100644 --- a/src/App.tsx +++ b/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 ( <> + {/* */} ); } diff --git a/src/pages/PopupDetailPage.tsx b/src/pages/PopupDetailPage.tsx new file mode 100644 index 0000000..26b214e --- /dev/null +++ b/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([]); + + useEffect(() => { + productList() + .then((data) => setProducts(data)) + .catch((error) => console.log(`Error: ${error}`)); + }, []); + + return ( + <> +
+
+ + + 이미지없음 + +
+
+

팝업스토어 1

+

운영시간 : 10:00 ~ 20:00

+

진행기간 : 2023.06.01 ~ 2023.06.31

+

더 현대 지하 1층

+
+
+

판매상품

+
+ {products.map((product: Product) => ( +
+
+ +
+
+

{product.itemNm}

+

{product.price}원

+
+ +
+
+
+ ))} +
+ + ); +}