From 4abd83a971e2f2d35c0a7dcf2adb564a65e3b15a Mon Sep 17 00:00:00 2001 From: sanginjeong Date: Wed, 6 Aug 2025 22:17:30 +0900 Subject: [PATCH 01/14] =?UTF-8?q?refactor:=20useResponsivePageSize=20?= =?UTF-8?q?=EB=B0=98=ED=99=98=EA=B0=92=20=EA=B0=9D=EC=B2=B4=EB=A1=9C=20?= =?UTF-8?q?=EB=B3=80=ED=99=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vite-project/src/hooks/useResponsivePageSize.js | 15 ++++++++++++--- .../Items-Page/components/ProductAll/index.jsx | 6 +++--- .../Items-Page/components/ProductBest/index.jsx | 6 +++--- 3 files changed, 18 insertions(+), 9 deletions(-) diff --git a/vite-project/src/hooks/useResponsivePageSize.js b/vite-project/src/hooks/useResponsivePageSize.js index a0a6ea14..bf989cbe 100644 --- a/vite-project/src/hooks/useResponsivePageSize.js +++ b/vite-project/src/hooks/useResponsivePageSize.js @@ -5,11 +5,20 @@ export const useResponsivePageSize = () => { const isMobile = useMediaQuery({ maxWidth: 767 }); if (isMobile) { - return [1, 4]; // [베스트상품 pageSize, 전체상품 pageSize] + return { + bestProductPageSize: 1, + allProductPageSize: 4, + }; } if (isTablet) { - return [2, 6]; + return { + bestProductPageSize: 2, + allProductPageSize: 6, + }; } - return [4, 10]; + return { + bestProductPageSize: 4, + allProductPageSize: 10, + }; }; diff --git a/vite-project/src/pages/Items-Page/components/ProductAll/index.jsx b/vite-project/src/pages/Items-Page/components/ProductAll/index.jsx index 437dd034..81ee9cab 100644 --- a/vite-project/src/pages/Items-Page/components/ProductAll/index.jsx +++ b/vite-project/src/pages/Items-Page/components/ProductAll/index.jsx @@ -21,7 +21,7 @@ const ProductAll = () => { const [page, setPage] = useState(1); const [totalCount, setTotalCount] = useState(0); const [isOpenDropdown, setIsOpenDropdown] = useState(false); - const [_, pageSize] = useResponsivePageSize(); + const { _, allProductPageSize } = useResponsivePageSize(); const menus = Object.keys(DROPDOWN_MENUS); const isMobile = useMediaQuery({ maxWidth: 767 }); @@ -35,7 +35,7 @@ const ProductAll = () => { const fetchData = async () => { const [response, totalCount] = await useGetProduct({ orderBy: DROPDOWN_MENUS[orderBy], - pageSize, + pageSize: allProductPageSize, page, }); setAllProducts(response); @@ -43,7 +43,7 @@ const ProductAll = () => { }; fetchData(); console.log("data", allProducts); - }, [orderBy, page, pageSize]); + }, [orderBy, page, allProductPageSize]); return ( <>
diff --git a/vite-project/src/pages/Items-Page/components/ProductBest/index.jsx b/vite-project/src/pages/Items-Page/components/ProductBest/index.jsx index f32bca52..495c0db8 100644 --- a/vite-project/src/pages/Items-Page/components/ProductBest/index.jsx +++ b/vite-project/src/pages/Items-Page/components/ProductBest/index.jsx @@ -5,18 +5,18 @@ import { useResponsivePageSize } from "../../../../hooks/useResponsivePageSize"; const ProductBest = () => { const [bestProducts, setBestProducts] = useState([]); - const [pageSize, _] = useResponsivePageSize(); + const { bestProductPageSize, _ } = useResponsivePageSize(); useEffect(() => { const fetchData = async () => { const [response, totalCount] = await useGetProduct({ orderBy: "favorite", - pageSize, + pageSize: bestProductPageSize, }); setBestProducts(response); }; fetchData(); - }, [pageSize]); + }, [bestProductPageSize]); return (
From 21df6f4c30e6e0f1400d6a48077869b6f1e8cf9e Mon Sep 17 00:00:00 2001 From: sanginjeong Date: Wed, 6 Aug 2025 22:22:44 +0900 Subject: [PATCH 02/14] =?UTF-8?q?refactor:=20useGetProduct=20=EB=B0=98?= =?UTF-8?q?=ED=99=98=EA=B0=92=20=EA=B0=9D=EC=B2=B4=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=ED=99=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vite-project/src/hooks/useGetProduct.js | 3 +-- .../src/pages/Items-Page/components/ProductAll/index.jsx | 7 +++++-- .../src/pages/Items-Page/components/ProductBest/index.jsx | 6 ++++-- 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/vite-project/src/hooks/useGetProduct.js b/vite-project/src/hooks/useGetProduct.js index b79b9224..8056a015 100644 --- a/vite-project/src/hooks/useGetProduct.js +++ b/vite-project/src/hooks/useGetProduct.js @@ -3,8 +3,7 @@ import { instance } from "../utils/api"; export const useGetProduct = async (params) => { try { const { data } = await instance.get("/products", { params }); - console.log(data); - return [data.list, data.totalCount]; + return data; } catch (error) { console.error(error); } diff --git a/vite-project/src/pages/Items-Page/components/ProductAll/index.jsx b/vite-project/src/pages/Items-Page/components/ProductAll/index.jsx index 81ee9cab..067e356c 100644 --- a/vite-project/src/pages/Items-Page/components/ProductAll/index.jsx +++ b/vite-project/src/pages/Items-Page/components/ProductAll/index.jsx @@ -33,12 +33,15 @@ const ProductAll = () => { useEffect(() => { const fetchData = async () => { - const [response, totalCount] = await useGetProduct({ + const data = await useGetProduct({ orderBy: DROPDOWN_MENUS[orderBy], pageSize: allProductPageSize, page, }); - setAllProducts(response); + const { list } = data; + const { totalCount } = data; + + setAllProducts(list); setTotalCount(totalCount); }; fetchData(); diff --git a/vite-project/src/pages/Items-Page/components/ProductBest/index.jsx b/vite-project/src/pages/Items-Page/components/ProductBest/index.jsx index 495c0db8..2b71a572 100644 --- a/vite-project/src/pages/Items-Page/components/ProductBest/index.jsx +++ b/vite-project/src/pages/Items-Page/components/ProductBest/index.jsx @@ -9,11 +9,13 @@ const ProductBest = () => { useEffect(() => { const fetchData = async () => { - const [response, totalCount] = await useGetProduct({ + const data = await useGetProduct({ orderBy: "favorite", pageSize: bestProductPageSize, }); - setBestProducts(response); + + const { list } = data; + setBestProducts(list); }; fetchData(); }, [bestProductPageSize]); From d4f9836caf94123fcb0b1c564ea9ab9c3fc62b02 Mon Sep 17 00:00:00 2001 From: sanginjeong Date: Wed, 6 Aug 2025 22:24:28 +0900 Subject: [PATCH 03/14] =?UTF-8?q?refactor:=20ProductList=EC=9D=98=20props?= =?UTF-8?q?=20=EC=9D=B4=EB=A6=84=20=EB=B3=80=EA=B2=BD=20=20allProducts=20-?= =?UTF-8?q?>=20products?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vite-project/src/common/Product-Card/ProductList.jsx | 4 ++-- .../src/pages/Items-Page/components/ProductAll/index.jsx | 2 +- .../src/pages/Items-Page/components/ProductBest/index.jsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/vite-project/src/common/Product-Card/ProductList.jsx b/vite-project/src/common/Product-Card/ProductList.jsx index 3fe23879..57772bbb 100644 --- a/vite-project/src/common/Product-Card/ProductList.jsx +++ b/vite-project/src/common/Product-Card/ProductList.jsx @@ -1,10 +1,10 @@ import React from "react"; import { Link } from "react-router"; import ProductCard from "./ProductCard"; -const ProductList = ({ allProducts, className }) => { +const ProductList = ({ products, className }) => { return (
    - {allProducts?.map((product) => ( + {products?.map((product) => (
  • diff --git a/vite-project/src/pages/Items-Page/components/ProductAll/index.jsx b/vite-project/src/pages/Items-Page/components/ProductAll/index.jsx index 067e356c..846f280f 100644 --- a/vite-project/src/pages/Items-Page/components/ProductAll/index.jsx +++ b/vite-project/src/pages/Items-Page/components/ProductAll/index.jsx @@ -105,7 +105,7 @@ const ProductAll = () => {
- + { return (

베스트 상품

- +
); }; From cdd6e6ed858b72864f00fc87dde8155721f9fc69 Mon Sep 17 00:00:00 2001 From: sanginjeong Date: Wed, 6 Aug 2025 22:30:03 +0900 Subject: [PATCH 04/14] =?UTF-8?q?refactor:=20=EC=9D=B4=EB=A6=84=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20=ED=8F=B4=EB=8D=94=EA=B5=AC?= =?UTF-8?q?=EC=A1=B0=20=EB=B3=80=EA=B2=BD=20useGetProduct=20->=20getProduc?= =?UTF-8?q?t?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vite-project/src/{utils/api.js => api/axiosInstance.js} | 0 .../src/{hooks/useGetProduct.js => api/getProduct.js} | 4 ++-- .../src/pages/Items-Page/components/ProductAll/index.jsx | 4 ++-- .../src/pages/Items-Page/components/ProductBest/index.jsx | 4 ++-- 4 files changed, 6 insertions(+), 6 deletions(-) rename vite-project/src/{utils/api.js => api/axiosInstance.js} (100%) rename vite-project/src/{hooks/useGetProduct.js => api/getProduct.js} (61%) diff --git a/vite-project/src/utils/api.js b/vite-project/src/api/axiosInstance.js similarity index 100% rename from vite-project/src/utils/api.js rename to vite-project/src/api/axiosInstance.js diff --git a/vite-project/src/hooks/useGetProduct.js b/vite-project/src/api/getProduct.js similarity index 61% rename from vite-project/src/hooks/useGetProduct.js rename to vite-project/src/api/getProduct.js index 8056a015..aee9435c 100644 --- a/vite-project/src/hooks/useGetProduct.js +++ b/vite-project/src/api/getProduct.js @@ -1,6 +1,6 @@ -import { instance } from "../utils/api"; +import { instance } from "./axiosInstance"; -export const useGetProduct = async (params) => { +export const getProduct = async (params) => { try { const { data } = await instance.get("/products", { params }); return data; diff --git a/vite-project/src/pages/Items-Page/components/ProductAll/index.jsx b/vite-project/src/pages/Items-Page/components/ProductAll/index.jsx index 846f280f..675cd278 100644 --- a/vite-project/src/pages/Items-Page/components/ProductAll/index.jsx +++ b/vite-project/src/pages/Items-Page/components/ProductAll/index.jsx @@ -1,6 +1,6 @@ import { useEffect, useState } from "react"; import { useNavigate } from "react-router"; -import { useGetProduct } from "../../../../hooks/useGetProduct"; +import { getProduct } from "../../../../api/getProduct"; import DropDown from "../../../../common/Dropdown/DropDown"; import Pagination from "../../../../common/Pagination/Pagination"; import ProductList from "../../../../common/Product-Card/ProductList"; @@ -33,7 +33,7 @@ const ProductAll = () => { useEffect(() => { const fetchData = async () => { - const data = await useGetProduct({ + const data = await getProduct({ orderBy: DROPDOWN_MENUS[orderBy], pageSize: allProductPageSize, page, diff --git a/vite-project/src/pages/Items-Page/components/ProductBest/index.jsx b/vite-project/src/pages/Items-Page/components/ProductBest/index.jsx index b3ca7a58..5e69ef80 100644 --- a/vite-project/src/pages/Items-Page/components/ProductBest/index.jsx +++ b/vite-project/src/pages/Items-Page/components/ProductBest/index.jsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from "react"; -import { useGetProduct } from "../../../../hooks/useGetProduct"; +import { getProduct } from "../../../../api/getProduct"; import ProductList from "../../../../common/Product-Card/ProductList"; import { useResponsivePageSize } from "../../../../hooks/useResponsivePageSize"; @@ -9,7 +9,7 @@ const ProductBest = () => { useEffect(() => { const fetchData = async () => { - const data = await useGetProduct({ + const data = await getProduct({ orderBy: "favorite", pageSize: bestProductPageSize, }); From 33109c349d4f4ff4e4c0774837095701ba1e549b Mon Sep 17 00:00:00 2001 From: sanginjeong Date: Wed, 6 Aug 2025 22:31:48 +0900 Subject: [PATCH 05/14] =?UTF-8?q?refactor:=20getProduct=20params=20?= =?UTF-8?q?=EA=B5=AC=EC=B2=B4=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vite-project/src/api/getProduct.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/vite-project/src/api/getProduct.js b/vite-project/src/api/getProduct.js index aee9435c..c7b26eae 100644 --- a/vite-project/src/api/getProduct.js +++ b/vite-project/src/api/getProduct.js @@ -1,8 +1,12 @@ import { instance } from "./axiosInstance"; -export const getProduct = async (params) => { +export const getProduct = async ({ page, orderBy, pageSize }) => { try { - const { data } = await instance.get("/products", { params }); + const { data } = await instance.get("/products", { + page, + orderBy, + pageSize, + }); return data; } catch (error) { console.error(error); From 711a75479cf37b90953780d80ae088568354dbb1 Mon Sep 17 00:00:00 2001 From: sanginjeong Date: Tue, 26 Aug 2025 02:21:34 +0900 Subject: [PATCH 06/14] =?UTF-8?q?refactor:=20tanstack=20query=20=EB=8F=84?= =?UTF-8?q?=EC=9E=85=EC=97=90=20=EB=94=B0=EB=A5=B8=20=EC=BD=94=EB=93=9C,?= =?UTF-8?q?=20=ED=8F=B4=EB=8D=94=20=EA=B5=AC=EC=A1=B0=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vite-project/eslint.config.js | 29 +++++---- vite-project/package-lock.json | 63 +++++++++++++++++- vite-project/package.json | 4 +- vite-project/src/App.jsx | 7 +- vite-project/src/api/axiosInstance.js | 4 +- vite-project/src/api/getProduct.js | 14 ---- .../Dropdown/{DropDown.jsx => index.jsx} | 0 .../common/Navbar/{Navbar.jsx => index.jsx} | 0 .../Pagination/{Pagination.jsx => index.jsx} | 0 .../ProductCard.style.css | 0 .../ProductCard.jsx => ProductCard/index.jsx} | 0 .../ProductList.jsx => ProductList/index.jsx} | 2 +- vite-project/src/constants/PRODUCTS.js | 3 + vite-project/src/hooks/useGetProducts.js | 17 +++++ vite-project/src/layout/Layout.jsx | 2 +- vite-project/src/main.jsx | 11 +++- .../AddItemPage.jsx => AddItemPage/index.jsx} | 0 .../FreeBoard.jsx => FreeBoardPage/index.jsx} | 0 .../components/ProductBest/index.jsx | 31 --------- .../ItemsPage.style.css | 0 .../components/ProductAll/index.jsx | 65 +++++++++---------- .../components/ProductBest/index.jsx | 26 ++++++++ .../ItemsPage.jsx => ItemsPage/index.jsx} | 0 23 files changed, 169 insertions(+), 109 deletions(-) delete mode 100644 vite-project/src/api/getProduct.js rename vite-project/src/common/Dropdown/{DropDown.jsx => index.jsx} (100%) rename vite-project/src/common/Navbar/{Navbar.jsx => index.jsx} (100%) rename vite-project/src/common/Pagination/{Pagination.jsx => index.jsx} (100%) rename vite-project/src/common/{Product-Card => ProductCard}/ProductCard.style.css (100%) rename vite-project/src/common/{Product-Card/ProductCard.jsx => ProductCard/index.jsx} (100%) rename vite-project/src/common/{Product-Card/ProductList.jsx => ProductList/index.jsx} (90%) create mode 100644 vite-project/src/constants/PRODUCTS.js create mode 100644 vite-project/src/hooks/useGetProducts.js rename vite-project/src/pages/{AddItem-Page/AddItemPage.jsx => AddItemPage/index.jsx} (100%) rename vite-project/src/pages/{FreeBoard-Page/FreeBoard.jsx => FreeBoardPage/index.jsx} (100%) delete mode 100644 vite-project/src/pages/Items-Page/components/ProductBest/index.jsx rename vite-project/src/pages/{Items-Page => ItemsPage}/ItemsPage.style.css (100%) rename vite-project/src/pages/{Items-Page => ItemsPage}/components/ProductAll/index.jsx (66%) create mode 100644 vite-project/src/pages/ItemsPage/components/ProductBest/index.jsx rename vite-project/src/pages/{Items-Page/ItemsPage.jsx => ItemsPage/index.jsx} (100%) diff --git a/vite-project/eslint.config.js b/vite-project/eslint.config.js index ec2b712d..8cf17d62 100644 --- a/vite-project/eslint.config.js +++ b/vite-project/eslint.config.js @@ -1,33 +1,34 @@ -import js from '@eslint/js' -import globals from 'globals' -import reactHooks from 'eslint-plugin-react-hooks' -import reactRefresh from 'eslint-plugin-react-refresh' +import js from "@eslint/js"; +import globals from "globals"; +import reactHooks from "eslint-plugin-react-hooks"; +import reactRefresh from "eslint-plugin-react-refresh"; export default [ - { ignores: ['dist'] }, + { ignores: ["dist"] }, { - files: ['**/*.{js,jsx}'], + files: ["**/*.{js,jsx}"], languageOptions: { ecmaVersion: 2020, globals: globals.browser, parserOptions: { - ecmaVersion: 'latest', + ecmaVersion: "latest", ecmaFeatures: { jsx: true }, - sourceType: 'module', + sourceType: "module", }, }, plugins: { - 'react-hooks': reactHooks, - 'react-refresh': reactRefresh, + "react-hooks": reactHooks, + "react-refresh": reactRefresh, }, rules: { ...js.configs.recommended.rules, ...reactHooks.configs.recommended.rules, - 'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }], - 'react-refresh/only-export-components': [ - 'warn', + "no-unused-vars": ["warn", { varsIgnorePattern: "^[A-Z_]" }], + "react-refresh/only-export-components": [ + "warn", { allowConstantExport: true }, ], + "no-console": ["warn", { allow: ["warn", "error"] }], }, }, -] +]; diff --git a/vite-project/package-lock.json b/vite-project/package-lock.json index 7f1e275a..58b22412 100644 --- a/vite-project/package-lock.json +++ b/vite-project/package-lock.json @@ -8,12 +8,14 @@ "name": "vite-project", "version": "0.0.0", "dependencies": { + "@tanstack/react-query": "^5.85.5", "axios": "^1.11.0", "dotenv": "^17.2.1", "react": "^19.1.0", "react-dom": "^19.1.0", "react-responsive": "^10.0.1", - "react-router": "^7.7.0" + "react-router": "^7.7.0", + "zustand": "^5.0.8" }, "devDependencies": { "@eslint/js": "^9.25.0", @@ -1311,6 +1313,32 @@ "win32" ] }, + "node_modules/@tanstack/query-core": { + "version": "5.85.5", + "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.85.5.tgz", + "integrity": "sha512-KO0WTob4JEApv69iYp1eGvfMSUkgw//IpMnq+//cORBzXf0smyRwPLrUvEe5qtAEGjwZTXrjxg+oJNP/C00t6w==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, + "node_modules/@tanstack/react-query": { + "version": "5.85.5", + "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.85.5.tgz", + "integrity": "sha512-/X4EFNcnPiSs8wM2v+b6DqS5mmGeuJQvxBglmDxl6ZQb5V26ouD2SJYAcC3VjbNwqhY2zjxVD15rDA5nGbMn3A==", + "license": "MIT", + "dependencies": { + "@tanstack/query-core": "5.85.5" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^18 || ^19" + } + }, "node_modules/@types/babel__core": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", @@ -1374,7 +1402,7 @@ "version": "19.1.8", "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.8.tgz", "integrity": "sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g==", - "dev": true, + "devOptional": true, "license": "MIT", "dependencies": { "csstype": "^3.0.2" @@ -1683,7 +1711,7 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "dev": true, + "devOptional": true, "license": "MIT" }, "node_modules/debug": { @@ -3205,6 +3233,35 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/zustand": { + "version": "5.0.8", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.8.tgz", + "integrity": "sha512-gyPKpIaxY9XcO2vSMrLbiER7QMAMGOQZVRdJ6Zi782jkbzZygq5GI9nG8g+sMgitRtndwaBSl7uiqC49o1SSiw==", + "license": "MIT", + "engines": { + "node": ">=12.20.0" + }, + "peerDependencies": { + "@types/react": ">=18.0.0", + "immer": ">=9.0.6", + "react": ">=18.0.0", + "use-sync-external-store": ">=1.2.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "immer": { + "optional": true + }, + "react": { + "optional": true + }, + "use-sync-external-store": { + "optional": true + } + } } } } diff --git a/vite-project/package.json b/vite-project/package.json index f1c069c4..596ed67d 100644 --- a/vite-project/package.json +++ b/vite-project/package.json @@ -10,12 +10,14 @@ "preview": "vite preview" }, "dependencies": { + "@tanstack/react-query": "^5.85.5", "axios": "^1.11.0", "dotenv": "^17.2.1", "react": "^19.1.0", "react-dom": "^19.1.0", "react-responsive": "^10.0.1", - "react-router": "^7.7.0" + "react-router": "^7.7.0", + "zustand": "^5.0.8" }, "devDependencies": { "@eslint/js": "^9.25.0", diff --git a/vite-project/src/App.jsx b/vite-project/src/App.jsx index b43d95c5..8ad11bfe 100644 --- a/vite-project/src/App.jsx +++ b/vite-project/src/App.jsx @@ -1,10 +1,9 @@ -import { useState } from "react"; import "./App.css"; import { Route, Routes, Navigate } from "react-router"; -import ItemsPage from "./pages/Items-Page/ItemsPage"; -import AddItemPage from "./pages/AddItem-Page/AddItemPage"; +import ItemsPage from "./pages/ItemsPage"; +import AddItemPage from "./pages/AddItemPage"; import Layout from "./layout/Layout"; -import FreeBoard from "./pages/FreeBoard-Page/FreeBoard"; +import FreeBoard from "./pages/FreeBoardPage"; function App() { return ( diff --git a/vite-project/src/api/axiosInstance.js b/vite-project/src/api/axiosInstance.js index 00661b44..6fcdc49a 100644 --- a/vite-project/src/api/axiosInstance.js +++ b/vite-project/src/api/axiosInstance.js @@ -2,9 +2,11 @@ import axios from "axios"; const VITE_BACKEND_URL = import.meta.env.VITE_BACKEND_URL; -export const instance = axios.create({ +const instance = axios.create({ baseURL: VITE_BACKEND_URL, headers: { "Content-Type": "application/json", }, }); + +export default instance; diff --git a/vite-project/src/api/getProduct.js b/vite-project/src/api/getProduct.js deleted file mode 100644 index c7b26eae..00000000 --- a/vite-project/src/api/getProduct.js +++ /dev/null @@ -1,14 +0,0 @@ -import { instance } from "./axiosInstance"; - -export const getProduct = async ({ page, orderBy, pageSize }) => { - try { - const { data } = await instance.get("/products", { - page, - orderBy, - pageSize, - }); - return data; - } catch (error) { - console.error(error); - } -}; diff --git a/vite-project/src/common/Dropdown/DropDown.jsx b/vite-project/src/common/Dropdown/index.jsx similarity index 100% rename from vite-project/src/common/Dropdown/DropDown.jsx rename to vite-project/src/common/Dropdown/index.jsx diff --git a/vite-project/src/common/Navbar/Navbar.jsx b/vite-project/src/common/Navbar/index.jsx similarity index 100% rename from vite-project/src/common/Navbar/Navbar.jsx rename to vite-project/src/common/Navbar/index.jsx diff --git a/vite-project/src/common/Pagination/Pagination.jsx b/vite-project/src/common/Pagination/index.jsx similarity index 100% rename from vite-project/src/common/Pagination/Pagination.jsx rename to vite-project/src/common/Pagination/index.jsx diff --git a/vite-project/src/common/Product-Card/ProductCard.style.css b/vite-project/src/common/ProductCard/ProductCard.style.css similarity index 100% rename from vite-project/src/common/Product-Card/ProductCard.style.css rename to vite-project/src/common/ProductCard/ProductCard.style.css diff --git a/vite-project/src/common/Product-Card/ProductCard.jsx b/vite-project/src/common/ProductCard/index.jsx similarity index 100% rename from vite-project/src/common/Product-Card/ProductCard.jsx rename to vite-project/src/common/ProductCard/index.jsx diff --git a/vite-project/src/common/Product-Card/ProductList.jsx b/vite-project/src/common/ProductList/index.jsx similarity index 90% rename from vite-project/src/common/Product-Card/ProductList.jsx rename to vite-project/src/common/ProductList/index.jsx index 57772bbb..10308393 100644 --- a/vite-project/src/common/Product-Card/ProductList.jsx +++ b/vite-project/src/common/ProductList/index.jsx @@ -1,6 +1,6 @@ import React from "react"; import { Link } from "react-router"; -import ProductCard from "./ProductCard"; +import ProductCard from "../ProductCard"; const ProductList = ({ products, className }) => { return (
    diff --git a/vite-project/src/constants/PRODUCTS.js b/vite-project/src/constants/PRODUCTS.js new file mode 100644 index 00000000..d701a713 --- /dev/null +++ b/vite-project/src/constants/PRODUCTS.js @@ -0,0 +1,3 @@ +export const DROPDOWN_MENUS = ["최신순", "좋아요순"]; +export const ORDER_BYS = ["recent", "favorite"]; +export const GROUP_SIZE = 5; diff --git a/vite-project/src/hooks/useGetProducts.js b/vite-project/src/hooks/useGetProducts.js new file mode 100644 index 00000000..13c36521 --- /dev/null +++ b/vite-project/src/hooks/useGetProducts.js @@ -0,0 +1,17 @@ +import { useQuery } from "@tanstack/react-query"; +import instance from "../api/axiosInstance"; + +const getProducts = async ({ page = 1, orderBy = "recent", pageSize = 10 }) => { + return await instance.get("/products", { + params: { page, orderBy, pageSize }, + }); +}; + +export const useGetProductsQuery = ({ page, orderBy, pageSize }) => { + return useQuery({ + queryKey: ["getProducts", page, pageSize, orderBy], + queryFn: () => getProducts({ page, orderBy, pageSize }), + staleTime: 300000, + select: (response) => response.data, + }); +}; diff --git a/vite-project/src/layout/Layout.jsx b/vite-project/src/layout/Layout.jsx index ff3bf49e..56058b81 100644 --- a/vite-project/src/layout/Layout.jsx +++ b/vite-project/src/layout/Layout.jsx @@ -1,6 +1,6 @@ import React from "react"; import { Outlet } from "react-router"; -import Navbar from "../common/Navbar/Navbar"; +import Navbar from "../common/Navbar"; const Layout = () => { return ( diff --git a/vite-project/src/main.jsx b/vite-project/src/main.jsx index e50388ce..4025443e 100644 --- a/vite-project/src/main.jsx +++ b/vite-project/src/main.jsx @@ -1,9 +1,14 @@ import { createRoot } from "react-dom/client"; import { BrowserRouter } from "react-router"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import App from "./App.jsx"; +const queryClient = new QueryClient(); + createRoot(document.getElementById("root")).render( - - - + + + + + ); diff --git a/vite-project/src/pages/AddItem-Page/AddItemPage.jsx b/vite-project/src/pages/AddItemPage/index.jsx similarity index 100% rename from vite-project/src/pages/AddItem-Page/AddItemPage.jsx rename to vite-project/src/pages/AddItemPage/index.jsx diff --git a/vite-project/src/pages/FreeBoard-Page/FreeBoard.jsx b/vite-project/src/pages/FreeBoardPage/index.jsx similarity index 100% rename from vite-project/src/pages/FreeBoard-Page/FreeBoard.jsx rename to vite-project/src/pages/FreeBoardPage/index.jsx diff --git a/vite-project/src/pages/Items-Page/components/ProductBest/index.jsx b/vite-project/src/pages/Items-Page/components/ProductBest/index.jsx deleted file mode 100644 index 5e69ef80..00000000 --- a/vite-project/src/pages/Items-Page/components/ProductBest/index.jsx +++ /dev/null @@ -1,31 +0,0 @@ -import React, { useEffect, useState } from "react"; -import { getProduct } from "../../../../api/getProduct"; -import ProductList from "../../../../common/Product-Card/ProductList"; -import { useResponsivePageSize } from "../../../../hooks/useResponsivePageSize"; - -const ProductBest = () => { - const [bestProducts, setBestProducts] = useState([]); - const { bestProductPageSize, _ } = useResponsivePageSize(); - - useEffect(() => { - const fetchData = async () => { - const data = await getProduct({ - orderBy: "favorite", - pageSize: bestProductPageSize, - }); - - const { list } = data; - setBestProducts(list); - }; - fetchData(); - }, [bestProductPageSize]); - - return ( -
    -

    베스트 상품

    - -
    - ); -}; - -export default ProductBest; diff --git a/vite-project/src/pages/Items-Page/ItemsPage.style.css b/vite-project/src/pages/ItemsPage/ItemsPage.style.css similarity index 100% rename from vite-project/src/pages/Items-Page/ItemsPage.style.css rename to vite-project/src/pages/ItemsPage/ItemsPage.style.css diff --git a/vite-project/src/pages/Items-Page/components/ProductAll/index.jsx b/vite-project/src/pages/ItemsPage/components/ProductAll/index.jsx similarity index 66% rename from vite-project/src/pages/Items-Page/components/ProductAll/index.jsx rename to vite-project/src/pages/ItemsPage/components/ProductAll/index.jsx index 675cd278..75c4e35e 100644 --- a/vite-project/src/pages/Items-Page/components/ProductAll/index.jsx +++ b/vite-project/src/pages/ItemsPage/components/ProductAll/index.jsx @@ -1,28 +1,36 @@ -import { useEffect, useState } from "react"; +import { useState } from "react"; import { useNavigate } from "react-router"; -import { getProduct } from "../../../../api/getProduct"; -import DropDown from "../../../../common/Dropdown/DropDown"; -import Pagination from "../../../../common/Pagination/Pagination"; -import ProductList from "../../../../common/Product-Card/ProductList"; +import DropDown from "../../../../common/Dropdown"; +import Pagination from "../../../../common/Pagination"; +import ProductList from "../../../../common/ProductList"; import { useResponsivePageSize } from "../../../../hooks/useResponsivePageSize"; import { useMediaQuery } from "react-responsive"; - -const DROPDOWN_MENUS = { - 최신순: "recent", - 좋아요순: "favorite", -}; - -const GROUP_SIZE = 5; +import { useGetProductsQuery } from "../../../../hooks/useGetProducts"; +import { + ORDER_BYS, + DROPDOWN_MENUS, + GROUP_SIZE, +} from "../../../../constants/PRODUCTS"; const ProductAll = () => { const navigate = useNavigate(); - const [allProducts, setAllProducts] = useState([]); - const [orderBy, setOrderBy] = useState("최신순"); + const [orderBy, setOrderBy] = useState(ORDER_BYS[0]); const [page, setPage] = useState(1); - const [totalCount, setTotalCount] = useState(0); const [isOpenDropdown, setIsOpenDropdown] = useState(false); const { _, allProductPageSize } = useResponsivePageSize(); - const menus = Object.keys(DROPDOWN_MENUS); + + const { + data: allProducts, + isLoading, + isError, + error, + } = useGetProductsQuery({ + page, + orderBy, + pageSize: allProductPageSize, + }); + + const totalCount = allProducts?.totalCount; const isMobile = useMediaQuery({ maxWidth: 767 }); @@ -31,22 +39,7 @@ const ProductAll = () => { setIsOpenDropdown(false); }; - useEffect(() => { - const fetchData = async () => { - const data = await getProduct({ - orderBy: DROPDOWN_MENUS[orderBy], - pageSize: allProductPageSize, - page, - }); - const { list } = data; - const { totalCount } = data; - - setAllProducts(list); - setTotalCount(totalCount); - }; - fetchData(); - console.log("data", allProducts); - }, [orderBy, page, allProductPageSize]); + if (isLoading) return; return ( <>
    @@ -85,14 +78,14 @@ const ProductAll = () => { - {menus.map((orderBy, index) => ( -
  • + {DROPDOWN_MENUS.map((orderBy, index) => ( +
    • - + { + const { bestProductPageSize, _ } = useResponsivePageSize(); + const { + data: bestProducts, + isLoading, + isError, + error, + } = useGetProductsQuery({ + orderBy: "favorite", + pageSize: bestProductPageSize, + }); + + if (isLoading) return; + return ( +
    +

    베스트 상품

    + +
    + ); +}; + +export default ProductBest; diff --git a/vite-project/src/pages/Items-Page/ItemsPage.jsx b/vite-project/src/pages/ItemsPage/index.jsx similarity index 100% rename from vite-project/src/pages/Items-Page/ItemsPage.jsx rename to vite-project/src/pages/ItemsPage/index.jsx From f6de88ae3c8906cafee31d6950074ef6a62f4071 Mon Sep 17 00:00:00 2001 From: sanginjeong Date: Tue, 26 Aug 2025 02:40:30 +0900 Subject: [PATCH 07/14] =?UTF-8?q?refactor:=20ProductAll=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=9D=98=20=EC=B6=94=EC=83=81?= =?UTF-8?q?=ED=99=94=20=EA=B3=A0=EB=A0=A4=20=EB=A6=AC=ED=8C=A9=ED=86=A0?= =?UTF-8?q?=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ProductAll/ProductAllMenuBar.jsx | 76 +++++++++++++++++++ .../ItemsPage/components/ProductAll/index.jsx | 75 ++---------------- 2 files changed, 84 insertions(+), 67 deletions(-) create mode 100644 vite-project/src/pages/ItemsPage/components/ProductAll/ProductAllMenuBar.jsx diff --git a/vite-project/src/pages/ItemsPage/components/ProductAll/ProductAllMenuBar.jsx b/vite-project/src/pages/ItemsPage/components/ProductAll/ProductAllMenuBar.jsx new file mode 100644 index 00000000..1c56bea3 --- /dev/null +++ b/vite-project/src/pages/ItemsPage/components/ProductAll/ProductAllMenuBar.jsx @@ -0,0 +1,76 @@ +import { useNavigate } from "react-router"; +import DropDown from "../../../../common/Dropdown"; +import { useMediaQuery } from "react-responsive"; +import { DROPDOWN_MENUS } from "../../../../constants/PRODUCTS"; + +const ProductAllMenuBar = ({ + isOpenDropdown, + setIsOpenDropdown, + onClickMenu, + orderBy, +}) => { + const navigate = useNavigate(); + + const isMobile = useMediaQuery({ maxWidth: 767 }); + + return ( +
    +

    전체 상품

    +
    +
    +
    + search-icon + +
    + +
    + + setIsOpenDropdown(!isOpenDropdown)}> + {isMobile ? ( + sort-img + ) : ( + <> +

    {orderBy}

    + arrow-down + + )} +     + + + {DROPDOWN_MENUS.map((orderBy, index) => ( +
  • + +
    • + ))} +     +     +
    +
    + ); +}; + +export default ProductAllMenuBar; diff --git a/vite-project/src/pages/ItemsPage/components/ProductAll/index.jsx b/vite-project/src/pages/ItemsPage/components/ProductAll/index.jsx index 75c4e35e..d31d4eec 100644 --- a/vite-project/src/pages/ItemsPage/components/ProductAll/index.jsx +++ b/vite-project/src/pages/ItemsPage/components/ProductAll/index.jsx @@ -1,19 +1,12 @@ import { useState } from "react"; -import { useNavigate } from "react-router"; -import DropDown from "../../../../common/Dropdown"; import Pagination from "../../../../common/Pagination"; import ProductList from "../../../../common/ProductList"; +import ProductAllMenuBar from "./ProductAllMenuBar"; import { useResponsivePageSize } from "../../../../hooks/useResponsivePageSize"; -import { useMediaQuery } from "react-responsive"; import { useGetProductsQuery } from "../../../../hooks/useGetProducts"; -import { - ORDER_BYS, - DROPDOWN_MENUS, - GROUP_SIZE, -} from "../../../../constants/PRODUCTS"; +import { ORDER_BYS, GROUP_SIZE } from "../../../../constants/PRODUCTS"; const ProductAll = () => { - const navigate = useNavigate(); const [orderBy, setOrderBy] = useState(ORDER_BYS[0]); const [page, setPage] = useState(1); const [isOpenDropdown, setIsOpenDropdown] = useState(false); @@ -32,8 +25,6 @@ const ProductAll = () => { const totalCount = allProducts?.totalCount; - const isMobile = useMediaQuery({ maxWidth: 767 }); - const onClickMenu = (orderBy) => { setOrderBy(orderBy); setIsOpenDropdown(false); @@ -42,62 +33,12 @@ const ProductAll = () => { if (isLoading) return; return ( <> -
    -

    전체 상품

    -
    -
    -
    - search-icon - -
    - -
    - - setIsOpenDropdown(!isOpenDropdown)}> - {isMobile ? ( - sort-img - ) : ( - <> -

    {orderBy}

    - arrow-down - - )} -     - - - {DROPDOWN_MENUS.map((orderBy, index) => ( -
  • - -
    • - ))}{" "} -     -     -
    -
    + Date: Tue, 26 Aug 2025 03:04:21 +0900 Subject: [PATCH 08/14] =?UTF-8?q?refactor:=20=EC=8A=A4=ED=94=BC=EB=84=88,?= =?UTF-8?q?=20=EC=97=90=EB=9F=AC=EC=B2=98=EB=A6=AC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ErrorMessage/ErrorMessage.style.css | 7 +++++++ .../src/common/ErrorMessage/index.jsx | 7 +++++++ .../LoadingSpinner/LoadingSpinner.style.css | 21 +++++++++++++++++++ .../src/common/LoadingSpinner/index.jsx | 11 ++++++++++ .../ItemsPage/components/ProductAll/index.jsx | 6 +++++- .../components/ProductBest/index.jsx | 6 +++++- 6 files changed, 56 insertions(+), 2 deletions(-) create mode 100644 vite-project/src/common/ErrorMessage/ErrorMessage.style.css create mode 100644 vite-project/src/common/ErrorMessage/index.jsx create mode 100644 vite-project/src/common/LoadingSpinner/LoadingSpinner.style.css create mode 100644 vite-project/src/common/LoadingSpinner/index.jsx diff --git a/vite-project/src/common/ErrorMessage/ErrorMessage.style.css b/vite-project/src/common/ErrorMessage/ErrorMessage.style.css new file mode 100644 index 00000000..263fd709 --- /dev/null +++ b/vite-project/src/common/ErrorMessage/ErrorMessage.style.css @@ -0,0 +1,7 @@ +.error-message { + padding: 12px 18px; + margin: 50px; + background-color: pink; + border-radius: 12px; + font-weight: bold; +} diff --git a/vite-project/src/common/ErrorMessage/index.jsx b/vite-project/src/common/ErrorMessage/index.jsx new file mode 100644 index 00000000..8de908e0 --- /dev/null +++ b/vite-project/src/common/ErrorMessage/index.jsx @@ -0,0 +1,7 @@ +import "./ErrorMessage.style.css"; + +const ErrorMessage = ({ error }) => { + return
    {error.message}
    ; +}; + +export default ErrorMessage; diff --git a/vite-project/src/common/LoadingSpinner/LoadingSpinner.style.css b/vite-project/src/common/LoadingSpinner/LoadingSpinner.style.css new file mode 100644 index 00000000..8bddf0c0 --- /dev/null +++ b/vite-project/src/common/LoadingSpinner/LoadingSpinner.style.css @@ -0,0 +1,21 @@ +.spinner-container { + display: flex; + justify-content: center; + align-items: center; + height: 100px; +} + +.spinner { + width: 40px; + height: 40px; + border: 4px solid rgba(0, 0, 0, 0.1); + border-left-color: var(--primary100); + border-radius: 50%; + animation: spin 1s linear infinite; +} + +@keyframes spin { + to { + transform: rotate(360deg); + } +} diff --git a/vite-project/src/common/LoadingSpinner/index.jsx b/vite-project/src/common/LoadingSpinner/index.jsx new file mode 100644 index 00000000..c33e26eb --- /dev/null +++ b/vite-project/src/common/LoadingSpinner/index.jsx @@ -0,0 +1,11 @@ +import "./LoadingSpinner.style.css"; + +const LoadingSpinner = () => { + return ( +
    +
    +
    + ); +}; + +export default LoadingSpinner; diff --git a/vite-project/src/pages/ItemsPage/components/ProductAll/index.jsx b/vite-project/src/pages/ItemsPage/components/ProductAll/index.jsx index d31d4eec..02a3ba29 100644 --- a/vite-project/src/pages/ItemsPage/components/ProductAll/index.jsx +++ b/vite-project/src/pages/ItemsPage/components/ProductAll/index.jsx @@ -5,6 +5,8 @@ import ProductAllMenuBar from "./ProductAllMenuBar"; import { useResponsivePageSize } from "../../../../hooks/useResponsivePageSize"; import { useGetProductsQuery } from "../../../../hooks/useGetProducts"; import { ORDER_BYS, GROUP_SIZE } from "../../../../constants/PRODUCTS"; +import LoadingSpinner from "../../../../common/LoadingSpinner"; +import ErrorMessage from "../../../../common/ErrorMessage"; const ProductAll = () => { const [orderBy, setOrderBy] = useState(ORDER_BYS[0]); @@ -30,7 +32,9 @@ const ProductAll = () => { setIsOpenDropdown(false); }; - if (isLoading) return; + if (isLoading) return ; + + if (isError) return ; return ( <> { const { bestProductPageSize, _ } = useResponsivePageSize(); @@ -14,7 +16,9 @@ const ProductBest = () => { pageSize: bestProductPageSize, }); - if (isLoading) return; + if (isLoading) return ; + + if (isError) return ; return (

    베스트 상품

    From e08d060e09da7c702cea8b7b747241e018ddff51 Mon Sep 17 00:00:00 2001 From: sanginjeong Date: Tue, 26 Aug 2025 03:32:00 +0900 Subject: [PATCH 09/14] =?UTF-8?q?fix:=20=EB=93=9C=EB=9E=8D=EB=8B=A4?= =?UTF-8?q?=EC=9A=B4=20orderBy=20=EC=84=A4=EC=A0=95=20=EC=95=88=EB=90=98?= =?UTF-8?q?=EB=8A=94=20=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vite-project/src/constants/PRODUCTS.js | 6 ++++-- .../components/ProductAll/ProductAllMenuBar.jsx | 17 ++++++++++------- .../ItemsPage/components/ProductAll/index.jsx | 6 +++--- 3 files changed, 17 insertions(+), 12 deletions(-) diff --git a/vite-project/src/constants/PRODUCTS.js b/vite-project/src/constants/PRODUCTS.js index d701a713..c08eb7c1 100644 --- a/vite-project/src/constants/PRODUCTS.js +++ b/vite-project/src/constants/PRODUCTS.js @@ -1,3 +1,5 @@ -export const DROPDOWN_MENUS = ["최신순", "좋아요순"]; -export const ORDER_BYS = ["recent", "favorite"]; +export const ORDER_BYS = { + 최신순: "recent", + 좋아요순: "favorite", +}; export const GROUP_SIZE = 5; diff --git a/vite-project/src/pages/ItemsPage/components/ProductAll/ProductAllMenuBar.jsx b/vite-project/src/pages/ItemsPage/components/ProductAll/ProductAllMenuBar.jsx index 1c56bea3..1bc95ef6 100644 --- a/vite-project/src/pages/ItemsPage/components/ProductAll/ProductAllMenuBar.jsx +++ b/vite-project/src/pages/ItemsPage/components/ProductAll/ProductAllMenuBar.jsx @@ -1,7 +1,7 @@ import { useNavigate } from "react-router"; import DropDown from "../../../../common/Dropdown"; import { useMediaQuery } from "react-responsive"; -import { DROPDOWN_MENUS } from "../../../../constants/PRODUCTS"; +import { ORDER_BYS } from "../../../../constants/PRODUCTS"; const ProductAllMenuBar = ({ isOpenDropdown, @@ -10,8 +10,11 @@ const ProductAllMenuBar = ({ orderBy, }) => { const navigate = useNavigate(); - const isMobile = useMediaQuery({ maxWidth: 767 }); + const DROPDOWN_MENUS = Object.keys(ORDER_BYS); + const selectedDropdownValue = DROPDOWN_MENUS.find( + (key) => ORDER_BYS[key] === orderBy + ); return (
    @@ -43,17 +46,17 @@ const ProductAllMenuBar = ({ sort-img ) : ( <> -

    {orderBy}

    +

    {selectedDropdownValue}

    arrow-down )} - {DROPDOWN_MENUS.map((orderBy, index) => ( -
  • + {DROPDOWN_MENUS.map((menu, index) => ( +
    • ))} diff --git a/vite-project/src/pages/ItemsPage/components/ProductAll/index.jsx b/vite-project/src/pages/ItemsPage/components/ProductAll/index.jsx index 02a3ba29..1df6ec55 100644 --- a/vite-project/src/pages/ItemsPage/components/ProductAll/index.jsx +++ b/vite-project/src/pages/ItemsPage/components/ProductAll/index.jsx @@ -9,7 +9,7 @@ import LoadingSpinner from "../../../../common/LoadingSpinner"; import ErrorMessage from "../../../../common/ErrorMessage"; const ProductAll = () => { - const [orderBy, setOrderBy] = useState(ORDER_BYS[0]); + const [orderBy, setOrderBy] = useState(ORDER_BYS["최신순"]); const [page, setPage] = useState(1); const [isOpenDropdown, setIsOpenDropdown] = useState(false); const { _, allProductPageSize } = useResponsivePageSize(); @@ -27,8 +27,8 @@ const ProductAll = () => { const totalCount = allProducts?.totalCount; - const onClickMenu = (orderBy) => { - setOrderBy(orderBy); + const onClickMenu = (menu) => { + setOrderBy(menu); setIsOpenDropdown(false); }; From 1953c5eaec20b8db769b5aa859e86fdd8f03dbe4 Mon Sep 17 00:00:00 2001 From: sanginjeong Date: Tue, 26 Aug 2025 11:40:32 +0900 Subject: [PATCH 10/14] =?UTF-8?q?feat:=20/addItem=20=EC=9D=BC=20=EB=95=8C?= =?UTF-8?q?=20=EC=83=81=EB=8B=A8=20=EC=A4=91=EA=B3=A0=EB=A7=88=EC=BC=93=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=EC=9D=98=20=EC=83=89=EC=83=81=20active?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vite-project/src/common/Navbar/index.jsx | 14 ++++++++++++-- .../src/pages/AddItemPage/AddItemPage.style.css | 0 2 files changed, 12 insertions(+), 2 deletions(-) create mode 100644 vite-project/src/pages/AddItemPage/AddItemPage.style.css diff --git a/vite-project/src/common/Navbar/index.jsx b/vite-project/src/common/Navbar/index.jsx index 2014eb8e..de2624a3 100644 --- a/vite-project/src/common/Navbar/index.jsx +++ b/vite-project/src/common/Navbar/index.jsx @@ -1,5 +1,5 @@ import React from "react"; -import { Link, NavLink } from "react-router"; +import { Link, NavLink, useLocation } from "react-router"; import "./Navbar.style.css"; import { useMediaQuery } from "react-responsive"; @@ -10,6 +10,7 @@ const navLinks = [ const Navbar = () => { const isMobile = useMediaQuery({ maxWidth: 767 }); + const location = useLocation(); return (
    @@ -27,7 +28,16 @@ const Navbar = () => {
      {navLinks.map((link) => (
    • - {link.title} + + {link.title} +
      • ))}
    diff --git a/vite-project/src/pages/AddItemPage/AddItemPage.style.css b/vite-project/src/pages/AddItemPage/AddItemPage.style.css new file mode 100644 index 00000000..e69de29b From 7380f4f7a840596ad12b9f09c9b50a2d43b31cdd Mon Sep 17 00:00:00 2001 From: sanginjeong Date: Tue, 26 Aug 2025 16:13:49 +0900 Subject: [PATCH 11/14] =?UTF-8?q?feat:=20=EC=83=81=ED=92=88=EB=AA=85,=20?= =?UTF-8?q?=EC=83=81=ED=92=88=EC=86=8C=EA=B0=9C,=20=ED=8C=90=EB=A7=A4?= =?UTF-8?q?=EA=B0=80=EA=B2=A9,=20=ED=83=9C=EA=B7=B8=20=EC=9E=85=EB=A0=A5?= =?UTF-8?q?=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vite-project/public/images/ic_x.svg | 4 + vite-project/src/App.css | 62 +++++++++++++++- .../src/common/Navbar/Navbar.style.css | 6 ++ .../src/common/TagBadge/TagBadge.style.css | 27 +++++++ vite-project/src/common/TagBadge/index.jsx | 14 ++++ .../src/common/TagList/TagList.style.css | 4 + vite-project/src/common/TagList/index.jsx | 16 ++++ .../pages/AddItemPage/AddItemPage.style.css | 50 +++++++++++++ .../components/AddItemDescription/index.jsx | 16 ++++ .../components/AddItemFormHeader/index.jsx | 15 ++++ .../components/AddItemImage/index.jsx | 7 ++ .../components/AddItemName/index.jsx | 16 ++++ .../components/AddItemPrice/index.jsx | 18 +++++ .../components/AddItemTag/index.jsx | 16 ++++ .../components/AddItemTagList/index.jsx | 9 +++ vite-project/src/pages/AddItemPage/index.jsx | 74 ++++++++++++++++++- .../src/pages/ItemsPage/ItemsPage.style.css | 6 -- .../ProductAll/ProductAllMenuBar.jsx | 2 +- 18 files changed, 351 insertions(+), 11 deletions(-) create mode 100644 vite-project/public/images/ic_x.svg create mode 100644 vite-project/src/common/TagBadge/TagBadge.style.css create mode 100644 vite-project/src/common/TagBadge/index.jsx create mode 100644 vite-project/src/common/TagList/TagList.style.css create mode 100644 vite-project/src/common/TagList/index.jsx create mode 100644 vite-project/src/pages/AddItemPage/components/AddItemDescription/index.jsx create mode 100644 vite-project/src/pages/AddItemPage/components/AddItemFormHeader/index.jsx create mode 100644 vite-project/src/pages/AddItemPage/components/AddItemImage/index.jsx create mode 100644 vite-project/src/pages/AddItemPage/components/AddItemName/index.jsx create mode 100644 vite-project/src/pages/AddItemPage/components/AddItemPrice/index.jsx create mode 100644 vite-project/src/pages/AddItemPage/components/AddItemTag/index.jsx create mode 100644 vite-project/src/pages/AddItemPage/components/AddItemTagList/index.jsx diff --git a/vite-project/public/images/ic_x.svg b/vite-project/public/images/ic_x.svg new file mode 100644 index 00000000..5e2e3e92 --- /dev/null +++ b/vite-project/public/images/ic_x.svg @@ -0,0 +1,4 @@ + + + + diff --git a/vite-project/src/App.css b/vite-project/src/App.css index 8152f4e9..78d3a22a 100644 --- a/vite-project/src/App.css +++ b/vite-project/src/App.css @@ -1,5 +1,17 @@ :root { --primary100: #3692ff; + --primary200: #1967d6; + --primary300: #1251aa; + + --gray50: #f9fafb; + --gray100: #f3f4f6; + --gray200: #e5e7eb; + --gray400: #9ca3af; + --gray500: #6b7280; + --gray600: #4b5563; + --gray700: #374151; + --gray800: #1f2937; + --gray900: #111827; } * { @@ -45,12 +57,58 @@ p { .wrap { padding: 0 240px; - display: flex; - justify-content: center; +} + +.btn-large { + height: 56px; + padding: 16px 124px; + border-radius: 40px; + border: none; + font-weight: 600; + font-size: 20px; + color: var(--gray100); +} + +.btn-medium { + height: 48px; + padding: 12px 71px; + border-radius: 40px; + border: none; + font-weight: 600; + font-size: 18px; + color: var(--gray100); +} + +.btn-small-40 { + height: 42px; + padding: 12px 23px; + border-radius: 8px; + border: none; + font-weight: 600; + font-size: 16px; + color: var(--gray100); +} + +.btn-small-48 { + height: 48px; + padding: 12px 23px; + border-radius: 8px; + border: none; + font-weight: 600; + font-size: 16px; + color: var(--gray100); +} + +.btn-large:disabled, +.btn-medium:disabled, +.btn-small-40:disabled, +.btn-small-48:disabled { + background-color: #9ca3af; } .container { max-width: 1200px; + margin: 0 auto; } @media screen and (max-width: 1199px) { diff --git a/vite-project/src/common/Navbar/Navbar.style.css b/vite-project/src/common/Navbar/Navbar.style.css index bb52a84a..379a9b7b 100644 --- a/vite-project/src/common/Navbar/Navbar.style.css +++ b/vite-project/src/common/Navbar/Navbar.style.css @@ -58,3 +58,9 @@ padding: 0 16px; } } + +@media screen and (max-width: 767px) { + .nav-logo { + width: 100px; + } +} diff --git a/vite-project/src/common/TagBadge/TagBadge.style.css b/vite-project/src/common/TagBadge/TagBadge.style.css new file mode 100644 index 00000000..08a372c4 --- /dev/null +++ b/vite-project/src/common/TagBadge/TagBadge.style.css @@ -0,0 +1,27 @@ +.tag-badge { + background-color: var(--gray100); + padding: 6px 12px; + border-radius: 26px; + height: 36px; + display: inline-flex; + justify-content: center; + align-items: center; + gap: 10px; +} + +.tag-badge > span { + color: #1f2937; + font-weight: 400; + font-size: 16px; +} + +.tag-delete-badge-btn { + background-color: var(--gray400); + color: #f9fafb; + width: 20px; + height: 20px; + border-radius: 100%; + display: flex; + justify-content: center; + align-items: center; +} diff --git a/vite-project/src/common/TagBadge/index.jsx b/vite-project/src/common/TagBadge/index.jsx new file mode 100644 index 00000000..9b1342ed --- /dev/null +++ b/vite-project/src/common/TagBadge/index.jsx @@ -0,0 +1,14 @@ +import "./TagBadge.style.css"; + +const TagBadge = ({ name, onDelete }) => { + return ( +
    + #{name} + +
    + ); +}; + +export default TagBadge; diff --git a/vite-project/src/common/TagList/TagList.style.css b/vite-project/src/common/TagList/TagList.style.css new file mode 100644 index 00000000..91455908 --- /dev/null +++ b/vite-project/src/common/TagList/TagList.style.css @@ -0,0 +1,4 @@ +.tag-area { + display: flex; + gap: 16px; +} diff --git a/vite-project/src/common/TagList/index.jsx b/vite-project/src/common/TagList/index.jsx new file mode 100644 index 00000000..f5443253 --- /dev/null +++ b/vite-project/src/common/TagList/index.jsx @@ -0,0 +1,16 @@ +import TagBadge from "../TagBadge"; +import "./TagList.style.css"; + +const TagList = ({ tags, onDelete }) => { + return ( +
      + {tags?.map((tag, index) => ( +
    • + onDelete(index)} /> +
      • + ))} +
    + ); +}; + +export default TagList; diff --git a/vite-project/src/pages/AddItemPage/AddItemPage.style.css b/vite-project/src/pages/AddItemPage/AddItemPage.style.css index e69de29b..cfc9ba39 100644 --- a/vite-project/src/pages/AddItemPage/AddItemPage.style.css +++ b/vite-project/src/pages/AddItemPage/AddItemPage.style.css @@ -0,0 +1,50 @@ +.addItem-page-layout { + margin-top: 90px; + display: flex; + flex-direction: column; + gap: 16px; + height: 1206px; +} + +.addItem-form { + display: flex; + flex-direction: column; + gap: 16px; +} + +.addItem-form-header { + display: flex; + justify-content: space-between; + align-items: center; +} + +.addItem-form-header-title { + font-weight: 700; + font-size: 20px; + color: var(--gray800); +} + +.addItem-form-submit-btn { + background-color: var(--primary100); +} + +.addItem-form-submit-btn:disabled { + background-color: var(--gray400); +} + +.addItem-input, +.addItem-textArea { + width: 100%; + background-color: var(--gray100); + padding: 16px 24px; + border-radius: 12px; + border: none; + font-weight: 400; + font-size: 16px; + color: #1f2937; +} + +.addItem-textArea { + height: 282px; + resize: none; +} diff --git a/vite-project/src/pages/AddItemPage/components/AddItemDescription/index.jsx b/vite-project/src/pages/AddItemPage/components/AddItemDescription/index.jsx new file mode 100644 index 00000000..d7a0ec23 --- /dev/null +++ b/vite-project/src/pages/AddItemPage/components/AddItemDescription/index.jsx @@ -0,0 +1,16 @@ +const AddItemDescription = ({ value, onChange }) => { + return ( +
    +

    상품 소개

    +