[FEAT] Preview Board 구현

Hongmoon-gak · Jul 19, 2023 · fd62ca3 · fd62ca3
1 parent 2555c6e
commit fd62ca3
Show file tree

Hide file tree

Showing 9 changed files with 192 additions and 9 deletions.
diff --git a/job1/package-lock.json b/job1/package-lock.json
diff --git a/job1/public/index.html b/job1/public/index.html
@@ -24,6 +24,14 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
+      integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
+      crossorigin="anonymous"
+    />
+
     <title>Job 일</title>
   </head>
   <body>

diff --git a/job1/src/App.js b/job1/src/App.js
@@ -5,18 +5,20 @@ import Home from "./View/Home";
 import Laws from "./View/Laws";
 import Board from "./View/Board";
 import News from "./View/News";
+import Preview from "./Main/Preview";
 
 function App() {
   return (
     <div className="App">
       <Router>
-        <NavBar/>
+        <NavBar />
         <Routes>
-          <Route path='/' element={<Home/>} />
-          <Route path='/law' element={<Laws/>} />
-          <Route path='/board' element={<Board/>} />
-          <Route path='/news' element={<News/>} />
+          <Route path="/" element={<Home />} />
+          <Route path="/law" element={<Laws />} />
+          <Route path="/board" element={<Board />} />
+          <Route path="/news" element={<News />} />
         </Routes>
+        <Preview />
       </Router>
     </div>
   );

diff --git a/job1/src/Main/PrevArt.css b/job1/src/Main/PrevArt.css
@@ -0,0 +1,58 @@
+.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
@@ -0,0 +1,20 @@
+import "./PrevArt.css";
+
+function PrevArt(props) {
+  return (
+    <div className="cArticle">
+      <div className="cTitle">
+        <a href={props.href} className="cTitleHref">
+          <p>{props.title}</p>
+        </a>
+      </div>
+      <p className="cLikes">
+        <i class="far fa-thumbs-up"></i>
+        {props.likes}
+      </p>
+      <p className="cDate">{props.date}</p>
+    </div>
+  );
+}
+
+export default PrevArt;
diff --git a/job1/src/Main/PrevCont.js b/job1/src/Main/PrevCont.js
@@ -0,0 +1,19 @@
+import PrevArt from "./PrevArt";
+
+function PrevCont() {
+  return (
+    <div>
+      <PrevArt title="제목" href="" likes="50" date="Date" />
+      <hr />
+      <PrevArt title="제목" href="" likes="50" date="Date" />
+      <hr />
+      <PrevArt title="제목" href="" likes="50" date="Date" />
+      <hr />
+      <PrevArt title="제목" href="" likes="50" date="Date" />
+      <hr />
+      <PrevArt title="제목" href="" likes="50" date="Date" />
+    </div>
+  );
+}
+
+export default PrevCont;
diff --git a/job1/src/Main/Preview.css b/job1/src/Main/Preview.css
@@ -0,0 +1,48 @@
+.bar {
+  display: flex;
+  justify-content: space-between;
+}
+
+.cType {
+  display: flex;
+}
+
+.hotCommu {
+  color: #8d8ba7;
+  text-align: center;
+  font-family: DM Sans;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 1.5rem; /* 150% */
+
+  padding: 0 1rem;
+}
+
+.newCommu {
+  color: #000;
+  text-align: center;
+  font-family: DM Sans;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 1.5rem; /* 150% */
+
+  padding: 0 1rem;
+}
+
+.cWriteBtn {
+  width: 5.5625rem;
+  height: 2.625rem;
+  flex-shrink: 0;
+  border-radius: 1.25rem;
+  background: #5d5a88;
+
+  color: #fff;
+  text-align: center;
+  font-family: DM Sans;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 1.5rem; /* 150% */
+}
diff --git a/job1/src/Main/Preview.js b/job1/src/Main/Preview.js
@@ -0,0 +1,22 @@
+import PrevCont from "./PrevCont";
+import "./Preview.css";
+
+function Preview() {
+  return (
+    <div>
+      <h2>게시판</h2>
+      <div className="bar">
+        <div className="cType">
+          <h3 className="hotCommu">HOT</h3>
+          <h3 className="newCommu">NEW</h3>
+        </div>
+        <button className="cWriteBtn">글쓰기</button>
+      </div>
+      <hr />
+      <PrevCont />
+      <hr />
+    </div>
+  );
+}
+
+export default Preview;
diff --git a/package-lock.json b/package-lock.json