[Fix/#554] 가입 가능한 글 모임 개수 수정

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,