Merge pull request #45 from ContractAssistant/develop

Api 관련 내용 적용 및 Chatform 버그 해결
ContractAssistant · Nov 12, 2023 · 136cd83 · 136cd83
2 parents aea535c + 571ae9f
commit 136cd83
Show file tree

Hide file tree

Showing 4 changed files with 5,583 additions and 33 deletions.
diff --git a/src/components/ChatForm.jsx b/src/components/ChatForm.jsx
@@ -43,33 +43,32 @@ const ChatForm = () => {
         temperature: 0.5,
         max_tokens: 1000,
       });
-      console.log(result);
       const lines = result.data.choices[0].text.split("\n");
-      console.log("lines: ", lines);
 
       lines.forEach((item) => {
-        if (item.includes("표현해석")) {
+        if (item.includes("표현해석: ")) {
           let temp = item.replace("표현해석: ", "");
-          setExpression([...expression, temp]);
-          setExpressionData(expression);
-        } else if (item.includes("유의사항")) {
+          let newExpression = [...expression, temp];
+          setExpression(newExpression);
+          setExpressionData(newExpression);
+        } else if (item.includes("유의사항: ")) {
           // data.유의사항.push(item.replace("유의사항: ", ""));
           let temp = item.replace("유의사항: ", "");
-          setCaution([...caution, temp]);
-          setCautionData(caution);
-        } else if (item.includes("법률용어")) {
-          // data.법률용어.push(item.replace("법률용어: ", ""));
+          let newCaution = [...caution, temp];
+          setCaution(newCaution);
+          setCautionData(newCaution);
+        } else if (item.includes("법률용어: ")) {
           let temp = item.replace("법률용어: ", "");
           temp = temp.split(",");
+          let newTerminology = [...terminology];
           temp.map((x) => {
-            setTerminology([...terminology, x]);
+            let word = x.trim();
+            newTerminology.push(word);
           });
-          setTerminologyData(terminology);
+          setTerminology(newTerminology);
+          setTerminologyData(newTerminology);
         }
       });
-      console.log(expression);
-      console.log(caution);
-      console.log(terminology);
     } catch (e) {
       console.error("Error:", e);
     } finally {
@@ -84,7 +83,7 @@ const ChatForm = () => {
       "계약서 종류는" +
       `${input1}` +
       "이다. 다음 내용은 계약서 내용이다." +
-      "다음은 계약서 항목에 대한 해석, 해당 항목의 유의사항, 법률 용어에 대해서 정보를 제공하는 예시이다. 표현해석 : 1년의 의무기간을 채우지 못하고 중도 퇴사하는 경우, 100만원을 배상하여야 한다. 항목 해석: 1년을 못 채우고 퇴사하는 경우, 저는 회사에 100만원을 배상해야 한다. 유의사항 : 근로기준법은 손해배상액을 미리 정해두는 것을 금지하고 있다. 아무리 근로계약서에 서명했더라도 근로기준법에 위반된 조항은 효력이 없다.법률용어 : 근로기준법, 손해배상액, 근로계약서";
+      "다음은 계약서 항목에 대한 표현해석, 해당 항목의 유의사항, 법률 용어에 대해서 정보를 제공하는 예시이다. 표현해석 : 1년의 의무기간을 채우지 못하고 중도 퇴사하는 경우, 100만원을 배상하여야 한다. 항목 해석: 1년을 못 채우고 퇴사하는 경우, 저는 회사에 100만원을 배상해야 한다. 유의사항 : 근로기준법은 손해배상액을 미리 정해두는 것을 금지하고 있다. 아무리 근로계약서에 서명했더라도 근로기준법에 위반된 조항은 효력이 없다.법률용어 : 근로기준법, 손해배상액, 근로계약서";
 
     try {
       await openai.createCompletion({
@@ -184,6 +183,7 @@ const TypeForm = styled.input`
 const ChatResult = styled.div`
   width: calc(100% - 2rem);
   height: calc(100% - 2rem);
+  max-height: 60%;
   border: 1px solid #d7d7d7;
   border-radius: 10px;
   margin-bottom: 18px;

diff --git a/src/components/GptAnalytics.jsx b/src/components/GptAnalytics.jsx
@@ -42,11 +42,8 @@ const GptAnalytics = () => {
   // // 법률 단어 추출
   // const legalTerms = gptData.map((data) => data.legalterm.trim());
 
-  const { expressionData: expression, cautionData: caution, terminologyData: terminology } = useStoreGptData();
+  const { expressionData: expression, cautionData: caution } = useStoreGptData();
   // 결과 출력
-  console.log("표현해석:", expression);
-  console.log("주의사항:", caution);
-  console.log("법률 단어:", terminology);
 
   return (
     <Wrapper>
@@ -59,8 +56,10 @@ const GptAnalytics = () => {
 
       <AnalyticsContent>
         <ContentWrapper>
-          {expression && expression.map((word, index) => <AnalyticsTitle key={index}>{word}</AnalyticsTitle>)}
-          {caution && caution.map((word, index) => <AnalyticsTitle key={index}>{word}</AnalyticsTitle>)}
+          {expression.length != 0 && <ExpreessionTitle>표현해석</ExpreessionTitle>}
+          {expression && expression.map((word, index) => <AnalyticsSource key={index}>{word}</AnalyticsSource>)}
+          {caution.length != 0 && <AnalyticsTitle>유의사항</AnalyticsTitle>}
+          {caution && caution.map((word, index) => <AnalyticsSource key={index}>{word}</AnalyticsSource>)}
         </ContentWrapper>
       </AnalyticsContent>
     </Wrapper>
@@ -119,6 +118,28 @@ const SubTitle = styled.p`
 `;
 
 const AnalyticsTitle = styled.p`
+  padding: 0;
+  margin-bottom: 1rem;
+  color: #ff0000;
+  font-family: Pretendard;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+`;
+
+const ExpreessionTitle = styled.p`
+  padding: 0;
+  margin-bottom: 1rem;
+  color: #000;
+  font-family: Pretendard;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+`;
+
+const AnalyticsSource = styled.p`
   padding: 0;
   margin-bottom: 1rem;
   color: #000;

diff --git a/src/components/LegalTerminology.jsx b/src/components/LegalTerminology.jsx
@@ -1,6 +1,8 @@
 import styled from "styled-components";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import useStoreGptData from "../store/useStoreGptData";
+import axios from "axios";
+import words from "./words";
 
 const DUMMY_DATA = [
   {
@@ -43,24 +45,42 @@ const DUMMY_DATA = [
 const LegalTerminology = () => {
   const [currentPage, setCurrentPage] = useState(1);
   const [currentGroup, setCurrentGroup] = useState(0);
-  const wordsPerPage = 3;
+  const wordsPerPage = 4;
 
   const { terminologyData: terminology } = useStoreGptData();
 
   const indexOfLastWord = currentPage * wordsPerPage;
   const indexOfFirstWord = indexOfLastWord - wordsPerPage;
 
-  const currentData = DUMMY_DATA.slice(indexOfFirstWord, indexOfLastWord);
+  const currentData = terminology.slice(indexOfFirstWord, indexOfLastWord);
   // 페이지 번호를 생성합니다.
   const pageNumbers = [];
-  for (let i = 1; i <= Math.ceil(DUMMY_DATA.length / wordsPerPage); i++) {
+  for (let i = 1; i <= Math.ceil(terminology.length / wordsPerPage); i++) {
     pageNumbers.push(i);
   }
 
   const groupCount = Math.ceil(pageNumbers.length / 10);
   const firstPageNumber = currentGroup * 10;
   const currentGroupPageNumbers = pageNumbers.slice(firstPageNumber, firstPageNumber + 10);
-
+  const [data, setData] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await axios.get("http://15.165.159.196:8081/term/all");
+        setData(response.data);
+      } catch (error) {
+        console.error("데이터를 불러오는데 실패했습니다.", error);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  const wordsObject = data.reduce((obj, word) => {
+    obj[word.word] = word.meaning;
+    return obj;
+  }, {});
   return (
     <Wrapper>
       <MainTitle>Legal Terminology</MainTitle>
@@ -72,11 +92,16 @@ const LegalTerminology = () => {
             <DataContent>{data.content}</DataContent>
           </DataItem>
         ))} */}
-        {terminology.map((data, index) => (
-          <DataItem key={index}>
-            <DataTitle>{data}</DataTitle>
-          </DataItem>
-        ))}
+        {currentData.map((data, index) => {
+          const content = wordsObject[data.replace(/\(.*\)|\.$/g, "").trim()];
+          return (
+            <DataItem key={index}>
+              <DataTitle>{data}</DataTitle>
+              {content && <DataContent>{content}</DataContent>}
+              {!content && <DataContent>해당 단어는 공공데이터 데이터베이스에서 제공하지 않는 단어 입니다!</DataContent>}
+            </DataItem>
+          );
+        })}
       </Content>
       <PaginationWrapper>
         {currentGroup > 0 && <TextButton onClick={() => setCurrentGroup(currentGroup - 1)}>⬅️</TextButton>}
@@ -135,7 +160,7 @@ const DataItem = styled.div`
 const DataTitle = styled.span`
   font-size: 0.875rem;
   font-weight: 700;
-  margin: 0;
+  margin-bottom: 0.2rem;
 `;
 
 const DataContent = styled.p`