codeit-bootcamp-frontend · GANGYIKIM · Sep 23, 2024 · Sep 6, 2024 · Sep 14, 2024 · Sep 14, 2024
diff --git a/.gitignore b/.gitignore
@@ -8,7 +8,7 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
-dist
+
 dist-ssr
 *.local
 

diff --git a/Heart.png b/Heart.png
diff --git a/README.md b/README.md
@@ -1,9 +1,28 @@
-# React + Vite
+# skill
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+React + Html + CSS + JavaScript
+Retrieving json data from the backend server using axios.
 
-Currently, two official plugins are available:
+# 배포링크
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+https://leafy-profiterole-1b850b.netlify.app/
 
+# 1.mainpage
+
+After receiving product json data with axios, it retrieves product photo, name, price, and number of likes information and arranges them as shown on the screen. Then, when you click on the product, the detailed screen appears.
+
+# 2.Sort
+
+Sort by latest and likes. Set parameters in backend to retrieve by latest or likes and then arrange. Registering a product could not be set because backend function is not provided.
+
+# 3.Detialpage
+
+Clicking on the product will take you to the details screen. This is also arranged by fetching JSON data from the backend API server. And the comments are also fetched from the backend API server.
+
+# 4.Product Registration
+
+When you click the second-hand market navigation button, the product registration page appears. You can register an image, enter the product name, product introduction, sales price, and tags. After entering the tag and pressing Enter, the tag below appears. When all inputs are completed, the background color of the registration button in the upper right corner changes.
+
+# 5.Pagination
+
+Below is the pagination. When you click on the number button, it is passed as a url parameter, and the corresponding url json data is fetched, and then the products are arranged again. Once you go through all the pages, it will not go any further. For example, if there are 139 products, a total of 14 pages will be composed, and it will not go beyond page 14.
diff --git a/dist/assets/index-B8re9kkF.js b/dist/assets/index-B8re9kkF.js
diff --git a/dist/assets/index-DLNfu7h6.css b/dist/assets/index-DLNfu7h6.css
@@ -0,0 +1 @@
+@import"https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.css";*{margin:0;padding:0;box-sizing:border-box}body{font-family:Pretendard}
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>중고마켓</title>
+    <script type="module" crossorigin src="/assets/index-B8re9kkF.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DLNfu7h6.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

diff --git a/dist/logo.png b/dist/logo.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,7 +13,9 @@
     "axios": "^1.7.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-
+    "react-paginate": "^8.2.0",
+    "react-router-dom": "^6.26.1",
+    "styled-components": "^6.1.13"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",

diff --git a/src/App.css b/src/App.css
@@ -1,5 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.css");
-
 * {
   margin: 0;
   padding: 0;
@@ -9,4 +8,3 @@
 body {
   font-family: "Pretendard";
 }
-