From 9a063555e1320a1861114d35f307bba5a124f02e Mon Sep 17 00:00:00 2001
From: yeonddori <lsymiso@naver.com>
Date: Sat, 20 Jul 2024 19:31:28 +0900
Subject: [PATCH 1/3] =?UTF-8?q?design:=20=EC=B1=97=EB=B4=87=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#88
---
 src/app/chatbot/page.tsx            | 95 ++++++++++++-----------------
 src/components/ChatInput.tsx        |  5 +-
 src/components/ChatbotContainer.tsx |  3 +-
 src/mocks/chatIntro.ts              |  3 +-
 4 files changed, 44 insertions(+), 62 deletions(-)

diff --git a/src/app/chatbot/page.tsx b/src/app/chatbot/page.tsx
index a0e8fa7..5fce5b3 100644
--- a/src/app/chatbot/page.tsx
+++ b/src/app/chatbot/page.tsx
@@ -69,55 +69,54 @@ const Page = () => {
     <GradientBox
       sx={{
         minHeight: 'calc(100vh - 100px)',
+        maxHeight: 'calc(100vh - 100px)',
         display: 'flex',
         flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: '2rem',
+        overflow: 'hidden',
+        px: '6rem',
+        py: '3rem',
+        pb: '5rem',
       }}
     >
-      <Box
-        sx={{
-          flex: '1 1 40%',
-          maxWidth: '40%',
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'left',
-          justifyContent: 'center',
-          height: 'calc(100vh - 100px)',
-          overflowY: 'auto',
-        }}
-      >
-        <Typography color={color.blue} marginLeft="3rem" mb={3} variant="h4">
+      <Box maxWidth="40%">
+        <Typography color={color.blue} mb={3} ml={4} variant="h4">
           AI 산지니에 대해서 궁금해?
         </Typography>
-        <Card
+        <Box
           sx={{
-            width: '100%',
-            padding: '1.5rem',
-            boxShadow: 0,
-            borderRadius: 10,
+            maxHeight: '100%',
             overflowY: 'auto',
+            p: '1rem',
           }}
         >
-          <Typography
+          <Card
             sx={{
-              textAlign: 'left',
-              whiteSpace: 'pre-line',
-              lineHeight: '1.6',
-              '& h5': {
-                fontWeight: 'bold',
-                marginBottom: '0.5rem',
-              },
-              '& span': {
-                fontWeight: 'bold',
-              },
+              width: '100%',
+              padding: '1.5rem',
+              boxShadow: 0,
+              borderRadius: 10,
+              overflowY: 'auto',
             }}
-            variant="body2"
           >
-            {chatbotIntro}
-          </Typography>
-        </Card>
+            <Typography
+              sx={{
+                textAlign: 'left',
+                whiteSpace: 'pre-line',
+                lineHeight: '1.6',
+                '& h5': {
+                  fontWeight: 'bold',
+                  marginBottom: '0.5rem',
+                },
+                '& span': {
+                  fontWeight: 'bold',
+                },
+              }}
+              variant="body2"
+            >
+              {chatbotIntro}
+            </Typography>
+          </Card>
+        </Box>
       </Box>
       <Box
         sx={{
@@ -125,24 +124,16 @@ const Page = () => {
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'center',
-          justifyContent: 'center',
-          height: 'calc(100vh - 100px)',
+          px: '1rem',
         }}
       >
-        <Box
-          sx={{
-            width: '100%',
-            padding: '0 2rem',
-            marginBottom: '1rem',
-          }}
-        >
-          <Typography color={color.blue} mb={3} variant="h4">
+        <Box sx={{ width: '100%', mb: '1rem' }}>
+          <Typography color={color.blue} mb={3} ml={2} variant="h4">
             AI 산지니야 반가워~
           </Typography>
           <CommentCard
             isStroke
             content={'AI 산지니에게 바르고 고운말을 해주세요~!\n산지니는 구글에서 다른 기사를 찾아보는 일을 좋아해요🧐'}
-            isChat={false}
           />
         </Box>
         <Container
@@ -152,21 +143,13 @@ const Page = () => {
             alignItems: 'center',
             justifyContent: 'flex-start',
             width: '100%',
-            height: '100%',
+            minHeight: '70%',
             overflowY: 'auto',
-            padding: '0 2rem',
           }}
         >
           <ChatContainer messages={messages} />
         </Container>
         <ChatInput onSendMessage={handleSendMessage} />
-        <Box
-          sx={{
-            width: '100%',
-            padding: '0 2rem',
-            marginTop: '1rem',
-          }}
-        />
       </Box>
     </GradientBox>
   );
diff --git a/src/components/ChatInput.tsx b/src/components/ChatInput.tsx
index b6cf327..6155962 100644
--- a/src/components/ChatInput.tsx
+++ b/src/components/ChatInput.tsx
@@ -34,9 +34,8 @@ const ChatInput = ({ onSendMessage }: ChatInputProps) => {
       sx={{
         display: 'flex',
         width: '100%',
-        maxWidth: '600px',
+        maxWidth: '80%',
         borderRadius: '20px',
-        boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.1)',
       }}
     >
       <TextField
