test

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 {}
 
@@ -34,7 +33,10 @@ export default function Step1InputForm({ onPrev }: Step1InputFormProps) {
  name: 'imageUrl',
  control,
  });
- const { handleFileUploadClick, isPending } = useFileUpload((files) => onChange(files[0]));
+
+ const { handleFileUploadClick, isPending, previewImage } = useFileUpload((files) =>
+ onChange(files[0])
+ );
 
  const isAllTyped = formState.isValid && !!watch('gender') && personalities.length;
 
@@ -66,7 +68,7 @@ export default function Step1InputForm({ onPrev }: Step1InputFormProps) {
  <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col px-20">
  <Flex justify="center">
  <Avatar
- imageUrl={value}
+ imageUrl={previewImage || value}
  size="large"
  iconVariant="draft_orders"
  isPending={isPending}

src/hooks/getBase64FromImage.ts

@@ -1,4 +1,4 @@
-export function getBase64FromImage(file: File) {
+export function getBase64FromImage(file: File): Promise<string | undefined> {
  return new Promise((resolve, reject) => {
  const reader = new FileReader();
  reader.readAsDataURL(file);

src/hooks/useFileUpload.tsx

@@ -1,14 +1,13 @@
 import { getBase64FromImage } from './getBase64FromImage';
 import { usePostFiles } from '@/apis/common';
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import { ControllerRenderProps } from 'react-hook-form';
 
 interface UseImageUploadProps {
  /**
  * 파일 업로드가 완료되었을 때 실행할 함수를 지정합니다.
  */
  handleFileChange: (fileUrlList: string[]) => void;
- previewImageField: ControllerRenderProps<any, any>;
  options?: {
  /**
  * 업로드할 파일의 타입을 지정합니다. (default: image/*)
@@ -23,10 +22,10 @@ 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 input = document.createElement('input');
@@ -37,11 +36,8 @@ export function useFileUpload(
  const { files } = event.target as HTMLInputElement;
  if (!files) return;
 
- if (previewImageField) {
- const base64 = await getBase64FromImage(files[0]);
- console.log(base64);
- previewImageField.onChange(base64);
- }
+ const base64 = await getBase64FromImage(files[0]);
+ setPreviewImage(base64);
 
  mutate(
  { fileList: Array.from(files) },
@@ -53,10 +49,11 @@ export function useFileUpload(
  );
  };
  input.click();
- }, [handleFileChange, mutate, options?.accept, options?.multiple, previewImageField]);
+ }, [handleFileChange, mutate, options?.accept, options?.multiple]);
 
  return {
  handleFileUploadClick,
  isPending,
+ previewImage,
  };
 }

src/middleware.ts

@@ -71,7 +71,7 @@ const middleware = async (request: NextRequest) => {
 
  const lng = request.cookies.get(cookieName)?.value || 'en';
 
- /* 새로운 페이지 접속 시 */
+ /* 새로운 페이지 접속 시m */
  if (
  !languages.some((loc: string) => request.nextUrl.pathname.startsWith(`/${loc}`)) &&
  !request.nextUrl.pathname.startsWith('/_next')