Merge pull request #25 from ContractAssistant/develop

Right Sidebar 관련 내용 작업 진행 완료

package.json

@@ -13,6 +13,7 @@
     "axios": "^1.6.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.11.0",
     "react-router-dom": "^6.18.0",
     "styled-components": "^6.1.1"
   },

src/components/ChatForm.jsx

@@ -6,20 +6,8 @@ const ChatForm = () => {
       <MainTitle>Chat</MainTitle>
       <FormWrapper action="" method="" autoComplete="off">
         <LabelWrapper>
-          <TypeForm
-            type="text"
-            name="type"
-            required
-            placeholder="Please enter the contract type"
-          />
-        </LabelWrapper>
-        <LabelWrapper>
-          <InputForm
-            type="text"
-            name="content"
-            required
-            placeholder="Please include all information relevant to your issue."
-          />
+          <TypeForm type="text" name="type" required placeholder="Please enter the contract type" />
+          <InputForm type="text" name="content" required placeholder="Please include all information relevant to your issue." />
         </LabelWrapper>
         <ButtonWrapper>
           <SubmitBtn type="submit" value="Submit" />
@@ -30,11 +18,14 @@ const ChatForm = () => {
 };
 
 const Wrapper = styled.div`
-  width: 476px;
-  height: 905px;
+  /* width: 476px;
+  height: 905px; */
+  width: 90%;
+  height: 91.5%;
   border: 1px solid #e4e4e7;
   border-radius: 10px;
-  padding: 45px 23px 23px 23px;
+  padding: 2rem;
+  margin-top: 1rem;
 `;
 
 const MainTitle = styled.h4`
@@ -45,26 +36,32 @@ const MainTitle = styled.h4`
 const FormWrapper = styled.form`
   display: flex;
   flex-direction: column;
+  height: 95%;
 `;
 
 const LabelWrapper = styled.label`
   display: flex;
   flex-direction: column;
-  margin: 0 autoo;
+  margin: 0;
+  width: 100%;
+  height: 100%;
 `;
 
 const TypeForm = styled.input`
-  width: 470px;
-  height: 44px;
+  /* width: 470px; */
+  width: 100%;
+  /* height: 44px; */
+  height: 3rem;
   background-color: #ffffff;
   border: 1px solid #d7d7d7;
   border-radius: 10px;
   margin-bottom: 30px;
 `;
 
 const InputForm = styled.textarea`
-  width: 470px;
-  height: 727px;
+  /* width: 470px; */
+  width: 100%;
+  height: 100%;
   border: 1px solid #d7d7d7;
   border-radius: 10px;
   margin-bottom: 16px;
@@ -77,11 +74,13 @@ const ButtonWrapper = styled.div`
 `;
 
 const SubmitBtn = styled.input`
-    width: 102px;
-    height: 42px;
-    background-color: #000000;
-    color: #ffffff;
-    border-radius: 5px;
+  /* width: 102px;
+  height: 42px; */
+  width: 6rem;
+  height: 3rem;
+  background-color: #000000;
+  color: #ffffff;
+  border-radius: 5px;
 `;
 
 export default ChatForm;

src/components/GptAnalytics.jsx

@@ -77,13 +77,25 @@ const GptAnalytics = () => {
 
 export default GptAnalytics;
 
+// const Wrapper = styled.div`
+//   width: 100;
+//   height: 100%;
+//   padding: 1rem;
+//   border: 1px solid black;
+//   border-radius: 1rem;
+//   display: flex;
+//   flex-direction: column;
+//   justify-content: space-between;
+// `;
 const Wrapper = styled.div`
-  width: auto;
-  height: 90%;
-  margin: 1rem;
-  padding: 1rem;
-  border: 1px solid black;
-  border-radius: 1rem;
+  /* width: 462px;
+  height: 330px; */
+  width: 90%;
+  height: 80%;
+  padding: 2rem;
+  border-radius: 10px;
+  border: 1px solid #e4e4e7;
+
   display: flex;
   flex-direction: column;
   justify-content: space-between;

src/components/LegalTerminology.jsx

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { useState } from "react";
 
 const DUMMY_DATA = [
   {
@@ -16,53 +17,79 @@ 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 indexOfLastWord = currentPage * wordsPerPage;
+  const indexOfFirstWord = indexOfLastWord - wordsPerPage;
+
+  const currentData = DUMMY_DATA.slice(indexOfFirstWord, indexOfLastWord);
+  // 페이지 번호를 생성합니다.
+  const pageNumbers = [];
+  for (let i = 1; i <= Math.ceil(DUMMY_DATA.length / wordsPerPage); i++) {
+    pageNumbers.push(i);
+  }
+
+  const groupCount = Math.ceil(pageNumbers.length / 10);
+  const firstPageNumber = currentGroup * 10;
+  const currentGroupPageNumbers = pageNumbers.slice(firstPageNumber, firstPageNumber + 10);
+
   return (
     <Wrapper>
       <MainTitle>Legal Terminology</MainTitle>
       <SubTitle>법률 용어 해석</SubTitle>
       <Content>
-        {DUMMY_DATA.map((data) => (
+        {currentData.map((data) => (
           <DataItem key={data.id}>
             <DataTitle>{data.title}</DataTitle>
             <DataContent>{data.content}</DataContent>
           </DataItem>
         ))}
       </Content>
-      <PaginationWrapper>pagination 부분</PaginationWrapper>
+      {currentGroup > 0 && <TextButton onClick={() => setCurrentGroup(currentGroup - 1)}>⬅️</TextButton>}
+      {currentGroupPageNumbers.map((number) => (
+        <PaginationButton key={number} active={number === currentPage} onClick={() => setCurrentPage(number)}>
+          {number}
+        </PaginationButton>
+      ))}
+      {currentGroup < groupCount - 1 && <TextButton onClick={() => setCurrentGroup(currentGroup + 1)}>➡️</TextButton>}
     </Wrapper>
   );
 };
 
 const Wrapper = styled.div`
-  width: 462px;
-  height: 330px;
+  /* width: 462px;
+  height: 330px; */
+  width: 90%;
+  height: 80%;
+  padding: 2rem;
   border-radius: 10px;
   border: 1px solid #e4e4e7;
-  padding: 30px;
+  /* padding: 30px; */
 `;
 
 const MainTitle = styled.h4`
@@ -82,8 +109,10 @@ const Content = styled.div`
   display: flex;
   flex-direction: column;
   margin-top: 30px;
-  width: 476px;
-  height: 230px;
+  /* width: 476px;
+  width: 100%;
+  height: 230px; */
+  height: 70%;
   overflow: hidden;
 `;
 
@@ -105,12 +134,23 @@ const DataContent = styled.p`
   margin: 0;
 `;
 
-const PaginationWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  text-align: center;
+const PaginationButton = styled.button`
+  border: 1px solid black;
+  background-color: ${(props) => (props.active ? "black" : "white")};
+  color: ${(props) => (props.active ? "white" : "black")};
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  margin: 5px;
+  &:focus {
+    outline: none;
+  }
+`;
 
+const TextButton = styled(PaginationButton)`
+  border-radius: 5px;
+  width: auto;
+  padding: 0 10px;
 `;
 
 export default LegalTerminology;