Skip to content

[Fix/#553] 이미지 비율 수정 #556

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
moondda merged 6 commits into from
Apr 14, 2025
Merged

[Fix/#553] 이미지 비율 수정 #556

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a259491
fix/#553 : 모임페이지 이미지 높이 수정
moondda Apr 6, 2025
05bd4ff
fix/#553: 글 생성 페이지 → 이미지 업로드 사이즈 수정 + 사이즈 안내 멘트 수정
moondda Apr 6, 2025
ebd3e83
fix/#553 : 관리자 - 모임 정보 수정 페이지 → 이미지 업로드 사이즈 수정 + 사이즈 안내 멘트 수정
moondda Apr 6, 2025
22a11d1
fix/#553: 에디터 → 글 이미지 사이즈 수정
moondda Apr 12, 2025
5f0dd03
fix/#553: 글상세페이지 → 글 이미지 사이즈 수정
moondda Apr 12, 2025
3590d3c
fix/#553 : 모임페이지 재수정
moondda Apr 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 20 additions & 5 deletions src/pages/admin/components/EditGroupInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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('');
Expand Down Expand Up @@ -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}>
Expand Down Expand Up @@ -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`
Expand All @@ -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};

Expand Down
25 changes: 20 additions & 5 deletions src/pages/createGroup/components/CreateGroupInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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}>
Expand Down Expand Up @@ -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)`
Expand Down Expand Up @@ -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};

Expand Down
4 changes: 2 additions & 2 deletions src/pages/groupFeed/GroupFeed.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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;
}
`;
Expand Down
6 changes: 3 additions & 3 deletions src/pages/postDetail/PostDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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를 통해서 업데이트 하도록 변경해도 될 듯 */}
Expand Down Expand Up @@ -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;
}
`;

Expand Down
8 changes: 4 additions & 4 deletions src/pages/postPage/components/ImageUpload.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
`;

Expand Down