인프런 커뮤니티 질문&답변

안녕하세요.

포트폴리오를 만들던 도중 제 스스로 해결되지 않아 질문드립니다.

import { useForm } from "react-hook-form";
import { wrapFormAsync } from "../../../../../../commons/libraries/asyncFunc";
import { yupResolver } from "@hookform/resolvers/yup";
import { productRegisterSchema } from "../../../../../commons/validation/Main";
import InputLong from "../../../../../commons/Input/long";
import Textarea01 from "../../../../../commons/Input/textarea";
import Button01 from "../../../../../commons/button/01";
import InputLongNormal from "../../../../../commons/Input/longNormal";

import { gql, useMutation } from "@apollo/client";
import type {
  IMutation,
  IMutationCreateUseditemArgs,
} from "../../../../../../commons/types/generated/types";
import { useRouter } from "next/router";
import ImageUpload01 from "../../../../../commons/imageUpload/imageUpload";

interface IFormData {
  name: string;
  remarks: string;
  contents: string;
  price: number;
  images: string[];
}

export const CREATE_USED_ITEM = gql`
  mutation createUseditem($createUseditemInput: CreateUseditemInput!) {
    createUseditem(createUseditemInput: $createUseditemInput) {
      _id
    }
  }
`;

export default function ProductRegisterBody(): JSX.Element {
  const { register, handleSubmit, formState } = useForm<IFormData>({
    resolver: yupResolver(productRegisterSchema),
    mode: "onChange",
  });
  const router = useRouter();

  const [createUseditem] = useMutation<
    Pick<IMutation, "createUseditem">,
    IMutationCreateUseditemArgs
  >(CREATE_USED_ITEM);

  const onClickSubmit = async (data: IFormData): Promise<void> => {
    console.log(data);
    await createUseditem({
      variables: {
        createUseditemInput: {
          name: data.name,
          remarks: data.remarks,
          contents: data.contents,
          price: data.price,
          images: data.images,
        },
      },
    });
    void router.push("/markets");
  };

  return (
    <form onSubmit={wrapFormAsync(handleSubmit(onClickSubmit))}>
      <InputLong register={register("name")} tag="상품명" />
      <div>{formState.errors.name?.message}</div>
      <InputLong register={register("remarks")} tag="한줄요약" />
      <div>{formState.errors.remarks?.message}</div>
      <Textarea01 register={register("contents")} tag="상품설명" />
      <div>{formState.errors.contents?.message}</div>
      <InputLong register={register("price")} tag="판매가격" />
      <div>{formState.errors.price?.message}</div>
      <InputLongNormal tag="태그입력" />
      <div>거래위치</div>
      <div>
        <p>사진첨부</p>
        <ImageUpload01 register={register("images")} />
      </div>
      <button> 테스트</button>
      <Button01
        title="등록하기"
        isActive={formState.isValid}
        onClick={onClickSubmit}
      />
    </form>
  );
}

import { useMutation } from "@apollo/client";
import { useState, type ChangeEvent, useRef } from "react";
import { UPLOAD_FILE } from "../upload01/Upload01.queries";
import type {
  IMutation,
  IMutationUploadFileArgs,
} from "../../../commons/types/generated/types";
import * as S from "./styles";
import type { UseFormRegisterReturn } from "react-hook-form";

interface IInputProps {
  register: UseFormRegisterReturn;
}

export default function ImageUpload01(props: IInputProps): JSX.Element {
  const [image, setImage] = useState("");
  const [images, SetImages] = useState("");
  const fileRef = useRef<HTMLInputElement>(null);

  const [uploadFile] = useMutation<
    Pick<IMutation, "uploadFile">,
    IMutationUploadFileArgs
  >(UPLOAD_FILE);

  const onChangeImageFile = async (
    event: ChangeEvent<HTMLInputElement>,
  ): Promise<void> => {
    const file = event.target.files?.[0];

    const result = await uploadFile({ variables: { file } });
    console.log(result.data?.uploadFile.url);
    SetImages(result?.data?.uploadFile?.url ?? "");
  };
  console.log(images);

  const onClickFile = (): void => {
    fileRef.current?.click();
  };

  return (
    <>
      <S.Wrapper>
        <S.Image src={`https://storage.googleapis.com/${images}`} alt="" />
        <S.ImageClick onClick={onClickFile}> +</S.ImageClick>
        <S.HiddenInput onChange={onChangeImageFile} type="file" ref={fileRef} />
        <S.HiddenInput
          value={images}
          {...props.register}
          autoFocus
          name="images"
        />
      </S.Wrapper>
    </>
  );
}

일단 요령이 없어서 아래 처럼 만들었습니다.

사진을 올리면 register를 위해 value값이 변경되는 input창을 만들었으나 등록하기를 누르면 graphql에 업로드되지가 않습니다.

{price: 333, contents: '3333', remarks: '333', name: '333', images: ''}

허나 저 빨간 v표시 친 부분을 한번 클릭한다면

{price: 33, contents: '3333', remarks: '333', name: '3333', images: 'codecamp-file-storage/2023/9/17/Vector.png'}

다음처럼 images가 잘 입력됩니다. 클릭하지 않아도 자동으로 변경되면 images를 업로드 시킬 수 있는 방법이 있을까요? 아니면 참고할만한 다른 방법들이 있을까요?