From 79a6d8027673fab466f4d6987017f4bdbebe1ad5 Mon Sep 17 00:00:00 2001 From: Quvid <48755156+KimKyuHoi@users.noreply.github.com> Date: Sat, 11 Nov 2023 17:03:10 +0900 Subject: [PATCH] =?UTF-8?q?refactor:=20pagination=20=EB=B6=88=EB=9F=AC?= =?UTF-8?q?=EC=98=A4=EB=8A=94=20=ED=8C=8C=EC=9D=BC=20=EA=B0=9C=EC=88=98=20?= =?UTF-8?q?=EB=B0=8F=20css=20=EB=86=92=EC=9D=B4=20=EC=88=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ChatForm.jsx | 7 ++- src/components/LegalTerminology.jsx | 80 +++++++++++++++++++---------- src/page/MainPage.jsx | 2 +- 3 files changed, 56 insertions(+), 33 deletions(-) diff --git a/src/components/ChatForm.jsx b/src/components/ChatForm.jsx index b1546b6..8bddbe5 100644 --- a/src/components/ChatForm.jsx +++ b/src/components/ChatForm.jsx @@ -21,7 +21,7 @@ const Wrapper = styled.div` /* width: 476px; height: 905px; */ width: 90%; - height: 91.5%; + height: 93%; border: 1px solid #e4e4e7; border-radius: 10px; padding: 2rem; @@ -36,7 +36,7 @@ const MainTitle = styled.h4` const FormWrapper = styled.form` display: flex; flex-direction: column; - height: 95%; + height: 98%; `; const LabelWrapper = styled.label` @@ -59,12 +59,11 @@ const TypeForm = styled.input` `; const InputForm = styled.textarea` - /* width: 470px; */ width: 100%; height: 100%; border: 1px solid #d7d7d7; border-radius: 10px; - margin-bottom: 16px; + margin-bottom: 18px; resize: none; `; diff --git a/src/components/LegalTerminology.jsx b/src/components/LegalTerminology.jsx index 99dbbeb..4727fb4 100644 --- a/src/components/LegalTerminology.jsx +++ b/src/components/LegalTerminology.jsx @@ -17,32 +17,33 @@ const DUMMY_DATA = [ { id: "3", title: "연차&휴가(무급/유급)", - content: "2018년 6월 관련 법이 개정되면서 1년 미만 신입사원도 11일의 연차 휴가를 사용할 수 있게 되었습니다.", + content: + "2018년 6월 관련 법이 개정되면서 1년 미만 신입사원도 11일의 연차 휴가를 사용할 수 있게 되었습니다.", + }, + { + id: "4", + title: "상속", + content: + "상속은 죽은 사람으로부터 그의 재산, 채권, 부채 등의 권리와 의무를 그의 법정 상속인에게 이전하는 것을 말합니다. 상속은 법률에 따라 이뤄지며, 상속인은 상속에 따른 재산을 상속인 간 협의 또는 법정 분할에 따라 나눌 수 있습니다.", + }, + { + id: "5", + title: "계약 해지", + content: + "계약 해지는 어떤 계약이 정해진 기간 동안 유효하게 유지되지 않거나, 계약의 조건이 어기어졌을 때, 또는 당사자 중 하나가 계약을 위반했을 때 발생합니다. 계약 해지에는 서면 통지, 소송, 또는 양자 합의 등 다양한 방법이 포함될 수 있습니다.", + }, + { + id: "6", + title: "상표권", + content: + "상표권은 상표로 등록된 상표의 소유자에게 주어지는 권리를 의미합니다. 이 권리는 특정한 상표를 특정한 상품 또는 서비스에 사용할 수 있는 권리를 제공하며, 상표의 소유자는 다른 사람이 해당 상표를 무단으로 사용하는 것을 막을 수 있습니다.", }, - // { - // id: "4", - // title: "상속", - // content: - // "상속은 죽은 사람으로부터 그의 재산, 채권, 부채 등의 권리와 의무를 그의 법정 상속인에게 이전하는 것을 말합니다. 상속은 법률에 따라 이뤄지며, 상속인은 상속에 따른 재산을 상속인 간 협의 또는 법정 분할에 따라 나눌 수 있습니다.", - // }, - // { - // id: "5", - // title: "계약 해지", - // content: - // "계약 해지는 어떤 계약이 정해진 기간 동안 유효하게 유지되지 않거나, 계약의 조건이 어기어졌을 때, 또는 당사자 중 하나가 계약을 위반했을 때 발생합니다. 계약 해지에는 서면 통지, 소송, 또는 양자 합의 등 다양한 방법이 포함될 수 있습니다.", - // }, - // { - // id: "6", - // title: "상표권", - // content: - // "상표권은 상표로 등록된 상표의 소유자에게 주어지는 권리를 의미합니다. 이 권리는 특정한 상표를 특정한 상품 또는 서비스에 사용할 수 있는 권리를 제공하며, 상표의 소유자는 다른 사람이 해당 상표를 무단으로 사용하는 것을 막을 수 있습니다.", - // }, ]; const LegalTerminology = () => { const [currentPage, setCurrentPage] = useState(1); const [currentGroup, setCurrentGroup] = useState(0); - const wordsPerPage = 1; + const wordsPerPage = 3; const indexOfLastWord = currentPage * wordsPerPage; const indexOfFirstWord = indexOfLastWord - wordsPerPage; @@ -56,7 +57,10 @@ const LegalTerminology = () => { const groupCount = Math.ceil(pageNumbers.length / 10); const firstPageNumber = currentGroup * 10; - const currentGroupPageNumbers = pageNumbers.slice(firstPageNumber, firstPageNumber + 10); + const currentGroupPageNumbers = pageNumbers.slice( + firstPageNumber, + firstPageNumber + 10 + ); return ( @@ -70,13 +74,27 @@ const LegalTerminology = () => { ))} - {currentGroup > 0 && setCurrentGroup(currentGroup - 1)}>⬅️} - {currentGroupPageNumbers.map((number) => ( - setCurrentPage(number)}> - {number} - - ))} - {currentGroup < groupCount - 1 && setCurrentGroup(currentGroup + 1)}>➡️} + + {currentGroup > 0 && ( + setCurrentGroup(currentGroup - 1)}> + ⬅️ + + )} + {currentGroupPageNumbers.map((number) => ( + setCurrentPage(number)} + > + {number} + + ))} + {currentGroup < groupCount - 1 && ( + setCurrentGroup(currentGroup + 1)}> + ➡️ + + )} + ); }; @@ -134,6 +152,12 @@ const DataContent = styled.p` margin: 0; `; +const PaginationWrapper = styled.div` + display: flex; + flex-direction: row; + justify-content: center; +`; + const PaginationButton = styled.button` border: 1px solid black; background-color: ${(props) => (props.active ? "black" : "white")}; diff --git a/src/page/MainPage.jsx b/src/page/MainPage.jsx index 70ad17e..40821f0 100644 --- a/src/page/MainPage.jsx +++ b/src/page/MainPage.jsx @@ -66,7 +66,7 @@ const RightBar = styled(GridItem)` const RightBarTop = styled.div` flex: 1; - height: 50%; + height: 51.5%; width: 100%; background-color: white; `;