[FEAT] 문의 작성 페이지 마크업

package.json

@@ -55,6 +55,7 @@
     "eslint-plugin-react": "^7.37.3",
     "globals": "^15.14.0",
     "husky": "^9.1.7",
-    "prettier": "^3.4.2"
+    "prettier": "^3.4.2",
+    "typescript": "^5.7.3"
   }
 }

src/App.js

@@ -1,14 +1,18 @@
-import './App.css';
-import Layout from './components/layout/Layout';
-import Router from './Router';
-import { UserInfoProvider } from './contexts/UserInfoContext';
+import "./App.css";
+import Layout from "./components/layout/Layout";
+import Router from "./Router";
+import React from 'react';
+import { UserInfoProvider } from "./contexts/UserInfoContext";
+import { ReviewProvider } from "./contexts/ReviewInfoContext";
 
 function App() {
   return (
     <UserInfoProvider>
+    <ReviewProvider>
       <Layout>
         <Router />
       </Layout>
+    </ReviewProvider>
     </UserInfoProvider>
   );
 }

src/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

src/Router.js

@@ -1,26 +1,32 @@
-import { Routes, Route } from 'react-router-dom';
-import HomePage from './pages/HomePage';
-import AlbaSearchPage from './pages/AlbaSearchPage';
-import MyPage from './pages/MyPage/MyPage';
-import ResumePage from './pages/ResumePage';
+import { Routes, Route } from "react-router-dom";
+import HomePage from "./pages/HomePage";
+import AlbaSearchPage from "./pages/AlbaSearchPage";
+import AlbaReviewPage from "./pages/AlbaReviewPage";
+import MyPage from "./pages/MyPage/MyPage";
+import ResumePage from "./pages/ResumePage";
+import ChattingPage from "./pages/ChattingPage";
+import React from 'react';
 import MyStatusPage from './pages/MyPage/MyStatusPage';
-import ChattingPage from './pages/ChattingPage';
 import MyResume from './pages/MyResume/MyResume';
 import SignUpPage from './pages/SignUpPage';
-import ContactDetailPage from './pages/MyPage/ContactDetailPage';
+import MyReviewPage from "./pages/MyPage/MyReviewPage";
+import SupportPage from './pages/Support/SupportPage';
 
 const AppRouter = () => {
   return (
     <Routes>
       <Route path="/" element={<HomePage />} />
       <Route path="/alba/search" element={<AlbaSearchPage />} />
+      <Route path="/alba/review" element={<AlbaReviewPage/>}/>
       <Route path="/alba/resume/:id" element={<ResumePage />} />
       <Route path="/mypage" element={<MyPage />} />
       <Route path="/signup" element={<SignUpPage />} />
+      <Route path="/support" element={<SupportPage />} />
       <Route path="/chat" element={<ChattingPage />} />
       <Route path="/mypage/resume" element={<MyResume />} />
-      <Route path="/mypage/contracts" element={<MyStatusPage />} />
-      <Route path="/contracts/:id" element={<ContactDetailPage />} />
+      <Route path="/mypage/status" element={<MyStatusPage />} />
+      <Route path="/manage-reviews" element={<MyReviewPage />} />
+      <Route path="/support" element={<SupportPage />} />
     </Routes>
   );
 };

src/components/common/Accordion.jsx

@@ -0,0 +1,57 @@
+import React from "react";
+import styled from "styled-components";
+import { IoIosArrowDown } from "react-icons/io";
+
+const Accordion = ({ title, children, isOpen, onToggle }) => {
+  return (
+    <AccordionContainer>
+      <AccordionHeader onClick={onToggle} isOpen={isOpen}>
+        <div><span>Q.</span><p>{title}</p></div>
+        <Arrow isOpen={isOpen}><IoIosArrowDown /></Arrow>
+      </AccordionHeader>
+      {isOpen && <AccordionContent>{children}</AccordionContent>}
+    </AccordionContainer>
+  );
+};
+
+export default Accordion;
+
+const AccordionContainer = styled.div`
+  border-bottom: 1px solid #ddd;
+  font-size: 16px;
+
+  &:first-of-type {
+    border-top: 1px solid #ddd; /* 첫 번째 박스만 위쪽 선 표시 */
+  }
+`;
+
+const AccordionHeader = styled.div`
+  background-color: #ffffff;
+  padding: 22px 15px;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #000000;
+
+  div {
+    display: flex;
+    gap: 8px;
+  }
+
+  span {
+    font-weight: 600;
+    color: ${(props) => (props.isOpen ? "#D90000" : "#000000")};
+  }
+`;
+
+const Arrow = styled.span`
+  transform: rotate(${(props) => (props.isOpen ? "180deg" : "0deg")});
+  transition: transform 0.3s ease;
+`;
+
+const AccordionContent = styled.div`
+  padding: 22px 42px;
+  background-color: #f9f9f9;
+  border-top: 1px solid #ddd;
+`;

src/components/common/AccordionTable.jsx

@@ -0,0 +1,94 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+const AccordionTable = ({ data }) => {
+  const [openIndex, setOpenIndex] = useState(null); // 열려 있는 행의 인덱스
+
+  const toggleAccordion = (index) => {
+    const selectedItem = data[index];
+    if (!selectedItem.response) {
+      // 답변이 없는 경우 alert 창 표시
+      alert('문의 답변은 2-3일 정도 소요됩니다. 조금만 기다려 주세요!');
+      return;
+    }
+    // 답변이 있는 경우 아코디언 열기
+    setOpenIndex(openIndex === index ? null : index);
+  };
+
+  return (
+    <TableContainer>
+      <Table>
+        <thead>
+          <tr>
+            <th>문의일</th>
+            <th>문의 유형</th>
+            <th>문의 제목</th>
+            <th>처리 상태</th>
+            <th>답변일</th>
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((item, index) => (
+            <React.Fragment key={index}>
+              <tr onClick={() => toggleAccordion(index)}>
+                <td>{item.date}</td>
+                <td>{item.type}</td>
+                <td>{item.title}</td>
+                <td>{item.status}</td>
+                <td>{item.answerDate !== '-' ? item.answerDate : '-'}</td>
+              </tr>
+              {openIndex === index && (
+                <tr>
+                  <td colSpan="5">
+                    <AccordionContent>{item.response}</AccordionContent>
+                  </td>
+                </tr>
+              )}
+            </React.Fragment>
+          ))}
+        </tbody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+
+export default AccordionTable;
+
+const TableContainer = styled.div`
+  width: 100%;
+  overflow-x: auto;
+`;
+
+const Table = styled.table`
+  width: 100%;
+  border-collapse: collapse;
+  margin: 5px 0;
+  font-size: 16px;
+
+  th,
+  td {
+    border: 1px solid #ddd;
+    text-align: left;
+    padding: 8px;
+  }
+
+  th {
+    background-color: #f4f4f4;
+  }
+
+  tr {
+    cursor: pointer;
+  }
+
+  tr:hover {
+    background-color: #f9f9f9;
+  }
+`;
+
+const AccordionContent = styled.div`
+  padding: 10px;
+  background-color: #f9f9f9;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+`;

src/components/common/DropDown.jsx

@@ -96,4 +96,4 @@ const DropdownItem = styled.div`
   }
 `;
 
-export default Dropdown;
+export default Dropdown;