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

안녕하세요 섹션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>
    </>
  );
}