Json 파일에 따른 이동 #6

likelionDigimon · Aug 6, 2023 · cf9b10b · cf9b10b
1 parent 8c259d4
commit cf9b10b
Show file tree

Hide file tree

Showing 9 changed files with 175 additions and 112 deletions.
diff --git a/src/component/emotion/component.js b/src/component/emotion/component.js
@@ -304,7 +304,17 @@ export const Button = styled.div`
   font-style: normal;
   font-weight: 600;
   cursor: pointer;
+  margin-right: 10px;
   svg {
     margin-right: 10px;
   }
 `;
+
+export const Inner = styled.div`
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 40px;
+  justify-content: space-between;
+  margin-top: 300px;
+`;
diff --git a/src/component/project/board/agricultboard/component.js b/src/component/project/board/agricultboard/component.js
@@ -37,3 +37,16 @@ export const SignButton = styled.div`
   align-items: center;
   margin-top: 30px;
 `;
+export const OuterContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row;
+`;
+
+export const FootContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 150px;
+`;
diff --git a/src/component/project/board/agricultboard/index.js b/src/component/project/board/agricultboard/index.js
@@ -1,37 +1,45 @@
-import React from "react";
-import styled from "@emotion/styled";
-import { IndexContainer, InnerContainer, SignButton } from "./component";
+import React, { useState } from "react";
+import {
+  IndexContainer,
+  InnerContainer,
+  OuterContainer,
+  FootContainer,
+} from "./component";
 import {
   Container,
   ProjectBox2,
   Title,
+  Inner,
   ButtonContainer,
   Button,
 } from "../../../emotion/component";
 import test3 from "../../../../json/test3.json";
 
 const Agriboard = () => {
-  const OuterContainer = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-direction: row;
-  `;
+  // 한 페이지에서 보여줄 개수
+  const items = 8;
+  // 현 페이지를 나타낼 상태
+  const [currentPage, setCurrentPage] = useState(1);
+
+  // 보여줄 페이지의 범위
+  const startIndex = (currentPage - 1) * items;
+  const endIndex = startIndex + items;
 
-  const Inner = styled.div`
-    flex: 1;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 40px;
-    justify-content: space-between;
-    margin-top: 300px;
-  `;
-  const FootContainer = styled.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 300px;
-  `;
+  // 페이지 범위에 따라 데이터 분할
+  const currentItems = test3.Project.slice(startIndex, endIndex);
+
+  // 현 페이지의 상태를 변화 시켜 페이지 이동
+  const handlePrevPage = () => {
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+    }
+  };
+  const handleNextPage = () => {
+    const totalPages = Math.ceil(test3.Project.length / items);
+    if (currentPage < totalPages) {
+      setCurrentPage(currentPage + 1);
+    }
+  };
   return (
     <>
       <Container>
@@ -85,8 +93,8 @@ const Agriboard = () => {
         <IndexContainer>
           <InnerContainer>
             <Inner>
-              {test3 &&
-                test3.Project.map((project) => (
+              {currentItems &&
+                currentItems.map((project) => (
                   <ProjectBox2
                     key={project.id}
                     title={project.title}
@@ -98,21 +106,39 @@ const Agriboard = () => {
           </InnerContainer>
         </IndexContainer>
         <FootContainer>
-          <Button>
-            다음페이지
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-            >
-              <path
-                d="M15.8351 11.6296L9.20467 5.1999C8.79094 4.79869 8 5.04189 8 5.5703V18.4297C8 18.9581 8.79094 19.2013 9.20467 18.8001L15.8351 12.3704C16.055 12.1573 16.0549 11.8427 15.8351 11.6296Z"
-                fill="white"
-              />
-            </svg>
-          </Button>
+          <FootContainer>
+            <Button onClick={handlePrevPage}>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+              >
+                <path
+                  d="M8.1649 12.3704L14.7953 18.8001C15.2091 19.2013 16 18.9581 16 18.4297V5.5703C16 5.0419 15.2091 4.7987 14.7953 5.1999L8.1649 11.6296C7.945 11.8427 7.9451 12.1573 8.1649 12.3704Z"
+                  fill="white"
+                />
+              </svg>
+              이전 페이지
+            </Button>
+
+            <Button onClick={handleNextPage}>
+              다음 페이지
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+              >
+                <path
+                  d="M15.8351 11.6296L9.20467 5.1999C8.79094 4.79869 8 5.04189 8 5.5703V18.4297C8 18.9581 8.79094 19.2013 9.20467 18.8001L15.8351 12.3704C16.055 12.1573 16.0549 11.8427 15.8351 11.6296Z"
+                  fill="white"
+                />
+              </svg>
+            </Button>
+          </FootContainer>
         </FootContainer>
       </Container>
     </>

diff --git a/src/component/project/board/proboard/index.js b/src/component/project/board/proboard/index.js
@@ -1,22 +1,14 @@
 import React from "react";
-import styled from "@emotion/styled";
-import { IndexContainer, InnerContainer, SignButton } from "./component";
+import { IndexContainer, InnerContainer } from "./component";
 import {
   Button,
   Container,
   ProjectBox,
   Title,
+  Inner,
 } from "../../../emotion/component";
 import test from "../../../../json/test.json";
 const Proboard = () => {
-  const Inner = styled.div`
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 40px;
-    justify-content: space-between;
-    margin-top: 300px;
-  `;
   return (
     <>
       <Container>

diff --git a/src/component/project/board/sellerboard/component.js b/src/component/project/board/sellerboard/component.js
@@ -37,3 +37,10 @@ export const SignButton = styled.div`
   align-items: center;
   margin-top: 30px;
 `;
+
+export const OuterContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row;
+`;
diff --git a/src/component/project/board/sellerboard/index.js b/src/component/project/board/sellerboard/index.js
@@ -1,32 +1,17 @@
 import React from "react";
 import styled from "@emotion/styled";
-import { IndexContainer, InnerContainer, SignButton } from "./component";
+import { IndexContainer, InnerContainer, OuterContainer } from "./component";
 import {
   Container,
   ProjectBox,
   Title,
   ButtonContainer,
   Button,
+  Inner,
 } from "../../../emotion/component";
 import test2 from "../../../../json/test2.json";
 
 const Proboard = () => {
-  const OuterContainer = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-direction: row;
-  `;
-
-  const Inner = styled.div`
-    flex: 1;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 40px;
-    justify-content: space-between;
-    margin-top: 300px;
-  `;
-
   return (
     <>
       <Container>

diff --git a/src/component/project/community/component.js b/src/component/project/community/component.js
@@ -37,3 +37,47 @@ export const SignButton = styled.div`
   align-items: center;
   margin-top: 30px;
 `;
+
+export const OuterContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row;
+`;
+
+export const TableContainer = styled.div`
+  margin-top: 40px;
+  padding: 0 147px;
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    th {
+      border: 1px solid #fff;
+      color: #fff;
+      padding: 10px;
+      background: #76c56f;
+    }
+    td {
+      border: 1px solid #dfdfdf;
+      padding: 10px;
+    }
+    th:nth-of-type(1) {
+      width: 1361px;
+    }
+    th:nth-of-type(2) {
+      width: 265px;
+    }
+    td {
+      height: 60px;
+    }
+    input {
+      width: 100%;
+      height: 100%;
+      border: none;
+      background: transparent;
+      color: #000;
+      font-family: Inter;
+      font-size: 14px;
+    }
+  }
+`;
diff --git a/src/component/project/community/index.js b/src/component/project/community/index.js
@@ -1,56 +1,12 @@
 import React, { useState } from "react";
-import styled from "@emotion/styled";
 import {
   Container,
   Title,
   ButtonContainer,
   Button,
 } from "../../emotion/component";
+import { OuterContainer, TableContainer } from "./component";
 const Community = () => {
-  const OuterContainer = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-direction: row;
-  `;
-
-  const TableContainer = styled.div`
-    margin-top: 40px;
-    padding: 0 147px;
-    table {
-      width: 100%;
-      border-collapse: collapse;
-      th {
-        border: 1px solid #fff;
-        color: #fff;
-        padding: 10px;
-        background: #76c56f;
-      }
-      td {
-        border: 1px solid #dfdfdf;
-        padding: 10px;
-      }
-      th:nth-of-type(1) {
-        width: 1361px;
-      }
-      th:nth-of-type(2) {
-        width: 265px;
-      }
-      td {
-        height: 60px;
-      }
-      input {
-        width: 100%;
-        height: 100%;
-        border: none;
-        background: transparent;
-        color: #000;
-        font-family: Inter;
-        font-size: 14px;
-      }
-    }
-  `;
-
   const [data, setData] = useState([
     { id: 1, title: "Sample Title 1", author: "John" },
     { id: 2, title: "Sample Title 2", author: "Jane" },

diff --git a/src/json/test3.json b/src/json/test3.json
@@ -47,6 +47,36 @@
       "title": "복숭아(백도) /4KG",
       "content": "26,180원 ",
       "imageSrc": "/img/img8.png"
+    },
+    {
+      "id": 9,
+      "title": "풀때기 /4KG",
+      "content": "26,180원 ",
+      "imageSrc": "/img/img8.png"
+    },
+    {
+      "id": 10,
+      "title": "풀때기 /4KG",
+      "content": "26,180원 ",
+      "imageSrc": "/img/img8.png"
+    },
+    {
+      "id": 11,
+      "title": "풀때기 /4KG",
+      "content": "26,180원 ",
+      "imageSrc": "/img/img8.png"
+    },
+    {
+      "id": 12,
+      "title": "풀때기 /4KG",
+      "content": "26,180원 ",
+      "imageSrc": "/img/img8.png"
+    },
+    {
+      "id": 13,
+      "title": "복숭아(백도) /4KG",
+      "content": "26,180원 ",
+      "imageSrc": "/img/img8.png"
     }
   ]
 }