design(#63): 채팅방 높이 지정

Help-M-Ssaem · Sep 4, 2024 · 53814a4 · 53814a4
1 parent 371ee25
commit 53814a4
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/src/app/chatting/page.tsx b/src/app/chatting/page.tsx
@@ -185,12 +185,12 @@ const Chatting = () => {
   }, [messages])
 
   return (
-    <div className="w-full-vw ml-half-vw bg-main3 py-10">
-      <div className="flex h-screen-40 border-7.5 mx-2% sm:mx-6% md:mx-13% bg-white rounded-7.5 shadow-custom-light">
+    <div className="w-full-vw h-screen ml-half-vw bg-main3 py-10">
+      <div className="flex h-full border-7.5 mx-2% sm:mx-6% md:mx-13% bg-white rounded-7.5 shadow-custom-light">
         {/* 채팅 목록 리스트 */}
         <div
-          className="border-r flex flex-col overflow-y-auto scrollbar-hide"
-          style={{ maxHeight: '400px' }}
+          className="border-r flex flex-col overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300"
+          style={{ maxHeight: '100%' }}
         >
           <div className="flex items-center p-10 border-b text-title3 font-bold h-27.5">
             채팅 목록
@@ -230,9 +230,9 @@ const Chatting = () => {
 
           {/* 메시지 리스트가 일정 높이를 넘으면 스크롤 */}
           <div
-            ref={messageListRef} // 메시지 리스트에 ref 추가
-            className="flex-1 overflow-y-auto box-border p-2"
-            style={{ maxHeight: '400px' }}
+            ref={messageListRef}
+            className="flex-1 overflow-y-auto p-2 scrollbar-thin scrollbar-thumb-gray-300"
+            style={{ maxHeight: '100%' }}
           >
             {messages.length > 0 ? (
               messages.map((msg, index) => {

diff --git a/src/components/chatting/ChattingProfile.tsx b/src/components/chatting/ChattingProfile.tsx
@@ -20,7 +20,9 @@ const ChattingProfile = ({
   current,
 }: ChattingProfileProps) => {
   const truncatedMessage =
-    lastMessage.length > 10 ? `${lastMessage.slice(0, 10)}...` : lastMessage
+    lastMessage && lastMessage.length > 10
+      ? `${lastMessage.slice(0, 10)}...`
+      : lastMessage
 
   return (
     <div

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -154,6 +154,9 @@ const config: Config = {
         '80': pxToRem(320),
         '160': pxToRem(640),
       },
+      maxHeight: {
+        '100': pxToRem(400),
+      },
       boxShadow: {
         'custom-light': '0 4px 10px rgba(0, 0, 0, 0.10)',
       },