diff --git a/src/pages/groupFeed/components/CreateGroupBtn.tsx b/src/pages/groupFeed/components/CreateGroupBtn.tsx index cdcbd3c4..c8cd6a43 100644 --- a/src/pages/groupFeed/components/CreateGroupBtn.tsx +++ b/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(); diff --git a/src/pages/groupFeed/components/MyGroupDropDown.tsx b/src/pages/groupFeed/components/MyGroupDropDown.tsx index 06bbfd7f..cafedb01 100644 --- a/src/pages/groupFeed/components/MyGroupDropDown.tsx +++ b/src/pages/groupFeed/components/MyGroupDropDown.tsx @@ -30,23 +30,23 @@ const MyGroupDropDown = ({ groupData }: CreateGroupBtnProps) => { return ( 내 글 모임 - - {groupData?.length > 0 ? ( - groupData.map(({ moimId, moimName }: Moim) => ( - handleRoutingGroupFeed(moimId)} - > - {moimName} - - )) - ) : ( - {`가입한 글 모임이\n 없습니다.`} - )} - + + + {groupData?.length > 0 ? ( + groupData.map(({ moimId, moimName }: Moim) => ( + handleRoutingGroupFeed(moimId)} + > + {moimName} + + )) + ) : ( + {`가입한 글 모임이\n 없습니다.`} + )} + + ); }; @@ -59,24 +59,45 @@ 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}; @@ -84,7 +105,7 @@ const GroupContentContainer = styled.div<{ $isEmpty: boolean }>` 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)}; diff --git a/src/pages/groupFeed/constants/count.ts b/src/pages/groupFeed/constants/count.ts new file mode 100644 index 00000000..fafdedf9 --- /dev/null +++ b/src/pages/groupFeed/constants/count.ts @@ -0,0 +1 @@ +export const MAX_GROUP_COUNT = 10; diff --git a/src/pages/groupFeed/constants/modalContent.ts b/src/pages/groupFeed/constants/modalContent.ts index 7ffcd8c5..ee23619e 100644 --- a/src/pages/groupFeed/constants/modalContent.ts +++ b/src/pages/groupFeed/constants/modalContent.ts @@ -1,4 +1,3 @@ export const MODAL = { - ALERT_GROUP_LIMIT: `글모임은 최대 5개까지 가입할 수 있습니다.`, - }; - \ No newline at end of file + ALERT_GROUP_LIMIT: `글모임은 최대 10개까지 가입할 수 있습니다.`, +}; diff --git a/src/pages/main/constants/faqData.ts b/src/pages/main/constants/faqData.ts index ffbf0e9f..d2a2eca2 100644 --- a/src/pages/main/constants/faqData.ts +++ b/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,