feat/#492 : 전체적 반영

Mile-Writings · Dec 17, 2024 · bc0e446 · bc0e446
1 parent f0a0776
commit bc0e446
Showing 1 changed file with 41 additions and 13 deletions.
diff --git 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)`