팀 협업의 새로운 기준

29. 로그인/회원가입 페이지 Design authentication pages: **Page Layout Options**: - A: Centered card on subtle background - B: Split screen (form left, image/branding right) - Mobile: Full-width form, stacked **Login Form**: - Email field with validation - Password field with show/hide toggle - "Remember me" checkbox - "Forgot password?" link - Primary login button (full-width) - Divider: "or continue with" - Social login buttons (Google, Apple, GitHub) - Footer: "Don't have an account? Sign up" **Signup Form**: - Name field (or split: First, Last) - Email field - Password field with strength indicator - Confirm password (or remove for simplicity) - Terms checkbox: "I agree to Terms and Privacy Policy" - Primary signup button - Social signup options - Footer: "Already have an account? Log in" **Password Strength Indicator**: - 4-segment bar below password - Colors: red → orange → yellow → green - Requirements checklist below **Forgot Password Flow**: - Email input only - Submit → "Check your email" confirmation - Reset form: new password + confirm **Form States**: - Loading: button spinner - Error: shake animation, red border - Success: redirect or confirmation **Security Features**: - CSRF protection - Rate limiting indication - Secure password requirements - Optional: 2FA prompt Tech: Next.js + NextAuth.js + React Hook Form + Tailwind