diff --git a/src/pages/admin/components/EditGroupInfo.tsx b/src/pages/admin/components/EditGroupInfo.tsx index afcbb48f..39be9211 100644 --- a/src/pages/admin/components/EditGroupInfo.tsx +++ b/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 = () => { /> )} - - *글모임 페이지 상단에 노출될 대표 이미지입니다. 1366*306px사이즈를 권장합니다. - + + + * 글 모임 페이지 상단에 노출될 대표 이미지입니다. 1440*480(3:1) 사이즈를 권장합니다. + + + + * 글 모임 페이지 상단에 노출될 대표 이미지입니다. + 1440*480(3:1) 사이즈를 권장합니다. + @@ -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}; diff --git a/src/pages/createGroup/components/CreateGroupInfo.tsx b/src/pages/createGroup/components/CreateGroupInfo.tsx index 6e7cf5a1..f3101e01 100644 --- a/src/pages/createGroup/components/CreateGroupInfo.tsx +++ b/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 = (value: T) => void; interface CreateGroupInfoPropTypes { @@ -288,9 +289,15 @@ const CreateGroupInfo = ({ )} - - *글모임 페이지 상단에 노출될 대표 이미지입니다. 1366*306px사이즈를 권장합니다. - + + + * 글 모임 페이지 상단에 노출될 대표 이미지입니다. 1440*480(3:1) 사이즈를 권장합니다. + + + + * 글 모임 페이지 상단에 노출될 대표 이미지입니다. + 1440*480(3:1) 사이즈를 권장합니다. + @@ -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}; diff --git a/src/pages/groupFeed/GroupFeed.tsx b/src/pages/groupFeed/GroupFeed.tsx index c008dc51..1f41fc30 100644 --- a/src/pages/groupFeed/GroupFeed.tsx +++ b/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; } `; 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, diff --git a/src/pages/postDetail/PostDetail.tsx b/src/pages/postDetail/PostDetail.tsx index cdd30310..b1e09bc6 100644 --- a/src/pages/postDetail/PostDetail.tsx +++ b/src/pages/postDetail/PostDetail.tsx @@ -211,7 +211,7 @@ const PostDetail = () => { {isMember && } - + {/* 우선은 조건부로 연결해두었는데 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; } `; diff --git a/src/pages/postPage/components/ImageUpload.tsx b/src/pages/postPage/components/ImageUpload.tsx index a277e845..188effc9 100644 --- a/src/pages/postPage/components/ImageUpload.tsx +++ b/src/pages/postPage/components/ImageUpload.tsx @@ -79,13 +79,13 @@ 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; } `; @@ -93,14 +93,14 @@ 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; } `;