feat: 오픈 채팅방 UI 개발

Author: Soohyuniii

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}

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>
   );
 };

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}

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>
     </>
   );