@@ -21,7 +26,7 @@ const Navbar = () => {
(isActive ? styles.active : null)}
+ className={marketActive ? styles.active : null}
>
중고마켓
diff --git a/src/components/NavBar.module.css b/src/components/NavBar.module.css
index 1ae355b..1099e15 100644
--- a/src/components/NavBar.module.css
+++ b/src/components/NavBar.module.css
@@ -42,7 +42,8 @@
}
@media (max-width: 1199px) {
-}
-
-@media (max-width: 767px) {
+ .buttonContainer,
+ .navBarLeftContainer {
+ gap: 10px;
+ }
}
diff --git a/src/components/Tag.jsx b/src/components/Tag.jsx
new file mode 100644
index 0000000..4afede0
--- /dev/null
+++ b/src/components/Tag.jsx
@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+import deleteImg from '../assets/delete.svg';
+
+const Tag = ({ children, handleTagDelete }) => {
+ return (
+
+ #{children}
+
+
+ );
+};
+
+export default Tag;
+
+const Container = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: auto;
+ gap: 8px;
+ height: 36px;
+ background-color: var(--coolGray-100);
+ padding: 6px 12px;
+ border-radius: 26px;
+`;
+
+const Text = styled.p`
+ line-height: 26px;
+ font-weight: 400;
+ color: var(--secondary-800);
+`;
diff --git a/src/index.css b/src/index.css
index 5770ee2..ccdc36c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,14 +1,19 @@
:root {
--secondary-100: #f3f4f6;
+ --secondary-400: #9ca3af;
--secondary-600: #4b5563;
--secondary-800: #1f2937;
--secondary-900: #111827;
--primary-100: #3692ff;
+ --coolGray-50: #f9fafb;
--coolGray-100: #f3f4f6;
--coolGray-200: #e5e7eb;
+ --coolGray-400: #9ca3af;
--coolGray-500: #6b7280;
+
+ --errorRed: #f74747;
}
* {
diff --git a/src/pages/AddItemPage.jsx b/src/pages/AddItemPage.jsx
index 77d2c39..0f8132d 100644
--- a/src/pages/AddItemPage.jsx
+++ b/src/pages/AddItemPage.jsx
@@ -1,5 +1,185 @@
+import { useMemo, useState } from 'react';
+import styled from 'styled-components';
+import NavBar from '../components/NavBar';
+import Button from '../components/Button';
+import ImageRegistration from '../components/ImageRegistration';
+import AddItemInput from '../components/AddItemInput';
+
const AddItemPage = () => {
- return
AddItemPage
;
+ const [file, setFile] = useState();
+ const [isErrorMessage, setIsErrorMessage] = useState(false);
+ const [tag, setTag] = useState([]);
+ const [name, setName] = useState('');
+ const [description, setDescription] = useState('');
+ const [price, setPrice] = useState('');
+
+ const isActive = file && name && description && price;
+
+ const preview = useMemo(() => {
+ if (!file) return null;
+ return URL.createObjectURL(file);
+ }, [file]);
+
+ //폼데이터 보내기
+ const handleSubmit = (formData) => {
+ const finalData = {
+ images: file,
+ tags: tag,
+ price: Number(price),
+ description,
+ name,
+ };
+
+ console.log(finalData);
+ };
+
+ //이미지 등록
+ const handleImageRegis = (e) => {
+ setFile(e.target.files[0]);
+ };
+
+ //이미지 삭제
+ const handleImageDelete = () => {
+ setFile(null);
+ setIsErrorMessage(false);
+ };
+
+ //에러 메시지 띄우기
+ const handleErrorMessage = (e) => {
+ if (file) {
+ e.preventDefault();
+ setIsErrorMessage(true);
+ } else {
+ setIsErrorMessage(false);
+ }
+ };
+
+ // 태그 추가
+ const handleTagAdd = (e) => {
+ if (e.key === 'Enter' && e.nativeEvent.isComposing === false) {
+ e.preventDefault();
+ if (tag.includes(e.target.value)) {
+ e.target.value = '';
+ return;
+ }
+ setTag([...tag, e.target.value]);
+ e.target.value = '';
+ }
+ };
+
+ //태그 삭제
+ const handleTagDelete = (targetTitle) => {
+ setTag(tag.filter((title) => title !== targetTitle));
+ };
+
+ return (
+
+
+
+
+
+ 상품 이미지
+
+
+ *이미지 등록은 최대 1개까지 가능합니다.
+
+
+ setName(e.target.value)}
+ >
+ 상품명
+
+ setDescription(e.target.value)}
+ >
+ 상품 소개
+
+ setPrice(e.target.value)}
+ >
+ 판매가격
+
+
+ 태그
+
+
+
+ );
};
export default AddItemPage;
+
+//styled-components
+
+const Container = styled.form`
+ max-width: 1200px;
+ margin: 94px auto;
+ padding-right: 24px;
+ padding-left: 24px;
+
+ @media (max-width: 767px) {
+ min-width: 450px;
+ padding-right: 14px;
+ padding-left: 14px;
+ }
+`;
+
+const Header = styled.div`
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 24px;
+`;
+
+const Title = styled.h1`
+ color: var(--secondary-800);
+ font-weight: 700;
+ font-size: 20px;
+ line-height: 32px;
+`;
+
+const SemiTitle = styled.h2`
+ color: var(--secondary-800);
+ font-weight: 700;
+ font-size: 18px;
+ line-height: 26px;
+`;
+
+const ProductImageContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ margin-bottom: 24px;
+`;
+
+const ErrorMessage = styled.p`
+ display: ${({ $isErrorMessage }) => ($isErrorMessage ? '' : 'none')};
+ font-weight: 400;
+ line-height: 26px;
+ color: var(--errorRed);
+`;
diff --git a/src/pages/ItemsPage.jsx b/src/pages/ItemsPage.jsx
index 4e65dcd..da0c1fb 100644
--- a/src/pages/ItemsPage.jsx
+++ b/src/pages/ItemsPage.jsx
@@ -1,21 +1,21 @@
-import {useEffect, useState} from "react";
-import {Link} from "react-router-dom";
-import styles from "./ItemsPage.module.css";
-import NavBar from "../components/NavBar";
-import BestProduct from "../components/BestProduct";
-import AllProduct from "../components/AllProduct";
-import Pagination from "../components/Pagination";
-import Button from "../components/Button";
-import DropDown from "../components/DropDown";
-import SearchBar from "../components/SearchBar";
-import {getProducts} from "../apis/productApi";
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import styles from './ItemsPage.module.css';
+import NavBar from '../components/NavBar';
+import BestProduct from '../components/BestProduct';
+import AllProduct from '../components/AllProduct';
+import Pagination from '../components/Pagination';
+import Button from '../components/Button';
+import DropDown from '../components/DropDown';
+import SearchBar from '../components/SearchBar';
+import { getProducts } from '../apis/productApi';
const ItemsPage = () => {
const [products, setProducts] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [bestProducts, setBestProducts] = useState([]);
const [isBestLoading, setIsBestLoading] = useState(false);
- const [productsSort, setProductsSort] = useState("recent");
+ const [productsSort, setProductsSort] = useState('recent');
const [page, setPage] = useState(1);
// const [pageSize, setPageSize] = useState(10);
@@ -38,7 +38,7 @@ const ItemsPage = () => {
const fetchBestProducts = async () => {
try {
setIsBestLoading(true);
- const data = await getProducts({pageSize: 4, orderBy: "favorite"});
+ const data = await getProducts({ pageSize: 4, orderBy: 'favorite' });
setBestProducts(data.list);
} catch (error) {
console.error(error);
@@ -80,10 +80,7 @@ const ItemsPage = () => {
판다마켓 상품 목록
{/* h2태그를 쓰기 위한 */}
베스트 상품
-
+ {!isBestLoading &&
}
전체 상품
@@ -91,12 +88,15 @@ const ItemsPage = () => {
-
+
-
+
+ 최신순
+ 좋아요순
+
-
+ {!isLoading &&
}