Merge branch 'dev' into feature/ChatTips-컴포넌트-개발

Author: junjeeong

public/icon/close.svg

@@ -1,13 +1,5 @@
-import TipsMenu from "./components/TipsMenu";
-
 function App() {
-  return (
-    <div>
-      <TipsMenu mode="topic" />
-      <TipsMenu mode="conversation" />
-      <TipsMenu mode="temporature" />
-    </div>
-  );
+  return <></>;
 }
 
 export default App;

public/icon/mbtipslogo.svg

@@ -0,0 +1,21 @@
+import AlertButton from "@/components/button/AlertButton";
+
+const Alert = () => {
+  return (
+    <>
+      <div className="flex flex-col justify-center items-center bg-white rounded-2xl w-[294px] h-[200px]">
+        <h3 className="font-bold text-2xl">채팅방 나가기</h3>
+        <p className="mt-[9px] font-medium text-xl">
+          <span>대화가 저장되지 않아요.</span>
+          <span className="flex justify-center">정말 나갈까요?</span>
+        </p>
+        <div className="flex gap-3.5 mt-[19px]">
+          <AlertButton>취소</AlertButton>
+          <AlertButton>확인</AlertButton>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Alert;

public/icon/people.svg

@@ -0,0 +1,28 @@
+import { ChangeEvent, useState } from "react";
+import ToggleChatTipsButton from "@/components/button/ToggleChatTipsButton";
+import MessageInput from "@/components/input/MessageInput";
+
+const ChatAction = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [value, setValue] = useState("");
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+  };
+
+  return (
+    <div className="flex justify-around items-center bg-white px-5 py-3.5 border-[1px] border-gray-100 w-full h-[68px]">
+      <ToggleChatTipsButton isOpen={isOpen} setIsOpen={setIsOpen} />
+      <MessageInput value={value} onChange={handleChange} />
+      <img
+        className="ml-4"
+        src={value ? "/icon/submit_action.svg" : "/icon/submit_disabled.svg"}
+        alt="메시지 제출"
+        width={40}
+        height={40}
+      />
+    </div>
+  );
+};
+
+export default ChatAction;