yunchan/vignette
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(coach): AI 코칭 버튼 및 버블 팝업 대화형 조언 기능 구현

Browse source
This commit is contained in:
Yun Chan 2026-08-18 22:15:19 +09:00
parent 8a34dd2afc
commit 70d7cb34a3
36 changed files with 4521 additions and 1264 deletions
Download patch file Download diff file Expand all files Collapse all files

34
apps/web/src/pages/login/login.css
View file

@ -95,7 +95,7 @@
position: relative;
z-index: 0;
padding: 0 4px;
background: linear-gradient(90deg, #6b9488, #9fc0b5);
background: linear-gradient(90deg, var(--accent-deep), var(--accent-bright));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
@ -205,6 +205,11 @@
font-weight: 650;
text-align: left;
cursor: pointer;
transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.lg-obtn:active {
transform: translateY(1px) scale(0.98);
}
.lg-obtn.primary {
@ -286,9 +291,8 @@
margin-top: var(--sp-3);
padding: 10px 12px;
border-radius: var(--radius);
/* 2026-07-27: 기존 rgba(154,94,20,.28) + #f2b75f 조합은 다크 패널 전제였다.
라이트 패널 위에서는 탄색 배경에 밝은 앰버 글자가 얹혀 1.19:1까지 떨어져
사실상 읽을 수 없었다. 테마별로 스왑되는 warn 의미 토큰으로 교체한다. */
/* 2026-07-27: 기존 하드코딩 다크 전제 색상 대신
라이트/다크 테마별로 스왑되는 warn 의미 토큰으로 교체한다. */
background: var(--warn-tint);
border: 1px solid color-mix(in srgb, var(--warn-solid) 34%, transparent);
color: var(--warn-text);
@ -335,6 +339,11 @@
color: var(--text-strong);
text-align: left;
cursor: pointer;
transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.lg-roleopt:active {
transform: translateY(1px) scale(0.98);
}
.lg-roleopt.is-sel {
@ -353,11 +362,11 @@
}
.lg-roleopt .d.teacher {
background: #5478c4;
background: var(--info-solid);
}
.lg-roleopt .d.admin {
background: #7d818e;
background: var(--neutral-500);
}
.lg-roleopt b {
@ -376,14 +385,19 @@
width: 100%;
min-height: 46px;
margin-top: var(--sp-3);
border: 1px solid rgba(114, 211, 197, 0.58);
border: 1px solid color-mix(in srgb, var(--accent) 58%, transparent);
border-radius: var(--radius);
background: rgba(89, 181, 166, 0.15);
background: color-mix(in srgb, var(--accent-tint) 60%, transparent);
color: var(--accent-deep);
font-family: var(--font-sans);
font-size: 14px;
font-weight: 750;
cursor: pointer;
transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-base) var(--ease-out);
}
.lg-devbtn:active {
transform: translateY(1px) scale(0.98);
}
.lg-devbtn:disabled {
@ -394,8 +408,8 @@
.lg-error {
margin: var(--sp-3) 0 0;
color: var(--crit-text);
background: rgba(122, 38, 38, 0.28);
border: 1px solid rgba(255, 145, 145, 0.18);
background: var(--crit-tint);
border: 1px solid color-mix(in srgb, var(--crit-solid) 30%, transparent);
border-radius: var(--radius);
padding: 10px 12px;
font-size: 13px;