글모임 개수 & 이미지 비율 수정 main merge

src/pages/admin/components/EditGroupInfo.tsx

@@ -21,6 +21,7 @@ import { INPUT_INFO_MESSAGE } from '../../createGroup/constants/inputInfoMsg';
 import { useGetGroupNameValidation } from '../../createGroup/hooks/queries';
 import { usePresignedUrl } from '../../postPage/hooks/queries';
 import { useFetchGroupInfo, usePutAdminGroupInfo } from '../hooks/queries';
+import Responsive from '../../../components/commons/Responsive/Responsive';
 
 const EditGroupInfo = () => {
   const [groupName, setGroupName] = useState('');
@@ -239,9 +240,15 @@ const EditGroupInfo = () => {
                 />
               </GroupImageLabel>
             )}
-            <GroupInputDesc>
-              *글모임 페이지 상단에 노출될 대표 이미지입니다. 1366*306px사이즈를 권장합니다.
-            </GroupInputDesc>
+            <Responsive only="desktop">
+              <GroupInputDesc>
+                * 글 모임 페이지 상단에 노출될 대표 이미지입니다. 1440*480(3:1) 사이즈를 권장합니다.
+              </GroupInputDesc>
+            </Responsive>
+            <Responsive only="mobile">
+              <GroupInputDesc>* 글 모임 페이지 상단에 노출될 대표 이미지입니다.</GroupInputDesc>
+              <GroupInputDesc>1440*480(3:1) 사이즈를 권장합니다.</GroupInputDesc>
+            </Responsive>
           </GroupInputWrapper>
         </WhiteInputWrapper>
         <WhiteInputWrapper isValid={true}>
@@ -516,11 +523,15 @@ const GroupImagePreview = styled.img<{ isImagePreview: boolean }>`
   position: absolute;
 
   width: 100%;
-  height: 20rem;
+  height: 25rem;
   object-fit: cover;
 
   cursor: ${({ isImagePreview }) => (isImagePreview ? 'default' : 'pointer')};
   border-radius: 8px;
+
+  @media ${MOBILE_MEDIA_QUERY} {
+    height: 25.5rem;
+  }
 `;
 
 const GroupImageLabel = styled.label`
@@ -535,12 +546,16 @@ const GroupImageWrapper = styled.div`
   align-items: center;
   justify-content: center;
   width: 100%;
-  height: 20rem;
+  height: 25rem;
 
   background-color: ${({ theme }) => theme.colors.gray10};
   cursor: pointer;
   border-radius: 8px;
 
