From 3d7899ce0682d7cb3771b86d08bef1133258b437 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B6=8C=ED=95=9C=EC=9E=88=EB=8A=94-=EC=9C=A0=EC=A0=80?=
 =?UTF-8?q?=EB=84=A4=EC=9E=84?= <myungsoocc@gmail.com>
Date: Tue, 26 Aug 2025 19:19:45 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EC=98=A4=ED=94=88=20=EC=B1=84?=
 =?UTF-8?q?=ED=8C=85=EB=B0=A9=20UI=20=EA=B0=9C=EB=B0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ChatActionBar.tsx      | 18 +++++++++++---
 src/components/IntroGuide.tsx         | 36 ++++++++++++++++++++-------
 src/components/input/MessageInput.tsx | 15 +++++++++--
 src/pages/Chat.tsx                    | 19 +++++++++++---
 4 files changed, 70 insertions(+), 18 deletions(-)

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<HTMLInputElement>) => void;
   onKeyUp: (e: KeyboardEvent<HTMLInputElement>) => 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 (
     <section className="flex h-[68px] w-full items-center justify-center border-t border-gray-100 bg-white">
-      <ToggleChatTipsButton isOpen={isOpen} setIsOpen={setIsOpen} />
-      <MessageInput value={value} onChange={onChange} onKeyUp={onKeyUp} />
+      {!isTopicChat && (
+        <ToggleChatTipsButton isOpen={isOpen} setIsOpen={setIsOpen} />
+      )}
+      <MessageInput
+        value={value}
+        onChange={onChange}
+        onKeyUp={onKeyUp}
+        mode={mode}
+      />
+
       <img
         className={`ml-4 ${value ? "cursor-pointer" : "cursor-not-allowed"}`}
         onClick={onSend}
diff --git a/src/components/IntroGuide.tsx b/src/components/IntroGuide.tsx
index f3db4fa..50d4cdc 100644
--- a/src/components/IntroGuide.tsx
+++ b/src/components/IntroGuide.tsx
@@ -1,14 +1,32 @@
-const IntroGuide = () => {
+interface IntroGuideProps {
+  mode?: string;
+  chatTitle?: string;
+}
+
+const IntroGuide = ({ mode, chatTitle }: IntroGuideProps) => {
+  const isTopicChat = mode === "topicChat";
+
   return (
     <div className="rounded-xl border border-primary-light bg-white p-5 text-black">
-      <p className="text-md font-light whitespace-pre-line">
-        {`MBTI 대화에 참여하셨군요!
-        대화 상황에 대해 구체적으로
-        말씀해주시면,더 좋은 답변을 드릴 수 있어요 :)`}
-      </p>
-      <p className="mt-2 block text-md font-medium">
-        언제, 어디서, 어떤 상황인지 자유롭게 알려주세요
-      </p>
+      {isTopicChat ? (
+        <>
+          <p className="text-md font-light whitespace-pre-line">
+            {`오픈채팅에 오신 걸 환영해요!
+            ${chatTitle}에 대한 이야기를 자유롭게 나눠보세요`}
+          </p>
+        </>
+      ) : (
+        <>
+          <p className="text-md font-light whitespace-pre-line">
+            {`MBTI 대화에 참여하셨군요!
+            대화 상황에 대해 구체적으로
+            말씀해주시면,더 좋은 답변을 드릴 수 있어요 :)`}
+          </p>
+          <p className="mt-2 block text-md font-medium">
+            언제, 어디서, 어떤 상황인지 자유롭게 알려주세요
+          </p>
+        </>
+      )}
     </div>
   );
 };
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<HTMLInputElement>) => void;
   onKeyUp: (e: KeyboardEvent<HTMLInputElement>) => 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 (
     <input
       type="text"
-      className="ml-2.5 flex h-[44px] w-[242px] justify-center rounded-[40px] bg-gray-50 py-2.5 pl-4 text-lg leading-[24px] font-medium text-gray-900 placeholder:text-gray-600 md:w-[257px] lg:w-[382px]"
+      className={`ml-2.5 flex h-[44px] justify-center rounded-[40px] bg-gray-50 py-2.5 pl-4 text-lg leading-[24px] font-medium text-gray-900 placeholder:text-gray-600 ${widthClasses}`}
       placeholder="메시지를 입력해주세요"
       value={value}
       onChange={onChange}
diff --git a/src/pages/Chat.tsx b/src/pages/Chat.tsx
index 1f4b026..dd2870e 100644
--- a/src/pages/Chat.tsx
+++ b/src/pages/Chat.tsx
@@ -30,14 +30,22 @@ interface ChatHistoryResponse {
 
 const Chat = () => {
   const { state } = useLocation();
-  const { mbti, mode, id = Date.now().toString(), name } = state;
+  const {
+    mbti,
+    mode,
+    id = Date.now().toString(),
+    name,
+    chatTitle: openChatTitle,
+    description: _description
+  } = state;
 
   const [messages, setMessages] = useState<Message[]>([]);
   const [input, setInput] = useState("");
   const [isOpen, setIsOpen] = useState(false);
   const bottomRef = useRef<HTMLDivElement>(null);
 
-  const chatTitle = name ? `${name}과 대화` : `${mbti}와 대화`;
+  const chatTitle =
+    openChatTitle || (name ? `${name}과 대화` : `${mbti}와 대화`);
   const assistantImgUrl = pickMbtiImage(mbti);
   const storageKey = `chatMessages_${id}`;
 
@@ -146,7 +154,7 @@ const Chat = () => {
       <Header title={chatTitle} showShareIcon={false} />
       <main>
         <section className="h-[calc(100vh-124px)] flex-1 space-y-4 overflow-y-auto px-[20px] pt-6">
-          <IntroGuide />
+          <IntroGuide mode={mode} chatTitle={openChatTitle} />
           {/* 메시지 리스트 */}
           {messages.map((msg, idx) => (
             <div
@@ -181,9 +189,12 @@ const Chat = () => {
           onChange={handleChange}
           onKeyUp={handleKeyup}
           onSend={() => handleSend(input)}
+          mode={mode}
         />
 
-        {isOpen && <TipsMenuContainer conversationId={id} mbti={mbti} />}
+        {mode !== "topicChat" && isOpen && (
+          <TipsMenuContainer conversationId={id} mbti={mbti} />
+        )}
       </main>
     </>
   );

From 8acae2aeeb24df23f1a778fc51549b673f91820b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B6=8C=ED=95=9C=EC=9E=88=EB=8A=94-=EC=9C=A0=EC=A0=80?=
 =?UTF-8?q?=EB=84=A4=EC=9E=84?= <myungsoocc@gmail.com>
Date: Tue, 26 Aug 2025 19:25:26 +0900
Subject: [PATCH 2/2] fix: remove unused data

---
 src/pages/Chat.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/pages/Chat.tsx b/src/pages/Chat.tsx
index dd2870e..f50b39a 100644
--- a/src/pages/Chat.tsx
+++ b/src/pages/Chat.tsx
@@ -35,8 +35,7 @@ const Chat = () => {
     mode,
     id = Date.now().toString(),
     name,
-    chatTitle: openChatTitle,
-    description: _description
+    chatTitle: openChatTitle
   } = state;
 
   const [messages, setMessages] = useState<Message[]>([]);