diff --git a/src/domain/detail/Carousel/index.tsx b/src/domain/detail/Carousel/index.tsx index f0869b28e..b97eb0474 100644 --- a/src/domain/detail/Carousel/index.tsx +++ b/src/domain/detail/Carousel/index.tsx @@ -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']; @@ -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', }, @@ -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': { @@ -133,8 +165,13 @@ const SImageWrapper = styled('div', { height: '$594', margin: '0 auto', + '@laptop': { + height: 'auto', + aspectRatio: '760/520', + }, + '@mobile': { - height: '$256', + height: '246px', }, }, }); diff --git a/src/shared/feed/Modal/ImagePreview/index.tsx b/src/shared/feed/Modal/ImagePreview/index.tsx index b373d042c..4d37268cd 100644 --- a/src/shared/feed/Modal/ImagePreview/index.tsx +++ b/src/shared/feed/Modal/ImagePreview/index.tsx @@ -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; @@ -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', }); diff --git a/src/shared/form/FileInput/index.tsx b/src/shared/form/FileInput/index.tsx index d74635ac3..c45283664 100644 --- a/src/shared/form/FileInput/index.tsx +++ b/src/shared/form/FileInput/index.tsx @@ -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 { label?: string; @@ -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', diff --git a/src/shared/form/Presentation/FlashPresentation/index.tsx b/src/shared/form/Presentation/FlashPresentation/index.tsx index 4ae783be8..3104211cf 100644 --- a/src/shared/form/Presentation/FlashPresentation/index.tsx +++ b/src/shared/form/Presentation/FlashPresentation/index.tsx @@ -389,7 +389,7 @@ function FlashPresentation({ 1장만 첨부 가능하며 5MB 이내로
- 가로는 716px, 세로는453px 사이즈를 권장해요 + 가로는 760px, 세로는520px 사이즈를 권장해요
소개 이미지 6개까지 첨부 가능하며 5MB 이내로
- 가로는 716px, 세로는453px 사이즈를 권장해요 + 가로는 760px, 세로는520px 사이즈를 권장해요