다이어리 데이터 추가 하기

클라이언트 컴포넌트에서 supabase의 메서드 사용 하여 데이터 추가

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const walkTxt = value.filter((item) => item === "a")[0] ?? "";
   
    const daydate = dateFunc();
    const { data, error } = await supabase
      .from("zwritedb")
      .insert([
        {
          id: numId,
          uuid: dataUid,
          eat: eatTxt,
        },
      ])
      .select("*");
    console.log(data);
    if (error) {
      throw error;
    }
  };
  
    <form onSubmit={handleSubmit}>
        {/* <Suspense fallback={<p>로딩중...</p>}> */}
        <Dwritebottomicon />
        {/* </Suspense> */}

        <textarea
          name="content"
          className="resize-none border border-[#F5BB8C] w-full h-40 p-2.5 bg-transparent outline-none rounded-md"
          value={textValue}
          onChange={(e) => setTextValue(e.target.value)}
          required
        ></textarea>
        <button type="submit">등록</button>
        <button type="button">취소</button>
      </form>

 

 

컴포넌트<Dwritebottomicon/>

 <ul style={{ display: "flex" }}>
      {datas.map((item: ImgType) => (
        <li key={item.id}>
          <button onClick={()=>hadleClick(item.name)} type="button">
            <Image src={item.imgurl} width={100} height={100} alt={item.name} />
            {item.name}
          </button>
          
        </li>
      ))}
    </ul>

작업 하면서 만난 에러

<Dwritebottomicon />에 있는 버튼 형태의 아이콘을 클릭 했는데 그대로 수파베이스와 상호 작용을 해서

버튼 타입을 버튼으로 설정 하여 해결