💄 style: Modifying chat and post design

- Modify the layout to fit the announcement screen Related Issue : #167
YJU-OKURA · Jun 19, 2024 · 52840d1 · 52840d1
1 parent db75e95
commit 52840d1
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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();