릴리스: v1.3.91 로그인 토글 전환 애니메이션 추가

frontend/src/views/LoginView.vue

@@ -87,7 +87,8 @@ async function submit() {
     </section>
 
     <section v-else class="authScreen">
-      <div class="authTabs" role="tablist" aria-label="로그인 또는 회원가입">
+      <div class="authTabs" :class="{ 'authTabs--signup': mode === 'signup' }" role="tablist" aria-label="로그인 또는 회원가입">
+        <span class="authTabs__indicator" aria-hidden="true"></span>
         <button type="button" class="authTabs__button" :class="{ 'authTabs__button--active': mode === 'login' }" @click="mode = 'login'">
           로그인
         </button>
@@ -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);
 }