Skip to content
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

[FE] Feat/#604 image swiper 적용 및 image size limit 적용 #608

Merged
merged 7 commits into from
Oct 19, 2023
Merged

[FE] Feat/#604 image swiper 적용 및 image size limit 적용 #608

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
75a1999
refactor: PinDetail 빼먹었던 부분 다시 추가
GC-Park Oct 19, 2023
428e3ea
refactor: image wrapper에 key값 적용
GC-Park Oct 19, 2023
21b637f
feat: 핀 디테일 이미지에 스와이퍼 적용
GC-Park Oct 19, 2023
c789965
refactor: 이미지 3개 이하면 스와이프 안 나오도록 수정
GC-Park Oct 19, 2023
d7f5fa6
refactor: 비로그인 시 이미지 추가 버튼 안 보이도록 수정
GC-Park Oct 19, 2023
32e0aa5
feat: 토픽 사진 추가할 때 사이즈 제한 주기
GC-Park Oct 19, 2023
687d5d1
refactor: 필요없는 코드 삭제
GC-Park Oct 19, 2023
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
97 changes: 74 additions & 23 deletions frontend/src/components/PinImageContainer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import { useModalContext, ImageModal } from '../../context/ImageModalContext';
import { useState } from 'react';
import Button from '../common/Button';
import Space from '../common/Space';
import Swiper from '../common/Swiper';
import Tab from '../common/Swiper/Tab';

