From bc0e446a76e9bcdf72eda8f212e5c0269ce0ffcb Mon Sep 17 00:00:00 2001
From: Moon Dahyun <dahyun723@ajou.ac.kr>
Date: Tue, 17 Dec 2024 18:48:22 +0900
Subject: [PATCH] =?UTF-8?q?feat/#492=20:=20=EC=A0=84=EC=B2=B4=EC=A0=81=20?=
 =?UTF-8?q?=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/groupFeed/GroupFeed.tsx | 54 +++++++++++++++++++++++--------
 1 file changed, 41 insertions(+), 13 deletions(-)

diff --git a/src/pages/groupFeed/GroupFeed.tsx b/src/pages/groupFeed/GroupFeed.tsx
index 97a79926..0ee26adf 100644
--- a/src/pages/groupFeed/GroupFeed.tsx
+++ b/src/pages/groupFeed/GroupFeed.tsx
@@ -24,6 +24,9 @@ import {
   useGroupInfo,
   useTopicList,
 } from './hooks/queries';
+import { MOBILE_MEDIA_QUERY } from '../../styles/mediaQuery';
+import Responsive from '../../components/commons/Responsive/Responsive';
+import GroupMobileInfo from './components/GroupMobileInfo';
 
 const GroupFeed = () => {
   const { groupId } = useParams();
@@ -86,18 +89,33 @@ const GroupFeed = () => {
       <GroupFeedThumnail imageUrl={infoResponse?.imageUrl} />
       <Spacing marginBottom="6" />
       <GroupInfoWrapper>
-        {infoResponse && (
-          <GroupSideHeader
-            groupInfoData={infoResponse}
-            isMember={isMember}
-            isOwner={isOwner}
-            setShowEditProfileModal={setShowEditProfileModal}
-            writerName={writerName}
-          />
-        )}
+        <Responsive only="desktop">
+          {infoResponse && (
+            <GroupSideHeader
+              groupInfoData={infoResponse}
+              isMember={isMember}
+              isOwner={isOwner}
+              setShowEditProfileModal={setShowEditProfileModal}
+              writerName={writerName}
+            />
+          )}
+        </Responsive>
         <GroupInfo>
           <GroupTodayWriteStyle todayInfo={todayInfo} isMember={isMember} groupId={groupId} />
+          <Responsive only="mobile">
+            {infoResponse && (
+              <GroupMobileInfo
+                groupInfoData={infoResponse}
+                isMember={isMember}
+                isOwner={isOwner}
+                setShowEditProfileModal={setShowEditProfileModal}
+                writerName={writerName}
+              />
+            )}
+            <Spacing marginBottom="8" />
+          </Responsive>
           <Spacing marginBottom="6.4" />
+
           <GroupCuriousTitle
             mainText="우리 모임에서 궁금한 글쓴이에요"
             subText="매주 월요일마다 업데이트 됩니다"
@@ -136,7 +154,6 @@ export default GroupFeed;
 
 const GroupFeedWrapper = styled.div`
   width: 100%;
-  height: 100vh;
 
   background-color: ${({ theme }) => theme.colors.backGroundGray};
 `;
@@ -146,19 +163,30 @@ const GroupFeedThumnail = styled.div<{ imageUrl: string | undefined }>`
 
   background-image: ${({ imageUrl }) => `url(${imageUrl || GroupThumbnailImgIc})`};
   background-size: cover;
+
+  @media ${MOBILE_MEDIA_QUERY} {
+    height: 18rem;
+  }
 `;
 const GroupInfoWrapper = styled.div`
   display: flex;
   gap: 3.9rem;
   justify-content: center;
-  padding-right: 16.5rem;
-  padding-left: 16.5rem;
+  padding: 0 16.5rem;
+
+  @media ${MOBILE_MEDIA_QUERY} {
+    padding: 0 2rem;
+  }
 `;
 
 const GroupInfo = styled.div`
   display: flex;
   flex-direction: column;
-  width: 72rem;
+  justify-content: center;
+
+  @media ${MOBILE_MEDIA_QUERY} {
+    width: 100%;
+  }
 `;
 
 const GroupFloatingBtnIcon = styled(GroupFloatingBtnIc)`