Merge pull request #23 from ContractAssistant/develop

GptAnalytics, ChatForm, Layout 작업 적용

src/components/ChatForm.jsx

@@ -0,0 +1,87 @@
+import styled from "styled-components";
+
+const ChatForm = () => {
+  return (
+    <Wrapper>
+      <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."
+          />
+        </LabelWrapper>
+        <ButtonWrapper>
+          <SubmitBtn type="submit" value="Submit" />
+        </ButtonWrapper>
+      </FormWrapper>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  width: 476px;
+  height: 905px;
+  border: 1px solid #e4e4e7;
+  border-radius: 10px;
+  padding: 45px 23px 23px 23px;
+`;
+
+const MainTitle = styled.h4`
+  display: flex;
+  margin: 0px 0px 15px 0px;
+`;
+
+const FormWrapper = styled.form`
+  display: flex;
+  flex-direction: column;
+`;
+
+const LabelWrapper = styled.label`
+  display: flex;
+  flex-direction: column;
+  margin: 0 autoo;
+`;
+
+const TypeForm = styled.input`
+  width: 470px;
+  height: 44px;
+  background-color: #ffffff;
+  border: 1px solid #d7d7d7;
+  border-radius: 10px;
+  margin-bottom: 30px;
+`;
+
+const InputForm = styled.textarea`
+  width: 470px;
+  height: 727px;
+  border: 1px solid #d7d7d7;
+  border-radius: 10px;
+  margin-bottom: 16px;
+  resize: none;
+`;
+
+const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`;
+
+const SubmitBtn = styled.input`
+    width: 102px;
+    height: 42px;
+    background-color: #000000;
+    color: #ffffff;
+    border-radius: 5px;
+`;
+
+export default ChatForm;

src/components/GptAnalytics.jsx

@@ -0,0 +1,156 @@
+import styled from "styled-components";
+import { useState } from "react";
+
+const GptAnalytics = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [currentGroup, setCurrentGroup] = useState(0);
+  const wordsPerPage = 1;
+
+  // 가정: words는 서버에서 받아온 단어 목록입니다.
+  const words = [
+    "apple",
+    "banana",
+    "cherry",
+    "date",
+    "elderberry",
+    "fig",
+    "grape",
+    "honeydew",
+    "ice cream",
+    "jackfruit",
+    "kiwi",
+    "lemon",
+    "mango",
+    "nectarine",
+    "orange",
+    "pineapple",
+    "quince",
+    "raspberry",
+    "strawberry",
+    "tangerine",
+    "ugli fruit",
+    "vanilla",
+    "watermelon",
+    "xigua",
+    "yellow passionfruit",
+    "zucchini",
+  ];
+
+  const indexOfLastWord = currentPage * wordsPerPage;
+  const indexOfFirstWord = indexOfLastWord - wordsPerPage;
+
+  const currentWords = words.slice(indexOfFirstWord, indexOfLastWord);
+
+  // 페이지 번호를 생성합니다.
+  const pageNumbers = [];
+  for (let i = 1; i <= Math.ceil(words.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>
+      <Header>
+        <Title>Analytics</Title>
+        <SubTitle>계약서 분석 자료</SubTitle>
+      </Header>
+      <AnalyticsContent>
+        {currentWords.map((word) => (
+          <AnalyticsTitle key={word}>{word}</AnalyticsTitle>
+        ))}
+      </AnalyticsContent>
+      <Footer>
+        {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>}
+      </Footer>
+    </Wrapper>
+  );
+};
+
+export default GptAnalytics;
+
+const Wrapper = styled.div`
+  width: auto;
+  height: 90%;
+  margin: 1rem;
+  padding: 1rem;
+  border: 1px solid black;
+  border-radius: 1rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`;
+
+const Header = styled.div`
+  width: 100%;
+`;
+
+const Title = styled.p`
+  padding: 0;
+  margin: 0;
+  color: #000;
+  font-family: Pretendard;
+  font-size: 16px;
+  font-style: bold;
+  font-weight: 700;
+  line-height: normal;
+`;
+
+const SubTitle = styled.p`
+  padding: 0;
+  margin: 0;
+  color: #000;
+  color: #000;
+
+  font-family: Pretendard;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+`;
+
+const AnalyticsTitle = styled.p`
+  padding: 0;
+  margin: 0;
+  color: #000;
+  font-family: Pretendard;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+`;
+
+const AnalyticsContent = styled.div`
+  margin-top: 1rem;
+`;
+
+const Footer = styled.div`
+  align-self: 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;
+`;

src/components/LegalTerminology.jsx

@@ -0,0 +1,116 @@
+import styled from "styled-components";
+
+const DUMMY_DATA = [
+  {
+    id: "1",
+    title: "임금(연봉)",
+    content:
+      "근로계약서에는 고용주와 근로자간 협의된 총 임금(연봉)이 반드시 표기되어 있어야 합니다. 기본급, 수당, 상여금 등 임금 구성항목과 임금 지급일, 지급 방법 등도 정해져 있어야 하고요! 임금 지급은 예금통장으로 지불받는 것이 좋습니다.",
+  },
+  {
+    id: "2",
+    title: "소정 근로 시간&휴게 시간",
+    content:
+      "근로기준법에서는 휴게 시간 제외 근로시간을 주 40시간 이하로 규정하고 있어요. 특정한 사유가 있을 시에는 1일 최대 12시간, 주 최대 52시간까지 근로가 가능합니다.",
+  },
+  {
+    id: "3",
+    title: "연차&휴가(무급/유급)",
+    content:
+      "2018년 6월 관련 법이 개정되면서 1년 미만 신입사원도 11일의 연차 휴가를 사용할 수 있게 되었습니다.",
+  },
+//   {
+//     id: "4",
+//     title: "상속",
+//     content:
+//       "상속은 죽은 사람으로부터 그의 재산, 채권, 부채 등의 권리와 의무를 그의 법정 상속인에게 이전하는 것을 말합니다. 상속은 법률에 따라 이뤄지며, 상속인은 상속에 따른 재산을 상속인 간 협의 또는 법정 분할에 따라 나눌 수 있습니다.",
+//   },
+//   {
+//     id: "5",
+//     title: "계약 해지",
+//     content:
+//       "계약 해지는 어떤 계약이 정해진 기간 동안 유효하게 유지되지 않거나, 계약의 조건이 어기어졌을 때, 또는 당사자 중 하나가 계약을 위반했을 때 발생합니다. 계약 해지에는 서면 통지, 소송, 또는 양자 합의 등 다양한 방법이 포함될 수 있습니다.",
+//   },
+//   {
+//     id: "6",
+//     title: "상표권",
+//     content:
+//       "상표권은 상표로 등록된 상표의 소유자에게 주어지는 권리를 의미합니다. 이 권리는 특정한 상표를 특정한 상품 또는 서비스에 사용할 수 있는 권리를 제공하며, 상표의 소유자는 다른 사람이 해당 상표를 무단으로 사용하는 것을 막을 수 있습니다.",
+//   },
+];
+
+const LegalTerminology = () => {
+  return (
+    <Wrapper>
+      <MainTitle>Legal Terminology</MainTitle>
+      <SubTitle>법률 용어 해석</SubTitle>
+      <Content>
+        {DUMMY_DATA.map((data) => (
+          <DataItem key={data.id}>
+            <DataTitle>{data.title}</DataTitle>
+            <DataContent>{data.content}</DataContent>
+          </DataItem>
+        ))}
+      </Content>
+      <PaginationWrapper>pagination 부분</PaginationWrapper>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  width: 462px;
+  height: 330px;
+  border-radius: 10px;
+  border: 1px solid #e4e4e7;
+  padding: 30px;
+`;
+
+const MainTitle = styled.h4`
+  display: flex;
+  justify-content: flex-start;
+  font-weight: bold;
+  margin: 0;
+`;
+
+const SubTitle = styled.p`
+  display: flex;
+  justify-content: flex-start;
+  margin: 0;
+`;
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: 30px;
+  width: 476px;
+  height: 230px;
+  overflow: hidden;
+`;
+
+const DataItem = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 24px;
+`;
+
+const DataTitle = styled.span`
+  font-size: 0.875rem;
+  font-weight: 700;
+  margin: 0;
+`;
+
+const DataContent = styled.p`
+  font-size: 0.75rem;
+  color: #83838b;
+  margin: 0;
+`;
+
+const PaginationWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+
+`;
+
+export default LegalTerminology;