[김가희] sprint6 (#113)

* 리액트 초기 세팅

* nav 바 완성

* 베스트 상품 컴포넌트 만드는 중...

* 베스트 상품 블럭 마무리 필요

* 베스트상품 영역  완성!

* 전체 상품 완성!

* 검색창 및 드롭박스 기능 구현

* 페이지네이션 기능만 구현

* 스프린트 미션 6 진행 중

Author: stella-418

package-lock.json

@@ -10,6 +10,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.26.1",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.1.13",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

package.json

@@ -7,25 +7,35 @@
  * @returns
  */
 export async function getItems(
-  page = 1,
-  pageSize = 10,
-  orderBy = "recent",
-  keyword
+
+	page = 1,
+	pageSize = 10,
+	orderBy = "recent",
+	keyword
 ) {
-  const searchQuery = keyword ? `keyword=${keyword}` : "";
-  const response = await fetch(
-    `https://panda-market-api.vercel.app/products?page=${page}&pageSize=${pageSize}&orderBy=${orderBy}&${searchQuery}`
-  );
-  const body = await response.json();
-  return body;
+	const searchQuery = keyword ? `keyword=${keyword}` : "";
+	const response = await fetch(
+		`https://panda-market-api.vercel.app/products?page=${page}&pageSize=${pageSize}&orderBy=${orderBy}&${searchQuery}`
+	);
+	const body = await response.json();
+	return body;
+}
+
+
+
+export async function addItem(requestBody) {
+	const response = await fetch("https://panda-market-api.vercel.app/products", {
+		method: "POST",
+		body: JSON.stringify({
+			images: requestBody.images, 
+			tags: requestBody.tags,
+			price: requestBody.price, 
+			description: requestBody.description,
+			name: requestBody.name, 
+		}),
+	});
+	return response;
 }
 
-// // 1페이지 10개 최신순 줘
-// const 1페이지10개 = getItems(1,10,"recent")
-// const 2페이지10개 = getItems(2,10,"recent")
-// const 3페이지10개 = getItems(3,10,"recent")
 
-// // 최신순으로 1페이지 1개 줘
-// const 1페이지10개 = getItems(1,10,"favorite")
-// const 2페이지10개 = getItems(2,10,"favorite")
-// const 3페이지10개 = getItems(3,10,"favorite")
+

src/api.js

@@ -1,12 +1,13 @@
 import Nav from "./Nav";
 
+
 function App({ children }) {
-  return (
-    <div>
-      <Nav></Nav>
-      <div>{children}</div>
-    </div>
-  );
+	return (
+		<div>
+			<Nav></Nav>
+			<div>{children}</div>
+		</div>
+	);
 }
 
 export default App;

src/components/App.js

@@ -0,0 +1,10 @@
+const ItemInfo = () => {
+  return(
+    <>
+      <h1>상품 소개</h1>
+      <textarea placeholder="상품 소개를 입력해주세요"></textarea>
+    </>
+  )
+};
+
+export default ItemInfo;

src/components/addItem/ItemInfo.js

@@ -0,0 +1,10 @@
+const ItemName = () => {
+  return(
+    <>
+      <h1>상품명</h1>
+      <textarea placeholder="상품명을 입력해주세요"></textarea>
+    </>
+  )
+}
+
+export default ItemName;

src/components/addItem/ItemName.js

@@ -0,0 +1,11 @@
+const UploadImage = () => {
+  return(
+    <>
+      <h2>상품 이미지</h2>
+      <h2>이미지 박스(임의)</h2>
+    </>
+  )
+}
+
+
+export default UploadImage;

src/components/addItem/UploadImage.js

@@ -0,0 +1,30 @@
+import style from "styled-components";
+
+
+
+const Upload = style.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+const UploadText = style.div``
+
+const Button = style.button`
+  width: 74px;
+  height: 42px;
+  border: 1px solid #9CA3AF;
+	border-radius: 8px;
+`;
+
+const UploadItem = () => {
+	return (
+		<>
+			<Upload>
+				<UploadText>상품 등록하기</UploadText>
+				<Button>등록</Button>
+			</Upload>
+		</>
+	);
+};
+
+export default UploadItem;