[#82] Modify: 채팅 레이아웃 v2 적용 (#99)

zzalmyu · Mar 5, 2024 · d2d19af · d2d19af
1 parent 39fbba5
commit d2d19af
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 81 deletions.
diff --git a/src/components/common/Chat/ChatSection.tsx b/src/components/common/Chat/ChatSection.tsx
diff --git a/src/components/common/Chat/Message.tsx b/src/components/common/Chat/Message.tsx
@@ -10,7 +10,7 @@ const Message = ({ src, isMyMessage }: Props) => {
     <div
       className={cn(
         isMyMessage ? "self-end" : "self-start",
-        "mx-15pxr my-5pxr w-1/3 rounded-xl bg-surface1 p-5pxr",
+        "mx-4 my-2 w-1/3 rounded-xl bg-surface1 p-5pxr",
       )}
     >
       <ZzalCard src={src} alt="짤 메세지" width={"full"} />

diff --git a/src/components/common/Chat/index.tsx b/src/components/common/Chat/index.tsx
@@ -1,37 +1,103 @@
-import { useRef } from "react";
-import { useAtomValue } from "jotai";
-import { getSessionStorage, setSessionStorage } from "@/utils/sessionStorage";
+import { Fragment, useEffect, useRef } from "react";
+import { useAtom } from "jotai";
+import { X } from "lucide-react";
+import { getSessionStorage } from "@/utils/sessionStorage";
 import { cn } from "@/utils/tailwind";
-import ChatSection from "./ChatSection";
-import ChatPeek from "./ChatPeek";
+import MessagePeek from "./MessagePeek";
+import Message from "./Message";
 import { $isChatOpen } from "@/store/chat";
 
+// TODO: [2024.02.23] 더미 데이터 제거 및 WS 연결
+const DUMMY_MESSAGES = [
+  {
+    src: "https://i.pinimg.com/564x/93/66/aa/9366aa85149388c2e1f09bbf9d79b60e.jpg",
+    isMyMessage: false,
+  },
+  {
+    src: "https://i.pinimg.com/564x/dc/77/a8/dc77a8b6e9dd0a4a17470a0e2f85cd9f.jpg",
+    isMyMessage: false,
+  },
+  {
+    src: "https://i.pinimg.com/564x/bb/26/c6/bb26c6670b60beff3d81ef74771f2c69.jpg",
+    isMyMessage: true,
+  },
+  {
+    src: "https://jjalbang.today/files/jjalbox/2019/01/20190120_5c435f3d5c0d4.jpg",
+    isMyMessage: false,
+  },
+  {
+    src: "https://jjalbang.today/files/jjalbox/2021/06/20210608_60bf89513e1ea.jpg",
+    isMyMessage: false,
+  },
+];
+
 const Chat = () => {
-  const isChatOpen = useAtomValue($isChatOpen);
+  const [isChatOpen, setIsChatOpen] = useAtom($isChatOpen);
   const chatRoomRef = useRef<HTMLDivElement>(null);
 
-  const handleScroll = () => {
-    if (!chatRoomRef.current) return;
-    setSessionStorage("sidebar-scroll", chatRoomRef.current?.scrollTop);
+  const handleClickChatCloseButton = () => {
+    setIsChatOpen(false);
   };
-  const setScrollPosition = () => {
-    if (!chatRoomRef.current) return;
-    const top = getSessionStorage("sidebar-scroll");
-    if (top !== null) {
-      chatRoomRef.current.scrollTop = parseInt(top, 10);
-    }
+  const handleClickChatToggleButton = () => {
+    setIsChatOpen((prev) => !prev);
   };
 
+  useEffect(() => {
+    const setScrollPosition = () => {
+      if (!chatRoomRef.current) return;
+      const top = getSessionStorage("chat-room-scroll");
+      if (top !== null) {
+        chatRoomRef.current.scrollTop = Number(top);
+      }
+    };
+
+    setScrollPosition();
+  }, []);
+
   return (
-    <div
-      className={cn(
-        "absolute bottom-0 left-0 flex h-3/5 w-full flex-col transition-transform sm:static sm:h-full sm:w-auto sm:translate-y-0 sm:flex-row",
-        isChatOpen ? "-translate-y-40pxr" : "translate-y-[calc(100%-40px)]",
-      )}
-    >
-      <ChatPeek handleScroll={handleScroll} />
-      {isChatOpen && <ChatSection ref={chatRoomRef} setScrollPosition={setScrollPosition} />}
-    </div>
+    <Fragment>
+      <div
+        className={cn(
+          "absolute top-0 z-10 flex h-60pxr items-center justify-between border border-border bg-background px-4 transition-[width] duration-500 ease-in-out",
+          isChatOpen ? "w-[67%]" : "w-full",
+        )}
+      >
+        <div className="text-xl font-bold text-text-primary">TITLE</div>
+        <button
+          className="btn btn-ghost btn-sm rounded-full outline outline-1 outline-border"
+          onClick={handleClickChatToggleButton}
+        >
+          {isChatOpen && "채팅방 숨기기"}
+          {!isChatOpen && "채팅방 보기"}
+        </button>
+      </div>
+      <div
+        className={cn(
+          "absolute right-0 h-full w-[33%] transition-[opacity_transform] duration-500 ease-in-out",
+          isChatOpen ? "opacity-100" : "translate-x-full opacity-0",
+        )}
+      >
+        <div className="sticky left-0 right-0 top-0 flex h-60pxr flex-1 items-center justify-between border-y border-border px-4">
+          <div className="text-xl font-bold text-text-primary">고독한 채팅방</div>
+          <button className="btn btn-circle btn-ghost btn-sm" onClick={handleClickChatCloseButton}>
+            <X aria-label="채팅방 숨기기" />
+          </button>
+        </div>
+        <section className="relative h-full w-full">
+          <div
+            ref={chatRoomRef}
+            className="relative h-full w-full overflow-y-auto rounded-16pxr bg-background pb-15pxr"
+          >
+            <div className="flex flex-1 flex-col ">
+              {DUMMY_MESSAGES.map(({ src, isMyMessage }, index) => (
+                <Message key={`${index}-${src}`} src={src} isMyMessage={isMyMessage} />
+              ))}
+            </div>
+          </div>
+          <MessagePeek />
+        </section>
+      </div>
+    </Fragment>
   );
 };
 

diff --git a/src/routes/_layout-with-chat.tsx b/src/routes/_layout-with-chat.tsx
@@ -1,14 +1,25 @@
 import { Outlet, createFileRoute } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/router-devtools";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { useAtomValue } from "jotai";
+import { cn } from "@/utils/tailwind";
 import Chat from "@/components/common/Chat";
+import { $isChatOpen } from "@/store/chat";
 
 const LayoutWithChat = () => {
+  const isChatOpen = useAtomValue($isChatOpen);
+
   return (
-    <div className="relative flex h-full flex-col overflow-hidden sm:flex-row">
-      <div className="flex-1 overflow-auto">
+    <div className="relative flex h-full w-full overflow-hidden">
+      <div
+        className={cn(
+          "mt-60pxr h-[calc(100%-3.75rem)] overflow-auto border-r border-border transition-[width] duration-500 ease-in-out",
+          isChatOpen ? "w-[67%]" : "w-full",
+        )}
+      >
         <Outlet />
       </div>
+
       <Chat />
       <ReactQueryDevtools buttonPosition="top-right" />
       <TanStackRouterDevtools position="bottom-right" />

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -41,14 +41,14 @@ export default {
         white: "#FFFFFF",
         black: "#000000",
         neutral: "#535353",
+        border: "#807F7F",
         primary: "#246FFF",
         secondary: "var(--secondary)",
         "text-primary": "rgb(var(--text-primary) / <alpha-value>)",
         "text-secondary": "var(--text-secondary)",
         surface1: "var(--surface1)",
         surface2: "var(--surface2)",
         background: "var(--background)",
-        border: "var(--border)",
         card: "var(--card)",
         tooltip: "var(--tooltip)",
         toolbar: "var(--toolbar)",
@@ -70,7 +70,6 @@ export default {
           "--surface1": "#78C6FF",
           "--surface2": "#FFB015",
           "--background": "#FFFFFF",
-          "--border": "#000000",
           "--card": "#D9D9D9",
           "--tooltip": "#535353",
           "--toolbar": "#858383",
@@ -84,7 +83,6 @@ export default {
           "--surface1": "#552AFF",
           "--surface2": "#B2B9FF",
           "--background": "#000D27",
-          "--border": "#FFFFFF",
           "--card": "#00194A",
           "--tooltip": "#11419E",
           "--toolbar": "#002873",