커뮤니티 사이트 제작 완료 #5

src/App.js

@@ -5,6 +5,7 @@ import Signin from "./component/project/signin/signin";
 import Signup from "./component/project/signup/signup";
 import Proboard from "./component/project/board/proboard";
 import Sellerboard from "./component/project/board/sellerboard";
+import Community from "./component/project/community";
 import "./App.css";
 
 function App() {
@@ -18,6 +19,7 @@ function App() {
           <Route path="/signup" element={<Signup />} />
           <Route path="/proboard" element={<Proboard />} />
           <Route path="/sellerboard" element={<Sellerboard />} />
+          <Route path="/community" element={<Community />} />
         </Routes>
       </BrowserRouter>
     </div>

src/component/project/board/proboard/index.js

@@ -12,28 +12,6 @@ const Proboard = () => {
     justify-content: space-between;
     margin-top: 300px;
   `;
-  const SignupInput = styled.input`
-    color: #000;
-    width: 294px;
-    height: 388px;
-    border-radius: 10px;
-    border: 0px;
-    padding: 20px;
-    font-feature-settings: "clig" off, "liga" off;
-    font-family: Inter;
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 20px;
-    margin-bottom: 16px;
-    background: #d9d9d9;
-    ::placeholder {
-      color: lightgray;
-      font-size: 20px;
-      font-style: normal;
-      font-weight: 700;
-    }
-  `;
   return (
     <>
       <Container>

src/component/project/community/component.js

@@ -0,0 +1,39 @@
+import styled from "@emotion/styled";
+
+export const IndexContainer = styled.div`
+  background-color: #fff;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  margin-top: 3 00px;
+`;
+
+export const InnerContainer = styled.div`
+  margin-top: 50px;
+  width: 1626px;
+  height: 701px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  border-radius: 30px;
+  justify-content: center;
+`;
+export const SignButton = styled.div`
+  width: 636px;
+  height: 77px;
+  flex-shrink: 0;
+  border-radius: 59px;
+  background: #3a6e67;
+  color: #fff;
+  text-align: center;
+  font-feature-settings: "clig" off, "liga" off;
+  font-family: Inter;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 30px;
+`;

src/component/project/community/index.js

@@ -0,0 +1,130 @@
+import React, { useState } from "react";
+import styled from "@emotion/styled";
+import {
+  Container,
+  Title,
+  ButtonContainer,
+  Button,
+} from "../../emotion/component";
+const Community = () => {
+  const OuterContainer = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-direction: row;
+  `;
+
+  const TableContainer = styled.div`
+    margin-top: 40px;
+    padding: 0 147px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      th {
+        border: 1px solid #fff;
+        color: #fff;
+        padding: 10px;
+        background: #76c56f;
+      }
+      td {
+        border: 1px solid #dfdfdf;
+        padding: 10px;
+      }
+      th:nth-of-type(1) {
+        width: 1361px;
+      }
+      th:nth-of-type(2) {
+        width: 265px;
+      }
+      td {
+        height: 60px;
+      }
+      input {
+        width: 100%;
+        height: 100%;
+        border: none;
+        background: transparent;
+        color: #000;
+        font-family: Inter;
+        font-size: 14px;
+      }
+    }
+  `;
+
+  const [data, setData] = useState([
+    { id: 1, title: "Sample Title 1", author: "John" },
+    { id: 2, title: "Sample Title 2", author: "Jane" },
+    { id: 3, title: "Sample Title 3", author: "Mike" },
+    { id: 4, title: "Sample Title 4", author: "Emily" },
+    { id: 5, title: "Sample Title 5", author: "Alice" },
+    { id: 6, title: "", author: "" },
+    { id: 7, title: "", author: "" },
+    { id: 8, title: "", author: "" },
+    { id: 9, title: "", author: "" },
+    { id: 10, title: "", author: "" },
+  ]);
+
+  const handleTitleChange = (index, value) => {
+    setData((prevData) =>
+      prevData.map((item, i) =>
+        index === i ? { ...item, title: value } : item
+      )
+    );
+  };
+
+  const handleAuthorChange = (index, value) => {
+    setData((prevData) =>
+      prevData.map((item, i) =>
+        index === i ? { ...item, author: value } : item
+      )
+    );
+  };
+
+  return (
+    <>
+      <Container>
+        <OuterContainer>
+          <Title>커뮤니티</Title>
+          <ButtonContainer>
+            <Button>글쓰기</Button>
+            <Button>내가쓴글</Button>
+          </ButtonContainer>
+        </OuterContainer>
+        <TableContainer>
+          <table>
+            <thead>
+              <tr>
+                <th>제목</th>
+                <th>글쓴이</th>
+              </tr>
+            </thead>
+            <tbody>
+              {data.map((item, index) => (
+                <tr key={index}>
+                  <td>
+                    <input
+                      type="text"
+                      value={item.title}
+                      onChange={(e) => handleTitleChange(index, e.target.value)}
+                    />
+                  </td>
+                  <td>
+                    <input
+                      type="text"
+                      value={item.author}
+                      onChange={(e) =>
+                        handleAuthorChange(index, e.target.value)
+                      }
+                    />
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </TableContainer>
+      </Container>
+    </>
+  );
+};
+
+export default Community;