From 490d1b2200d25c35fd4f7ba327da768be88126fe Mon Sep 17 00:00:00 2001 From: fiivxyxxng Date: Mon, 10 Mar 2025 20:36:54 +0900 Subject: [PATCH 01/21] =?UTF-8?q?chore:=20react-router-dom=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 42 ++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + 2 files changed, 43 insertions(+) diff --git a/package-lock.json b/package-lock.json index b67b5bfd..91f37ff9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^19.0.0", "react-dom": "^19.0.0", + "react-router-dom": "^6.30.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" } @@ -3103,6 +3104,15 @@ } } }, + "node_modules/@remix-run/router": { + "version": "1.23.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.0.tgz", + "integrity": "sha512-O3rHJzAQKamUz1fvE0Qaw0xSFqsA/yafi2iqeE0pvdFtCO1viYx8QL6f3Ln/aCCTLxs68SLf0KPM9eSeM8yBnA==", + "license": "MIT", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -13936,6 +13946,38 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.30.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.0.tgz", + "integrity": "sha512-D3X8FyH9nBcTSHGdEKurK7r8OYE1kKFn3d/CF+CoxbSHkxU7o37+Uh7eAHRXr6k2tSExXYO++07PeXJtA/dEhQ==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.23.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.30.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.0.tgz", + "integrity": "sha512-x30B78HV5tFk8ex0ITwzC9TTZMua4jGyA9IUlH1JLQYQTFyxr/ZxwOJq7evg1JX1qGVUcvhsmQSKdPncQrjTgA==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.23.0", + "react-router": "6.30.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/package.json b/package.json index 76cb751a..254ac0a3 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^19.0.0", "react-dom": "^19.0.0", + "react-router-dom": "^6.30.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, From 95508ff4de5998d5a0a074735b946f457b3181f8 Mon Sep 17 00:00:00 2001 From: fiivxyxxng Date: Mon, 10 Mar 2025 20:40:18 +0900 Subject: [PATCH 02/21] =?UTF-8?q?feat:=20Routes=EC=97=90=20=ED=95=84?= =?UTF-8?q?=EC=9A=94=ED=95=9C=20=ED=8E=98=EC=9D=B4=EC=A7=80=EB=93=A4=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/AddItemPage.js | 5 +++++ src/pages/BoardPage.js | 5 +++++ src/pages/FaqPage.js | 5 +++++ src/pages/HomePage.js | 5 +++++ src/pages/LoginPage.js | 5 +++++ src/pages/PrivacyPage.js | 5 +++++ src/pages/SignupPage.js | 5 +++++ 7 files changed, 35 insertions(+) create mode 100644 src/pages/AddItemPage.js create mode 100644 src/pages/BoardPage.js create mode 100644 src/pages/FaqPage.js create mode 100644 src/pages/HomePage.js create mode 100644 src/pages/LoginPage.js create mode 100644 src/pages/PrivacyPage.js create mode 100644 src/pages/SignupPage.js diff --git a/src/pages/AddItemPage.js b/src/pages/AddItemPage.js new file mode 100644 index 00000000..81f12337 --- /dev/null +++ b/src/pages/AddItemPage.js @@ -0,0 +1,5 @@ +function AddItemPage() { + return <>; +} + +export default AddItemPage; diff --git a/src/pages/BoardPage.js b/src/pages/BoardPage.js new file mode 100644 index 00000000..7e94aa92 --- /dev/null +++ b/src/pages/BoardPage.js @@ -0,0 +1,5 @@ +function BoardPage() { + return

임시 자유게시판 페이지

