Feat: 채팅 팝업 모바일 반응형 디자인 적용

eunji-0623 · Jul 30, 2024 · 2340345 · 2340345
1 parent 3656f37
commit 2340345
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 18 deletions.
diff --git a/components/ActivityDetails/ActivityDetails.tsx b/components/ActivityDetails/ActivityDetails.tsx
@@ -164,7 +164,7 @@ export default function ActivityDetails({ id }: ActivityDetailsProps) {
               </div>
             </div>
           </div>
-          <div className="flex items-center t:items-center m:items-end">
+          <div className="flex items-center t:items-center m:items-center">
             <div className="flex gap-[12px]">
               {!isAuthor && (
                 <SendChat

diff --git a/components/Chat/SendChat.tsx b/components/Chat/SendChat.tsx
@@ -41,22 +41,13 @@ function SendChat({ receiver, activityId }: SendChatProps) {
 
   return (
     <>
-      <button type="button" onClick={handleClick}>
-        {isDarkMode ? (
-          <Image
-            src="/icon/live_help_gray.svg"
-            alt="채팅 아이콘"
-            width={34}
-            height={34}
-          />
-        ) : (
-          <Image
-            src="/icon/live_help.svg"
-            alt="채팅 아이콘"
-            width={34}
-            height={34}
-          />
-        )}
+      <button type="button" onClick={handleClick} className="w-[34px] h-[34px]">
+        <Image
+          src={isDarkMode ? '/icon/live_help_gray.svg' : '/icon/live_help.svg'}
+          alt="채팅 아이콘"
+          width={34}
+          height={34}
+        />
       </button>
       {isPopupOpen && (
         <ChatPopup closePopup={closePopup} activityId={activityId} />

diff --git a/components/Popup/ChatPopup.tsx b/components/Popup/ChatPopup.tsx
@@ -55,7 +55,7 @@ function ChatPopup({
   }, []);
 
   return (
-    <div className="flex items-center justify-center fixed w-[400px] bottom-[30px] right-[30px] z-50">
+    <div className="flex items-center justify-center fixed w-[400px] bottom-[30px] right-[30px] z-50 m:inset-0 m:w-full m:bg-black m:bg-opacity-70">
       <div className="flex flex-col bg-var-gray2 w-full rounded-[20px] dark:bg-var-dark2">
         <div className="flex justify-between pt-[7px] pb-[3px] px-[20px] items-center bg-var-gray3 rounded-t-[20px] dark:bg-var-dark3">
           <p>문의 채팅</p>