@@ -44,6 +43,7 @@ const ChatInput = ({ onSendMessage }: ChatInputProps) => {
         disabled={userMessage.trim() === ''}
         placeholder="AI 산지니에게 대화를 요청해보세요!"
         sx={{
+          boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.1)',
           marginRight: '1rem',
           backgroundColor: 'rgba(255, 255, 255, 0.8)',
           borderRadius: '20px',
@@ -61,6 +61,7 @@ const ChatInput = ({ onSendMessage }: ChatInputProps) => {
       <Button
         color="primary"
         sx={{
+          boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.1)',
           background: `linear-gradient(45deg, ${color.gradient_blue_dark}, ${color.gradient_blue_light})`,
           color: 'white',
           borderRadius: '20px',
diff --git a/src/components/ChatbotContainer.tsx b/src/components/ChatbotContainer.tsx
index 4405693..aa036d0 100644
--- a/src/components/ChatbotContainer.tsx
+++ b/src/components/ChatbotContainer.tsx
@@ -10,9 +10,8 @@ import ChatMessage from './ChatMessage';
 const StyledChatContainer = styled(Box)`
   flex: 1;
   width: 100%;
-  max-width: 750px;
+  height: 100%;
   overflow-y: auto;
-  max-height: calc(100vh - 200px);
 `;
 
 interface Message {
diff --git a/src/mocks/chatIntro.ts b/src/mocks/chatIntro.ts
index dee42bb..bb5ddc4 100644
--- a/src/mocks/chatIntro.ts
+++ b/src/mocks/chatIntro.ts
@@ -1,5 +1,4 @@
-const chatbotIntro = `
-1. 개발 과정 소개
+const chatbotIntro = `1. 개발 과정 소개
 안녕! 나는 AI 산지니야. 나의 똑똑한 두뇌가 만들어지는 과정을 들려줄게! 먼저, 다른 웹사이트에서 챗봇들이 어떻게 똑똑하게 대화를 나누는지 공부했어. 다양한 사례를 보면서 배운 점이 많았지. 📚
 2. 자연어 처리(NLP) 기술
 나의 또 다른 중요한 부분은 자연어 처리(NLP) 기술 이야. 예를 들어, 경제 단어를 물어보는 사람들을 위해 Komoran 과 TF-IDF 를 활용해서 DB에서 관련 용어들을 똑똑하게 찾아내지. 이렇게 해서 내가 더 유용한 정보를 줄 수 있어. 🧠

From 729fd3b0ca2de066b59790ec9730c00ff4f9c123 Mon Sep 17 00:00:00 2001
From: yeonddori <lsymiso@naver.com>
Date: Sat, 20 Jul 2024 19:34:59 +0900
Subject: [PATCH 2/3] =?UTF-8?q?design:=20=EC=B1=97=EB=B4=87=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=ED=97=A4=EB=8D=94=EC=99=80=20=EC=97=AC?=
 =?UTF-8?q?=EB=B0=B1=20=ED=86=B5=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#88
---
 src/app/chatbot/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/chatbot/page.tsx b/src/app/chatbot/page.tsx
index 5fce5b3..3824ef8 100644
--- a/src/app/chatbot/page.tsx
+++ b/src/app/chatbot/page.tsx
@@ -74,7 +74,7 @@ const Page = () => {
         flexDirection: 'row',
         overflow: 'hidden',
         px: '6rem',
-        py: '3rem',
+        pt: 5,
         pb: '5rem',
       }}
     >

From 2058736dc23fe908e1c30b52d3e9dc8925274167 Mon Sep 17 00:00:00 2001
From: yeonddori <lsymiso@naver.com>
Date: Sat, 20 Jul 2024 19:47:09 +0900
Subject: [PATCH 3/3] =?UTF-8?q?design:=20=EC=9D=B8=EC=82=AC=EC=9D=B4?=
 =?UTF-8?q?=ED=8A=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=97=A4=EB=8D=94?=
 =?UTF-8?q?=EC=99=80=20=EC=97=AC=EB=B0=B1=20=ED=86=B5=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- height가 큰 화면에서 배경 잘리는 현상 수정

#88
---
 src/app/insight/page.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/insight/page.tsx b/src/app/insight/page.tsx
index 367f34c..795c638 100644
--- a/src/app/insight/page.tsx
+++ b/src/app/insight/page.tsx
@@ -27,8 +27,8 @@ const Page = () => {
   }
 
   return (
-    <GradientBox sx={{ height: '100vh', width: '100vw' }}>
-      <Stack alignItems="center">
+    <GradientBox sx={{ minHeight: 'calc(100vh - 100px)', width: '100vw' }}>
+      <Stack alignItems="center" py={5}>
         <Box sx={{ maxWidth: '1500px', alignItems: 'center' }}>
           <Box sx={{ width: '100%' }}>
             <Typography color={color.blue} mb="1.5rem" variant="h4">