From a2594915b50eb0488f1fca5ae9e7c2da584c3e7b Mon Sep 17 00:00:00 2001 From: Moon Dahyun Date: Sun, 6 Apr 2025 17:50:01 +0900 Subject: [PATCH 1/6] =?UTF-8?q?fix/#553=20:=20=EB=AA=A8=EC=9E=84=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EB=86=92?= =?UTF-8?q?=EC=9D=B4=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/groupFeed/GroupFeed.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/pages/groupFeed/GroupFeed.tsx b/src/pages/groupFeed/GroupFeed.tsx index c008dc51..c5a73e7a 100644 --- a/src/pages/groupFeed/GroupFeed.tsx +++ b/src/pages/groupFeed/GroupFeed.tsx @@ -156,9 +156,10 @@ const GroupFeedWrapper = styled.div` background-color: ${({ theme }) => theme.colors.backGroundGray}; `; +//디자인 확정나면 const GroupFeedThumnail = styled.div<{ imageUrl: string | undefined }>` width: 100%; - height: 37rem; + height: 45rem; margin-top: 6.4rem; object-fit: cover; @@ -167,7 +168,7 @@ const GroupFeedThumnail = styled.div<{ imageUrl: string | undefined }>` @media ${MOBILE_MEDIA_QUERY} { width: 100%; - height: 18rem; + height: 28rem; margin-top: 5.5rem; } `; From 05bd4ff66b717323000de10a2cf277dfefd58a19 Mon Sep 17 00:00:00 2001 From: Moon Dahyun Date: Sun, 6 Apr 2025 18:10:57 +0900 Subject: [PATCH 2/6] =?UTF-8?q?fix/#553:=20=EA=B8=80=20=EC=83=9D=EC=84=B1?= =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=E2=86=92=20=EC=9D=B4=EB=AF=B8?= =?UTF-8?q?=EC=A7=80=20=EC=97=85=EB=A1=9C=EB=93=9C=20=EC=82=AC=EC=9D=B4?= =?UTF-8?q?=EC=A6=88=20=EC=88=98=EC=A0=95=20+=20=EC=82=AC=EC=9D=B4?= =?UTF-8?q?=EC=A6=88=20=EC=95=88=EB=82=B4=20=EB=A9=98=ED=8A=B8=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/CreateGroupInfo.tsx | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/src/pages/createGroup/components/CreateGroupInfo.tsx b/src/pages/createGroup/components/CreateGroupInfo.tsx index 6e7cf5a1..b734f0fd 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) 사이즈를 권장합니다. + @@ -710,12 +717,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}; From ebd3e837c7c1416490cc213e91b380710ce08f7a Mon Sep 17 00:00:00 2001 From: Moon Dahyun Date: Sun, 6 Apr 2025 18:20:10 +0900 Subject: [PATCH 3/6] =?UTF-8?q?fix/#553=20:=20=EA=B4=80=EB=A6=AC=EC=9E=90?= =?UTF-8?q?=20-=20=EB=AA=A8=EC=9E=84=20=EC=A0=95=EB=B3=B4=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=E2=86=92=20=EC=9D=B4?= =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=EC=97=85=EB=A1=9C=EB=93=9C=20=EC=82=AC?= =?UTF-8?q?=EC=9D=B4=EC=A6=88=20=EC=88=98=EC=A0=95=20+=20=EC=82=AC?= =?UTF-8?q?=EC=9D=B4=EC=A6=88=20=EC=95=88=EB=82=B4=20=EB=A9=98=ED=8A=B8=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/admin/components/EditGroupInfo.tsx | 25 +++++++++++++++---- .../components/CreateGroupInfo.tsx | 6 ++++- 2 files changed, 25 insertions(+), 6 deletions(-) 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 b734f0fd..f3101e01 100644 --- a/src/pages/createGroup/components/CreateGroupInfo.tsx +++ b/src/pages/createGroup/components/CreateGroupInfo.tsx @@ -651,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)` From 22a11d18bce096ebfb1c4108b1d0584dab62f9ad Mon Sep 17 00:00:00 2001 From: Moon Dahyun Date: Sat, 12 Apr 2025 15:04:33 +0900 Subject: [PATCH 4/6] =?UTF-8?q?fix/#553:=20=EC=97=90=EB=94=94=ED=84=B0=20?= =?UTF-8?q?=E2=86=92=20=EA=B8=80=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=82=AC?= =?UTF-8?q?=EC=9D=B4=EC=A6=88=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/postPage/components/ImageUpload.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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; } `; From 5f0dd03d49f7b0041de944383f68a2a09a3935ea Mon Sep 17 00:00:00 2001 From: Moon Dahyun Date: Sat, 12 Apr 2025 15:13:01 +0900 Subject: [PATCH 5/6] =?UTF-8?q?fix/#553:=20=EA=B8=80=EC=83=81=EC=84=B8?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=E2=86=92=20=EA=B8=80=20=EC=9D=B4?= =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=EC=82=AC=EC=9D=B4=EC=A6=88=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/postDetail/PostDetail.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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; } `; From 3590d3c30ab7647f18a8c959237ed7102919d550 Mon Sep 17 00:00:00 2001 From: Moon Dahyun Date: Sat, 12 Apr 2025 15:15:34 +0900 Subject: [PATCH 6/6] =?UTF-8?q?fix/#553=20:=20=EB=AA=A8=EC=9E=84=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=9E=AC=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/groupFeed/GroupFeed.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/pages/groupFeed/GroupFeed.tsx b/src/pages/groupFeed/GroupFeed.tsx index c5a73e7a..1f41fc30 100644 --- a/src/pages/groupFeed/GroupFeed.tsx +++ b/src/pages/groupFeed/GroupFeed.tsx @@ -156,10 +156,9 @@ const GroupFeedWrapper = styled.div` background-color: ${({ theme }) => theme.colors.backGroundGray}; `; -//디자인 확정나면 const GroupFeedThumnail = styled.div<{ imageUrl: string | undefined }>` width: 100%; - height: 45rem; + height: 38.6rem; margin-top: 6.4rem; object-fit: cover; @@ -168,7 +167,7 @@ const GroupFeedThumnail = styled.div<{ imageUrl: string | undefined }>` @media ${MOBILE_MEDIA_QUERY} { width: 100%; - height: 28rem; + height: 22.4rem; margin-top: 5.5rem; } `;