Skip to content

모임소개 이미지 비율 수정 #1216

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

Open
gudusol wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

모임소개 이미지 비율 수정 #1216

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
766a137
fix: 권장 사이즈 텍스트 수정
gudusol Oct 15, 2025
bf2a089
fix: 이미지 비율 상이 이슈 해결
gudusol Nov 13, 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
45 changes: 41 additions & 4 deletions src/domain/detail/Carousel/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { paths } from '@/__generated__/schema2';
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import { styled } from 'stitches.config';
import NextArrow from './NextArrow';
import 'slick-carousel/slick/slick.css';
import { paths } from '@/__generated__/schema2';

interface CarouselProps {
imageList: paths['/meeting/v2/{meetingId}']['get']['responses']['200']['content']['application/json;charset=UTF-8']['imageURL'];
Expand Down Expand Up @@ -45,11 +45,17 @@ const SCarousel = styled('div', {
mt: '$60',
mb: '$80',

'@tablet': {
mt: '$0',
mb: '$32',
display: 'block',
},

'@mobile': {
mt: '0',
mb: '$32',
width: 'calc(100% + 40px)',
height: '$256',
height: '$246',
marginLeft: '-20px',
display: 'block',
},
Expand All @@ -72,11 +78,37 @@ const SCarousel = styled('div', {

'.slick-prev': {
mr: '94px',

svg: {
width: '72px',
height: '72px',
},

'@laptop': {
mr: '0',
},

'@tablet': {
display: 'none',
},
},

'.slick-next': {
transform: 'rotate(180deg)',
ml: '93px',

svg: {
width: '72px',
height: '72px',
},

'@laptop': {
ml: '0',
},

'@tablet': {
display: 'none',
},
},

'.slick-dots': {
Expand Down Expand Up @@ -133,8 +165,13 @@ const SImageWrapper = styled('div', {
height: '$594',
margin: '0 auto',

'@laptop': {
height: 'auto',
aspectRatio: '760/520',
},

'@mobile': {
height: '$256',
height: '246px',
},
},
});
6 changes: 3 additions & 3 deletions src/shared/feed/Modal/ImagePreview/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import CancelIcon from '@assets/svg/x.svg';
import { useState } from 'react';
import { styled } from 'stitches.config';
import CancelIcon from '@assets/svg/x.svg';

interface ImagePreviewProps {
url: string;
Expand Down Expand Up @@ -29,8 +29,8 @@ const SContainer = styled('div', {
position: 'relative',
width: '100%',
height: '100%',
maxHeight: '176px',
aspectRatio: '40 / 27',
maxHeight: '178px',
aspectRatio: '760 / 520',
borderRadius: '10px',
overflow: 'hidden',
});
Expand Down
10 changes: 5 additions & 5 deletions src/shared/form/FileInput/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import PictureIcon from '@assets/svg/icon-interaction-plus.svg';
import { ACCEPTED_IMAGE_TYPES } from '@type/form';
import { HTMLAttributes } from 'react';
import { styled } from 'stitches.config';
import ErrorMessage from '../ErrorMessage';
import HelpMessage from '../HelpMessage';
import Label from '../Label';
import PictureIcon from '@assets/svg/icon-interaction-plus.svg';
import { ACCEPTED_IMAGE_TYPES } from '@type/form';
import ErrorMessage from '../ErrorMessage';

interface FileInputProps extends HTMLAttributes<HTMLInputElement> {
label?: string;
Expand Down Expand Up @@ -37,8 +37,8 @@ const SInputWrapper = styled('label', {
alignItems: 'center',
width: '100%',
height: '100%',
maxHeight: '176px',
aspectRatio: '40 / 27',
maxHeight: '178px',
aspectRatio: '760 / 520',
background: '$gray700',
color: '$gray400',
borderRadius: '10px',
Expand Down
2 changes: 1 addition & 1 deletion src/shared/form/Presentation/FlashPresentation/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -389,7 +389,7 @@ function FlashPresentation({
<Label>소개 이미지</Label>
<HelpMessage>
1장만 첨부 가능하며 5MB 이내로 <br />
가로는 716px, 세로는453px 사이즈를 권장해요
가로는 760px, 세로는520px 사이즈를 권장해요
</HelpMessage>
<SFileInputWrapper>
<FormController
Expand Down
6 changes: 3 additions & 3 deletions src/shared/form/Presentation/ImageField/ImagePreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { ACCEPTED_IMAGE_TYPES } from '@type/form';
import { nanoid } from 'nanoid';
import React, { useMemo, useState } from 'react';
import { ACCEPTED_IMAGE_TYPES } from '@type/form';
import { styled } from 'stitches.config';

interface ImagePreviewProps {
Expand Down Expand Up @@ -33,8 +33,8 @@ const SContainer = styled('div', {
position: 'relative',
width: '100%',
height: '100%',
maxHeight: '176px',
aspectRatio: '40 / 27',
maxHeight: '178px',
aspectRatio: '760 / 520',
borderRadius: '10px',
overflow: 'hidden',
});
Expand Down
2 changes: 1 addition & 1 deletion src/shared/form/Presentation/ImageField/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const ImageField = ({ onChangeFile, onDeleteFile, onAddFiles }: ImageFieldProps)
<Label required={true}>소개 이미지</Label>
<HelpMessage>
6개까지 첨부 가능하며 5MB 이내로 <br />
가로는 716px, 세로는453px 사이즈를 권장해요
가로는 760px, 세로는520px 사이즈를 권장해요
</HelpMessage>
<SFileInputWrapper>
<FormController
Expand Down