From 33644faf5f4d2c995e196547b96d76edd44b8f4f Mon Sep 17 00:00:00 2001
From: krokerdile <crazykroker@gmail.com>
Date: Sat, 11 Nov 2023 11:41:12 +0900
Subject: [PATCH 1/2] =?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 8cf0de505f345cc88d6321d3ba0c9d3fde211600 Mon Sep 17 00:00:00 2001
From: krokerdile <crazykroker@gmail.com>
Date: Sat, 11 Nov 2023 14:00:09 +0900
Subject: [PATCH 2/2] =?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 (
+    <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;
+`;
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 = () => {
       <LeftBar>sidebar</LeftBar>
       <GridItem>main</GridItem>
       <RightBar>
-        <RightBarTop>Top</RightBarTop>
+        <RightBarTop>
+          <GptAnalytics />
+        </RightBarTop>
         <RightBarBottom>Bottom</RightBarBottom>
       </RightBar>
     </GridContainer>
@@ -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`