From 52840d17f385627dc3b7600fb5a750f1c5632e3c Mon Sep 17 00:00:00 2001
From: Lainari <108247620+Lainari@users.noreply.github.com>
Date: Thu, 20 Jun 2024 08:51:19 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20style:=20Modifying=20chat=20and?=
 =?UTF-8?q?=20post=20design?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Modify the layout to fit the announcement screen

Related Issue : #167
---
 .../[cId]/[mId]/components/chatComponents/page.tsx   | 12 +++++++-----
 .../manageSubComponents/ManageSubContainer.tsx       |  2 +-
 src/app/classes/[cId]/components/main/Post.tsx       |  2 +-
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/app/classes/[cId]/[mId]/components/chatComponents/page.tsx b/src/app/classes/[cId]/[mId]/components/chatComponents/page.tsx
index bf7b131..b3fdf7d 100644
--- a/src/app/classes/[cId]/[mId]/components/chatComponents/page.tsx
+++ b/src/app/classes/[cId]/[mId]/components/chatComponents/page.tsx
@@ -21,7 +21,7 @@ const ShowMain = () => {
   const [chatUsers, setChatUsers] = useState<{[key: string]: User}>({});
   const params = useParams();
   const getClassId = Number(params.cId);
-  const getScheduleId = 14;
+  const getScheduleId = 19;
   const messagesEndRef = useRef<HTMLDivElement>(null);
 
   const handleGetMessages = () => {
@@ -101,10 +101,10 @@ const ShowMain = () => {
   }, [getScheduleId]);
 
   return (
-    <div className="flex justify-center mt-10">
-      <div className="w-full max-w-md">
-        <div className="w-full mt-2">
-          <div className="border-4 rounded-lg border-gray-500 p-2 h-[550px] overflow-auto">
+    <div className="flex h-full flex-col justify-between">
+      <div className="w-full h-full overflow-auto">
+        <div className="w-full h-full mt-2">
+          <div className="border-4 rounded-lg border-gray-500 p-2 h-full overflow-auto">
             <p className="text-center inline-block px-4 py-2 text-sm text-white bg-violet-300 rounded-lg w-full">
               최상단 채팅 내용입니다
             </p>
@@ -162,6 +162,8 @@ const ShowMain = () => {
             <div ref={messagesEndRef} />
           </div>
         </div>
+      </div>
+      <div>
         <ChatInput setMsg={setMessage} />
       </div>
     </div>
diff --git a/src/app/classes/[cId]/[mId]/components/manageSubComponents/ManageSubContainer.tsx b/src/app/classes/[cId]/[mId]/components/manageSubComponents/ManageSubContainer.tsx
index 7ba513c..5b7ada5 100644
--- a/src/app/classes/[cId]/[mId]/components/manageSubComponents/ManageSubContainer.tsx
+++ b/src/app/classes/[cId]/[mId]/components/manageSubComponents/ManageSubContainer.tsx
@@ -26,7 +26,7 @@ const ManageSubContainer: React.FC = () => {
         {showMain ? '💬' : '💬'}
       </button>
       {showMain && (
-        <div className="fixed top-0 right-0 w-96 h-full bg-white shadow-lg z-10">
+        <div className="fixed bottom-0 right-0 w-96 h-full bg-white shadow-lg z-10">
           <ShowMain />
         </div>
       )}
diff --git a/src/app/classes/[cId]/components/main/Post.tsx b/src/app/classes/[cId]/components/main/Post.tsx
index 7acaeed..f47c63e 100644
--- a/src/app/classes/[cId]/components/main/Post.tsx
+++ b/src/app/classes/[cId]/components/main/Post.tsx
@@ -113,7 +113,7 @@ const Post = ({
           {classPosts.map((post, index) =>
             !post.IsAnnounced ? (
               <div
-                className="flex justify-center items-center w-full md:w-1/3"
+                className="flex items-center w-full"
                 key={post.ID}
                 onClick={async (event: React.MouseEvent) => {
                   event.stopPropagation();