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

Jump to bottom

fix: 사용자 사진 업로드 시 미리보기가 안 바뀌는 문제 #390

Merged
merged 4 commits into from
Sep 22, 2023
Merged

fix: 사용자 사진 업로드 시 미리보기가 안 바뀌는 문제 #390

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
538164b
feat: url이 피움 static인지 확인하는 유틸 함수
WaiNaat Sep 21, 2023
36a1ca2
fix: src를 바꿔도 이미지가 변하지 않는 현상
WaiNaat Sep 21, 2023
8e300aa
refactor: useFileUpload 호출마다 새 url 생성 방지
WaiNaat Sep 21, 2023
298ad3a
test: msw mock data image url 변경
WaiNaat Sep 21, 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
18 changes: 9 additions & 9 deletions frontend/src/components/@common/Image/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { forwardRef, useRef } from 'react';
import { forwardRef } from 'react';
import type { StyledImageProps } from './Image.style';
import { StyledImage } from './Image.style';
import { getResizedImageUrl } from 'utils/image';
import { getResizedImageUrl, isServerStaticData } from 'utils/image';
import sadpiumiPng from 'assets/sadpiumi-imageFail.png';

type ImageProps = Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'onError'> &
Expand All @@ -11,18 +11,18 @@ const Image = forwardRef<HTMLImageElement, ImageProps>(function Image(props, ref
const { type = 'circle', size = '77px', src = sadpiumiPng, ...imageProps } = props;

const sizeValue = Number(size.slice(0, -2));
const fallbackImages = useRef<string[]>([
const fallbackImages = [
sadpiumiPng,
src,
getResizedImageUrl(src, sizeValue, 'png'),
getResizedImageUrl(src, sizeValue, 'webp'),
]);
isServerStaticData(src) ? getResizedImageUrl(src, sizeValue, 'png') : src,
isServerStaticData(src) ? getResizedImageUrl(src, sizeValue, 'webp') : src,
];

const currentImage = fallbackImages.current[fallbackImages.current.length - 1];
const currentImage = fallbackImages[fallbackImages.length - 1];

const setErrorImage: React.ReactEventHandler<HTMLImageElement> = ({ currentTarget }) => {
fallbackImages.current.pop();
currentTarget.src = fallbackImages.current[fallbackImages.current.length - 1];
fallbackImages.pop();
currentTarget.src = fallbackImages[fallbackImages.length - 1];
};

return (
Expand Down
1 change: 1 addition & 0 deletions frontend/src/constants/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Season, SeasonKor } from 'types/dictionaryPlant';

export const BASE_URL = process.env.HOST;
export const STATIC_BASE_URL = 'https://static.pium.life';

export const URL_PATH = {
main: '/',
Expand Down
9 changes: 6 additions & 3 deletions frontend/src/hooks/image/useFileUpload.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useRef, useState } from 'react';
import { useMemo, useRef, useState } from 'react';
import useAddToast from 'hooks/useAddToast';
import basicImage from 'assets/piumi-emotionless.png';

Expand All @@ -13,7 +13,10 @@ const useFileUpload = ({ imageUrl = basicImage }: FileUploadParams) => {
const [file, setFile] = useState<Blob | null>(null);

const imgRef = useRef<HTMLInputElement>(null);

const uploadedImageUrl = useMemo(
() => (file ? URL.createObjectURL(file) : imageUrl),
[file, imageUrl]
);
Comment on lines +16 to +19
Copy link
Collaborator

Choose a reason for hiding this comment

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

C

여기서 memo를 사용한 이유는 같은 url에 대해서 중복 렌더링을 하지 않기 위함인가요?

Copy link
Member Author

Choose a reason for hiding this comment

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

위쪽 움짤처럼 이미지 자체의 중복 렌더링 방지 효과가 있긴 합니다 근데 사실 키보드 한번당 3밀리초 개선효과밖에 없어서 좋다곤 못하겠네요..

const addToast = useAddToast();

const fileUploadHandler: React.ChangeEventHandler<HTMLInputElement> = (event) => {
Expand Down Expand Up @@ -50,7 +53,7 @@ const useFileUpload = ({ imageUrl = basicImage }: FileUploadParams) => {

return {
fileUploadHandler,
uploadedImageUrl: file ? URL.createObjectURL(file) : imageUrl,
uploadedImageUrl,
imgRef,
file,
};
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/mocks/data/dictionaryPlant.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ const DICTIONARY_PLANT_DATA = [
{
id: 1,
name: '스킨답서스',
image: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
image: 'https://static.pium.life/dict/dict_plants_1.jpg',
familyName: '천남성과',
smell: '거의 없음',
poison: '많음',
Expand All @@ -23,7 +23,7 @@ const DICTIONARY_PLANT_DATA = [
{
id: 2,
name: '투명 피우미',
image: 'https://images.unsplash.com/photo-1617677916288-7a5c8e88a285',
image: 'https://static.pium.life/dict/dict_plants_1000.jpg',
familyName: '캠릿브지 대학의 연결구과',
smell: '정보없음',
poison: '정보없음',
Expand Down
12 changes: 6 additions & 6 deletions frontend/src/mocks/data/garden.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export const generateGardenPageData = (
content: '이거 이렇게 키워보아요',
manageLevel: '초보자',
petPlant: {
imageUrl: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
imageUrl: 'https://static.pium.life/dict/dict_plants_1.jpg',
nickname: '루피',
location: OPTIONS.location[0],
flowerpot: OPTIONS.flowerPot[0],
Expand All @@ -41,7 +41,7 @@ export const generateGardenPageData = (
content: '이거 이렇게 키워보아요',
manageLevel: '전문가',
petPlant: {
imageUrl: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
imageUrl: 'https://static.pium.life/dict/dict_plants_2.jpg',
nickname: '쵸파',
location: OPTIONS.location[0],
flowerpot: OPTIONS.flowerPot[0],
Expand All @@ -59,7 +59,7 @@ export const generateGardenPageData = (
content: '이거 이렇게 키워보아요',
manageLevel: '초보자',
petPlant: {
imageUrl: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
imageUrl: 'https://static.pium.life/dict/dict_plants_3.jpg',
nickname: '토마토1호',
location: OPTIONS.location[0],
flowerpot: OPTIONS.flowerPot[0],
Expand All @@ -82,7 +82,7 @@ export const generateGardenPageData = (
`,
manageLevel: '초보자',
petPlant: {
imageUrl: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
imageUrl: 'https://static.pium.life/dict/dict_plants_4.jpg',
nickname: '뉴기니아봉선화',
location: OPTIONS.location[0],
flowerpot: OPTIONS.flowerPot[0],
Expand All @@ -100,7 +100,7 @@ export const generateGardenPageData = (
content: '이거 이렇게 키워보아요',
manageLevel: '초보자',
petPlant: {
imageUrl: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
imageUrl: 'https://static.pium.life/dict/dict_plants_5.jpg',
nickname: '상디',
location: OPTIONS.location[0],
flowerpot: OPTIONS.flowerPot[0],
Expand All @@ -120,7 +120,7 @@ export const generateGardenPageData = (
content: '이거 이렇게 키워보아요',
manageLevel: '초보자',
petPlant: {
imageUrl: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
imageUrl: 'https://static.pium.life/dict/dict_plants_6789.jpg',
nickname: '브룩',
location: OPTIONS.location[0],
flowerpot: OPTIONS.flowerPot[0],
Expand Down
14 changes: 7 additions & 7 deletions frontend/src/mocks/data/petPlantCardList.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,55 +4,55 @@ const PET_PLANT_CARD_LIST = [
{
id: 2,
nickname: '기영이',
imageUrl: 'https://images.unsplash.com/photo-1667342608690-828e1a839ead',
imageUrl: 'https://static.pium.life/dict/dict_plants_1.jpg',
dictionaryPlantName: '스투키',
birthDate: '2023-07-08',
daySince: 95,
},
{
id: 3,
nickname: '참새',
imageUrl: 'https://images.unsplash.com/photo-1555841769-75541ae4fc9f',
imageUrl: 'https://static.pium.life/dict/dict_plants_2.jpg',
dictionaryPlantName: '참새',
birthDate: '1999-12-16',
daySince: 1,
},
{
id: 4,
nickname: '참새',
imageUrl: 'https://images.unsplash.com/photo-1555841769-75541ae4fc9f',
imageUrl: 'https://static.pium.life/dict/dict_plants_3.jpg',
dictionaryPlantName: '참새',
birthDate: getDateToString(),
daySince: 1,
},
{
id: 5,
nickname: '참새',
imageUrl: 'https://images.unsplash.com/photo-1555841769-75541ae4fc9f',
imageUrl: 'https://static.pium.life/dict/dict_plants_4.jpg',
dictionaryPlantName: '참새',
birthDate: '1999-12-16',
daySince: 1,
},
{
id: 6,
nickname: '참새',
imageUrl: 'https://images.unsplash.com/photo-1555841769-75541ae4fc9f',
imageUrl: 'https://static.pium.life/dict/dict_plants_5.jpg',
dictionaryPlantName: '참새',
birthDate: '1999-12-16',
daySince: 1,
},
{
id: 7,
nickname: '참새',
imageUrl: 'https://images.unsplash.com/photo-1555841769-75541ae4fc9f',
imageUrl: 'https://static.pium.life/dict/dict_plants_6.jpg',
dictionaryPlantName: '참새',
birthDate: '1999-12-16',
daySince: 1,
},
{
id: 8,
nickname: '참새',
imageUrl: 'https://images.unsplash.com/photo-1555841769-75541ae4fc9f',
imageUrl: 'https://static.pium.life/dict/dict_plants_7777.jpg',
dictionaryPlantName: '참새',
birthDate: '1999-12-16',
daySince: 1,
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/mocks/data/petPlants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const PET_PLANTS_DATA: PetPlantDetails[] = [
id: 1,
name: '백엔드1',
},
imageUrl: 'https://images.unsplash.com/photo-1457530378978-8bac673b8062',
imageUrl: 'https://static.pium.life/dict/dict_plants_1.jpg',
birthDate: '2023-03-03',
daySince: 9,

Expand All @@ -32,7 +32,7 @@ const PET_PLANTS_DATA: PetPlantDetails[] = [
id: 2,
name: '백엔드2',
},
imageUrl: 'https://images.unsplash.com/photo-1457530378978-8bac673b8062',
imageUrl: 'https://static.pium.life/dict/dict_plants_2.jpg',
birthDate: '2023-04-04',
daySince: 99,

Expand All @@ -54,7 +54,7 @@ const PET_PLANTS_DATA: PetPlantDetails[] = [
id: 3,
name: '백엔드3',
},
imageUrl: 'https://images.unsplash.com/photo-1457530378978-8bac673b8062',
imageUrl: 'https://static.pium.life/dict/dict_plants_3.jpg',
birthDate: '2023-05-05',
daySince: 999,

Expand All @@ -76,7 +76,7 @@ const PET_PLANTS_DATA: PetPlantDetails[] = [
id: 4,
name: '백엔드4',
},
imageUrl: 'https://images.unsplash.com/photo-1457530378978-8bac673b8062',
imageUrl: 'https://static.pium.life/dict/dict_plants_4.jpg',
birthDate: getDateToString(),
daySince: 9999,

Expand Down
26 changes: 13 additions & 13 deletions frontend/src/mocks/data/reminder.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const REMINDER_DATA = {
data: [
{
petPlantId: 0,
image: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
image: 'https://static.pium.life/dict/dict_plants_1.jpg',
nickName: '내가 만든 쿠키이이이이 히? 너는 절대 못먹지 캔츄바레 원잇 플리즈',
dictionaryPlantName: '이 편지는 영국에서 시작해서 그렇게 변화게 되어왔습니다.',
dday: 20,
Expand All @@ -15,7 +15,7 @@ const REMINDER_DATA = {
},
{
petPlantId: 1,
image: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
image: 'https://static.pium.life/dict/dict_plants_2.jpg',
nickName: '참새 나무',
dictionaryPlantName: '알로카시아',
dday: 20,
Expand All @@ -24,7 +24,7 @@ const REMINDER_DATA = {
},
{
petPlantId: 2,
image: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
image: 'https://static.pium.life/dict/dict_plants_3.jpg',
nickName: '그레이 나무',
dictionaryPlantName: '스투키',
dday: 11,
Expand All @@ -33,7 +33,7 @@ const REMINDER_DATA = {
},
{
petPlantId: 3,
image: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
image: 'https://static.pium.life/dict/dict_plants_4.jpg',
nickName: '하마드 나무',
dictionaryPlantName: '스투키',
dday: 3,
Expand All @@ -42,7 +42,7 @@ const REMINDER_DATA = {
},
{
petPlantId: 4,
image: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
image: 'https://static.pium.life/dict/dict_plants_5.jpg',
nickName: '주노 나무',
dictionaryPlantName: '스투키',
dday: 3,
Expand All @@ -51,7 +51,7 @@ const REMINDER_DATA = {
},
{
petPlantId: 5,
image: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
image: 'https://static.pium.life/dict/dict_plants_6.jpg',
nickName: '조이 나무',
dictionaryPlantName: '스투키',
dday: 1,
Expand All @@ -60,7 +60,7 @@ const REMINDER_DATA = {
},
{
petPlantId: 6,
image: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
image: 'https://static.pium.life/dict/dict_plants_7.jpg',
nickName: '쵸파 나무',
dictionaryPlantName: '스투키',
dday: 0,
Expand All @@ -69,7 +69,7 @@ const REMINDER_DATA = {
},
{
petPlantId: 7,
image: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
image: 'https://static.pium.life/dict/dict_plants_8.jpg',
nickName: '클린 나무',
dictionaryPlantName: '스투키',
dday: 0,
Expand All @@ -78,7 +78,7 @@ const REMINDER_DATA = {
},
{
petPlantId: 8,
image: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
image: 'https://static.pium.life/dict/dict_plants_9.jpg',
nickName: '피움 나무',
dictionaryPlantName: '스투키',
dday: 0,
Expand All @@ -87,7 +87,7 @@ const REMINDER_DATA = {
},
{
petPlantId: 9,
image: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
image: 'https://static.pium.life/dict/dict_plants_10.jpg',
nickName: '포비 나무',
dictionaryPlantName: '스투키',
dday: -3,
Expand All @@ -96,7 +96,7 @@ const REMINDER_DATA = {
},
{
petPlantId: 10,
image: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
image: 'https://static.pium.life/dict/dict_plants_11.jpg',
nickName: '크론 나무',
dictionaryPlantName: '스투키',
dday: -3,
Expand All @@ -105,7 +105,7 @@ const REMINDER_DATA = {
},
{
petPlantId: 11,
image: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
image: 'https://static.pium.life/dict/dict_plants_12.jpg',
nickName: '빠삐용',
dictionaryPlantName: '스투키',
dday: -7,
Expand All @@ -114,7 +114,7 @@ const REMINDER_DATA = {
},
{
petPlantId: 12,
image: 'https://images.unsplash.com/photo-1598983062491-5934ce558814',
image: 'https://static.pium.life/dict/dict_plants_13.jpg',
nickName: '우테코',
dictionaryPlantName: '스투키',
dday: -10,
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/mocks/data/search.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,22 @@ const SEARCH_DATA = [
{
id: 1,
name: '아',
image: 'https://images.unsplash.com/photo-1667342608690-828e1a839ead',
image: 'https://static.pium.life/dict/dict_plants_1.jpg',
},
{
id: 2,
name: '아카',
image: 'https://images.unsplash.com/photo-1516205651411-aef33a44f7c2',
image: 'https://static.pium.life/dict/dict_plants_2.jpg',
},
{
id: 3,
name: '아카시',
image: 'https://images.unsplash.com/photo-1519567770579-c2fc5436bcf9',
image: 'https://static.pium.life/dict/dict_plants_3.jpg',
},
{
id: 4,
name: '아카시아',
image: 'https://images.unsplash.com/photo-1510325805092-2951ab330b7d',
image: 'https://static.pium.life/dict/dict_plants_1000.jpg',
},
{
id: 5,
Expand Down
Loading