use server를 클라이언트 컴포넌트에서 사용시 에러

안녕하세요 섹션3의 3번째 강의 server action을 보고 있는데요

const submit에서 에러가 발생해서 질문합니다.

const submit에서 서버액션을 사용하기 위해 "use server"를 넣었는데 다음과 같은 에러가 발생합니다.

./src/app/(beforeLogin)/_component/SignupModal.tsx
Error: 
  × It is not allowed to define inline "use server" annotated Server Actions in Client Components.
  │ To use Server Actions in a Client Component, you can either export them from a separate file with "use server" at the top, or pass them down through props from a Server Component.
  │ 
  │ Read more: https://nextjs.org/docs/app/api-reference/functions/server-actions#with-client-components
  │ 
    ╭─[/home/tpark/SNS/z-com/src/app/(beforeLogin)/_component/SignupModal.tsx:3:1]
  3 │     import { redirect } from "next/navigation";
  4 │     
  5 │     export default function SignupModal() {
  6 │ ╭─▶   const submit = async (formData: FormData) => {
  7 │ │       "use server";
  8 │ │       if (!formData.get("id")) {
  9 │ │         return "아이디를 입력하세요.";
 10 │ │       }
 11 │ │       if (!formData.get("name")) {
 12 │ │         return "닉네임을 입력하세요.";
 13 │ │       }
 14 │ │       if (!formData.get("password")) {
 15 │ │         return "비밀번호를 입력하세요.";
 16 │ │       }
 17 │ │       if (!formData.get("image")) {
 18 │ │         return "이미지를 업로드하세요.";
 19 │ │       }
 20 │ │       if (!formData.get("id")) {
 21 │ │         return "이미 사용 중인 아이디입니다.";
 22 │ │       }
 23 │ │   
 24 │ │       let shouldRedirect = false;
 25 │ │       try {
 26 │ │         const response = await fetch(
 27 │ │           `${process.env.NEXT_PUBLIC_BASE_URL}/api/users`,
 28 │ │           {
 29 │ │             method: "post",
 30 │ │             body: formData,
 31 │ │             credentials: "include",
 32 │ │           }
 33 │ │         );
 34 │ │         console.log(response.status);
 35 │ │         if (response.status === 403) {
 36 │ │           return { message: "user_exists" };
 37 │ │         }
 38 │ │         console.log(await response.json());
 39 │ │         shouldRedirect = true;
 40 │ │       } catch (err) {
 41 │ │         console.error(err);
 42 │ │       }
 43 │ │       if (shouldRedirect) {
 44 │ │         redirect("/home");
 45 │ │       }
 46 │ ╰─▶   };
 47 │       return (
 48 │         <>
 49 │           <div className={style.modalBackground}>
    ╰────

서버 액션부분을 다른 컴포넌트로 분리해서 사용해야 하는거 같은데 강의 내용에서는 바로 진행이 되서 제가 어느부분이 잘못되었는지 잘 모르겠습니다.

그리고 혹시 최상단에 "use client"를 작성하지 않았기에 이건 서버컴포넌트인줄 알았는데 에러메세지에 클라이언트 컴포넌트에서 사용할 수 없다는건 현재 컴포넌트가 클라이언트 컴포넌트인건가요...?

아래는 제가 작성한 코드입니다.

import style from "./signup.module.css";
import BackButton from "./BackButton";
import { redirect } from "next/navigation";

export default function SignupModal() {
  const submit = async (formData: FormData) => {
    "use server";
    if (!formData.get("id")) {
      return "아이디를 입력하세요.";
    }
    if (!formData.get("name")) {
      return "닉네임을 입력하세요.";
    }
    if (!formData.get("password")) {
      return "비밀번호를 입력하세요.";
    }
    if (!formData.get("image")) {
      return "이미지를 업로드하세요.";
    }
    if (!formData.get("id")) {
      return "이미 사용 중인 아이디입니다.";
    }

    let shouldRedirect = false;
    try {
      const response = await fetch(
        `${process.env.NEXT_PUBLIC_BASE_URL}/api/users`,
        {
          method: "post",
          body: formData,
          credentials: "include",
        }
      );
      console.log(response.status);
      if (response.status === 403) {
        return { message: "user_exists" };
      }
      console.log(await response.json());
      shouldRedirect = true;
    } catch (err) {
      console.error(err);
    }
    if (shouldRedirect) {
      redirect("/home");
    }
  };
  return (
    <>
      <div className={style.modalBackground}>
        <div className={style.modal}>
          <div className={style.modalHeader}>
            <BackButton />
            <div>계정을 생성하세요.</div>
          </div>
          <form action={submit}>
            <div className={style.modalBody}>
              <div className={style.inputDiv}>
                <label className={style.inputLabel} htmlFor="id">
                  아이디
                </label>
                <input
                  id="id"
                  name="id"
                  className={style.input}
                  type="text"
                  placeholder=""
                  required
                />
              </div>
              <div className={style.inputDiv}>
                <label className={style.inputLabel} htmlFor="name">
                  닉네임
                </label>
                <input
                  id="name"
                  name="name"
                  className={style.input}
                  type="text"
                  placeholder=""
                  required
                />
              </div>
              <div className={style.inputDiv}>
                <label className={style.inputLabel} htmlFor="password">
                  비밀번호
                </label>
                <input
                  id="password"
                  name="password"
                  className={style.input}
                  type="password"
                  placeholder=""
                  required
                />
              </div>
              <div className={style.inputDiv}>
                <label className={style.inputLabel} htmlFor="image">
                  프로필
                </label>
                <input
                  id="image"
                  name="image"
                  className={style.input}
                  type="file"
                  accept="image/*"
                  required
                />
              </div>
            </div>
            <div className={style.modalFooter}>
              <button type="submit" className={style.actionButton}>
                가입하기
              </button>
            </div>
          </form>
        </div>
      </div>
    </>
  );
}