Feature/#194 - 채팅 UI 구현 (#195)

packages/frontend/src/pages/stock-detail/ChatPanel.tsx

@@ -1,11 +1,16 @@
 import { TextArea } from './components';
+import DownArrow from '@/assets/down-arrow.svg?react';
 
 export const ChatPanel = () => {
   return (
-    <article className="flex flex-col items-center gap-5 rounded-md bg-white p-7">
+    <article className="flex flex-col gap-5 rounded-md bg-white p-7">
       <h2 className="display-medium20 text-center">채팅</h2>
       <TextArea />
-      <hr className="bg-light-gray h-px w-full divide-y border-0"></hr>
+      <div className="border-light-gray flex items-center justify-end gap-1 border-b-2 pb-2">
+        <p className="display-medium12 text-dark-gray">최신순</p>
+        <DownArrow className="cursor-pointer" />
+      </div>
+      <section className="flex flex-col gap-5"></section>
     </article>
   );
 };

packages/frontend/src/pages/stock-detail/components/ChatMessage.tsx

@@ -0,0 +1,24 @@
+import Like from '@/assets/like.svg?react';
+
+interface ChatMessageProps {
+  name: string;
+  contents: string;
+  like: number;
+}
+
+export const ChatMessage = ({ name, contents, like }: ChatMessageProps) => {
+  return (
+    <div className="flex">
+      <p className="display-bold12 text-dark-gray mr-3 w-12 flex-shrink-0">
+        {name}
+      </p>
+      <div>
+        <p className="display-medium12 text-dark-gray">{contents}</p>
+        <div className="flex items-center gap-1">
+          <Like className="fill-gray hover:fill-orange cursor-pointer" />
+          <span className="display-medium12 text-gray">{like}</span>
+        </div>
+      </div>
+    </div>
+  );
+};