style: 화면 구조 및 input 완료

codeit-bootcamp-frontend · Dec 2, 2024 · b73a9f1 · b73a9f1
1 parent 8579de5
commit b73a9f1
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 3 deletions.
diff --git a/src/images/ic_plus.png b/src/images/ic_plus.png
diff --git a/src/pages/AddItemPage/AddItemPage.css 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
@@ -1,9 +1,36 @@
-import Header from "../../components/Layout/Header";
+import "./AddItemPage.css";
 
 const AddItemPage = () => {
   return (
     <div>
-      <div className="addItemContainer"></div>
+      <form className="addItemContainer">
+        <div className="addItemHeader">
+          <h1 className="headerTitle">상품 등록하기</h1>
+          <button className="addItemBtn" disabled>
+            등록
+          </button>
+        </div>
+        <div className="inputBox image">
+          <label className="inputLabel">상품 이미지</label>
+          <input className="input inputImg" placeholder="이미지 등록" />
+        </div>
+        <div className="inputBox">
+          <label className="inputLabel">상품명</label>
+          <input className="input" placeholder="상품명을 입력해주세요" />
+        </div>
+        <div className="inputBox textarea">
+          <label className="inputLabel">상품 소개</label>
+          <input className="input textarea" placeholder="상품 소개를 입력해주세요" />
+        </div>
+        <div className="inputBox image">
+          <label className="inputLabel">판매가격</label>
+          <input className="input" placeholder="판매 가격을 입력해주세요" />
+        </div>
+        <div className="inputBox image">
+          <label className="inputLabel">태그</label>
+          <input className="input" placeholder="태그를 입력해주세요" />
+        </div>
+      </form>
     </div>
   );
 };

diff --git 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 (