; +} + +export default BoardPage; diff --git a/src/pages/FaqPage.js b/src/pages/FaqPage.js new file mode 100644 index 00000000..41b94324 --- /dev/null +++ b/src/pages/FaqPage.js @@ -0,0 +1,5 @@ +function FaqPage() { + return

임시 FAQ 페이지

; +} + +export default FaqPage; diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js new file mode 100644 index 00000000..0160665c --- /dev/null +++ b/src/pages/HomePage.js @@ -0,0 +1,5 @@ +function HomePage() { + return <>; +} + +export default HomePage; diff --git a/src/pages/LoginPage.js b/src/pages/LoginPage.js new file mode 100644 index 00000000..3b8b06e8 --- /dev/null +++ b/src/pages/LoginPage.js @@ -0,0 +1,5 @@ +function LoginPage() { + return

임시 로그인 페이지

; +} + +export default LoginPage; diff --git a/src/pages/PrivacyPage.js b/src/pages/PrivacyPage.js new file mode 100644 index 00000000..bcf86880 --- /dev/null +++ b/src/pages/PrivacyPage.js @@ -0,0 +1,5 @@ +function PrivacyPage() { + return

임시 Privacy 페이지

; +} + +export default PrivacyPage; diff --git a/src/pages/SignupPage.js b/src/pages/SignupPage.js new file mode 100644 index 00000000..0df25d63 --- /dev/null +++ b/src/pages/SignupPage.js @@ -0,0 +1,5 @@ +function SignupPage() { + return

임시 회원가입 페이지

; +} + +export default SignupPage; From 0230ebb361b29d233012d6771032ffc7f4727219 Mon Sep 17 00:00:00 2001 From: fiivxyxxng Date: Mon, 10 Mar 2025 20:42:42 +0900 Subject: [PATCH 03/21] =?UTF-8?q?feat:=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=EB=B3=84=20Route=20=EA=B2=BD=EB=A1=9C=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 76 ++------------------------------- src/Main.js | 31 ++++++++++++++ src/components/Footer.js | 9 +++- src/components/Header.js | 21 +++++++--- src/components/ProductList.js | 9 ++-- src/index.js | 4 +- src/pages/MarketPage.js | 79 +++++++++++++++++++++++++++++++++++ 7 files changed, 145 insertions(+), 84 deletions(-) create mode 100644 src/Main.js create mode 100644 src/pages/MarketPage.js diff --git a/src/App.js b/src/App.js index cd077cb5..12382ecf 100644 --- a/src/App.js +++ b/src/App.js @@ -1,82 +1,14 @@ import Header from "./components/Header"; -import BestProduct from "./components/BestProduct"; -import ProductList from "./components/ProductList"; import Footer from "./components/Footer"; -import { useEffect, useState } from "react"; -import { getProducts } from "./api/api"; -import Pagination from "./components/Pagination"; +import { Outlet } from "react-router-dom"; function App() { - const [items, setItems] = useState([]); - const [order, setOrder] = useState("recent"); - const [input, setInput] = useState(""); - const [dropdownItems, setDropdownItems] = useState(false); - const [currentPage, setCurrentPage] = useState(1); - const [pageSize, setPageSize] = useState(10); - - const updatePageSize = () => { - if (window.matchMedia("(max-width: 743px)").matches) { - setPageSize(4); - } else if (window.matchMedia("(max-width: 1199px)").matches) { - setPageSize(6); - } else { - setPageSize(10); - } - }; - - const handleLoad = async () => { - const data = await getProducts(1, 250); - setItems(data.list); - }; - - const handleDropdown = () => { - setDropdownItems((prev) => !prev); - }; - - useEffect(() => { - updatePageSize(); - handleLoad(); - - window.addEventListener("resize", updatePageSize); - return () => { - window.removeEventListener("resize", updatePageSize); - }; - }, []); - - const newItems = items - .filter((item) => item.name.toLowerCase().includes(input.toLowerCase())) - .sort((a, b) => { - if (order === "recent") { - return new Date(b.createdAt) - new Date(a.createdAt); - } else { - return b.favoriteCount - a.favoriteCount; - } - }); - - const indexOfLastItem = currentPage * pageSize; - const indexOfFirstItem = indexOfLastItem - pageSize; - const currentItems = newItems.slice(indexOfFirstItem, indexOfLastItem); - return ( -
+ <>
- - - +
-
+ ); } diff --git a/src/Main.js b/src/Main.js new file mode 100644 index 00000000..344d65fd --- /dev/null +++ b/src/Main.js @@ -0,0 +1,31 @@ +import { BrowserRouter, Route, Routes } from "react-router-dom"; +import App from "./App"; +import HomePage from "./pages/HomePage"; +import LoginPage from "./pages/LoginPage"; +import SignupPage from "./pages/SignupPage"; +import BoardPage from "./pages/BoardPage"; +import MarketPage from "./pages/MarketPage"; +import AddItemPage from "./pages/AddItemPage"; +import PrivacyPage from "./pages/PrivacyPage"; +import FaqPage from "./pages/FaqPage"; + +function Main() { + return ( + + + }> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + + + ); +} + +export default Main; diff --git a/src/components/Footer.js b/src/components/Footer.js index a7369b97..15bb66db 100644 --- a/src/components/Footer.js +++ b/src/components/Footer.js @@ -3,14 +3,19 @@ import facebookLogo from "../assets/images/social/facebook-logo.svg"; import twitterLogo from "../assets/images/social/twitter-logo.svg"; import youtubeLogo from "../assets/images/social/youtube-logo.svg"; import instagramLogo from "../assets/images/social/instagram-logo.svg"; +import { Link } from "react-router-dom"; function Footer() { return (