Docs,Design,Rename loungeseconde-lcreate,lounge-lboard Lounge page cr…

src/App.tsx

@@ -3,6 +3,8 @@ import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import Main from "./MainCafePage/Main";
 import Header from "./Components/Header";
 import Lounge from "./Lounge/Lounge";
+import Lboard from "./Lounge/Lboard";
+
 import MyPage from "./MyPage/MyPage";
 import SignInUpBox from "./SignInUpPage/SignInUpBox";
 import RedirectHandler from "./SignInUpPage/RedirectHandler";
@@ -11,7 +13,7 @@ import Make from "./TeamMake/Make";
 import Map from "./TeamMake/Map";
 import MainBox from "./MainCafePage/MainBox";
 import Community from "./Lounge/LoungeDetail";
-import LoungeSecond from "./Lounge/Loungesecond";
+import Lcreate from "./Lounge/Lcreate";
 import PostMainBox from "./MainCafePage/PostMainBox";
 
 function App() {
@@ -39,6 +41,7 @@ function App() {
             path="/Lounge"
             element={<Lounge isSidebarOpen={isSidebarOpen} />}
           />
+          <Route path="/Lboard" element={<Lboard />} />
           <Route path="/SignInUpPage/SignInUpBox" element={<SignInUpBox />} />
           <Route path="MyPage" element={<MyPage />} />
           <Route path="/auth" element={<RedirectHandler />} />
@@ -48,7 +51,7 @@ function App() {
           />
           <Route path="/MainBox" element={<MainBox />} />
           <Route path="/Community/:id" element={<Community />} />
-          <Route path="/Loungesecond" element={<LoungeSecond />} />
+          <Route path="/LoungeCreate" element={<Lcreate />} />
           <Route path="/PostMainBox" element={<PostMainBox />} />
           <Route path="/Map" element={<Map />} />
         </Routes>
@@ -58,3 +61,9 @@ function App() {
 }
 
 export default App;
+{
+  /* <Route
+path="/Lounge"
+element={<Lounge isSidebarOpen={isSidebarOpen} />}
+/> */
+}

src/Lounge/Lboard.tsx

@@ -0,0 +1,87 @@
+import React, { useState, useEffect } from "react";
+import { Link } from "react-router-dom";
+import styled from "styled-components";
+import axios from "axios";
+
+interface community {
+  id: string;
+  title: string;
+  name: string;
+  like: number;
+  contents: string;
+  hash: string;
+}
+const Lboard = () => {
+  const [commu, setCommu] = useState<community[]>([]);
+  useEffect(() => {
+    axios
+      .get("http://localhost:3001/Community")
+      .then((res) => {
+        setCommu(res.data);
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  });
+
+  return (
+    <MainContain>
+      <LoungeTop>최신 게시판</LoungeTop>
+      <Loungemargin>
+        {commu.map((b) => (
+          <InnerBox likes={b.like}>
+            <Link to={`/Community/${b.id}`}>
+              {b.id} {b.hash}
+              {b.like}
+            </Link>
+          </InnerBox>
+        ))}
+      </Loungemargin>
+      <Loungebottom to="/LoungeCreate">글쓰기</Loungebottom>
+    </MainContain>
+  );
+};
+
+export default Lboard;
+const Loungebottom = styled(Link)`
+  width: 700px;
+
+  margin-top: 50px;
+`;
+const LoungeTop = styled.div`
+  width: 700px;
+
+  margin-top: 50px;
+`;
+const Loungemargin = styled.div`
+  display: flex;
+  width: 900px;
+
+  align-items: center;
+
+  flex-direction: column;
+  background-color: gray;
+`;
+const InnerBox = styled.div<{ likes: number }>`
+  padding: 10px;
+  margin: 15px;
+  width: 90%;
+  height: 100px;
+  border-radius: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background-color: #7093c0;
+  position: relative;
+  opacity: 1;
+`;
+
+const MainContain = styled.div`
+  padding-top: 70px;
+  margin-left: 0;
+  height: 855px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;

src/Lounge/Loungesecond.tsx → src/Lounge/Lcreate.tsx

@@ -291,7 +291,7 @@ const FilledStar = styled(Star)`
   color: #ffc107;
 `;
 
-function SecondPage() {
+function Lcreate() {
   const [likes, setLikes] = useState(0);
   const [inputBValue, setInputBValue] = useState("");
   const [currentImageIndex, setCurrentImageIndex] = useState(0);
@@ -477,4 +477,4 @@ function SecondPage() {
   );
 }
 
-export default SecondPage;
+export default Lcreate;