feat: 이메일 인증/다시 보내기 페이지 구현

apps/web/src/pages/Login/components/Loginforrm.tsx

@@ -37,12 +37,11 @@ const LoginForm = () => {
             placeholder="이메일"
             value={formData.email}
             onChange={(e) => handleInputChange('email', e.target.value)}
-            className="hbp:text-body-lg-regular aspect-[44/6] outline-none focus:border-yellow-500"
+            className="hbp:text-body-lg-regular aspect-[44/6]"
           />
         </div>
         {/* 비밀번호 부분 */}
         <PasswordField
-          className="focus:border-yellow-500"
           value={formData.password}
           onChange={(e) => handleInputChange('password', e.target.value)}
         />

apps/web/src/pages/Login/components/PasswordField.tsx

@@ -18,7 +18,6 @@ const PasswordField = ({
 }: PasswordFieldProps) => {
   /* 비밀번호 보이기/숨기기 */
   const [isVisible, setIsVisible] = useState(false);
-  const [isFocused, setIsFocused] = useState(false);
 
   const toggleVisibility = () => setIsVisible((prev) => !prev);
 
@@ -30,7 +29,8 @@ const PasswordField = ({
         placeholder={placeholder}
         value={value}
         onChange={onChange}
-        className={`hbp:text-body-lg-regular aspect-[44/6] outline-none ${className}`}
+        maxLength={16}
+        className={`hbp:text-body-lg-regular aspect-[44/6] ${className}`}
       />
       {value && (
         <button

apps/web/src/pages/SignUp/EmailVerificationPage.tsx

@@ -0,0 +1,22 @@
+import { Button } from '@ui/Button/Button';
+import EmailHeroSection from './components/EmailHeroSection';
+import ResendSection from './components/ResendSection';
+
+const EmailVerificationPage = () => {
+  return (
+    <main className="hbp:min-h-[calc(100vh-75px)] flex min-h-[calc(100vh-60px)] flex-col items-center justify-center">
+      <div className="hbp:mx-auto hbp:max-w-screen-lg hbp:px-10 relative w-full overflow-visible">
+        <section className="= flex w-full flex-col items-center justify-center px-7">
+          <EmailHeroSection />
+          <Button
+            text="로그인"
+            className="text-body-xl-medium h-[49px] w-[440px]"
+          />
+          <ResendSection />
+        </section>
+      </div>
+    </main>
+  );
+};
+
+export default EmailVerificationPage;

apps/web/src/pages/SignUp/ResendVerificationPage.tsx

@@ -0,0 +1,19 @@
+import ResendEmailHerosection from './components/ResendEmailHeroSection';
+import ResendSection from './components/ResendSection';
+import VerifyAction from './components/VerifyAction';
+
+const ResendVerificationPage = () => {
+  return (
+    <main className="hbp:min-h-[calc(100vh-75px)] flex min-h-[calc(100vh-60px)] flex-col items-center justify-center">
+      <div className="hbp:mx-auto hbp:max-w-screen-lg hbp:px-10 relative w-full overflow-visible">
+        <section className="= flex w-full flex-col items-center justify-center px-7">
+          <ResendEmailHerosection />
+          <VerifyAction />
+          <ResendSection />
+        </section>
+      </div>
+    </main>
+  );
+};
+
+export default ResendVerificationPage;

apps/web/src/pages/SignUp/SignUpPage.tsx

@@ -6,7 +6,7 @@ const SignUpPage = () => {
       <div className="hbp:mx-auto hbp:max-w-screen-lg hbp:px-10 w-full overflow-visible">
         {/* 페이지 제목 */}
         <section className="hbp:gap-[45px] flex w-full flex-col items-center justify-center gap-9 px-7">
-          <p className="text-title-4xl-bold hbp:text-[40px] text-grey-900 text-center">
+          <p className="text-title-4xl-bold hbp:text-[40px] text-grey-900 w-full text-center">
             회원가입
           </p>
           {/* 회원가입폼 */}

apps/web/src/pages/SignUp/components/EmailHeroSection.tsx

@@ -0,0 +1,24 @@
+import EmailIcon from '@assets/auth/email_icon.svg?react';
+
+export default function EmailHeroSection() {
+  return (
+    <div className="mb-12 flex flex-col items-center gap-[46px]">
+      <EmailIcon className="ml-5" />
+      <div className="flex flex-col items-center justify-center gap-6">
+        <p className="text-title-4xl-bold">이메일 인증</p>
+        <p className="text-headline-2xl-regular text-center">
+          본인 인증 메일을 귀하의
+          <span className="text-headline-2xl-semibold text-yellow-500">
+            {' '}
+            [email protected]
+          </span>
+          로 보냈습니다.
+          <br />
+          받은 메일함에서 인증 메일을 열고{' '}
+          <span className="text-headline-2xl-semibold">본인인증</span>을
+          클릭하면 회원가입이 완료됩니다.
+        </p>
+      </div>
+    </div>
+  );
+}

apps/web/src/pages/SignUp/components/FormInput.tsx

@@ -59,7 +59,7 @@ export default function FormInput({
           placeholder={placeholder}
           value={value}
           onChange={onChange}
-          className={`hbp:text-body-xl-regular border outline-none ${borderClass} ${className}`}
+          className={`hbp:text-body-xl-regular border ${borderClass} ${className}`}
         />
       )}
 

apps/web/src/pages/SignUp/components/ResendEmailHeroSection.tsx

@@ -0,0 +1,12 @@
+export default function ResendEmailHerosection() {
+  return (
+    <div className="flex flex-col items-center gap-8">
+      <p className="text-title-4xl-bold">인증 링크를 메일로 전송했습니다</p>
+      <p className="text-headline-2xl-regular text-center">
+        이메일로 전송 받은 인증 링크를 확인해주세요.
+        <br />
+        링크는 발송 시점으로부터 24시간 동안 유효합니다.
+      </p>
+    </div>
+  );
+}

apps/web/src/pages/SignUp/components/ResendSection.tsx

@@ -0,0 +1,21 @@
+import { useNavigate } from 'react-router-dom';
+
+export default function ResendSection() {
+  const navigate = useNavigate();
+
+  const handleResendClick = () => {
+    navigate('/auth/resend');
+  };
+
+  return (
+    <p className="text-caption-sm-regular text-grey-300 mt-8 flex flex-row gap-3">
+      이메일을 못받으셨나요?
+      <span
+        onClick={handleResendClick}
+        className="cursor-pointer text-yellow-500 underline"
+      >
+        이메일 다시 보내기
+      </span>
+    </p>
+  );
+}

apps/web/src/pages/SignUp/components/SignUpform.tsx

@@ -73,7 +73,7 @@ const SignUpForm = () => {
             placeholder="이메일을 입력해주세요."
             value={formData.email}
             onChange={handleInputChange('email')}
-            className={`hbp:text-body-xl-regular aspect-[338/60] flex-1 outline-none focus:border-yellow-500 ${errors.email ? 'border-red-500' : ''}`}
+            className={`hbp:text-body-xl-regular aspect-[338/60] flex-1 ${errors.email ? 'border-red-500' : ''}`}
           />
           <Button
             text="중복확인"
@@ -98,7 +98,6 @@ const SignUpForm = () => {
           영문, 숫자, 특수문자를 조합하여 8-16글자로 입력해주세요.
         </p>
         <PasswordField
-          className="focus:border-yellow-500"
           value={formData.password}
           onChange={handleInputChange('password')}
         />
@@ -138,6 +137,11 @@ const SignUpForm = () => {
           placeholder="이름을 입력해주세요."
           value={formData.name}
           onChange={handleInputChange('name')}
+          successMessage={
+            formData.name && !errors.name
+              ? '사용 가능한 이름입니다.'
+              : undefined
+          }
           error={errors.name}
         />
       </div>

apps/web/src/pages/SignUp/components/VerifyAction.tsx

@@ -0,0 +1,11 @@
+import { Button } from '@ui/Button/Button';
+import TextField from '@ui/InputField/TextField';
+
+export default function VerifyAction() {
+  return (
+    <div className="mt-20 flex w-[440px] flex-col gap-5">
+      <TextField placeholder="[email protected]" className="px-7" />
+      <Button text="로그인" className="text-body-xl-medium h-[49px]" />
+    </div>
+  );
+}

apps/web/src/routers/index.tsx

@@ -2,6 +2,8 @@ import { createBrowserRouter } from 'react-router-dom';
 import Layout from '../layout/Layout';
 import LoginPage from '../pages/Login/LoginPage';
 import SignUpPage from '../pages/SignUp/SignUpPage';
+import EmailVerificationPage from '../pages/SignUp/EmailVerificationPage';
+import ResendVerificationPage from '../pages/SignUp/ResendVerificationPage';
 
 export const router = createBrowserRouter([
   {
@@ -10,6 +12,8 @@ export const router = createBrowserRouter([
     children: [
       { path: 'login', element: <LoginPage /> },
       { path: 'signup', element: <SignUpPage /> },
+      { path: 'verify', element: <EmailVerificationPage /> },
+      { path: 'resend', element: <ResendVerificationPage /> },
     ],
   },
 ]);

packages/ui/src/components/Button/Button.tsx

@@ -9,7 +9,7 @@ const buttonVariants = cva(
     variants: {
       variant: {
         primary:
-          'bg-yellow-400 text-grey-1000 hover:bg-yellow-500 active:bg-yellow-600 disabled:bg-grey-200 disabled:text-grey-100 ',
+          'bg-yellow-400 text-grey-1000 hover:bg-yellow-500 active:bg-yellow-600 disabled:bg-grey-200 disabled:text-grey-100 cursor-pointer',
       },
       size: {
         xs: 'h-[33px] px-3 text-caption-sm-medium',

packages/ui/src/components/InputField/TextField.tsx

@@ -3,6 +3,7 @@ interface TextFieldProps {
   type?: string;
   placeholder?: string;
   value?: string;
+  maxLength?: number;
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
   onFocus?: () => void;
   onBlur?: () => void;
@@ -14,6 +15,7 @@ export default function TextField({
   type = 'text',
   placeholder = '이름을 입력하세요',
   value,
+  maxLength,
   onChange,
   onFocus,
   onBlur,
@@ -25,10 +27,11 @@ export default function TextField({
       type={type}
       placeholder={placeholder}
       value={value}
+      maxLength={maxLength}
       onChange={onChange}
       onFocus={onFocus}
       onBlur={onBlur}
-      className={`flex aspect-[44/6] w-full cursor-pointer flex-row rounded-full border border-[#E3E1DF] bg-[#ffffff] px-6 ${className}`}
+      className={`flex aspect-[44/6] w-full cursor-pointer flex-row rounded-full border border-[#E3E1DF] bg-[#ffffff] px-6 outline-none focus:border-yellow-500 ${className}`}
     />
   );
 }