refactor: #50 SignForm 리팩토링

[SeungrokYoon]

Description

ContextAPI를 활용하여 SignForm 컴포넌트를 리팩토링 했습니다.

Form은 하위에 많은 컴포넌트들을 가지고 있습니다.
합성 컴포넌트를 활용하면 조금 더 컴포넌트 내부가 잘 보이고, 기능도 한 눈에 예측가능하다 생각했습니다.

아래는 리팩토링 후 페이지 컴포넌트의 컴포넌트 구조입니다.

function SignupPage() {
  return (
    <div>
      <StyledSignFormContainer>
        <SignForm.Title title="회원가입" />
        <SignForm.Form mode="signup">
          <SignForm.Id />
          <SignForm.Password />
          <SignForm.ButtonGroup mode="signup" />
        </SignForm.Form>
      </StyledSignFormContainer>
    </div>
  )
}

function SigninPage() {
  return (
    <div>
      <StyledSignFormContainer>
        <SignForm.Title title="로그인" />
        <SignForm.Form mode="signin">
          <SignForm.Id />
          <SignForm.Password />
          <SignForm.ButtonGroup mode="signin" />
        </SignForm.Form>
      </StyledSignFormContainer>
    </div>
  )
}

추가 리팩토링은...

안 쪽의 Email태그와 Password 컴포넌트가 중복되는 로직이 많습니다.

이걸 줄이려면 Props를 활용하면 좋을 듯 싶습니다!

[netlify]

✅ Deploy Preview for classy-twilight-6e3a73 ready!

Name	Link
🔨 Latest commit	631e257
🔍 Latest deploy log	https://app.netlify.com/sites/classy-twilight-6e3a73/deploys/64e894d45720d40007d80506
😎 Deploy Preview	https://deploy-preview-52--classy-twilight-6e3a73.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[anyl92]

Sign 대규모 개편.. 고생 많으셨어요 ㅠㅠ