diff --git a/src/images/ic_plus.png b/src/images/ic_plus.png new file mode 100644 index 000000000..df2fb4481 Binary files /dev/null and b/src/images/ic_plus.png differ diff --git a/src/pages/AddItemPage/AddItemPage.css b/src/pages/AddItemPage/AddItemPage.css new file mode 100644 index 000000000..b96f86c7f --- /dev/null +++ b/src/pages/AddItemPage/AddItemPage.css @@ -0,0 +1,78 @@ +.addItemContainer { + width: 1200px; + margin: 24px auto; + display: flex; + flex-direction: column; + gap: 24px; +} + +.addItemHeader { + display: flex; + justify-content: space-between; +} + +.headerTitle { + font-size: 20px; + font-weight: 700; + color: #1f2937; +} + +.addItemBtn { + width: 74px; + height: 42px; + padding: 12px 23px; + border: none; + border-radius: 8px; + background-color: #9ca3af; + color: #ffffff; +} + +.addItemBtn:hover { + cursor: pointer; + background-color: #3692ff; +} + +.inputBox { + display: flex; + flex-direction: column; + gap: 16px; +} + +.inputLabel { + font-size: 18px; + font-weight: 700; + color: #1f2937; +} + +.input { + width: 100%; + height: 56px; + padding: 16px 24px; + border: none; + border-radius: 12px; + background-color: #f3f4f6; +} + +.input::placeholder { + font-size: 16px; + font-weight: 400; + color: #9ca3af; +} + +.input.inputImg { + width: 282px; + height: 282px; + padding: 158px 104px 98px; + background: url(../../images/ic_plus.png) no-repeat center; + background-size: 48px; + background-color: #f3f4f6; +} + +.input.textarea { + height: 282px; + padding: 16px 24px; +} + +.input.inputImg::placeholder { + text-align: center; +} diff --git a/src/pages/AddItemPage/AddItemPage.jsx b/src/pages/AddItemPage/AddItemPage.jsx index be54e244e..f9c2c8956 100644 --- a/src/pages/AddItemPage/AddItemPage.jsx +++ b/src/pages/AddItemPage/AddItemPage.jsx @@ -1,9 +1,36 @@ -import Header from "../../components/Layout/Header"; +import "./AddItemPage.css"; const AddItemPage = () => { return (
-
+
+
+

상품 등록하기

+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
); }; diff --git a/src/pages/MarketPage/MarketPage.jsx b/src/pages/MarketPage/MarketPage.jsx index a7d7c336d..b17612d66 100644 --- a/src/pages/MarketPage/MarketPage.jsx +++ b/src/pages/MarketPage/MarketPage.jsx @@ -1,7 +1,6 @@ import "./MarketPage.css"; import BestItemSection from "./components/BestItemSection"; import AllItemSection from "./components/AllItemSection"; -import PaginationBar from "../../components/UI/PaginationBar"; function MarketPage() { return (