diff --git a/docs/history.md b/docs/history.md index 1cadf49..e6812e2 100644 --- a/docs/history.md +++ b/docs/history.md @@ -1,5 +1,8 @@ # 의사결정 이력 +## 2026-04-02 v1.3.91 +- 로그인/회원가입 탭은 즉시 배경 교체보다, 선택 배경이 실제로 이동하는 토글 문법이 더 직관적이고 상태 전환이 잘 읽힌다고 판단했다. + ## 2026-04-02 v1.3.90 - 경고 수준의 CSS 진단이라도 실제 의미 없는 속성이나 벤더 전용 속성 누락이라면 바로 정리해 두는 편이 이후 유지보수 피로를 줄인다고 판단했다. diff --git a/docs/todo.md b/docs/todo.md index 45d242b..f3392e3 100644 --- a/docs/todo.md +++ b/docs/todo.md @@ -1,6 +1,7 @@ # 할 일 및 이슈 ## 단기 확인 +- 로그인 화면 상단 토글은 이동형 인디케이터로 바뀌었으므로, 데스크톱과 모바일에서 `로그인 / 회원가입` 전환 애니메이션이 어색하지 않고 포커스/클릭 상태도 자연스러운지 한 번 더 QA한다. - 관리자 카드 설명 줄임은 `line-clamp` 표준 속성까지 함께 선언했으므로, 실제 브라우저별 표시 차이가 없는지 한 번 더 QA한다. - 사용하지 않는 기본 자산을 정리했으므로, 배포본에서 누락 참조 없이 파비콘/공유 썸네일/좌측 레일 아이콘이 정상 노출되는지 한 번 더 QA한다. - 공유 썸네일 `og-card`는 이번에 이미지 수정본까지 함께 반영했으므로, 실제 메신저 미리보기에서 최신 그림이 캐시 갱신 후 정상 노출되는지 한 번 더 QA한다. diff --git a/docs/update.md b/docs/update.md index 8306e49..e385cf3 100644 --- a/docs/update.md +++ b/docs/update.md @@ -1,5 +1,8 @@ # 업데이트 로그 +## 2026-04-02 v1.3.91 +- 로그인 화면 상단의 `로그인 / 회원가입` 전환은 선택된 버튼 배경이 즉시 바뀌던 방식에서, 뒤쪽 하이라이트가 토글처럼 좌우로 미끄러져 이동하는 인터랙션으로 정리함. + ## 2026-04-02 v1.3.90 - 관리자 화면 CSS 경고를 줄이기 위해 `display: block` 요소에 의미 없던 `vertical-align`을 제거하고, `line-clamp` 표준 속성을 함께 선언해 VS Code 진단을 정리함. diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue index fbea437..6daed7a 100644 --- a/frontend/src/views/LoginView.vue +++ b/frontend/src/views/LoginView.vue @@ -87,7 +87,8 @@ async function submit() {
-
+
+ @@ -159,16 +160,37 @@ async function submit() { } .authTabs { + position: relative; display: inline-flex; - gap: 8px; + gap: 0; width: fit-content; padding: 6px; border-radius: 999px; border: 1px solid var(--theme-border); background: var(--theme-pill-bg); + isolation: isolate; +} + +.authTabs__indicator { + position: absolute; + top: 6px; + left: 6px; + width: calc(50% - 6px); + height: calc(100% - 12px); + border-radius: 999px; + background: rgba(76, 133, 245, 0.22); + box-shadow: inset 0 0 0 1px rgba(120, 169, 255, 0.1); + transform: translateX(0); + transition: transform 220ms ease, background-color 220ms ease, box-shadow 220ms ease; + z-index: 0; +} + +.authTabs--signup .authTabs__indicator { + transform: translateX(100%); } .authTabs__button { + position: relative; min-width: 112px; padding: 10px 16px; border: 0; @@ -177,10 +199,11 @@ async function submit() { color: var(--theme-text-muted); font-weight: 700; cursor: pointer; + transition: color 180ms ease; + z-index: 1; } .authTabs__button--active { - background: rgba(76, 133, 245, 0.22); color: var(--theme-text-strong); }