diff --git a/src/components/ChatActionBar.tsx b/src/components/ChatActionBar.tsx index 3247782..10437a7 100644 --- a/src/components/ChatActionBar.tsx +++ b/src/components/ChatActionBar.tsx @@ -9,6 +9,7 @@ interface ChatActionProps { onChange: (e: ChangeEvent) => void; onKeyUp: (e: KeyboardEvent) => void; onSend: () => void; + mode?: string; } const ChatActionBar = ({ @@ -17,12 +18,23 @@ const ChatActionBar = ({ value, onChange, onKeyUp, - onSend + onSend, + mode }: ChatActionProps) => { + const isTopicChat = mode === "topicChat"; + return (
- - + {!isTopicChat && ( + + )} + + { +interface IntroGuideProps { + mode?: string; + chatTitle?: string; +} + +const IntroGuide = ({ mode, chatTitle }: IntroGuideProps) => { + const isTopicChat = mode === "topicChat"; + return (
-

- {`MBTI 대화에 참여하셨군요! - 대화 상황에 대해 구체적으로 - 말씀해주시면,더 좋은 답변을 드릴 수 있어요 :)`} -

-

- 언제, 어디서, 어떤 상황인지 자유롭게 알려주세요 -

+ {isTopicChat ? ( + <> +

+ {`오픈채팅에 오신 걸 환영해요! + ${chatTitle}에 대한 이야기를 자유롭게 나눠보세요`} +

+ + ) : ( + <> +

+ {`MBTI 대화에 참여하셨군요! + 대화 상황에 대해 구체적으로 + 말씀해주시면,더 좋은 답변을 드릴 수 있어요 :)`} +

+

+ 언제, 어디서, 어떤 상황인지 자유롭게 알려주세요 +

+ + )}
); }; diff --git a/src/components/input/MessageInput.tsx b/src/components/input/MessageInput.tsx index 08eb07c..bfd4d30 100644 --- a/src/components/input/MessageInput.tsx +++ b/src/components/input/MessageInput.tsx @@ -4,13 +4,24 @@ interface MessageInputProps { value: string; onChange: (e: ChangeEvent) => void; onKeyUp: (e: KeyboardEvent) => void; + mode?: string; } -const MessageInput = ({ value, onChange, onKeyUp }: MessageInputProps) => { +const MessageInput = ({ + value, + onChange, + onKeyUp, + mode +}: MessageInputProps) => { + const isTopicChat = mode === "topicChat"; + const widthClasses = isTopicChat + ? "w-[267px] md:w-[282px] lg:w-[407px]" + : "w-[242px] md:w-[257px] lg:w-[382px]"; + return ( { const { state } = useLocation(); - const { mbti, mode, id = Date.now().toString(), name } = state; + const { + mbti, + mode, + id = Date.now().toString(), + name, + chatTitle: openChatTitle + } = state; const [messages, setMessages] = useState([]); const [input, setInput] = useState(""); const [isOpen, setIsOpen] = useState(false); const bottomRef = useRef(null); - const chatTitle = name ? `${name}과 대화` : `${mbti}와 대화`; + const chatTitle = + openChatTitle || (name ? `${name}과 대화` : `${mbti}와 대화`); const assistantImgUrl = pickMbtiImage(mbti); const storageKey = `chatMessages_${id}`; @@ -146,7 +153,7 @@ const Chat = () => {
- + {/* 메시지 리스트 */} {messages.map((msg, idx) => (
{ onChange={handleChange} onKeyUp={handleKeyup} onSend={() => handleSend(input)} + mode={mode} /> - {isOpen && } + {mode !== "topicChat" && isOpen && ( + + )}
);