[박형준] sprint5 (#255)

* 프로젝트 생성, 파일 정리, App component 생성 * Add Header Component * change image name * change Header.css * add media query to Header.css for Tablet * change media query min-width for Tablet * Add media query for Desktop and finish Header component * Add Best Items section * Add Best Item section Tablet size * Add Best items desktop size * Add All Item section * Add All Items order change * Add Basic Pagenation --------- Co-authored-by: 박형준 <[email protected]>
codeit-bootcamp-frontend · Dec 9, 2024 · eed5503 · eed5503
1 parent 66f3ba6
commit eed5503
Show file tree

Hide file tree

Showing 31 changed files with 6,678 additions and 4,783 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,12 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@noonnu/rokaf-sans-medium": "^0.1.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -4,40 +4,9 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
     <title>React App</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/public/robots.txt b/public/robots.txt
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/App/App.css b/src/App/App.css
@@ -0,0 +1,38 @@
+@import url('https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css');
+@import url('https://fonts.googleapis.com/css2?family=ROKAF+Sans:wght@400;700&display=swap');
+@import url('~@noonnu/rokaf-sans-medium');
+
+:root {
+  --blue100: #3692ff;
+  --grey200: #1f2937;
+  --grey100: #4b5563;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+
+  font-family: 'Pretendard', sans-serif;
+}
+
+a {
+  text-decoration: none;
+}
+
+.loadChangeButton {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.loadChange {
+  /* width: 100%; */
+  flex-grow: 1;
+  height: 50px;
+
+  font-size: 25px;
+  border-radius: 10px;
+
+  margin-bottom: 100px;
+  cursor: pointer;
+}
diff --git a/src/App/App.js b/src/App/App.js
@@ -0,0 +1,57 @@
+import { useEffect, useState } from 'react';
+import { getData } from '../api';
+import AllItems from '../Components/AllItems/AllItems';
+import BestItems from '../Components/BestItems/BestItems';
+import Header from '../Components/Header/Header';
+import './App.css';
+
+const { list: bestItems } = await getData({ order: 'favorite' });
+
+function App() {
+  const [allItems, setAllItems] = useState([]);
+  const [order, setOrder] = useState('recent');
+  const [page, setPage] = useState(1);
+
+  const handleChange = (orderBy) => {
+    setOrder(orderBy);
+  };
+
+  const handleLoadNext = () => {
+    if (allItems.length < 10) {
+      return;
+    } else {
+      setPage(page + 1);
+    }
+  };
+  const handleLoadPre = () => {
+    if (page === 1) {
+      return;
+    } else {
+      setPage(page - 1);
+    }
+  };
+
+  const itemLoad = async (orderQuery) => {
+    const { list: nextItems } = await getData(orderQuery);
+    setAllItems(nextItems);
+  };
+
+  useEffect(() => {
+    itemLoad({ order, page });
+  }, [order, page]);
+
+  return (
+    <>
+      <Header />
+      <BestItems items={bestItems} />
+      <AllItems
+        items={allItems}
+        onChange={handleChange}
+        onLoadNext={handleLoadNext}
+        onLoadPre={handleLoadPre}
+      />
+    </>
+  );
+}
+
+export default App;
diff --git a/src/App/backup.js b/src/App/backup.js
@@ -0,0 +1,141 @@
+// App.js
+
+import { useEffect, useState } from 'react';
+import { getData } from '../api';
+import AllItems from '../Components/AllItems/AllItems';
+import BestItems from '../Components/BestItems/BestItems';
+import Header from '../Components/Header/Header';
+import './App.css';
+
+const { list: bestItems } = await getData('favorite');
+
+function App() {
+  const [allItems, setAllItems] = useState([]);
+  const [order, setOrder] = useState('recent');
+  const [preOrder, setPreOrder] = useState(order);
+  const [page, setPage] = useState(1);
+
+  const handleChange = (orderBy) => {
+    setOrder(orderBy);
+  };
+
+  const handLoadMore = () => {
+    setPage(page + 1);
+  };
+
+  const load = async (orderQuery) => {
+    const { list: nextItems } = await getData(orderQuery);
+    if (orderQuery.page === 1) {
+      setAllItems(nextItems);
+    } else {
+      setAllItems([...allItems, ...nextItems]);
+    }
+  };
+
+  useEffect(() => {
+    if (order !== preOrder) {
+      load({ order });
+    } else {
+      load({ order, page });
+    }
+  }, [order, page]);
+
+  return (
+    <>
+      <Header />
+      <BestItems items={bestItems} />
+      <AllItems
+        items={allItems}
+        onChange={handleChange}
+        onLoadMore={handLoadMore}
+      />
+    </>
+  );
+}
+
+export default App;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// AllItems.js
+
+import AllItemList from './AllItemList/AllItemList';
+import './AllItems.css';
+
+function AllItems({ items, onChange, onLoadMore }) {
+  const allItemsChange = (e) => {
+    onChange(e.target.value);
+  };
+
+  const handLoadMore = () => {
+    onLoadMore();
+  };
+
+  return (
+    <div className="allItems">
+      <div className="container">
+        <h2>전체 상품</h2>
+        <div className="allItemsRight">
+          <input type="text" placeholder="검색할 상품을 입력해주세요"></input>
+          <button>상품 등록하기</button>
+          <select
+            className="orderSelect"
+            name="order"
+            onChange={allItemsChange}
+          >
+            <option value="recent">최신순</option>
+            <option value="favorite">베스트순</option>
+          </select>
+        </div>
+      </div>
+
+      <ul className="itemList">
+        {items.map((item, index) => {
+          return <AllItemList key={item.id} item={item} index={index} />;
+        })}
+      </ul>
+      <button className="loadMore" onClick={handLoadMore}>
+        더보기
+      </button>
+    </div>
+  );
+}
+
+export default AllItems;