Merge pull request #29 from Hongmoon-gak/feature/preview/search

Feature/preview/search
Hongmoon-gak · Aug 3, 2023 · c8314e2 · c8314e2
2 parents 6e8a0ba + cfb37d5
commit c8314e2
Show file tree

Hide file tree

Showing 12 changed files with 460 additions and 165 deletions.
diff --git a/.gitignore b/.gitignore
@@ -22,4 +22,70 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-job1/src/View/Login/KakaoLoginData.js
+job1/src/View/Login/KakaoLoginData.js
+
+# Created by https://www.toptal.com/developers/gitignore/api/windows,react,visualstudiocode
+# Edit at https://www.toptal.com/developers/gitignore?templates=windows,react,visualstudiocode
+
+### react ###
+.DS_*
+*.log
+logs
+**/*.backup.*
+**/*.back.*
+
+node_modules
+bower_components
+
+*.sublime*
+
+psd
+thumb
+sketch
+
+### VisualStudioCode ###
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/*.code-snippets
+
+# Local History for Visual Studio Code
+.history/
+
+# Built Visual Studio Code Extensions
+*.vsix
+
+### VisualStudioCode Patch ###
+# Ignore all local history of files
+.history
+.ionide
+
+### Windows ###
+# Windows thumbnail cache files
+Thumbs.db
+Thumbs.db:encryptable
+ehthumbs.db
+ehthumbs_vista.db
+
+# Dump file
+*.stackdump
+
+# Folder config file
+[Dd]esktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msix
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
+
+# End of https://www.toptal.com/developers/gitignore/api/windows,react,visualstudiocode
diff --git a/job1/src/App.js b/job1/src/App.js
@@ -3,7 +3,7 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import NavBar from "./Main/NavBar/NavBar";
 import Home from "./View/Home";
 import Laws from "./View/Laws";
-import Board from "./View/Board";
+import Community from "./View/Community";
 import News from "./View/News";
 import Footer from "./Main/Footer";
 import Login from "./View/Login/Login";
@@ -19,8 +19,8 @@ function App() {
         <NavBar />
         <Routes>
           <Route path="/" element={<Home />} />
-          <Route path="/law" element={<Laws />} />
-          <Route path="/board" element={<Board />} />
+          <Route path="/laws" element={<Laws />} />
+          <Route path="/community" element={<Community />} />
           <Route path="/news" element={<News />} />
           <Route path="/login" element={<Login />} />
           <Route path="/mypage" element={<MyPage />} />

diff --git a/job1/src/Main/NavBar/NavBar.js b/job1/src/Main/NavBar/NavBar.js
@@ -5,55 +5,59 @@ import { Link } from "react-router-dom";
 
 import "./NavBar.css";
 
-function NavBar(){
-    const [nav, setNav] = useState(0);
-    return(
-        <div className="nav-container">
-            <div className="nav-logo">
-                    <Link 
-                        onClick={()=>setNav(0)} 
-                        className="navmenus-list"
-                        to={'/'}
-                    ><img src="/Images/Job1 Logo.png" alt="Job-일" /> 
-                    </Link>
-            </div>
+function NavBar() {
+  const [nav, setNav] = useState(0);
+  return (
+    <div className="nav-container">
+      <div className="nav-logo">
+        <Link onClick={() => setNav(0)} className="navmenus-list" to={"/"}>
+          <img src="/Images/Job1 Logo.png" alt="Job-일" />
+        </Link>
+      </div>
 
-            <div className="navitems-container">
-                <div className="navmenus">
-                    <Link 
-                        onClick={()=>setNav(1)} 
-                        className={nav === 1 ? "navmenus-list1" : "navmenus-list"} 
-                        to={'/law'}
-                    >법률</Link>
-                    <Link 
-                        onClick={()=>setNav(2)} 
-                        className={nav === 2 ? "navmenus-list1" : "navmenus-list"} 
-                        to={'/board'}
-                    >게시판</Link>
-                    <Link 
-                        onClick={()=>setNav(3)} 
-                        className={nav === 3 ? "navmenus-list1" : "navmenus-list"} 
-                        to={'/news'}
-                    >새 소식</Link>
-                </div>
-            </div>
+      <div className="navitems-container">
+        <div className="navmenus">
+          <Link
+            onClick={() => setNav(1)}
+            className={nav === 1 ? "navmenus-list1" : "navmenus-list"}
+            to={"/laws"}
+          >
+            법률
+          </Link>
+          <Link
+            onClick={() => setNav(2)}
+            className={nav === 2 ? "navmenus-list1" : "navmenus-list"}
+            to={"/community"}
+          >
+            게시판
+          </Link>
+          <Link
+            onClick={() => setNav(3)}
+            className={nav === 3 ? "navmenus-list1" : "navmenus-list"}
+            to={"/news"}
+          >
+            새 소식
+          </Link>
+        </div>
+      </div>
 
-            <div className="navuser-container">
-                <Link 
-                    onClick={()=>setNav(0)} 
-                    className="navuser-list"
-                    id="nav-login"
-                    to={'/login'} 
-                >로그인</Link>
-                <div className="navuser-list" id="nav-mypage">
-                    <Link 
-                        onClick={()=>setNav(0)}
-                        to={'/mypage'}
-                    >마이페이지</Link>
-                </div>
-            </div>
+      <div className="navuser-container">
+        <Link
+          onClick={() => setNav(0)}
+          className="navuser-list"
+          id="nav-login"
+          to={"/login"}
+        >
+          로그인
+        </Link>
+        <div className="navuser-list" id="nav-mypage">
+          <Link onClick={() => setNav(0)} to={"/mypage"}>
+            마이페이지
+          </Link>
         </div>
-    )
+      </div>
+    </div>
+  );
 }
 
-export default NavBar;
+export default NavBar;
diff --git a/job1/src/Main/Preview/DataSample.js b/job1/src/Main/Preview/DataSample.js
@@ -57,6 +57,17 @@ export const post = [
   {
     id: 6,
     title: "복리후생",
+    likes: "5",
+    date: "2023-09-01",
+    type: "community",
+    contents: "취약계층이 어쩌구 저쩌구..",
+    author: "author",
+    tags: "취업",
+    views: "45",
+  },
+  {
+    id: 7,
+    title: "복리후생",
     likes: "25",
     date: "2023-09-01",
     type: "community",
@@ -65,4 +76,82 @@ export const post = [
     tags: "취업",
     views: "45",
   },
+  {
+    id: 8,
+    title: "복리후생",
+    likes: "5",
+    date: "2023-09-01",
+    type: "community",
+    contents: "취약계층이 어쩌구 저쩌구..",
+    author: "author",
+    tags: "취업",
+    views: "45",
+  },
+  {
+    id: 9,
+    title: "복리후생",
+    likes: "5",
+    date: "2023-09-01",
+    type: "community",
+    contents: "취약계층이 어쩌구 저쩌구..",
+    author: "author",
+    tags: "취업",
+    views: "45",
+  },
+  {
+    id: 10,
+    title: "복리후생",
+    likes: "5",
+    date: "2023-09-01",
+    type: "community",
+    contents: "취약계층이 어쩌구 저쩌구..",
+    author: "author",
+    tags: "취업",
+    views: "45",
+  },
+  {
+    id: 11,
+    title: "복리후생",
+    likes: "5",
+    date: "2023-09-01",
+    type: "community",
+    contents: "취약계층이 어쩌구 저쩌구..",
+    author: "author",
+    tags: "취업",
+    views: "45",
+  },
+  {
+    id: 12,
+    title: "복리후생",
+    likes: "5",
+    date: "2023-09-01",
+    type: "community",
+    contents: "취약계층이 어쩌구 저쩌구..",
+    author: "author",
+    tags: "취업",
+    views: "45",
+  },
+  {
+    id: 13,
+    title: "복리후생",
+    likes: "5",
+    date: "2023-09-01",
+    type: "community",
+    contents: "취약계층이 어쩌구 저쩌구..",
+    author: "author",
+    tags: "취업",
+    views: "45",
+  },
+  {
+    id: 14,
+    title: "복리후생",
+    likes: "5",
+    date: "2023-09-01",
+    type: "community",
+    contents:
+      "취약계층이 어쩌구 저쩌구.을아ㅓ랑린어ㅣㄹㄴ어ㅣ런이ㅏ러ㅣㄴ아ㅓ린어ㅣ렁니ㅏ러ㅣㄴ아ㅓ린어리ㅓㅣ렁나ㅣ러ㅣㅏㅇ너리ㅏㅇ너리ㅏ어니렁널인",
+    author: "author",
+    tags: "취업",
+    views: "45",
+  },
 ];
diff --git a/job1/src/Main/Preview/Pagination.js b/job1/src/Main/Preview/Pagination.js
@@ -0,0 +1,56 @@
+import "./Preview.css";
+
+function Pagination({ total, limit, page, setPage }) {
+  const numPages = Math.ceil(total / limit);
+
+  return (
+    <div className="pageContainer">
+      <button
+        className="pageBtn"
+        id="setPageBtn"
+        onClick={() => setPage(page - 5)}
+        disabled={page < 6}
+      >
+        &lt;&lt;
+      </button>
+      <button
+        className="pageBtn"
+        id="setPageBtn"
+        onClick={() => setPage(page - 1)}
+        disabled={page === 1}
+      >
+        &lt;
+      </button>
+      {Array(numPages)
+        .fill()
+        .map((_, i) => (
+          <button
+            className="pageBtn"
+            key={i + 1}
+            onClick={() => setPage(i + 1)}
+            aria-current={page === i + 1 ? "page" : null}
+          >
+            {i + 1}
+          </button>
+        ))}
+      <button
+        className="pageBtn"
+        id="setPageBtn"
+        onClick={() => setPage(page + 1)}
+        disabled={page === numPages}
+      >
+        &gt;
+      </button>
+      <button
+        className="pageBtn"
+        id="setPageBtn"
+        onClick={() => setPage(page + 5)}
+        disabled={page > numPages - 5}
+      >
+        &gt;&gt;
+      </button>
+    </div>
+  );
+}
+
+export default Pagination;