From 5141a63294e86420f66f23037c2761158f89ce09 Mon Sep 17 00:00:00 2001 From: zenn Date: Mon, 11 May 2026 13:50:12 +0900 Subject: [PATCH] =?UTF-8?q?fix(auth):=20=EB=8B=A4=ED=81=AC=20=ED=8F=BC=20?= =?UTF-8?q?=EC=9E=85=EB=A0=A5=C2=B7=EB=B9=84=EB=B0=80=EB=B2=88=ED=98=B8=20?= =?UTF-8?q?=ED=86=A0=EA=B8=80=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B3=B4?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - .auth-form-input 전역 클래스(글자색·캐럿·placeholder·autofill) - 토글 버튼 scoped CSS로 고정, signup 패널 보더·배경·color-scheme - v0.0.62 문서 반영 Co-authored-by: Cursor --- assets/css/main.css | 19 ++++++++ .../auth/AuthPasswordVisibilityToggle.vue | 46 +++++++++++++++---- docs/convention.md | 2 +- docs/history.md | 6 +++ docs/map.md | 6 +-- docs/spec.md | 2 +- docs/update.md | 6 +++ package.json | 2 +- pages/signin.vue | 6 +-- pages/signup.vue | 12 ++--- 10 files changed, 82 insertions(+), 25 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index afb893c..8005a4c 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -196,4 +196,23 @@ background: color-mix(in srgb, var(--site-panel) 72%, var(--site-text)); } + /** + * 다크 인증 폼(signin/signup) 텍스트 입력 — UA가 부모 color를 상속하지 않는 경우 대비 + */ + .auth-form-input { + color: #f5f7fa; + caret-color: #2f6feb; + } + + .auth-form-input::placeholder { + color: #5c6570; + } + + .auth-form-input:-webkit-autofill, + .auth-form-input:-webkit-autofill:hover, + .auth-form-input:-webkit-autofill:focus { + -webkit-text-fill-color: #f5f7fa; + transition: background-color 9999s ease-out; + } + } diff --git a/components/auth/AuthPasswordVisibilityToggle.vue b/components/auth/AuthPasswordVisibilityToggle.vue index a88bed8..556f473 100644 --- a/components/auth/AuthPasswordVisibilityToggle.vue +++ b/components/auth/AuthPasswordVisibilityToggle.vue @@ -10,7 +10,6 @@ const props = defineProps({ }, /** * 스크린 리더용 필드 이름(예: 비밀번호 확인) - * @type {string} */ fieldName: { type: String, @@ -44,33 +43,27 @@ const toggle = () => { + + diff --git a/docs/convention.md b/docs/convention.md index 2c197d4..d9c84de 100644 --- a/docs/convention.md +++ b/docs/convention.md @@ -24,7 +24,7 @@ ## 스타일 - TailwindCSS 기본 사용 -- 주요 요소: Tailwind + 고유 className 동시 적용 +- 다크 인증(`signin`/`signup`)의 텍스트 입력에는 `auth-form-input` 클래스를 붙여 `main.css`의 글자색·캐럿·placeholder를 적용한다(폼 컨트롤은 부모 `color`를 상속하지 않는 경우가 많음). - 관리자 글 에디터는 블록 단위 UI로 작성하되 저장 값은 기존 마크다운 문자열을 유지 ```html diff --git a/docs/history.md b/docs/history.md index 0940f4e..c48d8d7 100644 --- a/docs/history.md +++ b/docs/history.md @@ -1,5 +1,11 @@ # 의사결정 이력 +## 2026-05-11 v0.0.62 + +### 인증 폼 다크 스타일이 안 보이던 현상 + +`layout/page.vue`의 `text-ink`는 본문에 전달되지만, 폼 컨트롤은 UA 스타일로 `color`를 상속하지 않는 경우가 많아 다크 배경에서 입력 글자와 `currentColor` SVG가 사실상 사라질 수 있다. 전역 `.auth-form-input`으로 텍스트·캐럿·placeholder·WebKit autofill 글자색을 고정하고, 토글 버튼은 SFC `scoped` 스타일로 동일하게 맞췄다. `color-scheme: dark`는 네이티브 컨트롤 테마를 맞추기 위해 섹션에 추가했다. + ## 2026-05-11 v0.0.61 ### 인증 폼 비밀번호 토글 아이콘화 diff --git a/docs/map.md b/docs/map.md index 7912e56..adeb6c7 100644 --- a/docs/map.md +++ b/docs/map.md @@ -27,7 +27,7 @@ | 파일 | 화면 위치 | |------|-----------| -| components/auth/AuthPasswordVisibilityToggle.vue | 로그인·회원가입 비밀번호 표시/숨김 토글(SVG, `field-name`으로 접근성 레이블 구분) | +| components/auth/AuthPasswordVisibilityToggle.vue | 로그인·회원가입 비밀번호 표시/숨김 토글(SVG, scoped 스타일·`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` | @@ -98,8 +98,8 @@ | pages/tags/[slug].vue | `/tag/:slug` 리다이렉트 | | pages/tag/[slug].vue | 태그별 글 목록, 상단 태그 헤더 + 리스트형 게시물 카드 | | pages/pages/[slug].vue | 고정 페이지 상세 | -| pages/signup.vue | 회원가입 3단계(환영/입력/이메일 확인, 재전송), 2단계 비밀번호·확인에 각각 SVG 표시 토글 | -| pages/signin.vue | 로그인(다크 폼), 비밀번호 SVG 표시 토글 | +| pages/signup.vue | 회원가입 3단계, 2단계 입력에 `auth-form-input`, 패널 `auth-signup__panel`(보더·배경) | +| pages/signin.vue | 로그인(다크 폼, `[color-scheme:dark]`, 입력 `auth-form-input`), 비밀번호 SVG 토글 | ## 서버 API diff --git a/docs/spec.md b/docs/spec.md index cf336d8..9294786 100644 --- a/docs/spec.md +++ b/docs/spec.md @@ -88,7 +88,7 @@ - 3단계는 인증 메일 발송 안내와 재전송 버튼(쿨다운)을 제공한다. - 이메일 링크 확인 전에는 회원가입이 완료되지 않으며, 인증 완료 액션 이후 로그인 화면으로 이동한다. - 로그인 화면은 동일한 다크 톤 폼 레이아웃을 사용한다. -- 로그인·회원가입(2단계) 비밀번호 입력은 `AuthPasswordVisibilityToggle` SVG(눈 열림/가림) 토글로 표시 여부를 바꾼다. 스크린 리더용 `aria-label`은 필드별 `field-name`으로 구분한다. +- 로그인·회원가입(2단계) 비밀번호 입력은 `AuthPasswordVisibilityToggle` SVG(눈 열림/가림) 토글로 표시 여부를 바꾼다. 스크린 리더용 `aria-label`은 필드별 `field-name`으로 구분한다. 텍스트 입력은 `.auth-form-input`으로 글자색·캐럿 등을 보정한다. - 인증 화면 상태 메시지는 오류/안내를 분리해 `aria-live`로 노출한다. - 회원가입 1단계의 타이틀/설명은 `GET /api/site-settings`의 `title`, `description` 값을 우선 사용한다. diff --git a/docs/update.md b/docs/update.md index 188cc26..604ee04 100644 --- a/docs/update.md +++ b/docs/update.md @@ -1,5 +1,11 @@ # 업데이트 이력 +## v0.0.62 + +- 다크 인증 페이지에서 `input`이 UA 기본색으로 남아 글자·아이콘이 안 보이던 문제를 `main.css`의 `.auth-form-input`(글자색·캐럿·placeholder·autofill)로 보정. +- `AuthPasswordVisibilityToggle`은 Tailwind 의존을 줄이고 `scoped` CSS로 버튼·아이콘 크기·포커스 링을 고정. +- signin/signup 루트에 `[color-scheme:dark]`, signup 패널에 `border`·`bg-[#0d1116]`(`auth-signup__panel`)로 카드 대비 보강. + ## v0.0.61 - 로그인·회원가입 비밀번호 표시 토글을 `AuthPasswordVisibilityToggle`(Material 스타일 SVG 눈 아이콘)으로 통일, 텍스트 보기/숨기기 제거. diff --git a/package.json b/package.json index b0b35e2..aa8c188 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "sori.studio", - "version": "0.0.61", + "version": "0.0.62", "private": true, "type": "module", "imports": { diff --git a/pages/signin.vue b/pages/signin.vue index 2773284..7cb94d2 100644 --- a/pages/signin.vue +++ b/pages/signin.vue @@ -51,7 +51,7 @@ const submitSignIn = async () => {