-
{navLinks.map((link) => (
-
-
{link.title} ++ {link.title} +
))}
-
- {allProducts?.map((product) => (
+ {products?.map((product) => (
-
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..f5a936b8 --- /dev/null +++ b/vite-project/src/common/TagBadge/TagBadge.style.css @@ -0,0 +1,16 @@ +.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; +} diff --git a/vite-project/src/common/TagBadge/index.jsx b/vite-project/src/common/TagBadge/index.jsx new file mode 100644 index 00000000..ddda26e9 --- /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)} /> +
+ ))}
+
- +- + ); diff --git a/vite-project/src/pages/AddItem-Page/AddItemPage.jsx b/vite-project/src/pages/AddItem-Page/AddItemPage.jsx deleted file mode 100644 index c2069567..00000000 --- a/vite-project/src/pages/AddItem-Page/AddItemPage.jsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from "react"; - -const AddItemPage = () => { - return+ ++ AddItemPage; -}; - -export default AddItemPage; 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..dc13d896 --- /dev/null +++ b/vite-project/src/pages/AddItemPage/AddItemPage.style.css @@ -0,0 +1,96 @@ +.addItem-page-layout { + margin-top: 90px; + display: flex; + flex-direction: column; + gap: 16px; + padding-bottom: 50px; +} + +.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, +.addItem-image-input { + background-color: var(--gray100); + padding: 16px 24px; + border-radius: 12px; + border: none; + font-weight: 400; + font-size: 16px; + color: #1f2937; +} + +.addItem-input, +.addItem-textArea { + width: 100%; +} + +.addItem-image-input { + cursor: pointer; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 10px; + color: var(--gray400); +} + +.addItem-image-input, +.addItem-image-card { + aspect-ratio: 1; + width: 282px; +} + +.addItem-textArea { + height: 282px; + resize: none; +} + +.addItem-image-area { + display: flex; + gap: 16px; +} + +.addItem-image-card { + position: relative; +} + +.addItem-image-card > button { + position: absolute; + right: 10px; + top: 10px; +} + +@media screen and (max-width: 767px) { + .addItem-image-input, + .addItem-image-card { + width: 160px; + } + .addItem-image-area { + gap: 10px; + } +} 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 ( +++ ); +}; + +export default AddItemDescription; diff --git a/vite-project/src/pages/AddItemPage/components/AddItemFormHeader/index.jsx b/vite-project/src/pages/AddItemPage/components/AddItemFormHeader/index.jsx new file mode 100644 index 00000000..53e28e2a --- /dev/null +++ b/vite-project/src/pages/AddItemPage/components/AddItemFormHeader/index.jsx @@ -0,0 +1,22 @@ +const AddItemFormHeader = ({ formData }) => { + const isDisabled = + formData.name && + formData.price && + formData.description && + formData.tags.length > 0; + + return ( +상품 소개
+ +++ ); +}; + +export default AddItemFormHeader; diff --git a/vite-project/src/pages/AddItemPage/components/AddItemImage/index.jsx b/vite-project/src/pages/AddItemPage/components/AddItemImage/index.jsx new file mode 100644 index 00000000..d3e87556 --- /dev/null +++ b/vite-project/src/pages/AddItemPage/components/AddItemImage/index.jsx @@ -0,0 +1,38 @@ +import ErrorMessage from "../../../../common/ErrorMessage"; + +const AddItemImage = ({ ref, error, image, onChange, onDelete }) => { + return ( +상품 등록하기
+ +++ ); +}; + +export default AddItemImage; diff --git a/vite-project/src/pages/AddItemPage/components/AddItemName/index.jsx b/vite-project/src/pages/AddItemPage/components/AddItemName/index.jsx new file mode 100644 index 00000000..e91ad2b7 --- /dev/null +++ b/vite-project/src/pages/AddItemPage/components/AddItemName/index.jsx @@ -0,0 +1,16 @@ +const AddItemName = ({ value, onChange }) => { + return ( +상품 이미지
++ + + {image && ( ++ {error &&+ ++ )} ++
} + ++ ); +}; + +export default AddItemName; diff --git a/vite-project/src/pages/AddItemPage/components/AddItemPrice/index.jsx b/vite-project/src/pages/AddItemPage/components/AddItemPrice/index.jsx new file mode 100644 index 00000000..338e7ae6 --- /dev/null +++ b/vite-project/src/pages/AddItemPage/components/AddItemPrice/index.jsx @@ -0,0 +1,18 @@ +import React from "react"; + +const AddItemPrice = ({ value, onChange }) => { + return ( +상품명
+ +++ ); +}; + +export default AddItemPrice; diff --git a/vite-project/src/pages/AddItemPage/components/AddItemTag/index.jsx b/vite-project/src/pages/AddItemPage/components/AddItemTag/index.jsx new file mode 100644 index 00000000..5c640ace --- /dev/null +++ b/vite-project/src/pages/AddItemPage/components/AddItemTag/index.jsx @@ -0,0 +1,19 @@ +import ErrorMessage from "../../../../common/ErrorMessage"; + +const AddItemTag = ({ value, onChange, error }) => { + return ( +판매가격
+ +++ ); +}; + +export default AddItemTag; diff --git a/vite-project/src/pages/AddItemPage/components/AddItemTagList/index.jsx b/vite-project/src/pages/AddItemPage/components/AddItemTagList/index.jsx new file mode 100644 index 00000000..e9f81799 --- /dev/null +++ b/vite-project/src/pages/AddItemPage/components/AddItemTagList/index.jsx @@ -0,0 +1,9 @@ +import TagBadge from "../../../../common/TagBadge"; + +const AddItemTagList = ({ tags }) => { + return ( + + ); +}; + +export default AddItemTagList; diff --git a/vite-project/src/pages/AddItemPage/index.jsx b/vite-project/src/pages/AddItemPage/index.jsx new file mode 100644 index 00000000..3dff4efa --- /dev/null +++ b/vite-project/src/pages/AddItemPage/index.jsx @@ -0,0 +1,121 @@ +import { useRef, useState } from "react"; +import "./AddItemPage.style.css"; +import AddItemDescription from "./components/AddItemDescription"; +import AddItemFormHeader from "./components/AddItemFormHeader"; +import AddItemImage from "./components/AddItemImage"; +import AddItemName from "./components/AddItemName"; +import AddItemPrice from "./components/AddItemPrice"; +import AddItemTag from "./components/AddItemTag"; +import TagList from "../../common/TagList"; + +const AddItemPage = () => { + const [formData, setFormData] = useState({ + images: [], // required 지만 빈 배열이어도 되는듯 + name: "", // required + description: "", // required + price: "", // required + tags: [], // required + }); + + const [inputValueTag, setInputValueTag] = useState(""); + const [previewImage, setPreviewImage] = useState(""); + const [errors, setErrors] = useState({ image: "", tag: "" }); // POST요청 에러까지 추후에 들어갈지도 + + const fileInputRef = useRef(null); + + const handleChangeImage = (e) => { + if (previewImage) { + setErrors((prev) => ({ + ...prev, + image: "이미지 파일은 1개만 등록할 수 있습니다", + })); + return; + } + const file = e.target.files[0]; + const url = URL.createObjectURL(file); + setPreviewImage(url); + const newImages = [url]; + setFormData((prev) => ({ ...prev, images: newImages })); + }; + + const handleDeleteImage = () => { + if (fileInputRef.current) { + fileInputRef.current.value = ""; + } + setPreviewImage(""); + setFormData((prev) => ({ ...prev, images: [] })); + setErrors((prev) => ({ ...prev, image: "" })); + }; + + const handleChange = (e, category) => { + setFormData((prev) => ({ ...prev, [category]: e.target.value })); + }; + + const handleSubmitAddItem = (e) => { + e.preventDefault(); + console.log(formData); + }; + + const handleSubmitTag = (e) => { + e.preventDefault(); + + if (!inputValueTag) { + setErrors((prev) => ({ ...prev, tag: "태그를 입력하세요" })); + return; + } + + if (formData.tags.includes(inputValueTag)) { + setErrors((prev) => ({ ...prev, tag: "태그가 이미 존재합니다" })); + return; + } + + const newTags = [...formData.tags, inputValueTag]; + setFormData((prev) => ({ ...prev, tags: newTags })); + setInputValueTag(""); + setErrors((prev) => ({ ...prev, tag: "" })); + }; + + const handleDeleteTag = (index) => { + const newTags = formData.tags.filter((_, i) => i !== index); + setFormData((prev) => ({ ...prev, tags: newTags })); + }; + + return ( +태그
+ + {error &&} + + + + + ++ ); +}; + +export default AddItemPage; 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/ProductAll/index.jsx b/vite-project/src/pages/Items-Page/components/ProductAll/index.jsx deleted file mode 100644 index 437dd034..00000000 --- a/vite-project/src/pages/Items-Page/components/ProductAll/index.jsx +++ /dev/null @@ -1,116 +0,0 @@ -import { useEffect, useState } from "react"; -import { useNavigate } from "react-router"; -import { useGetProduct } from "../../../../hooks/useGetProduct"; -import DropDown from "../../../../common/Dropdown/DropDown"; -import Pagination from "../../../../common/Pagination/Pagination"; -import ProductList from "../../../../common/Product-Card/ProductList"; -import { useResponsivePageSize } from "../../../../hooks/useResponsivePageSize"; -import { useMediaQuery } from "react-responsive"; - -const DROPDOWN_MENUS = { - 최신순: "recent", - 좋아요순: "favorite", -}; - -const GROUP_SIZE = 5; - -const ProductAll = () => { - const navigate = useNavigate(); - const [allProducts, setAllProducts] = useState([]); - const [orderBy, setOrderBy] = useState("최신순"); - const [page, setPage] = useState(1); - const [totalCount, setTotalCount] = useState(0); - const [isOpenDropdown, setIsOpenDropdown] = useState(false); - const [_, pageSize] = useResponsivePageSize(); - const menus = Object.keys(DROPDOWN_MENUS); - - const isMobile = useMediaQuery({ maxWidth: 767 }); - - const onClickMenu = (orderBy) => { - setOrderBy(orderBy); - setIsOpenDropdown(false); - }; - - useEffect(() => { - const fetchData = async () => { - const [response, totalCount] = await useGetProduct({ - orderBy: DROPDOWN_MENUS[orderBy], - pageSize, - page, - }); - setAllProducts(response); - setTotalCount(totalCount); - }; - fetchData(); - console.log("data", allProducts); - }, [orderBy, page, pageSize]); - return ( - <> -+ --전체 상품
---- - --- -setIsOpenDropdown(!isOpenDropdown)}> - {isMobile ? ( - - -
- ) : (
- <>
- {orderBy}
-
-
- )}
- - {menus.map((orderBy, index) => ( - -- - -
- ))}{" "} -- - - ); -}; - -export default ProductAll; 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 f32bca52..00000000 --- a/vite-project/src/pages/Items-Page/components/ProductBest/index.jsx +++ /dev/null @@ -1,29 +0,0 @@ -import React, { useEffect, useState } from "react"; -import { useGetProduct } from "../../../../hooks/useGetProduct"; -import ProductList from "../../../../common/Product-Card/ProductList"; -import { useResponsivePageSize } from "../../../../hooks/useResponsivePageSize"; - -const ProductBest = () => { - const [bestProducts, setBestProducts] = useState([]); - const [pageSize, _] = useResponsivePageSize(); - - useEffect(() => { - const fetchData = async () => { - const [response, totalCount] = await useGetProduct({ - orderBy: "favorite", - pageSize, - }); - setBestProducts(response); - }; - fetchData(); - }, [pageSize]); - - 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 95% rename from vite-project/src/pages/Items-Page/ItemsPage.style.css rename to vite-project/src/pages/ItemsPage/ItemsPage.style.css index 7e2e0a34..d08794c0 100644 --- a/vite-project/src/pages/Items-Page/ItemsPage.style.css +++ b/vite-project/src/pages/ItemsPage/ItemsPage.style.css @@ -26,12 +26,6 @@ .product-all-menus-btn { background-color: var(--primary100); - color: white; - padding: 12px 23px; - font-weight: 600; - font-size: 16px; - height: 42px; - border-radius: 8px; } .product-search-form { 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..074edae1 --- /dev/null +++ b/vite-project/src/pages/ItemsPage/components/ProductAll/ProductAllMenuBar.jsx @@ -0,0 +1,79 @@ +import { useNavigate } from "react-router"; +import DropDown from "../../../../common/Dropdown"; +import { useMediaQuery } from "react-responsive"; +import { ORDER_BYS } from "../../../../constants/PRODUCTS"; + +const ProductAllMenuBar = ({ + isOpenDropdown, + setIsOpenDropdown, + onClickMenu, + 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 ( +베스트 상품
-- ++ ); +}; + +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 new file mode 100644 index 00000000..20222012 --- /dev/null +++ b/vite-project/src/pages/ItemsPage/components/ProductAll/index.jsx @@ -0,0 +1,57 @@ +import { useState } from "react"; +import Pagination from "../../../../common/Pagination"; +import ProductList from "../../../../common/ProductList"; +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["최신순"]); + const [page, setPage] = useState(1); + const [isOpenDropdown, setIsOpenDropdown] = useState(false); + const { _, allProductPageSize } = useResponsivePageSize(); + + const { + data: allProducts, + isLoading, + isError, + error, + } = useGetProductsQuery({ + page, + orderBy, + pageSize: allProductPageSize, + }); + + const totalCount = allProducts?.totalCount; + + const onClickMenu = (menu) => { + setOrderBy(menu); + setIsOpenDropdown(false); + }; + + if (isLoading) return전체 상품
++++ + +++ +setIsOpenDropdown(!isOpenDropdown)}> + {isMobile ? ( + + +
+ ) : (
+ <>
+ {selectedDropdownValue}
+
+
+ )}
+ + {DROPDOWN_MENUS.map((menu, index) => ( + +- + +
+ ))} +; + + if (isError) return ; + return ( + <> + + + + + ); +}; + +export default ProductAll; diff --git a/vite-project/src/pages/ItemsPage/components/ProductBest/index.jsx b/vite-project/src/pages/ItemsPage/components/ProductBest/index.jsx new file mode 100644 index 00000000..d53f1f4e --- /dev/null +++ b/vite-project/src/pages/ItemsPage/components/ProductBest/index.jsx @@ -0,0 +1,30 @@ +import ProductList from "../../../../common/ProductList"; +import { useResponsivePageSize } from "../../../../hooks/useResponsivePageSize"; +import { useGetProductsQuery } from "../../../../hooks/useGetProducts"; +import LoadingSpinner from "../../../../common/LoadingSpinner"; +import ErrorMessage from "../../../../common/ErrorMessage"; + +const ProductBest = () => { + const { bestProductPageSize, _ } = useResponsivePageSize(); + const { + data: bestProducts, + isLoading, + isError, + error, + } = useGetProductsQuery({ + orderBy: "favorite", + pageSize: bestProductPageSize, + }); + + if (isLoading) return ; + + if (isError) 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베스트 상품
++ -
+