feat: sign-up 페이지 구현완료

src/features/auth/ConfirmField.tsx

@@ -0,0 +1,27 @@
+import { ComponentPropsWithoutRef } from 'react'
+
+import { poppins } from '@/shared/font'
+import { TextFiled } from '@/shared/ui/TextFiled'
+
+import styles from './confirm-field.module.scss'
+
+type Props = {
+  confirmAPIFn: () => void
+} & ComponentPropsWithoutRef<typeof TextFiled>
+
+export function ConfirmField({ disabled, confirmAPIFn, name, onChange, icon, value, error }: Props) {
+  return (
+    <div>
+      <div className={styles.confirmBox}>
+        <label className={styles.label}>
+          {icon}
+          <input className={`${styles.input} ${poppins.className}`} name={name} value={value} onChange={onChange} />
+        </label>
+        <button disabled={disabled} onClick={confirmAPIFn} type="button">
+          확인
+        </button>
+      </div>
+      {error && <span className={styles.error}>{error}</span>}
+    </div>
+  )
+}

src/features/auth/SignInForm.tsx

@@ -21,15 +21,15 @@ export function SignInForm() {
   }
   return (
     <form className={styles.form}>
-      <TextFiled name={'id'} placeholder="Email" value={id} onChange={onIdChange} icon={<Mail color="#475069" />} />
+      <TextFiled name={'email'} placeholder="Email" value={id} onChange={onIdChange} icon={<Mail color="#475069" />} />
       <TextFiled
         name={'pw'}
         placeholder="password"
         value={pw}
         onChange={onPasswordChange}
         icon={<KeyRound color="#475069" />}
       />
-      <SubmitButton>로그인</SubmitButton>
+      <SubmitButton>Login</SubmitButton>
     </form>
   )
 }

src/features/auth/SignUpForm.tsx

@@ -1,3 +1,98 @@
+'use client'
+
+import { KeyRound, KeySquare, Mail, UserRound } from 'lucide-react'
+import { ChangeEventHandler, useState } from 'react'
+
+import { ConfirmField } from '@/features/auth/ConfirmField'
+import styles from '@/features/auth/SignForm.module.scss'
+import { SubmitButton } from '@/features/auth/SubmitButton'
+import { TextFiled } from '@/shared/ui/TextFiled'
+
 export function SignUpForm() {
-  return <form></form>
+  const [nickname, setNickname] = useState(() => '')
+  const [email, setEmail] = useState(() => '')
+  const [pw, setPw] = useState(() => '')
+  const [confirmPw, setConfirmPw] = useState(() => '')
+  const [checked, setChecked] = useState([false, false])
+
+  const onNicknameChange: ChangeEventHandler<HTMLInputElement> = e => {
+    nickNameReset()
+    setNickname(e.target.value)
+  }
+
+  const onEmailChange: ChangeEventHandler<HTMLInputElement> = e => {
+    emailReset()
+    setEmail(e.target.value)
+  }
+
+  const onPasswordChange: ChangeEventHandler<HTMLInputElement> = e => {
+    setPw(e.target.value)
+  }
+
+  const onConfirmPasswordChange: ChangeEventHandler<HTMLInputElement> = e => {
+    setConfirmPw(e.target.value)
+  }
+
+  const nickNameChecked = (newState: boolean) => {
+    setChecked(prevState => [newState, prevState[1]])
+  }
+
+  const emailChecked = (newState: boolean) => {
+    setChecked(prevState => [prevState[0], newState])
+  }
+
+  const nickNameApiFn = () => {
+    nickNameChecked(true)
+  }
+
+  const emailApiFn = () => {
+    emailChecked(true)
+  }
+
+  const nickNameReset = () => {
+    nickNameChecked(false)
+  }
+
+  const emailReset = () => {
+    emailChecked(false)
+  }
+  return (
+    <form className={styles.form}>
+      <ConfirmField
+        disabled={checked[0]}
+        value={nickname}
+        onChange={onNicknameChange}
+        name="name"
+        placeholder="NickName"
+        confirmAPIFn={nickNameApiFn}
+        icon={<UserRound color="#475069" />}
+      />
+      <ConfirmField
+        disabled={checked[1]}
+        value={email}
+        onChange={onEmailChange}
+        name="email"
+        placeholder="Email"
+        confirmAPIFn={emailApiFn}
+        icon={<Mail color="#475069" />}
+      />
+      <TextFiled
+        name="password"
+        type="password"
+        placeholder="Password"
+        value={pw}
+        onChange={onPasswordChange}
+        icon={<KeyRound color="#475069" />}
+      />
+      <TextFiled
+        name="passwordConfirm"
+        type="password"
+        placeholder="PasswordConfirm"
+        value={confirmPw}
+        onChange={onConfirmPasswordChange}
+        icon={<KeySquare color="#475069" />}
+      />
+      <SubmitButton disabled={!!checked.filter(value => !value).length}>Sign Up</SubmitButton>
+    </form>
+  )
 }

