(#72) 🎨 design: 챗봇 말풍선 너비 일반화 및 모듈화

KUSITMS-30th-TEAM-A · Nov 27, 2024 · 6110021 · 6110021
1 parent 4e24904
commit 6110021
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 12 deletions.
diff --git a/src/constants/ChatbotData.ts b/src/constants/ChatbotData.ts
@@ -5,6 +5,9 @@ import { StadiumType, stadiumStringList } from "@/src/constants/ZoneData";
 
 export const chatbotName = "루키";
 
+export const maxChatWidth = "max-w-[270px]";      // 채팅 말풍선 최대 크기
+export const minCategoryWidth = "min-w-[180px]";  // 채팅 내부 카테고리 최소 크기
+
 export const questionCategories = {
   // 기본 데이터
   chatbotName,

diff --git a/src/pages/Chatbot/components/message/RookieMessage.tsx b/src/pages/Chatbot/components/message/RookieMessage.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { maxChatWidth } from "@/src/constants/ChatbotData";
 
 interface Props {
     messageList: string[]; // 문자열을 배열로 받아서 다음 줄에 작성
@@ -8,7 +9,7 @@ interface Props {
 const RookieMessage = ({messageList}: Props) => {
   return (
     // 메시지를 string 배열로 받고 줄바꿈을 배열 원소로 구분해서 출력하기
-    <div className="bg-main-0 p-3 rounded-lg text-xs font-regular text-grayscale-90 max-w-xs">
+    <div className={`bg-main-0 p-3 rounded-lg text-xs font-regular text-grayscale-90 ${maxChatWidth}`}>
         {/** 메시지 1줄 이상 배열로 받아서 여러 p태그로 메시지 출력하기 */}
         {messageList.map((message, index) => (
             <p key={index}>{message}</p>

diff --git a/src/pages/Chatbot/components/message/RookieMessageWithTail.tsx b/src/pages/Chatbot/components/message/RookieMessageWithTail.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import Image from "next/image";
 import tailIcon from "@/src/assets/webp/chatbot_message_left_tail_white_big.webp";  // 꼬랑지
+import { maxChatWidth } from "@/src/constants/ChatbotData";
 
 interface Props {
     messageList: string[];
@@ -9,7 +10,7 @@ interface Props {
 // 챗봇 말풍선 컴포넌트 타입1 (꼬랑지가 붙은 버젼)
 const RookieMessageWithTail = ({messageList}: Props) => {
   return (
-    <div className="relative bg-main-0 p-3 rounded-lg text-xs font-regular text-grayscale-90 max-w-xs">
+    <div className={`relative bg-main-0 p-3 rounded-lg text-xs font-regular text-grayscale-90 ${maxChatWidth}`}>
         {/* 말풍선 꼬랑지 */}
         <Image src={tailIcon} alt="꼬랑지" className="absolute left-[-12px] top-2 w-5 h-5"/>
 

diff --git a/src/pages/Chatbot/components/message/UserMessageWithTail.tsx b/src/pages/Chatbot/components/message/UserMessageWithTail.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import Image from "next/image";
 import tailIcon from "@/src/assets/webp/chatbot_message_right_tail_pink_big.webp";  // 꼬랑지
+import { maxChatWidth } from "@/src/constants/ChatbotData";
 
 interface Props {
     messageList: string[];
@@ -9,7 +10,7 @@ interface Props {
 // 유저 말풍선 컴포넌트 타입1 (꼬랑지가 붙은 버젼)
 const UserMessageWithTail = ({messageList}: Props) => {
   return (
-    <div className="relative bg-main-5 p-3 rounded-lg text-xs font-regular text-grayscale-90 max-w-xs">
+    <div className={`relative bg-main-5 p-3 rounded-lg text-xs font-regular text-grayscale-90 ${maxChatWidth}`}>
         {/* 말풍선 꼬랑지 */}
         <Image src={tailIcon} alt="꼬랑지" className="absolute right-[-12px] top-2 w-5 h-5"/>
 

diff --git a/src/pages/Chatbot/components/message/custom/RookieImageMessage.tsx b/src/pages/Chatbot/components/message/custom/RookieImageMessage.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import Image from "next/image";
+import { maxChatWidth } from "@/src/constants/ChatbotData";
 
 interface Props {
   imgUrl: string;
@@ -14,7 +15,7 @@ const RookieImageMessage = ({imgUrl}: Props) => {
         <Image
             src={imgUrl}
             alt="Category Icon"
-            className="max-w-full h-auto rounded-md"
+            className={`${maxChatWidth} h-auto rounded-md`}
         />
     </div>
   );

diff --git a/src/pages/Chatbot/components/message/custom/RookiePreformattedMessage.tsx b/src/pages/Chatbot/components/message/custom/RookiePreformattedMessage.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { maxChatWidth } from "@/src/constants/ChatbotData";
 
 interface Props {
     message: string;
@@ -9,7 +10,7 @@ interface Props {
 const RookiePreformattedMessage = ({message}: Props) => {
   return (
     // 메시지를 string으로 받고 줄바꿈을 \n 값으로 구분해서 출력하기
-    <div className="whitespace-pre-wrap bg-main-0 p-3 rounded-lg text-xs font-regular text-grayscale-90 max-w-xs">
+    <div className={`whitespace-pre-wrap bg-main-0 p-3 rounded-lg text-xs font-regular text-grayscale-90 ${maxChatWidth}`}>
       {[message]}
     </div>
   );

diff --git a/src/pages/Chatbot/components/message/custom/RookiePreformattedMessageWithTail.tsx b/src/pages/Chatbot/components/message/custom/RookiePreformattedMessageWithTail.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import Image from "next/image";
 import tailIcon from "@/src/assets/webp/chatbot_message_left_tail_white_big.webp";  // 꼬랑지
+import { maxChatWidth } from "@/src/constants/ChatbotData";
 
 interface Props {
     message: string;
@@ -11,7 +12,7 @@ interface Props {
 const RookiePreformattedMessage = ({message}: Props) => {
   return (
     // 메시지를 string으로 받고 줄바꿈을 \n 값으로 구분해서 출력하기
-    <div className="relative whitespace-pre-wrap bg-main-0 p-3 rounded-lg text-xs font-regular text-grayscale-90 max-w-xs">
+    <div className={`relative whitespace-pre-wrap bg-main-0 p-3 rounded-lg text-xs font-regular text-grayscale-90 ${maxChatWidth}`}>
         {/* 말풍선 꼬랑지 */}
         <Image src={tailIcon} alt="꼬랑지" className="absolute left-[-12px] top-2 w-5 h-5"/>
 

diff --git a/src/pages/Chatbot/components/message/custom/RookieWhiteListMessage.tsx b/src/pages/Chatbot/components/message/custom/RookieWhiteListMessage.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { maxChatWidth, minCategoryWidth } from "@/src/constants/ChatbotData";
 
 interface Props {
     messageList: string[];
@@ -8,13 +9,13 @@ interface Props {
 // 메시지를 리스트로 출력
 const RookieWhiteListMessage = ({messageList}: Props) => {
   return (
-    <div className="bg-main-0 p-3 rounded-lg text-xs font-regular text-grayscale-90 max-w-xs">
+    <div className={`bg-main-0 p-3 rounded-lg text-xs font-regular text-grayscale-90 ${maxChatWidth}`}>
         {/** 메시지 1줄 이상 배열로 받아서 여러 li 태그로 메시지 출력하기 */}
         <ul className="space-y-1.5">
             {messageList.map((message, index) => (
                 <li
-                key={index}
-                className="px-2 text-xs min-w-[180px] w-full text-left font-regular text-grayscale-90 rounded-md"
+                  key={index}
+                  className={`px-2 text-xs text-left font-regular text-grayscale-90 rounded-md ${minCategoryWidth} w-full`}
                 >
                   {message}
                 </li>

diff --git a/src/pages/Chatbot/components/message/custom/RookieWhiteListMessageWithTail.tsx b/src/pages/Chatbot/components/message/custom/RookieWhiteListMessageWithTail.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import Image from "next/image";
 import tailIcon from "@/src/assets/webp/chatbot_message_left_tail_white_big.webp";  // 꼬랑지
+import { maxChatWidth, minCategoryWidth } from "@/src/constants/ChatbotData";
 
 interface Props {
     messageList: string[];
@@ -10,16 +11,16 @@ interface Props {
 // 메시지를 리스트로 출력
 const RookieWhiteListMessageWithTail = ({messageList}: Props) => {
   return (
-    <div className="relative bg-main-0 p-3 rounded-lg text-xs font-regular text-grayscale-90 max-w-xs">
+    <div className={`relative bg-main-0 p-3 rounded-lg text-xs font-regular text-grayscale-90 ${maxChatWidth}`}>
         {/* 말풍선 꼬랑지 */}
         <Image src={tailIcon} alt="꼬랑지" className="absolute left-[-12px] top-2 w-5 h-5"/>
 
         {/** 메시지 1줄 이상 배열로 받아서 여러 li 태그로 메시지 출력하기 */}
         <ul className="space-y-1.5">
             {messageList.map((message, index) => (
                 <li
-                key={index}
-                className="px-2 text-xs min-w-[180px] w-full text-left font-regular text-grayscale-90 rounded-md"
+                  key={index}
+                  className={`px-2 text-xs text-left font-regular text-grayscale-90 rounded-md ${minCategoryWidth} w-full`}
                 >
                   {message}
                 </li>