문의 작성 페이지 마크업

danpatime · Feb 2, 2025 · 9a23430 · 9a23430
1 parent 1d0cec1
commit 9a23430
Show file tree

Hide file tree

Showing 10 changed files with 413 additions and 14 deletions.
diff --git a/src/Router.js b/src/Router.js
@@ -9,7 +9,8 @@ import React from 'react';
 import MyStatusPage from './pages/MyPage/MyStatusPage';
 import MyResume from './pages/MyResume/MyResume';
 import SignUpPage from './pages/SignUpPage';
-import SupportPage from "./pages/SupportPage";
+import MyReviewPage from "./pages/MyPage/MyReviewPage";
+import SupportPage from './pages/Support/SupportPage';
 
 const AppRouter = () => {
   return (
@@ -24,6 +25,8 @@ const AppRouter = () => {
       <Route path="/chat" element={<ChattingPage />} />
       <Route path="/mypage/resume" element={<MyResume />} />
       <Route path="/mypage/status" element={<MyStatusPage />} />
+      <Route path="/manage-reviews" element={<MyReviewPage />} />
+      <Route path="/support" element={<SupportPage />} />
     </Routes>
   );
 };

diff --git a/src/components/common/Accordion.jsx b/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;
+`;
diff --git a/src/components/common/AccordionTable.jsx b/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;
+`;
diff --git a/src/components/common/ReviewForm.jsx b/src/components/common/ReviewForm.jsx
@@ -1,19 +1,17 @@
-/* eslint-disable */
 import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 import StarRating from "./StarRating";
 import { useReviewInfo } from "../../contexts/useReviewInfo";
 
 const ReviewForm = ({ onClose, initialData }) => {
-  const [review, setReview] = useState(initialData || {});
   const [starPoint, setStarPoint] = useState(0);
   const [content, setContent] = useState("");
   const [reviewCount,setReviewCount]=useState(1);
   const [reviewDate,setReviewDate]=useState(new Date());
   const [selectedStore, setSelectedStore] = useState("");
   const [selectedAlba, setSelectedAlba] = useState("");
   const [selectedTag, setSelectedTag] = useState([]);
-  const [reviewTag, setReviewTag] = useState([
+  const reviewTag = useState([
     "일을 잘해요", 
     "시간 엄수를 잘해요",
     "일이 서툴러요",
@@ -35,7 +33,6 @@ const ReviewForm = ({ onClose, initialData }) => {
 
   useEffect(() => {
     if (initialData) {
-      setReview(initialData);
       setStarPoint(initialData.starPoint || 0);
       setContent(initialData.content || "");
       setReviewCount(initialData.reviewCount||1);

diff --git a/src/components/common/StarRating.jsx b/src/components/common/StarRating.jsx
@@ -1,4 +1,3 @@
-/*eslint-disable*/
 import React, { useState } from "react";
 import styled from "styled-components";
 

diff --git a/src/pages/MyPage/MyReviewPage.jsx b/src/pages/MyPage/MyReviewPage.jsx
@@ -4,6 +4,7 @@ import { useReviewInfo } from '../../contexts/useReviewInfo';
 import styled from "styled-components";
 import logo from "../../assets/images/logo.png";
 import ReviewForm from '../../components/common/ReviewForm';
+import MypageLayout from '../../components/layout/MypageLayout';
 
 const MyReviewPage = () => {
   const { reviews,editReview,deleteReview,reportReview,getReviewsByName } = useReviewInfo();
@@ -66,7 +67,7 @@ const MyReviewPage = () => {
   };
 
   return (
-    <div>
+    <MypageLayout>
       <h1>리뷰 관리</h1>
       <Container>
         <SelectContainer>
@@ -172,7 +173,7 @@ const MyReviewPage = () => {
           </ReportContent>
         </Modal>
       )}
-    </div>
+    </MypageLayout>
   );
 };
 
@@ -329,6 +330,7 @@ const ButtonContainer = styled.div`
 `;
 
 const CancelButton = styled.button`
+  color:white;
   background-color: #5c3a32;
   padding: 5px 15px;
   border: none;

diff --git a/src/pages/SupportPage.jsx → src/pages/Support/InquiryPage.jsx b/src/pages/SupportPage.jsx → src/pages/Support/InquiryPage.jsx
@@ -1,8 +1,8 @@
 import React,{useState} from "react";
 import styled from "styled-components";
-import Dropdown from "../components/common/DropDown";
+import Dropdown from "../../components/common/DropDown";
 
-const SupportPage=()=>{
+const Inquiry=()=>{
   const [DDOpen1,setDDOpen1]=useState(false);
   const [DDOpen2,setDDOpen2]=useState(false);
   const [inqType1, setInqType1] = useState("선택해주세요");
@@ -115,7 +115,7 @@ const SupportPage=()=>{
   );
 };
 
-export default SupportPage;
+export default Inquiry;
 
 const Container = styled.div`
   padding: 50px 100px;
@@ -131,9 +131,7 @@ const CenterWrapper = styled.div`
 const SupportText = styled.div`
   font-size: 16px;
   color: grey;
-  letter-spacing: 1px;
   line-height: 30px;
-  margin: 0 auto;
   margin-top: 30px;
 `;
 
@@ -166,7 +164,6 @@ const FormArea = styled.div`
   flex-direction: column;
   gap: 15px;
   margin: 20px 0;
-  margin-left:50px;
 `;
 
 const InputForm = styled.input`

diff --git a/src/pages/Support/MyInquiryPage.jsx b/src/pages/Support/MyInquiryPage.jsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import styled from 'styled-components';
+import AccordionTable from '../../components/common/AccordionTable';
+
+// 테스트 데이터
+const testData = [
+  {
+    date: '2024.10.15',
+    type: '회원가입',
+    title: '계정을 여러 개 생성하고 싶은데 가능한가요?',
+    status: '처리중',
+    answerDate: '-',
+    response: null, // 답변 없음
+  },
+  {
+    date: '2024.10.15',
+    type: '리뷰',
+    title: '저에게 작성된 리뷰 중 삭제하고 싶은 게 있어요',
+    status: '답변완료',
+    answerDate: '2024.10.18',
+    response: '문의해주신 리뷰 삭제 요청은 처리 완료되었습니다. 추가 문의 사항이 있으시면 말씀해주세요.',
+  },
+];
+
+
+const MyInquiries = () => {
+  return (
+    <Container>
+      <Title>나의 문의 내역</Title>
+      <Description>
+        <ul>
+          <li>처리상태가 처리중인 경우 상담원이 고객님의 문의 접수 후 처리중인 상태입니다.</li>
+          <li>답변이 완료되면 고객님의 이메일로 알림이 전송됩니다.</li>
+        </ul>
+      </Description>
+
+      <div id="inquiry-list">
+        <h3>총 {testData.length}건</h3>
+        <AccordionTable data={testData} />
+      </div>
+    </Container>
+  );
+};
+
+export default MyInquiries;
+
+const Container = styled.div`
+  padding-top: 40px;
+  h3 {
+    font-size: 16px;
+    padding-left: 4px;
+  }
+`
+
+const Title = styled.h2`
+  font-size: 24px;
+  margin-bottom: 8px;
+`
+
+const Description = styled.div`
+  padding-left: 18px;
+  color: #898989;
+  margin-bottom: 30px;
+`