개인 문의 게시판 제작 완료 #6

src/App.js

@@ -6,6 +6,7 @@ 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 PersonalInquiry from "./component/Inquiry/personInquiry";
 import "./App.css";
 
 function App() {
@@ -20,6 +21,7 @@ function App() {
           <Route path="/proboard" element={<Proboard />} />
           <Route path="/sellerboard" element={<Sellerboard />} />
           <Route path="/community" element={<Community />} />
+          <Route path="/Inquiry/personal" element={<PersonalInquiry />} />
         </Routes>
       </BrowserRouter>
     </div>

src/component/Inquiry/personInquiry/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/Inquiry/personInquiry/index.js

@@ -0,0 +1,134 @@
+import React, { useState } from "react";
+import styled from "@emotion/styled";
+import {
+  Container,
+  Title,
+  ButtonContainer,
+  Button,
+} from "../../emotion/component";
+const PersonalInquiry = () => {
+  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;
+        text-align: center;
+        font-feature-settings: "clig" off, "liga" off;
+        font-family: Inter;
+        font-size: 24px;
+        font-style: normal;
+        font-weight: 900;
+      }
+    }
+  `;
+
+  const [data, setData] = useState([
+    { id: 1, title: "문의 내용", author: "완료" },
+    { id: 2, title: "문의 내용", author: "완료" },
+    { id: 3, title: "문의 내용", author: "진행중" },
+    { id: 4, title: "문의 내용", author: "진행중" },
+    { id: 5, title: "문의 내용", author: "완료" },
+    { 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 PersonalInquiry;