From 16111b80878a8e6f1df08cb1a7a2e8ceddce3673 Mon Sep 17 00:00:00 2001
From: J1 <ju1e3718@gmail.com>
Date: Thu, 20 Jul 2023 11:13:27 +0900
Subject: [PATCH] =?UTF-8?q?[ADD]=20Preview=20Board=20=EA=B2=8C=EC=8B=9C?=
 =?UTF-8?q?=ED=8C=90=20=EC=9D=B4=EB=8F=99=20=ED=91=9C=EC=8B=9C=20(#7)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 job1/src/Main/PrevArt.css | 58 ----------------------------------
 job1/src/Main/PrevArt.js  |  2 +-
 job1/src/Main/Preview.css | 66 +++++++++++++++++++++++++++++++++++++--
 job1/src/Main/Preview.js  | 23 ++++++++++++--
 4 files changed, 86 insertions(+), 63 deletions(-)
 delete mode 100644 job1/src/Main/PrevArt.css

diff --git a/job1/src/Main/PrevArt.css b/job1/src/Main/PrevArt.css
deleted file mode 100644
index 510c8f4..0000000
--- a/job1/src/Main/PrevArt.css
+++ /dev/null
@@ -1,58 +0,0 @@
-.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/PrevArt.js b/job1/src/Main/PrevArt.js
index ab2c23b..62ef3c4 100644
--- 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
index 14b95d8..780f532 100644
--- 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
index 041e08f..bdabbd5 100644
--- 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>