src/features/auth/SubmitButton.tsx

@@ -1,12 +1,14 @@
-import { PropsWithChildren } from 'react'
+import { ComponentPropsWithoutRef, PropsWithChildren } from 'react'
 
 import { poppins } from '@/shared/font'
 
 import styles from './submit-button.module.scss'
 
-export function SubmitButton({ children }: PropsWithChildren) {
+type Props = ComponentPropsWithoutRef<'button'>
+
+export function SubmitButton({ children, ...rest }: PropsWithChildren<Props>) {
   return (
-    <button type="submit" className={`${styles.button} ${poppins.className}`}>
+    <button type="submit" className={`${styles.button} ${poppins.className}`} {...rest}>
       {children}
     </button>
   )

src/features/auth/confirm-field.module.scss

@@ -0,0 +1,58 @@
+.label {
+  display: flex;
+  padding: 0.75rem 1rem;
+  align-items: center;
+  gap: 1rem;
+  flex: 1 0 0;
+
+  background: rgba(0, 0, 0, 10%);
+  border-radius: 0.75rem;
+  border: 1px solid #323B54;
+}
+
+.confirmBox {
+  display: flex;
+  gap: 0.75rem;
+
+  button {
+    background: rgba(0, 0, 0, 10%);
+    border: 1px solid #323B54;
+    color: white;
+    font-weight: bold;
+    cursor: pointer;
+    border-radius: 0.75rem;
+    width: 100px;
+  }
+
+  button:disabled {
+    cursor: no-drop;
+  }
+}
+
+.input {
+  display: flex;
+  height: 2.5rem;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  flex: 1 0 0;
+
+  background: transparent;
+  border: none;
+  outline: none;
+
+  color: white;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1rem;
+
+  &::placeholder {
+    color: #475069;
+  }
+}
+
+.error {
+  color: red;
+  padding-left: 10px;
+}

src/features/auth/submit-button.module.scss

@@ -1,4 +1,5 @@
 .button {
+  width: 100%;
   display: flex;
   padding: 1rem 2rem;
   justify-content: center;
@@ -15,4 +16,10 @@
   font-style: normal;
   font-weight: 400;
   line-height: 1.5rem;
+
+  cursor: pointer;
+
+  &:disabled {
+    cursor: no-drop;
+  }
 }

src/shared/ui/TextFiled.tsx

@@ -3,17 +3,24 @@ import { ComponentPropsWithoutRef, ReactNode } from 'react'
 import { poppins } from '@/shared/font'
 
 import styles from './text-filed.module.scss'
+
 type Props = {
   icon: ReactNode
   error?: string
 } & ComponentPropsWithoutRef<'input'>
 
-export function TextFiled({ name, onChange, icon, value, error }: Props) {
+export function TextFiled({ type = 'text', name, onChange, icon, value, error }: Props) {
   return (
     <div>
       <label className={styles.label}>
         {icon}
-        <input className={`${styles.input} ${poppins.className}`} name={name} value={value} onChange={onChange} />
+        <input
+          type={type}
+          className={`${styles.input} ${poppins.className}`}
+          name={name}
+          value={value}
+          onChange={onChange}
+        />
       </label>
       {error && <span className={styles.error}>{error}</span>}
     </div>

src/shared/ui/text-filed.module.scss

@@ -33,5 +33,6 @@
 }
 
 .error {
-
+  color: red;
+  padding-left: 10px;
 }