From 3f7f51ff86cf768150c205e39d85a4b6263bc5be Mon Sep 17 00:00:00 2001 From: zenn Date: Mon, 11 May 2026 12:37:30 +0900 Subject: [PATCH] =?UTF-8?q?feat(auth):=20=EB=B9=84=EB=B0=80=EB=B2=88?= =?UTF-8?q?=ED=98=B8=20=ED=91=9C=EC=8B=9C=20=ED=86=A0=EA=B8=80=EC=9D=84=20?= =?UTF-8?q?SVG=20=EC=95=84=EC=9D=B4=EC=BD=98=EC=9C=BC=EB=A1=9C=20=ED=86=B5?= =?UTF-8?q?=EC=9D=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - AuthPasswordVisibilityToggle 공통 컴포넌트 추가 - signin·signup(비밀번호·확인)에 적용, 접근성 field-name 구분 - v0.0.61 문서 반영 Co-authored-by: Cursor --- .../auth/AuthPasswordVisibilityToggle.vue | 80 +++++++++++++++++++ docs/history.md | 6 ++ docs/map.md | 5 +- docs/spec.md | 2 +- docs/update.md | 5 ++ package.json | 2 +- pages/signin.vue | 12 +-- pages/signup.vue | 39 ++++++--- 8 files changed, 125 insertions(+), 26 deletions(-) create mode 100644 components/auth/AuthPasswordVisibilityToggle.vue diff --git a/components/auth/AuthPasswordVisibilityToggle.vue b/components/auth/AuthPasswordVisibilityToggle.vue new file mode 100644 index 0000000..a88bed8 --- /dev/null +++ b/components/auth/AuthPasswordVisibilityToggle.vue @@ -0,0 +1,80 @@ + + + diff --git a/docs/history.md b/docs/history.md index 3e0deae..0940f4e 100644 --- a/docs/history.md +++ b/docs/history.md @@ -1,5 +1,11 @@ # 의사결정 이력 +## 2026-05-11 v0.0.61 + +### 인증 폼 비밀번호 토글 아이콘화 + +보기/숨기기 텍스트는 좁은 모바일에서 시각적 잡음이 되고 다국어·아이콘 일관성도 떨어져, Material 스타일 단일 경로 SVG(눈 열림·가림)를 공통 컴포넌트로 두었다. `aria-label`은 필드명(`field-name`)을 받아 회원가입의 확인 필드와 구분한다. + ## 2026-05-11 v0.0.60 ### 홈 Featured 모바일 스크롤·화살표 상태 diff --git a/docs/map.md b/docs/map.md index 6beefd9..7912e56 100644 --- a/docs/map.md +++ b/docs/map.md @@ -27,6 +27,7 @@ | 파일 | 화면 위치 | |------|-----------| +| components/auth/AuthPasswordVisibilityToggle.vue | 로그인·회원가입 비밀번호 표시/숨김 토글(SVG, `field-name`으로 접근성 레이블 구분) | | components/site/SiteHeader.vue | 모든 공개 페이지 상단, 우측 사용자 아바타 드롭다운(Anonymous/Sign up/Sign in), `lg`~`xl` 헤더 여백·반응형 검색창 폭 | | components/site/LeftSidebar.vue | 왼쪽 사이드바, `lg+`는 `sticky`+고정 높이+내부 무스크롤바 스크롤, `lg` 미만은 고정 슬라이드 패널, 하단 푸터 `px-4`/`sm:px-5` | | components/site/RightSidebar.vue | 오른쪽 사이드바, `lg+`는 고정 열 높이·스티키, 모바일은 본문 아래 전체 너비, 하단 푸터 `pr-3` | @@ -97,8 +98,8 @@ | pages/tags/[slug].vue | `/tag/:slug` 리다이렉트 | | pages/tag/[slug].vue | 태그별 글 목록, 상단 태그 헤더 + 리스트형 게시물 카드 | | pages/pages/[slug].vue | 고정 페이지 상세 | -| pages/signup.vue | 회원가입 3단계 화면(환영/입력/이메일 확인, 재전송) | -| pages/signin.vue | 로그인 화면(다크 톤 폼) | +| pages/signup.vue | 회원가입 3단계(환영/입력/이메일 확인, 재전송), 2단계 비밀번호·확인에 각각 SVG 표시 토글 | +| pages/signin.vue | 로그인(다크 폼), 비밀번호 SVG 표시 토글 | ## 서버 API diff --git a/docs/spec.md b/docs/spec.md index 0205f57..cf336d8 100644 --- a/docs/spec.md +++ b/docs/spec.md @@ -88,7 +88,7 @@ - 3단계는 인증 메일 발송 안내와 재전송 버튼(쿨다운)을 제공한다. - 이메일 링크 확인 전에는 회원가입이 완료되지 않으며, 인증 완료 액션 이후 로그인 화면으로 이동한다. - 로그인 화면은 동일한 다크 톤 폼 레이아웃을 사용한다. -- 로그인 비밀번호 입력은 보기/숨기기 토글을 제공한다. +- 로그인·회원가입(2단계) 비밀번호 입력은 `AuthPasswordVisibilityToggle` SVG(눈 열림/가림) 토글로 표시 여부를 바꾼다. 스크린 리더용 `aria-label`은 필드별 `field-name`으로 구분한다. - 인증 화면 상태 메시지는 오류/안내를 분리해 `aria-live`로 노출한다. - 회원가입 1단계의 타이틀/설명은 `GET /api/site-settings`의 `title`, `description` 값을 우선 사용한다. diff --git a/docs/update.md b/docs/update.md index 90f8058..188cc26 100644 --- a/docs/update.md +++ b/docs/update.md @@ -1,5 +1,10 @@ # 업데이트 이력 +## v0.0.61 + +- 로그인·회원가입 비밀번호 표시 토글을 `AuthPasswordVisibilityToggle`(Material 스타일 SVG 눈 아이콘)으로 통일, 텍스트 보기/숨기기 제거. +- 회원가입 비밀번호·비밀번호 확인 각각 독립 토글·포커스 링을 가진 입력 행으로 정리. + ## v0.0.60 - 홈 Featured 가로 트랙에 `touch-pan-x`·`-webkit-overflow-scrolling:touch`·`overscroll-x-contain`을 두어 모바일에서 손가락으로 가로 슬라이드(스크롤·스냅)가 잘 먹도록 함. diff --git a/package.json b/package.json index 9a7a7c3..b0b35e2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "sori.studio", - "version": "0.0.60", + "version": "0.0.61", "private": true, "type": "module", "imports": { diff --git a/pages/signin.vue b/pages/signin.vue index 9929a7d..2773284 100644 --- a/pages/signin.vue +++ b/pages/signin.vue @@ -53,7 +53,7 @@ const submitSignIn = async () => {