test

src/apis/community/mutations.tsx

@@ -1,5 +1,3 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-
 import {
  postCommunityArticleLike,
  postCreateCommunityArticle,
@@ -8,6 +6,7 @@ import {
 import { Keys } from '@/apis/community/keys';
 import { CommunityArticle } from '@/apis/community/type';
 import useAppRouter from '@/hooks/useAppRouter';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 export const usePostCreateCommunityArticle = () => {
  const queryClient = useQueryClient();
@@ -31,6 +30,8 @@ export const usePostCommunityArticleLike = (articleId: number, categoryId: numbe
  return useMutation({
  mutationFn: () => postCommunityArticleLike(articleId),
  onMutate: async () => {
+ await queryClient.cancelQueries({ queryKey: Keys.getCommunityArticleDetail(articleId) });
+
  // 이전 상태를 저장
  const previousArticle = queryClient.getQueryData(Keys.getCommunityArticleDetail(articleId));
 
@@ -53,7 +54,7 @@ export const usePostCommunityArticleLike = (articleId: number, categoryId: numbe
  );
  } else throw new Error('No previous Data');
  },
- onSuccess: () => {
+ onSettled: () => {
  queryClient.invalidateQueries({ queryKey: Keys.getCommunityArticleDetail(articleId) });
  queryClient.invalidateQueries({ queryKey: Keys.getCommunityArticles(0) });
  queryClient.invalidateQueries({ queryKey: Keys.getCommunityArticles(categoryId) });

src/app/[lng]/(main)/grouping/create/funnels/main/UploadSection.client.tsx

@@ -17,14 +17,10 @@ export default function UploadSection({ control }: ImageThumbnailProps) {
  name: 'imageUrl',
  control,
  });
- const { field: previewImageField } = useController({
- name: 'previewImage',
- control,
- });
 
- const { handleFileUploadClick } = useFileUpload(async (files) => {
+ const { handleFileUploadClick, previewImage } = useFileUpload(async (files) => {
  field.onChange(files[0]);
- }, previewImageField);
+ });
 
  return (
  <Flex
@@ -33,13 +29,13 @@ export default function UploadSection({ control }: ImageThumbnailProps) {
  className="relative mx-20 aspect-[8/5] overflow-hidden rounded-8 bg-sub"
  onClick={handleFileUploadClick}
  >
- <RenderImage previewImage={previewImageField.value} />
+ <RenderImage previewImage={previewImage} />
  </Flex>
  );
 }
 
 interface RenderImageProps {
- previewImage: string;
+ previewImage: string | undefined;
 }
 
 const RenderImage = memo(function ({ previewImage }: RenderImageProps) {

src/app/[lng]/(main)/profile/setting/edit/components/step1/Step1InputForm.client.tsx

@@ -1,5 +1,3 @@
-import { useController } from 'react-hook-form';
-
 import CountryBotoomSheet from './CountryBotoomSheet';
 import { Step1Props } from './Step1.client';
 import { formatBirthDTO } from '../../util';
@@ -17,6 +15,7 @@ import { TextField, TextFieldController } from '@/components/TextField';
 import { personalityList } from '@/constants/personalityList';
 import { useFileUpload } from '@/hooks/useFileUpload';
 import { useModal } from '@/hooks/useModal';
+import { useController } from 'react-hook-form';
 
 interface Step1InputFormProps extends Step1Props {}
 
@@ -29,12 +28,15 @@ export default function Step1InputForm({ onPrev }: Step1InputFormProps) {
  const personalities = watch('personalities');
 
  const {
- field: { value, onChange },
+ field: { value, onChange: onChangeImageUrl },
  } = useController({
  name: 'imageUrl',
  control,
  });
- const { handleFileUploadClick, isPending } = useFileUpload((files) => onChange(files[0]));
+
+ const { handleFileUploadClick, previewImage } = useFileUpload((files) =>
+ onChangeImageUrl(files[0])
+ );
 
  const isAllTyped = formState.isValid && !!watch('gender') && personalities.length;
 
@@ -69,7 +71,6 @@ export default function Step1InputForm({ onPrev }: Step1InputFormProps) {
  imageUrl={value}
  size="large"
  iconVariant="draft_orders"
- isPending={isPending}
  onClick={handleFileUploadClick}
  />
  </Flex>

src/app/[lng]/(sub)/admin/page.tsx

@@ -13,7 +13,7 @@ export default function page() {
  imageUrl:
  'https://gloddy.s3.ap-northeast-2.amazonaws.com/file/eebb9660-216f-491c-902b-367dd5cc27be.JPG',
  maxUser: 3,
- meetDate: '2023-12-10',
+ meetDate: '2024-01-25',
  placeAddress: '서울특별시',
  placeId: 'ChIJZTibxAqlfDURIeavJisLdqo',
  placeLatitude: 37.5131008,

src/components/Image/ImageWithPlaceholder.tsx

@@ -1,4 +1,4 @@
-import getBase64 from '@/utils/getBase64';
+import getBase64 from '@/utils/getBase64FromBuffer';
 import Image from 'next/image';
 
 interface ImageWithPlaceholderProps {

src/hooks/getBase64FromImage.ts

@@ -0,0 +1,8 @@
+export function getBase64FromImage(file: File): Promise<string | undefined> {
+ return new Promise((resolve, reject) => {
+ const reader = new FileReader();
+ reader.readAsDataURL(file);
+ reader.onload = () => resolve(reader.result?.toString());
+ reader.onerror = (error) => reject(error);
+ });
+}

src/hooks/useFileUpload.tsx

@@ -1,13 +1,13 @@
+import { getBase64FromImage } from './getBase64FromImage';
 import { usePostFiles } from '@/apis/common';
 import { useCallback, useState } from 'react';
-import { ControllerRenderProps, Field } from 'react-hook-form';
+import { ControllerRenderProps } from 'react-hook-form';
 
 interface UseImageUploadProps {
  /**
  * 파일 업로드가 완료되었을 때 실행할 함수를 지정합니다.
  */
  handleFileChange: (fileUrlList: string[]) => void;
- previewImageField: ControllerRenderProps<any, any>;
  options?: {
  /**
  * 업로드할 파일의 타입을 지정합니다. (default: image/*)
@@ -22,24 +22,24 @@ interface UseImageUploadProps {
 
 export function useFileUpload(
  handleFileChange: UseImageUploadProps['handleFileChange'],
- previewImageField?: UseImageUploadProps['previewImageField'],
  options?: UseImageUploadProps['options']
 ) {
  const { mutate, isPending } = usePostFiles();
+ const [previewImage, setPreviewImage] = useState<string | undefined>();
 
- const handleFileUploadClick = useCallback(() => {
+ const handleFileUploadClick = async () => {
  const input = document.createElement('input');
+ input.style.display = 'none';
  input.type = 'file';
  input.accept = options?.accept || 'image/*';
  input.multiple = options?.multiple || false;
- input.onchange = (event) => {
+ document.body.appendChild(input);
+ input.onchange = async (event) => {
  const { files } = event.target as HTMLInputElement;
  if (!files) return;
- const reader = new FileReader();
- reader.onload = () => {
- previewImageField && previewImageField.onChange(reader.result);
- };
- reader.readAsDataURL(files[0]);
+
+ const base64 = await getBase64FromImage(files[0]);
+ setPreviewImage(base64);
 
  mutate(
  { fileList: Array.from(files) },
@@ -51,10 +51,11 @@ export function useFileUpload(
  );
  };
  input.click();
- }, [handleFileChange, mutate, options?.accept, options?.multiple, previewImageField]);
+ };
 
  return {
  handleFileUploadClick,
  isPending,
+ previewImage,
  };
 }

src/utils/getBase64.ts → src/utils/getBase64FromBuffer.ts

@@ -1,7 +1,7 @@
 import { getBufferFromS3Url } from './getBufferFromS3Url';
 import { getPlaiceholder } from 'plaiceholder';
 
-const getBase64 = async (src: string) => {
+const getBase64FromBuffer = async (src: string) => {
  const buffer = await getBufferFromS3Url(src);
 
  const {
@@ -15,4 +15,4 @@ const getBase64 = async (src: string) => {
  };
 };
 
-export default getBase64;
+export default getBase64FromBuffer;