1. 컴포넌트 구조, 어떻게 해야 할까 ?

<main>
	<JoinTitleTextMessage>
	  재학생 인증을 위해
	  <br />
	  학교 이메일을 입력해주세요
	</JoinTitleTextMessage>
	<FormSection />
	<SubmitSection />
</main>

위 사진의 현재 페이지 컴포넌트 구조이다. FormSection과 SubmitSection이 분리되어 있다. 주혁님이 지적해준 것 처럼, submit은 form안에 있는 게 정상적이다. 바깥이 Context로 둘러쌓여 있기에 현재 form과 submit이 따로 있는 것이 가능하다.나는 지금 표준적인 form의 형태를 벗어난 듯하다.

하나의 form안에 여러 개의 input이 있고, 가장 하단에 button이 있는 것이 표준적인 form의 형태이다.

그렇다면, 컴포넌트를 어떻게 나누어야 할까?

위와 같은 경우, 하나의 form일까, 두 개의 form일까?

html은 <form></form>에서 가장 가까운 <button></button>을 찾아서 submit을 한다. 그렇다면, 위의 경우는 두 번 제출이 이루어지므로 두 개의 폼이라고 볼 수 있다. 맞다. 폼은 제출의 단위이다. 그렇다면, 제출을 기준으로 컴포넌트를 나누어보자.

수정 후 컴포넌트 구조

<main>
  <JoinTitleTextMessage>
    재학생 인증을 위해
    <br />
    학교 이메일을 입력해주세요
  </JoinTitleTextMessage>

  <ModalContext>
    <TimerContext>
      <FormSection />
    </TimerContext>
  </ModalContext>

  <NoticeSection />
</main>

• 유저와의 상호작용이 없는, server component에 해당하는 <NoticeSection />을 분리하였다.
• 또한, FormSection 안에서 사용하는 ModalContext, TimerContext로 둘러쌓았다.

<section>
  <EmailForm />
  <CertificationForm />
</section>

• FormSection안에서 form을 두개로 나누었다. 이메일 입력 폼에 해당하는 EmailForm과 인증번호 입력 폼에 해당하는 CertificationForm이다.

<form onSubmit={handleSubmit(onSubmit)}>
  <EmailSection />
  <BottomFixedDiv>
    <Button text="인증하기" disabled={!isDirty} type="submit" />
    <Spacing size={8} />
    <Button text="다음에 인증하기" color="orange" onClick={nextStep} />
  </BottomFixedDiv>
</form>

• 각 폼에는 입력하는 section과 submit하는 button이 있다.

2. Depth에 대한 고민