feat: 폼 유효성 피드백 + 모바일 반응형

폼 검증:
- RegisterPage: 아이디 실시간 검증, 비밀번호 강도, 확인 일치
- LoginPage: aria-describedby 접근성 개선

반응형:
- 768px 이하 레이아웃 최적화, 터치 타겟 44px

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-18 10:52:17 +09:00
parent 555749b953
commit 42567ab6e4
6 changed files with 229 additions and 23 deletions

View File

@@ -51,6 +51,7 @@ export default function LoginPage() {
placeholder="아이디를 입력하세요"
autoComplete="username"
maxLength={50}
aria-describedby={error ? 'login-error' : undefined}
/>
</div>
@@ -64,11 +65,12 @@ export default function LoginPage() {
placeholder="비밀번호를 입력하세요"
autoComplete="current-password"
maxLength={72}
aria-describedby={error ? 'login-error' : undefined}
/>
</div>
{justRegistered && <p className="login-success">회원가입이 완료되었습니다. 로그인해주세요.</p>}
{error && <p className="login-error" role="alert">{error}</p>}
{error && <p id="login-error" className="login-error" role="alert">{error}</p>}
<button type="submit" className="btn-login" disabled={loading}>
{loading ? '로그인 중...' : '로그인'}