Skip to content

Refactor(client): use-image-upload 로직 추상화 #502

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
gwagjiug merged 4 commits into from
Feb 21, 2026
Merged

Refactor(client): use-image-upload 로직 추상화 #502

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
3da2aee
refactor: use-image-upload 로직 추상화
gwagjiug Feb 20, 2026
ad893b2
fix: 불필요한 useCallback 제거
gwagjiug Feb 20, 2026
0a36eca
refactor: use-image-upload 훅에서 에러 상태 변수 이름 변경 및 불필요한 코드 제거
gwagjiug Feb 20, 2026
0d97a24
refactor: use-image-upload 훅에서 업로드 상태 변수 이름 변경
gwagjiug Feb 21, 2026
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
5 changes: 4 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,4 +43,7 @@ storybook-static

# cursor
.cursorrules
.cursorignore
.cursorignore

#codex
AGENTS.md
Copy link
Member

@jeonghoon11 jeonghoon11 Feb 20, 2026

Choose a reason for hiding this comment

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

지욱님의 AGENTS.md 탐나네요.. 공유해주세요~

41 changes: 7 additions & 34 deletions apps/client/src/pages/community/community-edit/community-edit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,18 +21,14 @@ import {
COMMUNITY_MUTATION_OPTIONS,
COMMUNITY_QUERY_OPTIONS,
} from '@shared/api/domain/community/queries';
import {
MUTATION_QUERY_OPTIONS,
uploadImageToS3,
} from '@shared/api/domain/queries';
import { COMMUNITY_QUERY_KEY } from '@shared/api/keys/query-key';
import {
LIMIT_LONG_TEXT,
LIMIT_SHORT_TEXT,
} from '@shared/constants/text-limits';
import { useImageUpload } from '@shared/hooks/use-image-upload';
import { useLimitedInput } from '@shared/hooks/use-limited-input';
import { routePath } from '@shared/router/path';
import { extractS3Urls } from '@shared/utils/utils';

import * as styles from './community-edit.css';

Expand All @@ -59,9 +55,7 @@ const CommunityEdit = () => {
},
});

const { mutate: postImageUploadMutate } = useMutation({
Copy link
Member

@jeonghoon11 jeonghoon11 Feb 20, 2026 •
edited
Loading

Choose a reason for hiding this comment

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

mutation에 대한 코드를 삭제하셨으니 queries.ts에서 MUTATION_QUERY_OPTIONS.POST_IMAGE()도 같이 삭제해도 괜찮을것 같아요!
그런데 여기서 궁금한게 있어요
mutation을 써서 Pending상태일 때 로딩 로띠나 에러처리 등을 할 수 있는데 제거하신 이유가 궁금하네요! JustWonder

Copy link
Member Author

@gwagjiug gwagjiug Feb 20, 2026 •
edited
Loading

Choose a reason for hiding this comment

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

뮤테이션을 제거하지 않은 이유는 인프라 레이어라서 제거하지 않았던건데 옵션 블록은 제거하거나 주석처리하거나 하는게 좋겠네요 일단 제거해둘게요 👍

mutation을 써서 Pending상태일 때 로딩 로띠나 에러처리 등을 할 수 있는데 제거하신 이유가 궁금하네요! JustWonder

useImageUpload 내부에도 로딩 및 에러 처리를 위한 상태 반환 값이 존재해서 우려하는 부분은 대체 될 것 같아요

export const useImageUpload = () => {
  const [isUploading, setIsUploading] = useState(false);
  const [isError, setError] = useState(false);

  const uploadImageFiles = async (files: File[]) => {
    setIsUploading(true);
    setError(false);

    try {
      return await uploadImageFilesInternal(files);
    } catch (e) {
      setError(true);
      throw e;
    } finally {
      setIsUploading(false);
    }
  };

  return { uploadImageFiles, isUploading, isError };
};

Copy link
Member

@jeonghoon11 jeonghoon11 Feb 21, 2026

Choose a reason for hiding this comment

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

아 이해했어요 isUploading이 로딩 상태를 관리하는 state였군요... 설명 감사합니다 ☺️

...MUTATION_QUERY_OPTIONS.POST_IMAGE(),
});
const { uploadImageFiles } = useImageUpload();

