feat(auth): 비밀번호 표시 토글을 SVG 아이콘으로 통일

- AuthPasswordVisibilityToggle 공통 컴포넌트 추가
- signin·signup(비밀번호·확인)에 적용, 접근성 field-name 구분
- v0.0.61 문서 반영

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-05-11 12:37:30 +09:00
parent fd55d8af08
commit 3f7f51ff86
8 changed files with 125 additions and 26 deletions

View File

@@ -53,7 +53,7 @@ const submitSignIn = async () => {
<template>
<section class="auth-signin min-h-screen bg-[#0a0b0d] text-[#f5f7fa]">
<div class="mx-auto flex min-h-screen w-full max-w-[1280px] items-center px-5 py-12 sm:px-10 lg:px-16">
<div class="w-full max-w-[430px] rounded-2xl border border-[#1a212a] bg-[#0d1116] p-5 sm:p-8">
<div class="w-full max-w-[430px] p-5 sm:p-8">
<p class="text-2xl font-semibold leading-tight">
로그인
</p>
@@ -77,17 +77,11 @@ const submitSignIn = async () => {
<div class="flex items-center rounded-[8px] border border-[#1a212a] transition-colors focus-within:border-[#2f6feb]">
<input
v-model="form.password"
class="h-10 w-full bg-transparent px-3 text-sm outline-none"
class="h-10 min-w-0 flex-1 bg-transparent px-3 text-sm outline-none"
:type="showPassword ? 'text' : 'password'"
autocomplete="current-password"
>
<button
class="px-3 text-xs text-[#9ba3af] transition-opacity hover:opacity-80"
type="button"
@click="showPassword = !showPassword"
>
{{ showPassword ? '숨기기' : '보기' }}
</button>
<AuthPasswordVisibilityToggle v-model="showPassword" />
</div>
</div>