zenn/sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(auth): 다크 폼 입력·비밀번호 토글 스타일 보정

Browse Source 
- .auth-form-input 전역 클래스(글자색·캐럿·placeholder·autofill)
- 토글 버튼 scoped CSS로 고정, signup 패널 보더·배경·color-scheme
- v0.0.62 문서 반영

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
zenn
2026-05-11 13:50:12 +09:00
parent 3f7f51ff86
commit 5141a63294
10 changed files with 82 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
pages/signin.vue
View File

@@ -51,7 +51,7 @@ const submitSignIn = async () => {
</script>
<template>
<section class="auth-signin min-h-screen bg-[#0a0b0d] text-[#f5f7fa]">
<section class="auth-signin min-h-screen bg-[#0a0b0d] text-[#f5f7fa] [color-scheme:dark]">
<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] p-5 sm:p-8">
<p class="text-2xl font-semibold leading-tight">
@@ -66,7 +66,7 @@ const submitSignIn = async () => {
<label class="text-xs text-[#d8dee6]">이메일</label>
<input
v-model="form.email"
class="h-10 w-full rounded-[8px] border border-[#1a212a] bg-transparent px-3 text-sm outline-none transition-colors focus:border-[#2f6feb]"
class="auth-form-input h-10 w-full rounded-[8px] border border-[#1a212a] bg-transparent px-3 text-sm outline-none transition-colors focus:border-[#2f6feb]"
type="email"
autocomplete="email"
>
@@ -77,7 +77,7 @@ 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 min-w-0 flex-1 bg-transparent px-3 text-sm outline-none"
class="auth-form-input h-10 min-w-0 flex-1 bg-transparent px-3 text-sm outline-none"
:type="showPassword ? 'text' : 'password'"
autocomplete="current-password"
>

12
pages/signup.vue
View File

@@ -166,9 +166,9 @@ onBeforeUnmount(() => {
</script>
<template>
<section class="auth-signup min-h-screen bg-[#0a0b0d] text-[#f5f7fa]">
<section class="auth-signup min-h-screen bg-[#0a0b0d] text-[#f5f7fa] [color-scheme:dark]">
<div class="mx-auto flex min-h-screen w-full max-w-[1280px] items-start px-5 py-12 sm:px-10 sm:py-16 lg:px-16 lg:py-24">
<div class="flex min-h-[calc(100vh-6rem)] w-full max-w-[430px] flex-col rounded-2xl p-5 sm:min-h-[calc(100vh-8rem)] sm:p-8 lg:min-h-[calc(100vh-12rem)]">
<div class="auth-signup__panel flex min-h-[calc(100vh-6rem)] w-full max-w-[430px] flex-col rounded-2xl border border-[#1a212a] bg-[#0d1116] p-5 sm:min-h-[calc(100vh-8rem)] sm:p-8 lg:min-h-[calc(100vh-12rem)]">
<div>
<template v-if="currentStep === 1">
<p class="text-[32px] font-semibold leading-tight sm:text-[40px]">
@@ -192,7 +192,7 @@ onBeforeUnmount(() => {
<label class="text-xs text-[#d8dee6]">사용자명</label>
<input
v-model="form.username"
class="h-10 w-full rounded-[8px] border bg-transparent px-3 text-sm outline-none transition-colors"
class="auth-form-input h-10 w-full rounded-[8px] border bg-transparent px-3 text-sm outline-none transition-colors"
:class="errors.username ? 'border-[#b03b43]' : 'border-[#1a212a] focus:border-[#2f6feb]'"
type="text"
autocomplete="username"
@@ -206,7 +206,7 @@ onBeforeUnmount(() => {
<label class="text-xs text-[#d8dee6]">이메일</label>
<input
v-model="form.email"
class="h-10 w-full rounded-[8px] border bg-transparent px-3 text-sm outline-none transition-colors"
class="auth-form-input h-10 w-full rounded-[8px] border bg-transparent px-3 text-sm outline-none transition-colors"
:class="errors.email ? 'border-[#b03b43]' : 'border-[#1a212a] focus:border-[#2f6feb]'"
type="email"
autocomplete="email"
@@ -224,7 +224,7 @@ onBeforeUnmount(() => {
>
<input
v-model="form.password"
class="h-10 min-w-0 flex-1 bg-transparent px-3 text-sm outline-none"
class="auth-form-input h-10 min-w-0 flex-1 bg-transparent px-3 text-sm outline-none"
:type="showSignupPassword ? 'text' : 'password'"
autocomplete="new-password"
>
@@ -243,7 +243,7 @@ onBeforeUnmount(() => {
>
<input
v-model="form.passwordConfirm"
class="h-10 min-w-0 flex-1 bg-transparent px-3 text-sm outline-none"
class="auth-form-input h-10 min-w-0 flex-1 bg-transparent px-3 text-sm outline-none"
:type="showSignupPasswordConfirm ? 'text' : 'password'"
autocomplete="new-password"
>