[ADD] Preview Board 게시판 이동 표시 (#7)

Hongmoon-gak · Jul 20, 2023 · 16111b8 · 16111b8
1 parent fd62ca3
commit 16111b8
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 63 deletions.
diff --git a/job1/src/Main/PrevArt.css b/job1/src/Main/PrevArt.css
diff --git a/job1/src/Main/PrevArt.js b/job1/src/Main/PrevArt.js
@@ -1,4 +1,4 @@
-import "./PrevArt.css";
+import "./Preview.css";
 
 function PrevArt(props) {
   return (

diff --git a/job1/src/Main/Preview.css b/job1/src/Main/Preview.css
@@ -7,7 +7,7 @@
   display: flex;
 }
 
-.hotCommu {
+.selectedBtn {
   color: #8d8ba7;
   text-align: center;
   font-family: DM Sans;
@@ -17,9 +17,10 @@
   line-height: 1.5rem; /* 150% */
 
   padding: 0 1rem;
+  text-decoration: none;
 }
 
-.newCommu {
+.Btn {
   color: #000;
   text-align: center;
   font-family: DM Sans;
@@ -29,6 +30,7 @@
   line-height: 1.5rem; /* 150% */
 
   padding: 0 1rem;
+  text-decoration: none;
 }
 
 .cWriteBtn {
@@ -46,3 +48,63 @@
   font-weight: 700;
   line-height: 1.5rem; /* 150% */
 }
+
+/* PrevArt */
+.cArticle {
+  display: flex;
+  justify-content: space-between;
+
+  /*width: 54.3125rem;
+  height: 3rem;
+  flex-shrink: 0;*/
+}
+
+.cTitle {
+  color: #000;
+  text-align: center;
+  font-family: DM Sans;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.5rem; /* 150% */
+}
+
+.cLikes {
+  color: #920000;
+  text-align: center;
+  font-family: DM Sans;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.5rem; /* 150% */
+}
+
+.cDate {
+  color: #8a8a8a;
+  text-align: center;
+  font-family: DM Sans;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.5rem; /* 150% */
+}
+
+.cTitleHref {
+  color: #000;
+}
+
+.cTitleHref:link {
+  text-decoration: none;
+}
+
+.cTitleHref:visited {
+  text-decoration: none;
+}
+
+.cTitleHref:hover {
+  text-decoration: underline;
+}
+
+.cTitleHref:active {
+  text-decoration: underline;
+}
diff --git a/job1/src/Main/Preview.js b/job1/src/Main/Preview.js
@@ -1,14 +1,33 @@
 import PrevCont from "./PrevCont";
+import { Link } from "react-router-dom";
 import "./Preview.css";
+import { useState } from "react";
 
 function Preview() {
+  const [section, setSection] = useState("hot");
   return (
     <div>
       <h2>게시판</h2>
       <div className="bar">
         <div className="cType">
-          <h3 className="hotCommu">HOT</h3>
-          <h3 className="newCommu">NEW</h3>
+          <Link
+            to={"#"}
+            className={section === "hot" ? "selectedBtn" : "Btn"}
+            onClick={() => {
+              setSection("hot");
+            }}
+          >
+            HOT
+          </Link>
+          <Link
+            to={"#"}
+            className={section === "new" ? "selectedBtn" : "Btn"}
+            onClick={() => {
+              setSection("new");
+            }}
+          >
+            NEW
+          </Link>
         </div>
         <button className="cWriteBtn">글쓰기</button>
       </div>