if (!feedDetailData) {
throw new Error(
Expand Down Expand Up @@ -90,39 +84,18 @@ const CommunityEdit = () => {
);
const { isErrorState } = useLimitedInput(LIMIT_SHORT_TEXT, title.length);

const handleUploadNewImages = async () => {
if (newImages.length === 0) {
return [];
}

const data = await new Promise<{ presignedUrls: string[] }>(
(resolve, reject) =>
postImageUploadMutate(
newImages.map((item) => item.file.type),
{ onSuccess: resolve, onError: reject },
),
);

await Promise.all(
data.presignedUrls.map((url, idx) =>
uploadImageToS3(url, newImages[idx].file),
),
const handlePutFeed = async () => {
const uploadedUrls = await uploadImageFiles(
newImages.map((item) => item.file),
);

const uploadedUrls = extractS3Urls(data.presignedUrls).map((url, idx) => ({
const newUploadedImages = uploadedUrls.map((url, idx) => ({
imageUrl: url,
sequence: updatedImages.length + idx,
}));

setUpdatedImages((prev) => [...prev, ...uploadedUrls]);
setUpdatedImages((prev) => [...prev, ...newUploadedImages]);
setNewImages([]);

return uploadedUrls;
};

const handlePutFeed = async () => {
const newUploadedImages = await handleUploadNewImages();

mutate({
body: {
newTitle: title,
Expand Down
39 changes: 6 additions & 33 deletions apps/client/src/pages/community/community-write/community-write.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,14 @@ import { PLACEHOLDER } from '@widgets/community/constant/input-placeholder';
import { CategoryType } from '@widgets/community/types/category-type';

import { COMMUNITY_MUTATION_OPTIONS } from '@shared/api/domain/community/queries';
import {
MUTATION_QUERY_OPTIONS,
uploadImageToS3,
} from '@shared/api/domain/queries';
import { COMMUNITY_QUERY_KEY } from '@shared/api/keys/query-key';
import {
LIMIT_LONG_TEXT,
LIMIT_SHORT_TEXT,
} from '@shared/constants/text-limits';
import { useImageUpload } from '@shared/hooks/use-image-upload';
import { useLimitedInput } from '@shared/hooks/use-limited-input';
import { routePath } from '@shared/router/path';
import { extractS3Urls } from '@shared/utils/utils';

import * as styles from './community-write.css';

Expand All @@ -50,9 +46,7 @@ const CommunityWrite = () => {
},
});

const { mutate: postImageUploadMutate } = useMutation({
...MUTATION_QUERY_OPTIONS.POST_IMAGE(),
});
const { uploadImageFiles } = useImageUpload();

const isDisabled =
!(title.trim() && content.trim() && category?.value) || isPending;
Expand Down Expand Up @@ -91,30 +85,6 @@ const CommunityWrite = () => {
);
};

const uploadAllImages = async () => {
if (uploadedImages.length === 0) {
return [];
}

const data = await new Promise<{ presignedUrls: string[] }>(
(resolve, reject) =>
postImageUploadMutate(
uploadedImages.map((item) => item.file.type),
{
onSuccess: resolve,
onError: reject,
},
),
);
await Promise.all(
data.presignedUrls.map((url, idx) =>
uploadImageToS3(url, uploadedImages[idx].file),
),
);

return extractS3Urls(data.presignedUrls);
};

const submitFeed = async (imageUrls: string[]) => {
postFeedMutate({
title,
Expand All @@ -128,7 +98,10 @@ const CommunityWrite = () => {
if (isDisabled) {
return null;
}
return submitFeed(await uploadAllImages());
const uploadedImageUrls = await uploadImageFiles(
uploadedImages.map((image) => image.file),
);
return submitFeed(uploadedImageUrls);
};

return (
Expand Down
11 changes: 0 additions & 11 deletions apps/client/src/shared/api/domain/queries.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,9 @@
import { mutationOptions } from '@tanstack/react-query';
import ky from '@toss/ky';

import { END_POINT } from '../config/end-point';
import { api } from '../config/instance';
import { SHARED_MUTATION_KEY } from '../keys/query-key';
import { ImageUploadResponse } from '../types/types';

export const MUTATION_QUERY_OPTIONS = {
POST_IMAGE: () => {
return mutationOptions({
mutationKey: SHARED_MUTATION_KEY.IMAGE_UPLOAD(),
mutationFn: (mediaType: string[]) => postImage(mediaType),
});
},
};

// =============================================================================
// MUTATION FUNCTIONS
// =============================================================================
Expand Down
39 changes: 39 additions & 0 deletions apps/client/src/shared/hooks/use-image-upload.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { useState } from 'react';

import { postImage, uploadImageToS3 } from '@shared/api/domain/queries';
import { extractS3Urls } from '@shared/utils/utils';

const uploadImageFilesInternal = async (files: File[]): Promise<string[]> => {
if (files.length === 0) {
return [];
}

const { presignedUrls } = await postImage(files.map((file) => file.type));

await Promise.all(
files.map((file, idx) => uploadImageToS3(presignedUrls[idx], file)),
);

return extractS3Urls(presignedUrls);
};

export const useImageUpload = () => {
const [isLoading, setIsLoading] = useState(false);
const [isError, setError] = useState(false);

const uploadImageFiles = async (files: File[]) => {
setIsLoading(true);
setError(false);

try {
return await uploadImageFilesInternal(files);
} catch (e) {
setError(true);
Copy link
Member

@jeonghoon11 jeonghoon11 Feb 20, 2026 •
edited
Loading

Choose a reason for hiding this comment

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

에러가 발생했을 때 setError 상태가 변경되지만 이후 에러에 대한 대응은 없어보이는것 같아요! 그래서 이미지 업로드 실 패 시 토스트 메시지를 띄우는 방안도 괜찮아 보이네요!

Copy link
Member Author

@gwagjiug gwagjiug Feb 20, 2026 •
edited
Loading

Choose a reason for hiding this comment

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

toast 메시지와 같은 에러 핸들링을 하기 위해서 상태를 설정하고 그걸 return 하고있는거에용 여기선 상태만 선언하고 이 함수에서는 에러 상태만 반환해요

그래야 사용처별로 달라지는 ux ex) 토스트 메시지 등등을 대응할 수 있어요

loading 값도 마찬가지 이유로 반환하는거구용

Copy link
Member

@hansoojeongsj hansoojeongsj Feb 20, 2026

Choose a reason for hiding this comment

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

오 훅에서 상태만 보고 사용처에서 UX를 결정하는 의도 확인했습니당
다만 기존에도 이 pr에서도 detail-section 같은 호출부에서 에러 대응 로직이 없다 보니, heic 파일 업로드 실패나 서버 에러 시 사용자한테 알림이 안 가고 있더라고요.
이 UI 처리는 이번 PR에서 같이 수정하실 예정인지 아니면 별도 브랜치에서 되어야 하는 부분인지 궁금합니다 !

Copy link
Member

@jeonghoon11 jeonghoon11 Feb 21, 2026

Choose a reason for hiding this comment

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

toast 메시지와 같은 에러 핸들링을 하기 위해서 상태를 설정하고 그걸 return 하고있는거에용 여기선 상태만 선언하고 이 함수에서는 에러 상태만 반환해요
그래야 사용처별로 달라지는 ux ex) 토스트 메시지 등등을 대응할 수 있어요

이해했습니다. 에러에 따른 UI는 사용처에서 관리하도록 구성하신거군요 👍

Copy link
Member Author

@gwagjiug gwagjiug Feb 21, 2026

Choose a reason for hiding this comment

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

오 훅에서 상태만 보고 사용처에서 UX를 결정하는 의도 확인했습니당
다만 기존에도 이 pr에서도 detail-section 같은 호출부에서 에러 대응 로직이 없다 보니, heic 파일 업로드 실패나 서버 에러 시 사용자한테 알림이 안 가고 있더라고요.
이 UI 처리는 이번 PR에서 같이 수정하실 예정인지 아니면 별도 브랜치에서 되어야 하는 부분인지 궁금합니다 !

@hansoojeongsj 에러처리에 관련된건 별도의 스코프에서 따로 처리하려고해요 ㅎㅎ 센트리 도입부터 시작해서 한번에 진행하려구용

throw e;
} finally {
setIsLoading(false);
}
};

return { uploadImageFiles, isLoading, isError };
};
10 changes: 4 additions & 6 deletions apps/client/src/widgets/community/components/detail-section/detail-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,10 @@ import { ReplyImage } from '@widgets/community/types/reply-image.type';
import { isValidImage } from '@widgets/community/utils/type-guard';

import { COMMUNITY_MUTATION_OPTIONS } from '@shared/api/domain/community/queries';
import { postImage, uploadImageToS3 } from '@shared/api/domain/queries';
import { COMMUNITY_QUERY_KEY } from '@shared/api/keys/query-key';
import { LIMIT_MEDIUM_TEXT } from '@shared/constants/text-limits';
import { useImageUpload } from '@shared/hooks/use-image-upload';
import { useLimitedInput } from '@shared/hooks/use-limited-input';
import { extractS3Urls } from '@shared/utils/utils';

interface DetailSectionProps {
postId: string;
Expand All @@ -29,6 +28,7 @@ const DetailSection = ({ postId }: DetailSectionProps) => {
const prevModeRef = useRef(mode);

const queryClient = useQueryClient();
const { uploadImageFiles } = useImageUpload();

useEffect(() => {
const prev = prevModeRef.current;
Expand Down Expand Up @@ -143,10 +143,8 @@ const DetailSection = ({ postId }: DetailSectionProps) => {

let uploadedUrl: string | undefined;
if (imageFile) {
const { presignedUrls } = await postImage([imageFile.type]);
const presignedUrl = presignedUrls[0];
await uploadImageToS3(presignedUrl, imageFile);
uploadedUrl = extractS3Urls([presignedUrl])[0];
const [url] = await uploadImageFiles([imageFile]);
uploadedUrl = url;
}

const imageUrls = uploadedUrl ? [uploadedUrl] : [];
Expand Down
20 changes: 5 additions & 15 deletions apps/client/src/widgets/mypage/components/body/body.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,11 @@ import AccountMenuBar from '@widgets/mypage/components/account-menu-bar/account-
import Preview from '@widgets/mypage/components/preview/preview';

import { USER_MUTATION_OPTIONS } from '@shared/api/domain/mypage/queries';
import {
MUTATION_QUERY_OPTIONS,
uploadImageToS3,
} from '@shared/api/domain/queries';
import { USER_MUTATION_KEY } from '@shared/api/keys/query-key';
import { useImageUpload } from '@shared/hooks/use-image-upload';
import { useInputState } from '@shared/hooks/use-input-state';
import { useToggle } from '@shared/hooks/use-toggle';
import { queryClient } from '@shared/utils/query-client';
import { extractS3Urls } from '@shared/utils/utils';

import * as styles from './body.css';

Expand All @@ -36,9 +32,7 @@ const Body = ({ nickname, profileImage }: ContentProps) => {
...USER_MUTATION_OPTIONS.PATCH_USER_PROFILE(),
});

const { mutate: postImageUploadMutate } = useMutation({
...MUTATION_QUERY_OPTIONS.POST_IMAGE(),
});
const { uploadImageFiles } = useImageUpload();

const handleClickImageButton = () => {
fileInputRef.current?.click();
Expand All @@ -51,16 +45,12 @@ const Body = ({ nickname, profileImage }: ContentProps) => {
}
};

const handleChangeImage = (e: ChangeEvent<HTMLInputElement>) => {
const handleChangeImage = async (e: ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
if (file) {
setPreviewImage(URL.createObjectURL(file));
postImageUploadMutate([file.type], {
onSuccess: (data) => {
uploadImageToS3(data.presignedUrls[0], file);
setNewProfileImage(extractS3Urls([data.presignedUrls[0]])[0]);
},
});
const [uploadedImage] = await uploadImageFiles([file]);
setNewProfileImage(uploadedImage);
}
};

Expand Down
Loading