+
+
+ + 채팅 +
+ +
+ {HEADER_ACTIONS.map((action) => (
+
+ ))}
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/features/chat/components/chat-list/CountBadge.tsx b/src/features/chat/components/chat-list/CountBadge.tsx
new file mode 100644
index 00000000..595a3897
--- /dev/null
+++ b/src/features/chat/components/chat-list/CountBadge.tsx
@@ -0,0 +1,18 @@
+type CountBadgeProps = {
+ label: string;
+ className?: string;
+};
+
+export default function CountBadge({ label, className = "" }: CountBadgeProps) {
+ return (
+
+
+
+ {label}
+
+
+
+ );
+}
diff --git a/src/features/chat/components/chat-room/ChatInputBar.tsx b/src/features/chat/components/chat-room/ChatInputBar.tsx
new file mode 100644
index 00000000..dc93d39b
--- /dev/null
+++ b/src/features/chat/components/chat-room/ChatInputBar.tsx
@@ -0,0 +1,142 @@
+import { useEffect, useRef, useState } from "react";
+import type { ChangeEvent } from "react";
+import { compressImageFiles } from "@/features/chat/utils/imageCompression";
+import { isHangulJamoOnlyText } from "@/features/chat/utils/hangulJamo";
+import PlusIconSvg from "@/assets/icons/ic_Plus.svg";
+import EmojiIconSvg from "@/assets/icons/ic_Emoji.svg";
+import HashIconSvg from "@/assets/icons/ic_Hash.svg";
+import SendIconSvg from "@/assets/icons/ic_Send.svg";
+
+type ChatInputBarProps = {
+ onSendText: (text: string) => void;
+ onSendImages: (imageUrls: string[]) => void;
+};
+
+const TEXTAREA_MAX_HEIGHT = 157;
+
+export default function ChatInputBar({
+ onSendText,
+ onSendImages,
+}: ChatInputBarProps) {
+ const [input, setInput] = useState("");
+ const [isUploading, setIsUploading] = useState(false);
+ const fileInputRef = useRef
+
+
+
+
+
+
+
+
+
+
+
+
+