feat: 이미지 나오게 처리, url 처리

datastreams-knu · Nov 26, 2024 · b829707 · b829707
1 parent 221d391
commit b829707
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 41 deletions.
diff --git a/src/pages/MainPage/MainPage.tsx b/src/pages/MainPage/MainPage.tsx
@@ -52,24 +52,32 @@ const MainPage = () => {
         const data: ResponseData = await response.json();
         console.log("응답 데이터:", data);
 
-        // response와 필드 유효성 검사
-        if (!data) {
-          throw new Error("응답 데이터가 예상한 구조와 다릅니다.");
-        }
+        // URL을 링크로 변환하는 함수
+        const makeLinksClickable = (text: string) => {
+          const urlRegex = /(https?:\/\/[^\s]+)/g; // URL 패턴
+          return text.replace(
+            urlRegex,
+            (url) =>
+              `<a href="${url}" target="_blank" rel="noopener noreferrer" style="color: blue; text-decoration: underline;">${url}</a>`
+          );
+        };
 
-        // 이미지 처리
-        const images =
-          Array.isArray(data.images) &&
-          data.images.length > 0 &&
-          data.images[0] !== "No content"
-            ? `\n\n${data.images
-                .map((url: string) => `<img src="${url}" width="300" />`)
-                .join("\n")}`
-            : "";
+        const cleanText = (text: string) => text.replace(/^\s+|\s+$/g, ""); // 공백 및 줄바꿈 제거
 
-        console.log("이미지 처리 완료:", images);
+        const formattedResponse = `${cleanText(data.answer)}
+        ${
+          data.images?.length && data.images[0] !== "No content"
+            ? data.images
+                .map(
+                  (url) =>
+                    `<img src="${url}" alt="이미지" style="max-width: 100%; height: auto; margin-top: 10px;" />`
+                )
+                .join("\n")
+            : ""
+        }
+        ${data.disclaimer}
+        ${makeLinksClickable(data.references)}`.trim();
 
-        const formattedResponse = `${data.answer}\n\n${data.references}\n\n${data.disclaimer}${images}`;
         setMessages((prev) => [...prev, formattedResponse]);
       } catch (error) {
         console.error("에러 발생:", error);

diff --git a/src/pages/MainPage/messageList/MessageList.tsx b/src/pages/MainPage/messageList/MessageList.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-import { Box, Text } from "@chakra-ui/react";
+import { Box } from "@chakra-ui/react";
 
 interface MessageListProps {
   messages: string[];
@@ -43,32 +43,33 @@ export const MessageList: React.FC<MessageListProps> = ({ messages }) => {
       p="10px"
       m="0 auto 60px"
     >
-      {messages
-        .slice() // 원본 배열 복사
-        .map((message, index) => {
-          const isEven = index % 2 === 1;
+      {messages.map((message, index) => {
+        const isEven = index % 2 === 1;
 
-          return (
-            <Box
-              key={index}
-              m="5px 0"
-              p="10px"
-              bg={isEven ? "#DDD8C6" : "#FFDFB8"}
-              borderRadius="8px"
-              maxW="80%"
-              alignSelf={isEven ? "flex-start" : "flex-end"}
-              wordBreak="break-word"
-              fontSize={{ base: "xl", md: "2xl" }}
-              animation="fadeIn 0.5s ease" // CSS 애니메이션
-              style={{
-                opacity: 0,
-                animation: "fadeIn 0.5s ease forwards",
-              }}
-            >
-              <Text>{message}</Text>
-            </Box>
-          );
-        })}
+        return (
+          <Box
+            key={index}
+            m="5px 0"
+            p="10px"
+            bg={isEven ? "#DDD8C6" : "#FFDFB8"}
+            borderRadius="8px"
+            maxW="80%"
+            alignSelf={isEven ? "flex-start" : "flex-end"}
+            wordBreak="break-word"
+            fontSize={{ base: "xl", md: "2xl" }}
+            animation="fadeIn 0.5s ease" // CSS 애니메이션
+            style={{
+              opacity: 0,
+              animation: "fadeIn 0.5s ease forwards",
+              whiteSpace: "pre-line", // 줄 띄움 처리
+              lineHeight: "1", // 줄 간격 설정
+            }}
+            dangerouslySetInnerHTML={{
+              __html: message, // HTML 콘텐츠로 처리
+            }}
+          />
+        );
+      })}
     </Box>
   );
 };