From 6883968db265b6cace51749d8842ba55892ff3ca Mon Sep 17 00:00:00 2001 From: krokerdile Date: Sat, 11 Nov 2023 11:24:19 +0900 Subject: [PATCH 1/9] =?UTF-8?q?feat:=20Layout=20Grid=20=EC=B6=94=EA=B0=80?= =?UTF-8?q?=20-=20left,=20main,=20right=20=EC=88=9C=EC=9C=BC=EB=A1=9C=20-?= =?UTF-8?q?=20=EB=B0=98=EC=9D=91=ED=98=95=EC=9D=80=20=EC=9D=BC=EB=8B=A8=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=ED=95=98=EB=8A=94=20=EA=B9=80=EC=97=90=20?= =?UTF-8?q?=ED=95=B4=EB=B4=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/page/MainPage.jsx | 46 ++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 45 insertions(+), 1 deletion(-) diff --git a/src/page/MainPage.jsx b/src/page/MainPage.jsx index 45238a4..371b9ee 100644 --- a/src/page/MainPage.jsx +++ b/src/page/MainPage.jsx @@ -1,5 +1,49 @@ +import styled from "styled-components"; + const Main = () => { - return <>Main; + return ( + + sidebar + main + sidebar + + ); }; +const GridContainer = styled.div` + display: grid; + grid-template-columns: 2fr 6fr 2fr; + grid-template-rows: 1fr; + width: 100vw; + height: 100vh; + background-color: white; + @media (max-width: 768px) { + grid-template-columns: 1fr; + grid-template-rows: 1fr 2fr 1fr; + } +`; + +const GridItem = styled.div` + background-color: gray; + border: 1px dotted black; + margin: 1px; + @media (max-width: 768px) { + grid-row: 2; + } +`; + +const LeftBar = styled(GridItem)` + background-color: white; + grid-row: span 3; + @media (max-width: 768px) { + grid-row: 1; + } +`; +const RightBar = styled(GridItem)` + background-color: white; + grid-row: span 3; + @media (max-width: 768px) { + grid-row: 3; + } +`; export default Main; From 54f5155bf47bc2fd377b6c84b7024f5205c060c1 Mon Sep 17 00:00:00 2001 From: Quvid <48755156+KimKyuHoi@users.noreply.github.com> Date: Sat, 11 Nov 2023 11:34:05 +0900 Subject: [PATCH 2/9] =?UTF-8?q?feat:=20chat=20=ED=8F=BC=EC=B0=BD=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84=ED=95=98=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ChatForm.jsx | 87 ++++++++++++++++++++++++++++++++++++ src/components/LoginForm.jsx | 2 +- src/page/MainPage.jsx | 10 ++++- 3 files changed, 97 insertions(+), 2 deletions(-) create mode 100644 src/components/ChatForm.jsx diff --git a/src/components/ChatForm.jsx b/src/components/ChatForm.jsx new file mode 100644 index 0000000..8d1b945 --- /dev/null +++ b/src/components/ChatForm.jsx @@ -0,0 +1,87 @@ +import styled from "styled-components"; + +const ChatForm = () => { + return ( + + Chat + + + + + + + + + + + + + ); +}; + +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; diff --git a/src/components/LoginForm.jsx b/src/components/LoginForm.jsx index 73df60f..8f205c9 100644 --- a/src/components/LoginForm.jsx +++ b/src/components/LoginForm.jsx @@ -4,7 +4,7 @@ const LoginForm = () => { return ( EZPT - + ID diff --git a/src/page/MainPage.jsx b/src/page/MainPage.jsx index 4338718..099a7ec 100644 --- a/src/page/MainPage.jsx +++ b/src/page/MainPage.jsx @@ -1,5 +1,13 @@ +import ChatForm from "../components/ChatForm"; + const MainPage = () => { - return <>Main; + return ( + <> + + + ); }; + + export default MainPage; From 33644faf5f4d2c995e196547b96d76edd44b8f4f Mon Sep 17 00:00:00 2001 From: krokerdile Date: Sat, 11 Nov 2023 11:41:12 +0900 Subject: [PATCH 3/9] =?UTF-8?q?feat:=20GptAnalytics=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/GptAnalytics.jsx | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 src/components/GptAnalytics.jsx diff --git a/src/components/GptAnalytics.jsx b/src/components/GptAnalytics.jsx new file mode 100644 index 0000000..4fd4ca4 --- /dev/null +++ b/src/components/GptAnalytics.jsx @@ -0,0 +1,5 @@ +const GptAnalytics = () => { + return <>GptAnalytics; +}; + +export default GptAnalytics; From 2ae8fb827b27513980f1fcd9484ee67772c5f721 Mon Sep 17 00:00:00 2001 From: krokerdile Date: Sat, 11 Nov 2023 11:42:07 +0900 Subject: [PATCH 4/9] =?UTF-8?q?feat:=20RightBar=20top,bottom=20=EC=B9=B8?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/page/MainPage.jsx | 23 +++++++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/src/page/MainPage.jsx b/src/page/MainPage.jsx index 371b9ee..adde490 100644 --- a/src/page/MainPage.jsx +++ b/src/page/MainPage.jsx @@ -1,18 +1,21 @@ import styled from "styled-components"; -const Main = () => { +const MainPage = () => { return ( sidebar main - sidebar + + Top + Bottom + ); }; const GridContainer = styled.div` display: grid; - grid-template-columns: 2fr 6fr 2fr; + grid-template-columns: 2fr 4fr 3fr; grid-template-rows: 1fr; width: 100vw; height: 100vh; @@ -46,4 +49,16 @@ const RightBar = styled(GridItem)` grid-row: 3; } `; -export default Main; + +const RightBarTop = styled.div` + flex: 1; + height: 50%; + background-color: lightblue; +`; + +const RightBarBottom = styled.div` + flex: 1; + height: 50%; + background-color: lightgreen; +`; +export default MainPage; From afec26cf36457bdd4112ba5a2b9075647eaaa1e9 Mon Sep 17 00:00:00 2001 From: krokerdile Date: Sat, 11 Nov 2023 12:06:56 +0900 Subject: [PATCH 5/9] =?UTF-8?q?hotfix:=20LoginForm=20=EB=A8=B8=EC=A7=80=20?= =?UTF-8?q?=EA=B3=BC=EC=A0=95=EC=97=90=EC=84=9C=20=EC=9E=98=EB=AA=BB?= =?UTF-8?q?=ED=95=9C=20=EB=B6=80=EB=B6=84=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/LoginForm.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/LoginForm.jsx b/src/components/LoginForm.jsx index 119bb36..73df60f 100644 --- a/src/components/LoginForm.jsx +++ b/src/components/LoginForm.jsx @@ -4,7 +4,6 @@ const LoginForm = () => { return ( EZPT - ID From a0a65722197ef360f95577b6d8c6a37c653eb90a Mon Sep 17 00:00:00 2001 From: Quvid <48755156+KimKyuHoi@users.noreply.github.com> Date: Sat, 11 Nov 2023 12:27:52 +0900 Subject: [PATCH 6/9] =?UTF-8?q?feat:=20legalTerminology=20=EC=B0=BD=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84(dummy=20data=20=EC=B6=94=EA=B0=80)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/LegalTerminology.jsx | 116 ++++++++++++++++++++++++++++ 1 file changed, 116 insertions(+) create mode 100644 src/components/LegalTerminology.jsx diff --git a/src/components/LegalTerminology.jsx b/src/components/LegalTerminology.jsx new file mode 100644 index 0000000..f73e891 --- /dev/null +++ b/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 ( + + Legal Terminology + 법률 용어 해석 + + {DUMMY_DATA.map((data) => ( + + {data.title} + {data.content} + + ))} + + pagination 부분 + + ); +}; + +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; From 8cf0de505f345cc88d6321d3ba0c9d3fde211600 Mon Sep 17 00:00:00 2001 From: krokerdile Date: Sat, 11 Nov 2023 14:00:09 +0900 Subject: [PATCH 7/9] =?UTF-8?q?feat:=20GptAnalytics=20=EC=A0=95=EC=A0=81?= =?UTF-8?q?=20=ED=8C=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84=20-=20Pagination=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=20=EC=99=84=EB=A3=8C=20-=20Css=20=EC=9E=91?= =?UTF-8?q?=EC=97=85=20=EC=99=84=EB=A3=8C=20-=20=EC=8B=A4=EC=A0=9C=20?= =?UTF-8?q?=EB=93=A4=EC=96=B4=EA=B0=80=EB=8A=94=20=EB=82=B4=EC=9A=A9=20?= =?UTF-8?q?=EB=94=B0=EB=9D=BC=EC=84=9C=20=EC=B6=94=EA=B0=80=20=EC=9E=91?= =?UTF-8?q?=EC=97=85=20=ED=95=84=EC=9A=94!?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/GptAnalytics.jsx | 153 +++++++++++++++++++++++++++++++- src/page/MainPage.jsx | 8 +- 2 files changed, 157 insertions(+), 4 deletions(-) diff --git a/src/components/GptAnalytics.jsx b/src/components/GptAnalytics.jsx index 4fd4ca4..3f9a869 100644 --- a/src/components/GptAnalytics.jsx +++ b/src/components/GptAnalytics.jsx @@ -1,5 +1,156 @@ +import styled from "styled-components"; +import { useState } from "react"; + const GptAnalytics = () => { - return <>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 ( + +
+ Analytics + 계약서 분석 자료 +
+ + {currentWords.map((word) => ( + {word} + ))} + +
+ {currentGroup > 0 && setCurrentGroup(currentGroup - 1)}>⬅️} + {currentGroupPageNumbers.map((number) => ( + setCurrentPage(number)}> + {number} + + ))} + {currentGroup < groupCount - 1 && setCurrentGroup(currentGroup + 1)}>➡️} +
+ + ); }; 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; +`; diff --git a/src/page/MainPage.jsx b/src/page/MainPage.jsx index adde490..00e9b60 100644 --- a/src/page/MainPage.jsx +++ b/src/page/MainPage.jsx @@ -1,4 +1,5 @@ import styled from "styled-components"; +import GptAnalytics from "../components/GptAnalytics"; const MainPage = () => { return ( @@ -6,7 +7,9 @@ const MainPage = () => { sidebar main - Top + + + Bottom @@ -28,7 +31,6 @@ const GridContainer = styled.div` const GridItem = styled.div` background-color: gray; - border: 1px dotted black; margin: 1px; @media (max-width: 768px) { grid-row: 2; @@ -53,7 +55,7 @@ const RightBar = styled(GridItem)` const RightBarTop = styled.div` flex: 1; height: 50%; - background-color: lightblue; + background-color: white; `; const RightBarBottom = styled.div` From 8ea1ed37a56275be44b69975b335c92b453cf4b5 Mon Sep 17 00:00:00 2001 From: krokerdile Date: Sat, 11 Nov 2023 14:00:09 +0900 Subject: [PATCH 8/9] =?UTF-8?q?feat:=20GptAnalytics=20=EC=A0=95=EC=A0=81?= =?UTF-8?q?=20=ED=8C=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84=20-=20Pagination=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=20=EC=99=84=EB=A3=8C=20-=20Css=20=EC=9E=91?= =?UTF-8?q?=EC=97=85=20=EC=99=84=EB=A3=8C=20-=20=EC=8B=A4=EC=A0=9C=20?= =?UTF-8?q?=EB=93=A4=EC=96=B4=EA=B0=80=EB=8A=94=20=EB=82=B4=EC=9A=A9=20?= =?UTF-8?q?=EB=94=B0=EB=9D=BC=EC=84=9C=20=EC=B6=94=EA=B0=80=20=EC=9E=91?= =?UTF-8?q?=EC=97=85=20=ED=95=84=EC=9A=94!?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/page/MainPage.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/page/MainPage.jsx b/src/page/MainPage.jsx index 0cc5798..5cbcc78 100644 --- a/src/page/MainPage.jsx +++ b/src/page/MainPage.jsx @@ -1,6 +1,7 @@ import styled from "styled-components"; import GptAnalytics from "../components/GptAnalytics"; import ChatForm from "../components/ChatForm"; +import GptAnalytics from "../components/GptAnalytics"; const MainPage = () => { return ( From 47688930f7b3f1d790f64cbeb9ad6abdb81a8ee5 Mon Sep 17 00:00:00 2001 From: krokerdile Date: Sat, 11 Nov 2023 14:20:57 +0900 Subject: [PATCH 9/9] =?UTF-8?q?hotfix:=20=EC=A4=91=EB=B3=B5=20=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/page/MainPage.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/page/MainPage.jsx b/src/page/MainPage.jsx index 5cbcc78..0cc5798 100644 --- a/src/page/MainPage.jsx +++ b/src/page/MainPage.jsx @@ -1,7 +1,6 @@ import styled from "styled-components"; import GptAnalytics from "../components/GptAnalytics"; import ChatForm from "../components/ChatForm"; -import GptAnalytics from "../components/GptAnalytics"; const MainPage = () => { return (