Merge pull request #20 from MBTips/feature/MessageInput-컴포넌트-개발

feat: ChatAction 컴포넌트 개발

Author: junjeeong

public/icon/close.svg

@@ -1,7 +1,5 @@
-import Alert from "./components/Alert";
-
 function App() {
-  return <Alert />;
+  return <></>;
 }
 
 export default App;

public/icon/plus.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;

public/icon/plus_button.svg

@@ -0,0 +1,21 @@
+interface ToggleChatTipsButtonProps {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+}
+
+const ToggleChatTipsButton = ({
+  isOpen,
+  setIsOpen
+}: ToggleChatTipsButtonProps) => {
+  return (
+    <img
+      src={isOpen ? "/icon/close.svg" : "/icon/plus.svg"}
+      onClick={() => setIsOpen(!isOpen)}
+      alt="토글 메뉴 버튼"
+      width={14}
+      height={14}
+    />
+  );
+};
+
+export default ToggleChatTipsButton;

public/icon/submit_action.svg

@@ -0,0 +1,19 @@
+import { ChangeEvent } from "react";
+
+interface MessageInputProps {
+  value: string;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+}
+
+const MessageInput = ({ value, onChange }: MessageInputProps) => {
+  return (
+    <input
+      className="bg-gray-50 ml-2.5 px-4 py-2.5 rounded-[40px] w-[257px] h-[44px] font-medium text-2lg text-gray-900 placeholder:text-gray-600"
+      placeholder="메시지를 입력해주세요."
+      value={value}
+      onChange={onChange}
+    />
+  );
+};
+
+export default MessageInput;

public/icon/submit_disabled.svg

@@ -61,6 +61,10 @@ body {
   min-height: 100vh;
 }
 
+input:focus {
+  outline: none;
+}
+
 @keyframes pulse-custom {
 
   0%,