interface PinImageContainerProps {
images: ImageProps[];
Expand Down Expand Up @@ -43,13 +45,59 @@ const PinImageContainer = ({ images, getPinData }: PinImageContainerProps) => {
openModal();
};

return (
<>
if (images.length <= 3) {
return (
<FilmList>
{images.map(
(image, index) =>
index < 3 && (
<ImageWrapper>
{images.map((image, index) => (
<Tab label={`${index}`} key={image.id}>
<ImageWrapper key={`image-${index}`}>
<div onClick={() => onImageOpen(image.imageUrl)}>
<Image
key={image.id}
height="100px"
width="100px"
src={image.imageUrl}
$errorDefaultSrc={NOT_FOUND_IMAGE}
/>
</div>
<RemoveImageIconWrapper
onClick={() => onRemovePinImage(image.id)}
>
<RemoveImageButton />
</RemoveImageIconWrapper>
</ImageWrapper>
</Tab>
))}
{isModalOpen && (
<ImageModal closeModalHandler={closeModal}>
<ModalImageWrapper>
<ModalImage src={modalImage} />
<Space size={3} />
<Button variant="custom" onClick={closeModal}>
닫기
</Button>
</ModalImageWrapper>
</ImageModal>
)}
</FilmList>
);
}

return (
<Wrapper>
{
<Swiper
as="ul"
width={330}
height={100}
$elementsOneTab={3}
swiper
swipeable
$isNotTabBoxShow
>
{images.map((image, index) => (
<Tab label={`${index}`} key={image.id}>
<ImageWrapper key={`image-${index}`}>
<div onClick={() => onImageOpen(image.imageUrl)}>
<Image
key={image.id}
Expand All @@ -65,28 +113,31 @@ const PinImageContainer = ({ images, getPinData }: PinImageContainerProps) => {
<RemoveImageButton />
</RemoveImageIconWrapper>
</ImageWrapper>
),
)}
{isModalOpen && (
<ImageModal closeModalHandler={closeModal}>
<ModalImageWrapper>
<ModalImage src={modalImage} />
<Space size={3} />
<Button variant="custom" onClick={closeModal}>
닫기
</Button>
</ModalImageWrapper>
</ImageModal>
)}
</FilmList>
</>
</Tab>
))}
{isModalOpen && (
<ImageModal closeModalHandler={closeModal}>
<ModalImageWrapper>
<ModalImage src={modalImage} />
<Space size={3} />
<Button variant="custom" onClick={closeModal}>
닫기
</Button>
</ModalImageWrapper>
</ImageModal>
)}
</Swiper>
}
</Wrapper>
);
};

const FilmList = styled.ul`
const Wrapper = styled.div`
width: 330px;
`;

const FilmList = styled.ul`
display: flex;
flex-direction: row;
`;

const ImageWrapper = styled.li`
Expand Down
27 changes: 19 additions & 8 deletions frontend/src/components/TopicInfo/UpdatedTopicInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import Space from '../common/Space';
import InputContainer from '../InputContainer';
import Text from '../common/Text';
import useCompressImage from '../../hooks/useCompressImage';
import Image from '../common/Image';
import ImageCommon from '../common/Image';
import { DEFAULT_TOPIC_IMAGE } from '../../constants';
import { putApi } from '../../apis/putApi';

Expand Down Expand Up @@ -135,6 +135,7 @@ function UpdatedTopicInfo({
) => {
const file = event.target.files && event.target.files[0];
const formData = new FormData();
const currentImage = new Image();

if (!file) {
showToast(
Expand All @@ -145,12 +146,22 @@ function UpdatedTopicInfo({
}

const compressedFile = await compressImage(file);
formData.append('image', compressedFile);

await putApi(`/topics/images/${id}`, formData);

const updatedImageUrl = URL.createObjectURL(compressedFile);
setChangedImages(updatedImageUrl);
currentImage.src = URL.createObjectURL(compressedFile);

currentImage.onload = async () => {
if (currentImage.width < 300) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 부분이 이번 PR핵심으로 보이는데 맞나요?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 맞습니다~ width 300이하는 못 올립니다 ㅎ

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍👍👍

showToast(
'warning',
'이미지의 크기가 너무 작습니다. 다른 이미지를 선택해 주세요.',
);
return;
}
formData.append('image', compressedFile);
await putApi(`/topics/images/${id}`, formData);

const updatedImageUrl = URL.createObjectURL(compressedFile);
setChangedImages(updatedImageUrl);
};
};

return (
Expand Down Expand Up @@ -288,7 +299,7 @@ const ImageInputButton = styled.input`
display: none;
`;

const TopicImage = styled(Image)`
const TopicImage = styled(ImageCommon)`
border-radius: ${({ theme }) => theme.radius.medium};
`;

Expand Down
18 changes: 15 additions & 3 deletions frontend/src/pages/NewTopic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,7 @@ function NewTopic() {
event: React.ChangeEvent<HTMLInputElement>,
) => {
const file = event.target.files && event.target.files[0];
const currentImage = new Image();
if (!file) {
showToast(
'error',
Expand All @@ -136,9 +137,20 @@ function NewTopic() {
}

const compressedFile = await compressImage(file);

setFormImage(compressedFile);
setShowImage(URL.createObjectURL(file));
currentImage.src = URL.createObjectURL(compressedFile);

currentImage.onload = () => {
if (currentImage.width < 300) {
showToast(
'warning',
'이미지의 크기가 너무 작습니다. 다른 이미지를 선택해 주세요.',
);
return;
}

setFormImage(compressedFile);
setShowImage(URL.createObjectURL(file));
};
};

useEffect(() => {
Expand Down
19 changes: 17 additions & 2 deletions frontend/src/pages/PinDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,7 +206,9 @@ function PinDetail({
</Flex>
</Flex>
<Space size={2} />
<ImageInputLabel htmlFor="file">파일업로드</ImageInputLabel>
{userToken && (
<ImageInputLabel htmlFor="file">파일업로드</ImageInputLabel>
)}
<ImageInputButton
id="file"
type="file"
Expand Down Expand Up @@ -234,7 +236,20 @@ function PinDetail({
{pin.description}
</Text>
</Flex>
<Space size={7} />
<Space size={6} />

<ButtonsWrapper>
<SaveToMyMapButton variant="primary" onClick={openModalWithToken}>
내 지도에 저장하기
</SaveToMyMapButton>
<Space size={3} />
<ShareButton variant="secondary" onClick={copyContent}>
공유하기
</ShareButton>
</ButtonsWrapper>

<Space size={8} />

{/* Comment Section */}

<Text color="black" $fontSize="large" $fontWeight="bold">
Expand Down
Loading