design: 채팅textarea #23

prgrms-web-devcourse-final-project · Feb 17, 2025 · 6da53a2 · 6da53a2
1 parent 44a9217
commit 6da53a2
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 16 deletions.
diff --git a/src/assets/icons/sendMessage.svg b/src/assets/icons/sendMessage.svg
diff --git a/src/components/MeetingRoom/MeetingRoomChatBox.tsx b/src/components/MeetingRoom/MeetingRoomChatBox.tsx
@@ -0,0 +1,74 @@
+import Button from "../common/Button";
+import SendIcon from "../../assets/icons/sendMessage.svg";
+import { useEffect, useRef, useState } from "react";
+const MeetingRoomChatBox = () => {
+  const [text, setText] = useState("");
+  const textAreaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    if (textAreaRef.current) {
+      textAreaRef.current.style.height = "27px";
+    }
+  }, []);
+
+  const handleMessage = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newText = e.target.value;
+    setText(newText);
+
+    if (textAreaRef.current) {
+      textAreaRef.current.style.height = "27px";
+      let newHeight = textAreaRef.current.scrollHeight;
+
+      if (newHeight > 120) {
+        newHeight = 120;
+        textAreaRef.current.style.overflowY = "auto";
+      } else {
+        textAreaRef.current.style.overflowY = "hidden";
+      }
+
+      textAreaRef.current.style.height = `${newHeight}px`;
+    }
+  };
+
+  return (
+    <div className="flex flex-col p-[30px] gap-[10px] relative h-[calc(100vh-60px)]">
+      <div className="flex justify-between">
+        <span className="font-bold">프로젝트 명</span>
+        <div className="flex gap-[10px]">
+          <Button
+            text="회의록"
+            size="sm"
+            css="border-main-green01 bg-white text-main-green01 text-[14px] font-bold"
+          />
+          <Button
+            text="미팅룸 나가기"
+            size="sm"
+            css="border-header-red bg-header-red/70 text-white text-[14px] font-bold"
+          />
+        </div>
+      </div>
+      <div className="flex-grow border-main-green01 bg-white border-[1px] rounded-[10px] overflow-y-auto scrollbar-none ">
+        채팅내용
+      </div>
+      <div className="w-full h-auto flex bg-main-green01 rounded-[10px] pr-[15px] items-end">
+        <textarea
+          ref={textAreaRef}
+          value={text}
+          onChange={handleMessage}
+          className="ml-[15px] mr-[10px] w-full my-[5px] rounded-[5px] bg-white resize-none px-[10px] pt-[5px] pb-[8px] text-[14px] focus:outline-none overflow-y-auto leading-[17px] placeholder:text-[14px] max-h-[120px] min-h-[27px]"
+          style={{
+            height: "27px",
+            minHeight: "27px",
+            maxHeight: "120px",
+          }}
+          placeholder="채팅 내용을 입력해주세요"
+        ></textarea>
+        <button>
+          <img src={SendIcon} alt="전송버튼" className="cursor-pointer" />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default MeetingRoomChatBox;
diff --git a/src/components/MeetingRoom/MeetingRoomProjectBox.tsx b/src/components/MeetingRoom/MeetingRoomProjectBox.tsx
@@ -2,24 +2,24 @@ const MeetingRoomProjectBox = () => {
   return (
     <div className="flex">
       {/* 프로젝트 넘버 */}
-      <div className="w-[80px] flex ">
-        <span className="text-[50px] text-main-green02 font-notoTC mt-0">
-          10
-        </span>
-      </div>
       <div
         className="bg-white border border-[#CAD2CB] w-full h-[70px] flex 
-          gap-5 items-center px-5 font-bold "
+          gap-5 items-center font-bold "
       >
-        <div className="flex justify-between items-center w-full px-5">
-          {/* 프로젝트 명, 미팅룸 명 */}
-          <div className="flex flex-col gap-[10px]">
-            <span className="font-bold">프로젝트 명</span>
-            <span className="font-bold text-[18px]">미팅룸 명</span>
+        <div className="flex items-center w-full">
+          <div className="w-[80px] px-[11.5px]">
+            <span className="text-[50px] text-main-green02 font-notoTC mt-0">
+              10
+            </span>
           </div>
-          <div className="flex flex-col items-end">
-            <span className="font-bold text-[14px]">새로운 메시지</span>
-            <span className="font-bold text-[14px]">+99</span>
+          <div className="flex-grow flex justify-between px-[20px]">
+            <div className="self-center">
+              <span className="font-bold">프로젝트 명</span>
+            </div>
+            <div className="flex flex-col items-end text-header-red">
+              <span className="font-bold text-[14px]">새로운 메시지</span>
+              <span className="font-bold text-[14px]">+99</span>
+            </div>
           </div>
         </div>
       </div>

diff --git a/src/index.css b/src/index.css
@@ -30,4 +30,6 @@
 
 .font-notoTC {
     font-family: var(--font-notoTC);
+    font-weight: 400;
+  font-style: normal;
   }
diff --git a/src/pages/MeetingRoom/MeetingRoom.tsx b/src/pages/MeetingRoom/MeetingRoom.tsx
@@ -1,4 +1,5 @@
 import OutProjectIcon from "../../assets/icons/outProjectDetail.svg";
+import MeetingRoomChatBox from "../../components/MeetingRoom/MeetingRoomChatBox";
 import MeetingRoomProjectBox from "../../components/MeetingRoom/MeetingRoomProjectBox";
 
 const MeetingRoom = () => {
@@ -18,11 +19,21 @@ const MeetingRoom = () => {
             <span className="text-main-green01 font-bold">My 프로젝트</span>
           </div>
         </div>
-        <div className="w-full h-full flex flex-col">
+        <div className="w-full h-full flex flex-col gap-[20px] overflow-y-auto scrollbar-none">
+          <MeetingRoomProjectBox />
+          <MeetingRoomProjectBox />
+          <MeetingRoomProjectBox />
+          <MeetingRoomProjectBox />
+          <MeetingRoomProjectBox />
+          <MeetingRoomProjectBox />
+          <MeetingRoomProjectBox />
+          <MeetingRoomProjectBox />
           <MeetingRoomProjectBox />
         </div>
       </div>
-      <div className="flex-[0.63] h-[682px] bg-white/60">미팅룸</div>
+      <div className="flex-[0.63] h-[682px] bg-white/60">
+        <MeetingRoomChatBox />
+      </div>
     </div>
   );
 };