+  @media ${MOBILE_MEDIA_QUERY} {
+    height: 25.5rem;
+  }
+
   &:hover {
     background-color: ${({ theme }) => theme.colors.lightViolet};
 

src/pages/createGroup/components/CreateGroupInfo.tsx

@@ -30,6 +30,7 @@ import { CurrentPageType } from '../types/stateType';
 import CreateGroupTopicModal from './CreateGroupTopicModal';
 import createGroupIlust from '/src/assets/images/createGroupIlust.png';
 import createGroupWebp from '/src/assets/webps/creategroup.webp';
+import Responsive from '../../../components/commons/Responsive/Responsive';
 
 type Setter<T> = (value: T) => void;
 interface CreateGroupInfoPropTypes {
@@ -288,9 +289,15 @@ const CreateGroupInfo = ({
               </GroupImageLabel>
             )}
 
-            <GroupInputDesc>
-              *글모임 페이지 상단에 노출될 대표 이미지입니다. 1366*306px사이즈를 권장합니다.
-            </GroupInputDesc>
+            <Responsive only="desktop">
+              <GroupInputDesc>
+                * 글 모임 페이지 상단에 노출될 대표 이미지입니다. 1440*480(3:1) 사이즈를 권장합니다.
+              </GroupInputDesc>
+            </Responsive>
+            <Responsive only="mobile">
+              <GroupInputDesc>* 글 모임 페이지 상단에 노출될 대표 이미지입니다.</GroupInputDesc>
+              <GroupInputDesc>1440*480(3:1) 사이즈를 권장합니다.</GroupInputDesc>
+            </Responsive>
           </GroupInputWrapper>
         </WhiteInputWrapper>
         <WhiteInputWrapper isValid={true}>
@@ -644,11 +651,15 @@ const GroupImagePreview = styled.img<{ isImagePreview: boolean }>`
   position: absolute;
 
   width: 100%;
-  height: 20rem;
+  height: 25rem;
   object-fit: cover;
 
   cursor: ${({ isImagePreview }) => (isImagePreview ? 'default' : 'pointer')};
   border-radius: 8px;
+
+  @media ${MOBILE_MEDIA_QUERY} {
+    height: 25.5rem;
+  }
 `;
 
 const CreateGroupImageUploadedIcon = styled(CreateGroupImageUploadedIc)`
@@ -710,12 +721,16 @@ const GroupImageWrapper = styled.div`
   align-items: center;
   justify-content: center;
   width: 100%;
-  height: 20rem;
+  height: 25rem;
 
   background-color: ${({ theme }) => theme.colors.gray10};
   cursor: pointer;
   border-radius: 8px;
 
+  @media ${MOBILE_MEDIA_QUERY} {
+    height: 25.5rem;
+  }
+
   &:hover {
     background-color: ${({ theme }) => theme.colors.lightViolet};
 

src/pages/groupFeed/GroupFeed.tsx

@@ -158,7 +158,7 @@ const GroupFeedWrapper = styled.div`
 
 const GroupFeedThumnail = styled.div<{ imageUrl: string | undefined }>`
   width: 100%;
-  height: 37rem;
+  height: 38.6rem;
   margin-top: 6.4rem;
   object-fit: cover;
 
@@ -167,7 +167,7 @@ const GroupFeedThumnail = styled.div<{ imageUrl: string | undefined }>`
 
   @media ${MOBILE_MEDIA_QUERY} {
     width: 100%;
-    height: 18rem;
+    height: 22.4rem;
     margin-top: 5.5rem;
   }
 `;

src/pages/groupFeed/components/CreateGroupBtn.tsx

@@ -2,10 +2,11 @@ import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { MakeGroupPlusBtn, MakeGroupPlusHoverBtn } from '../../../assets/svgs';
+import { CreateGroupBtnWrapper } from '../../../components/commons/HeaderButton';
 import { FullModal, FullModalBtn } from '../../../components/commons/modal/FullModal';
 import useModal from '../../../hooks/useModal';
+import { MAX_GROUP_COUNT } from '../constants/count';
 import { MODAL } from '../constants/modalContent';
-import { CreateGroupBtnWrapper } from '../../../components/commons/HeaderButton';
 
 interface groupCountProps {
   groupCount: number;
@@ -18,7 +19,7 @@ const CreateGroupBtn = ({ groupCount }: groupCountProps) => {
   const navigate = useNavigate();
 
   const handleCreateGroupBtn = () => {
-    if (groupCount < 5) {
+    if (groupCount < MAX_GROUP_COUNT) {
       navigate('/group/create');
     } else {
       handleShowModal();

src/pages/groupFeed/components/MyGroupDropDown.tsx

@@ -30,23 +30,23 @@ const MyGroupDropDown = ({ groupData }: CreateGroupBtnProps) => {
   return (
     <MyGroupDropDownWrapper ref={dropDownRef}>
       <MyGroupBtn onClick={handleOnClick}>내 글 모임</MyGroupBtn>
-      <MyGroupListLayout $isOpen={isOpen}>
-        {groupData?.length > 0 ? (
-          groupData.map(({ moimId, moimName }: Moim) => (
-            <GroupContentContainer
-              $isEmpty={false}
-              key={moimId}
-              onClick={() => handleRoutingGroupFeed(moimId)}
-            >
-              {moimName}
-            </GroupContentContainer>
-          ))
-        ) : (
-          <GroupContentContainer
-            $isEmpty={true}
-          >{`가입한 글 모임이\n 없습니다.`}</GroupContentContainer>
-        )}
-      </MyGroupListLayout>
+      <ListLayout $isOpen={isOpen}>
+        <MyGroupList $isOpen={isOpen}>
+          {groupData?.length > 0 ? (
+            groupData.map(({ moimId, moimName }: Moim) => (
+              <GroupItem
+                $isEmpty={false}
+                key={moimId}
+                onClick={() => handleRoutingGroupFeed(moimId)}
+              >
+                {moimName}
+              </GroupItem>
+            ))
+          ) : (
+            <GroupItem $isEmpty={true}>{`가입한 글 모임이\n 없습니다.`}</GroupItem>
+          )}
+        </MyGroupList>
+      </ListLayout>
     </MyGroupDropDownWrapper>
   );
 };
@@ -59,32 +59,53 @@ const MyGroupDropDownWrapper = styled.section`
   align-items: center;
 `;
 
-const MyGroupListLayout = styled.div<{ $isOpen: boolean }>`
+const ListLayout = styled.div<{ $isOpen: boolean }>`
   position: absolute;
   top: 6rem;
   display: ${({ $isOpen }) => ($isOpen ? 'flex' : 'none')};
-  flex-direction: column;
-  gap: 1rem;
-  align-items: flex-start;
-  padding: 1.2rem;
+  max-height: 22rem;
+  padding: 1.2rem 0.5rem 1.2rem 1.2rem;
 
   background-color: ${({ theme }) => theme.colors.white};
   box-shadow: 0 4px 8px 0 rgb(0 0 0 / 16%);
-  cursor: pointer;
   border: ${({ theme }) => theme.colors.grayViolet};
   border-radius: 0.8rem;
 `;
 
-const GroupContentContainer = styled.div<{ $isEmpty: boolean }>`
+const MyGroupList = styled.ul<{ $isOpen: boolean }>`
+  display: ${({ $isOpen }) => ($isOpen ? 'flex' : 'none')};
+  flex-direction: column;
+  align-items: flex-start;
+  max-height: 20rem;
+  padding-right: 0.5rem;
+  overflow-y: auto;
+
+  background-color: ${({ theme }) => theme.colors.white};
+  scroll-behavior: smooth;
+
+  ::-webkit-scrollbar {
+    width: 0.2rem;
+    height: 0.4rem;
+
+    border-radius: 0.2rem;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: ${({ theme }) => theme.colors.gray30};
+  }
+`;
+
+const GroupItem = styled.li<{ $isEmpty: boolean }>`
   width: 15.2rem;
+  height: 4rem;
   padding: 1rem 1.6rem;
 
   color: ${({ theme }) => theme.colors.gray70};
   line-height: ${({ $isEmpty }) => ($isEmpty ? '150%' : '120%')};
   white-space: pre-line;
   text-align: ${({ $isEmpty }) => ($isEmpty ? 'center' : 'left')};
 
-  cursor: ${({ $isEmpty }) => ($isEmpty ? 'default' : 'cursor')};
+  cursor: ${({ $isEmpty }) => ($isEmpty ? 'default' : 'pointer')};
   border-radius: 0.8rem;
   ${({ $isEmpty, theme }) => ($isEmpty ? theme.fonts.body9 : theme.fonts.body1)};
 

src/pages/groupFeed/constants/count.ts

@@ -0,0 +1 @@
+export const MAX_GROUP_COUNT = 10;

src/pages/groupFeed/constants/modalContent.ts

@@ -1,4 +1,3 @@
 export const MODAL = {
-    ALERT_GROUP_LIMIT: `글모임은 최대 5개까지 가입할 수 있습니다.`,
-  };
-
+  ALERT_GROUP_LIMIT: `글모임은 최대 10개까지 가입할 수 있습니다.`,
+};

src/pages/main/constants/faqData.ts

@@ -39,7 +39,7 @@ export const FAQ_DATA: faqDataPropTypes[] = [
     id: 6,
     question: '글 모임은 몇 개까지 가입이 가능한가요?',
     answer:
-      '본인이 만든 글 모임을 포함하여 최대 5개까지 가입이 가능합니다.\n마일은 너무 많은 글 모임에서 활동하는 것보다 소수의 글 모임에 집중하여 더 좋은 글을 쓰길 희망합니다.\n많은 모임보다는, 하나 하나의 모임에 집중하여 마음을 담은 글을 써보는 건 어떨까요?',
+      '본인이 만든 글 모임을 포함하여 최대 10개까지 가입이 가능합니다.\n마일은 너무 많은 글 모임에서 활동하는 것보다 소수의 글 모임에 집중하여 더 좋은 글을 쓰길 희망합니다.\n많은 모임보다는, 하나 하나의 모임에 집중하여 마음을 담은 글을 써보는 건 어떨까요?',
   },
   {
     id: 7,

src/pages/postDetail/PostDetail.tsx

@@ -211,7 +211,7 @@ const PostDetail = () => {
           </Responsive>
         </WriterInfoWrapper>
         {isMember && <Comment postId={postId} />}
-        <Spacing marginBottom="6.9" mobileMarginBottom='4'/>
+        <Spacing marginBottom="6.9" mobileMarginBottom="4" />
       </PostDetailWrapper>
 
       {/* 우선은 조건부로 연결해두었는데 reducer나 state를 통해서 업데이트 하도록 변경해도 될 듯 */}
@@ -248,14 +248,14 @@ const DividingLine = styled.div`
 
 const ThumnailImg = styled.img`
   width: 100%;
-  height: 37rem;
+  height: 38.6rem;
   object-fit: cover;
 
   border-bottom-right-radius: 10px;
   border-bottom-left-radius: 10px;
 
   @media ${MOBILE_MEDIA_QUERY} {
-    height: 18rem;
+    height: 22.4rem;
   }
 `;
 

src/pages/postPage/components/ImageUpload.tsx

@@ -79,28 +79,28 @@ export default ImageUpload;
 const ThumbNailGradient = styled.div`
   position: relative;
   width: 100%;
-  height: 30.7rem;
+  height: 38.6rem;
 
   background: ${({ theme }) => theme.colors.thumbnailGradient};
   border-radius: 0 0 10px 10px;
 
   @media ${MOBILE_MEDIA_QUERY} {
-    height: 18rem;
+    height: 22.4rem;
   }
 `;
 
 const ThumbNailImg = styled.img<{ $imgExist: string }>`
   position: relative;
 
   width: 100%;
-  height: 30.7rem;
+  height: 38.6rem;
   object-fit: cover;
 
   border-radius: 0 0 10px 10px;
   ${({ $imgExist }) => $imgExist && $imgExist.length === 0 && 'content: "";'}
 
   @media ${MOBILE_MEDIA_QUERY} {
-    height: 18rem;
+    height: 22.4rem;
   }
 `;