[FE] feat: add a board to display saved chat and transcribed text fro…

…m stt [FE] feat: add a board to display saved chat and transcribed text from stt #114
jungle-6-3 · Nov 10, 2024 · de2e08f · de2e08f
2 parents 4c7ca9f + 20a4770
commit de2e08f
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 40 deletions.
diff --git a/src/components/Conversation/Save/Chatting.tsx b/src/components/Conversation/Save/Chatting.tsx
@@ -1,3 +1,5 @@
+import { cn } from "@/lib/utils";
+
 interface ConversationSaveChatViewerProps {
   chats: {
     date: string;
@@ -17,44 +19,59 @@ const ConversationSaveChatViewer = ({
   chats,
   voice,
 }: ConversationSaveChatViewerProps) => {
+  const chatting = [
+    ...chats.map((c) => ({ ...c, status: "chat" })),
+    ...voice.map((v) => ({ ...v, status: "voice" })),
+  ];
+
+  const sortedChatting = [...chatting].sort((a, b) => {
+    return new Date(a.date).getTime() - new Date(b.date).getTime();
+  });
+
+  const chattingData = sortedChatting.map((chat) => ({
+    ...chat,
+    date: new Date(chat.date).toLocaleString("ko-KR", {
+      timeZone: "Asia/Seoul",
+    }),
+  }));
+
   return (
-    <div className="flex h-screen">
-      <div className="w-1/2">
-        <div className="h-[calc(100vh-16rem)] w-40 py-2">
-          <div>
-            {chats.map((chat) => {
-              return (
-                <div key={chat.date} className="flex gap-4 py-1">
-                  <div className="flex w-1/12 items-center justify-center rounded border">
-                    {chat.name}
-                  </div>
-                  <div className="w-11/12 rounded border px-4 py-1">
-                    {chat.message}
-                    <div>{chat.date}</div>
-                  </div>
-                </div>
-              );
-            })}
-          </div>
+    <div className="flex">
+      <div className="w-full">
+        <div className="flex w-full items-center justify-center space-x-40">
+          <p className="mb-4 text-center text-2xl font-bold">Chatting</p>
+          <p className="mb-4 text-center text-2xl font-bold">Voice Text</p>
         </div>
-      </div>
-      <div className="w-1/2">
         <div className="h-[calc(100vh-16rem)] py-2">
-          <div>
-            {voice.map((voice) => {
-              return (
-                <div key={voice.date} className="flex gap-4 py-1">
-                  <div className="flex w-1/12 items-center justify-center rounded border">
-                    {voice.name}
-                  </div>
-                  <div className="w-11/12 rounded border px-4 py-1">
-                    {voice.message}
-                    <div>{voice.date}</div>
-                  </div>
+          {chattingData.map((chat, index) => (
+            <div
+              key={`${chat.date}-${index}`}
+              className={cn(
+                "mx-auto mb-4 flex w-full max-w-[90%] sm:max-w-[250px]",
+                chat.status === "voice"
+                  ? "translate-x-1/2"
+                  : "-translate-x-1/2",
+              )}
+            >
+              <div className="flex p-3">
+                <div
+                  className={cn(
+                    "mr-3 flex h-8 w-8 items-center justify-center rounded-full font-bold",
+                    chat.name === chats[0].name
+                      ? "bg-gray-300 text-black"
+                      : "bg-black text-white",
+                  )}
+                >
+                  {chat.name[0]}
+                </div>
+                <div className="flex-1 text-sm text-gray-700">
+                  <p className="font-semibold text-gray-900">{chat.name}</p>
+                  <p className="truncate">{chat.message}</p>
+                  <p className="truncate text-xs">{chat.date}</p>
                 </div>
-              );
-            })}
-          </div>
+              </div>
+            </div>
+          ))}
         </div>
       </div>
     </div>

diff --git a/src/components/Conversation/useConversationChatting.tsx b/src/components/Conversation/useConversationChatting.tsx
@@ -6,6 +6,7 @@ import { useCommunicationStore } from "@/stores/communicationState.store";
 import { SocketManager } from "@/lib/socketManager";
 import { PreviewChatting } from "@/components/Conversation/PreviewChatting";
 import useChattingScrollEvent from "@/hooks/Conversation/useChattingScrollEvent";
+import { cn } from "@/lib/utils";
 
 export default function ConversationChatting() {
   const [message, setMessage] = useState("");
@@ -81,16 +82,18 @@ export default function ConversationChatting() {
           {messages.map((msg, index) => (
             <li
               key={index}
-              className={`flex items-end px-2 ${
-                msg.name === "나" ? "justify-end" : "justify-start"
-              } my-1`}
+              className={cn(
+                "my-1 flex items-end px-2",
+                msg.name === "나" ? "justify-end" : "justify-start",
+              )}
             >
               <div
-                className={`max-w-xs rounded-lg p-2 ${
+                className={cn(
+                  "max-w-xs rounded-lg p-2",
                   msg.name === "나"
                     ? "bg-blue-500 text-white"
-                    : "bg-gray-300 text-black"
-                }`}
+                    : "bg-gray-300 text-black",
+                )}
               >
                 <span className="text-xs font-bold">{msg.name}</span>
                 <p className="text-sm">{msg.message}</p>