기능 최종 마무리 #6

likelionDigimon · Aug 6, 2023 · 30339b8 · 30339b8
1 parent cf9b10b
commit 30339b8
Show file tree

Hide file tree

Showing 16 changed files with 506 additions and 90 deletions.
diff --git a/src/App.js b/src/App.js
@@ -9,11 +9,13 @@ import Agriboard from "./component/project/board/agricultboard";
 import Community from "./component/project/community";
 import PersonalInquiry from "./component/project/Inquiry/personInquiry";
 import "./App.css";
+import Header from "./component/project/header/header";
 
 function App() {
   return (
     <div>
       <BrowserRouter>
+        <Header />
         <Routes>
           <Route path="/" element={<Main />} />
           <Route path="/mypage" element={<Mypage />} />

diff --git a/src/component/emotion/component.js b/src/component/emotion/component.js
@@ -1,8 +1,8 @@
 /** @jsxImportSource @emotion/react */
 import { css } from "@emotion/react";
-import React, { ReactNode } from "react";
-import theme from "../../styles/theme";
+
 import styled from "@emotion/styled";
+import { Link } from "react-router-dom";
 
 const StyledProjectBox = styled.div`
   display: flex;
@@ -276,7 +276,7 @@ export const Title = styled.div`
   border-left: 5px black solid;
   padding-left: 20px;
   margin-left: 147px;
-  margin-top: 120px;
+  margin-top: 80px;
   display: inline-flex;
 `;
 
@@ -285,7 +285,7 @@ export const ButtonContainer = styled.div`
   align-items: center;
   gap: 20px;
   margin-right: 147px;
-  margin-top: 120px;
+  margin-top: 80px;
 `;
 
 export const Button = styled.div`
@@ -313,8 +313,21 @@ export const Button = styled.div`
 export const Inner = styled.div`
   width: 100%;
   display: flex;
+  gap: 80px;
   flex-wrap: wrap;
-  gap: 40px;
-  justify-content: space-between;
   margin-top: 300px;
 `;
+export const FootContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 350px;
+  margin-bottom: 200px;
+`;
+
+export const StyledLinkNavItem = styled(Link)`
+  display: inline-block;
+  p {
+    margin: 0;
+  }
+`;
diff --git a/src/component/project/board/agricultboard/component.js b/src/component/project/board/agricultboard/component.js
@@ -48,5 +48,6 @@ export const FootContainer = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  margin: 150px;
+  margin: 350px;
+  margin-bottom: 200px;
 `;
diff --git a/src/component/project/board/agricultboard/index.js b/src/component/project/board/agricultboard/index.js
@@ -106,39 +106,37 @@ const Agriboard = () => {
           </InnerContainer>
         </IndexContainer>
         <FootContainer>
-          <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={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>
+          <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>
       </Container>
     </>

diff --git a/src/component/project/board/proboard/component.js b/src/component/project/board/proboard/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: 300px;
+`;
diff --git a/src/component/project/board/proboard/index.js b/src/component/project/board/proboard/index.js
@@ -1,23 +1,48 @@
-import React from "react";
+import React, { useState } from "react";
 import { IndexContainer, InnerContainer } from "./component";
 import {
   Button,
   Container,
   ProjectBox,
   Title,
   Inner,
+  FootContainer,
 } from "../../../emotion/component";
 import test from "../../../../json/test.json";
 const Proboard = () => {
+  // 한 페이지에서 보여줄 개수
+  const items = 8;
+  // 현 페이지를 나타낼 상태
+  const [currentPage, setCurrentPage] = useState(1);
+
+  // 보여줄 페이지의 범위
+  const startIndex = (currentPage - 1) * items;
+  const endIndex = startIndex + items;
+
+  // 페이지 범위에 따라 데이터 분할
+  const currentItems = test.Project.slice(startIndex, endIndex);
+
+  // 현 페이지의 상태를 변화 시켜 페이지 이동
+  const handlePrevPage = () => {
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+    }
+  };
+  const handleNextPage = () => {
+    const totalPages = Math.ceil(test.Project.length / items);
+    if (currentPage < totalPages) {
+      setCurrentPage(currentPage + 1);
+    }
+  };
   return (
     <>
       <Container>
         <Title>판매자 게시판</Title>
         <IndexContainer>
           <InnerContainer>
             <Inner>
-              {test &&
-                test.Project.map((project) => (
+              {currentItems &&
+                currentItems.map((project) => (
                   <ProjectBox
                     key={project.id}
                     title={project.title}
@@ -29,21 +54,39 @@ const Proboard = () => {
             </Inner>
           </InnerContainer>
         </IndexContainer>
-        <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>
       </Container>
     </>
   );

diff --git a/src/component/project/board/sellerboard/index.js b/src/component/project/board/sellerboard/index.js
@@ -1,32 +1,48 @@
-import React from "react";
-import styled from "@emotion/styled";
-import { IndexContainer, InnerContainer, OuterContainer } from "./component";
+import React, { useState } from "react";
+import { IndexContainer, InnerContainer } from "./component";
 import {
+  Button,
   Container,
   ProjectBox,
   Title,
-  ButtonContainer,
-  Button,
   Inner,
+  FootContainer,
 } from "../../../emotion/component";
 import test2 from "../../../../json/test2.json";
-
 const Proboard = () => {
+  // 한 페이지에서 보여줄 개수
+  const items = 8;
+  // 현 페이지를 나타낼 상태
+  const [currentPage, setCurrentPage] = useState(1);
+
+  // 보여줄 페이지의 범위
+  const startIndex = (currentPage - 1) * items;
+  const endIndex = startIndex + items;
+
+  // 페이지 범위에 따라 데이터 분할
+  const currentItems = test2.Project.slice(startIndex, endIndex);
+
+  // 현 페이지의 상태를 변화 시켜 페이지 이동
+  const handlePrevPage = () => {
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+    }
+  };
+  const handleNextPage = () => {
+    const totalPages = Math.ceil(test2.Project.length / items);
+    if (currentPage < totalPages) {
+      setCurrentPage(currentPage + 1);
+    }
+  };
   return (
     <>
       <Container>
-        <OuterContainer>
-          <Title>공급자 게시판</Title>
-          <ButtonContainer>
-            <Button>글쓰기</Button>
-            <Button>내가쓴글</Button>
-          </ButtonContainer>
-        </OuterContainer>
+        <Title>공급자 게시판</Title>
         <IndexContainer>
           <InnerContainer>
             <Inner>
-              {test2 &&
-                test2.Project.map((project) => (
+              {currentItems &&
+                currentItems.map((project) => (
                   <ProjectBox
                     key={project.id}
                     title={project.title}
@@ -38,21 +54,39 @@ const Proboard = () => {
             </Inner>
           </InnerContainer>
         </IndexContainer>
-        <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>
       </Container>
     </>
   );