인사이트&챗봇 페이지 레이아웃 디자인 수정

src/app/chatbot/page.tsx

@@ -69,80 +69,71 @@ 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',
+        pt: 5,
+        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={{
           flex: '2 1 60%',
           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>
   );

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">

src/components/ChatInput.tsx

@@ -34,16 +34,16 @@ 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
         fullWidth
         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',

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 {

src/mocks/chatIntro.ts

@@ -1,5 +1,4 @@
-const chatbotIntro = `
-1. 개발 과정 소개
+const chatbotIntro = `1. 개발 과정 소개
 안녕! 나는 AI 산지니야. 나의 똑똑한 두뇌가 만들어지는 과정을 들려줄게! 먼저, 다른 웹사이트에서 챗봇들이 어떻게 똑똑하게 대화를 나누는지 공부했어. 다양한 사례를 보면서 배운 점이 많았지. 📚
 2. 자연어 처리(NLP) 기술
 나의 또 다른 중요한 부분은 자연어 처리(NLP) 기술 이야. 예를 들어, 경제 단어를 물어보는 사람들을 위해 Komoran 과 TF-IDF 를 활용해서 DB에서 관련 용어들을 똑똑하게 찾아내지. 이렇게 해서 내가 더 유용한 정보를 줄 수 있어. 🧠