Skip to content

[Refactor/#109] AI 요약 버튼 및 모달 개선 #112

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Seojegyeong merged 4 commits into from
Mar 20, 2026
Merged

[Refactor/#109] AI 요약 버튼 및 모달 개선 #112

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5682f40
refactor: 모달 border 및 예산 정보 수정
Seojegyeong Mar 19, 2026
3018879
feat: ai 요약하기 버튼 chevron 제거
Seojegyeong Mar 20, 2026
bac8bab
fix: ai 요약 그라데이션 수정
Seojegyeong Mar 20, 2026
b0104db
fix: coderabbit 리뷰 수정
Seojegyeong Mar 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
381 changes: 381 additions & 0 deletions ai-button-preview.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,381 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI 요약하기 — Periwinkle CTA Preview</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>

/* ─── Shimmer keyframe ─────────────────────────────────────────── */
@keyframes shimmer-sweep {
0% { transform: translateX(-110%) skewX(-12deg); opacity: 0; }
15% { opacity: 1; }
85% { opacity: 1; }
100% { transform: translateX(210%) skewX(-12deg); opacity: 0; }
}

/* ─── Reset ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
font-family: 'Noto Sans KR', 'Pretendard', -apple-system, BlinkMacSystemFont,
'Apple SD Gothic Neo', sans-serif;
background: #EEF2F7;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 48px;
padding: 48px 32px;
}

/* ─── Stage: side-by-side states ──────────────────────────────── */
.stage {
display: flex;
align-items: flex-start;
gap: 52px;
}

.state-block {
display: flex;
flex-direction: column;
align-items: center;
gap: 13px;
}

.state-tag {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
color: #b0bbc8;
}

/* ─── Button ───────────────────────────────────────────────────── */
.ai-btn {
/* Layout */
position: relative;
display: inline-flex;
align-items: center;
height: 36px;
padding: 0 16px;
overflow: hidden;

/* Color */
background: #EEF2FF;
border: 1px solid #C7D2FE;
border-radius: 10px;

/* Type */
font-family: inherit;
font-size: 13px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1;

cursor: pointer;
outline: none;
-webkit-tap-highlight-color: transparent;
user-select: none;

/* Transition: background, border, box-shadow together */
transition:
background-color 200ms ease,
border-color 200ms ease,
box-shadow 200ms ease,
transform 70ms ease;
}

/* Shimmer streak — hidden by default, triggered on hover */
.ai-btn__shimmer {
pointer-events: none;
position: absolute;
inset: 0;
/* Streak: narrow white-to-transparent gradient band */
background: linear-gradient(
105deg,
transparent 0%,
transparent 30%,
rgba(255,255,255,0.55) 48%,
rgba(255,255,255,0.75) 50%,
rgba(255,255,255,0.55) 52%,
transparent 70%,
transparent 100%
);
transform: translateX(-110%) skewX(-12deg);
opacity: 0;
}

/* ── Hover ── */
.ai-btn:hover {
background: #E5EAFF;
border-color: #A5B4FC;
box-shadow: 0 0 12px rgba(107, 142, 245, 0.35);
}

.ai-btn:hover .ai-btn__shimmer {
animation: shimmer-sweep 900ms ease forwards;
}

/* ── Active ── */
.ai-btn:active {
transform: scale(0.97);
}

/* ── Icon ── */
.ai-btn__icon {
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-right: 7px;
position: relative; /* above shimmer */
z-index: 1;
}

.ai-btn__icon svg {
width: 16px;
height: 16px;
display: block;
}

/* ── Label ── */
.ai-btn__label {
color: #4B7BF5;
position: relative;
z-index: 1;
}

/* ── Arrow ── */
.ai-btn__arrow {
color: #A78BFA;
margin-left: 5px;
font-size: 13px;
line-height: 1;
position: relative;
z-index: 1;
/* Optical nudge: › sits slightly high at 13px */
margin-top: 1px;
}

/* ── Static hover-skin (non-interactive) ── */
.ai-btn--hover-skin {
background: #E5EAFF;
border-color: #A5B4FC;
box-shadow: 0 0 12px rgba(107, 142, 245, 0.35);
pointer-events: none;
}

/* Freeze shimmer mid-sweep for the static preview */
.ai-btn--hover-skin .ai-btn__shimmer {
transform: translateX(15%) skewX(-12deg);
opacity: 0.7;
}

/* ─── Token reference table ────────────────────────────────────── */
.token-table-wrap {
width: 100%;
max-width: 540px;
}

.token-table-heading {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
color: #b0bbc8;
margin-bottom: 10px;
padding-left: 2px;
}

.token-table {
width: 100%;
border-collapse: collapse;
background: #ffffff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
border: 1px solid rgba(0,0,0,0.05);
}

.token-table thead tr {
background: #f8f9fb;
border-bottom: 1px solid #eef0f3;
}

.token-table th {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #b0bac4;
padding: 9px 14px;
text-align: left;
}

.token-table td {
font-size: 11.5px;
color: #4e5968;
padding: 8px 14px;
border-bottom: 1px solid #f3f4f6;
vertical-align: middle;
}

.token-table tbody tr:last-child td { border-bottom: none; }

.t-role { color: #8b95a1; font-size: 11px; }
.t-val { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 10.5px; color: #546171; }
.t-name { font-weight: 700; color: #3b4a58; }

.sw {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 3px;
border: 1px solid rgba(0,0,0,0.09);
vertical-align: middle;
margin-right: 7px;
}

</style>
</head>
<body>

<!-- ── Side-by-side state preview ─────────────────────────────── -->
<div class="stage">

<!-- DEFAULT -->
<div class="state-block">
<button class="ai-btn" type="button">
<span class="ai-btn__shimmer"></span>

<!--
Sparkle icon — exact paths from /src/assets/icon/ai/sparkle.svg
viewBox 0 0 25 25. Gradient: #6B8EF5 → #A78BFA left-to-right.
-->
<span class="ai-btn__icon">
<svg viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<defs>
<linearGradient id="sg-d" x1="0" y1="12.5" x2="25" y2="12.5" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#6B8EF5"/>
<stop offset="100%" stop-color="#A78BFA"/>
</linearGradient>
</defs>
<path
d="M10.8386 5.02169C11.0521 4.157 12.2813 4.157 12.4948 5.02169C13.406 8.71264 16.2879 11.5945 19.9789 12.5056C20.8436 12.7191 20.8436 13.9483 19.9789 14.1618C16.2879 15.073 13.406 17.9548 12.4948 21.6457C12.2813 22.5104 11.0521 22.5104 10.8386 21.6457C9.92743 17.9548 7.04554 15.073 3.35458 14.1618C2.48986 13.9483 2.48986 12.7191 3.35458 12.5056C7.04554 11.5945 9.92743 8.71264 10.8386 5.02169Z"
fill="url(#sg-d)"
/>
<path
d="M19.9418 1.35768C20.0282 1.00769 20.5257 1.00769 20.6121 1.35768C20.9809 2.85164 22.1474 4.01809 23.6414 4.38688C23.9914 4.47329 23.9914 4.97085 23.6414 5.05725C22.1474 5.42605 20.9809 6.5925 20.6121 8.08646C20.5257 8.43645 20.0282 8.43645 19.9418 8.08646C19.5729 6.5925 18.4065 5.42605 16.9125 5.05725C16.5625 4.97085 16.5625 4.47329 16.9125 4.38688C18.4065 4.01809 19.5729 2.85164 19.9418 1.35768Z"
fill="url(#sg-d)"
/>
</svg>
</span>

<span class="ai-btn__label">AI 요약하기</span>
<span class="ai-btn__arrow" aria-hidden="true">›</span>
</button>
<span class="state-tag">Default</span>
</div>

<!-- HOVER (static skin) -->
<div class="state-block">
<button class="ai-btn ai-btn--hover-skin" type="button" tabindex="-1" aria-hidden="true">
<span class="ai-btn__shimmer"></span>

<span class="ai-btn__icon">
<svg viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<defs>
<linearGradient id="sg-h" x1="0" y1="12.5" x2="25" y2="12.5" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#6B8EF5"/>
<stop offset="100%" stop-color="#A78BFA"/>
</linearGradient>
</defs>
<path
d="M10.8386 5.02169C11.0521 4.157 12.2813 4.157 12.4948 5.02169C13.406 8.71264 16.2879 11.5945 19.9789 12.5056C20.8436 12.7191 20.8436 13.9483 19.9789 14.1618C16.2879 15.073 13.406 17.9548 12.4948 21.6457C12.2813 22.5104 11.0521 22.5104 10.8386 21.6457C9.92743 17.9548 7.04554 15.073 3.35458 14.1618C2.48986 13.9483 2.48986 12.7191 3.35458 12.5056C7.04554 11.5945 9.92743 8.71264 10.8386 5.02169Z"
fill="url(#sg-h)"
/>
<path
d="M19.9418 1.35768C20.0282 1.00769 20.5257 1.00769 20.6121 1.35768C20.9809 2.85164 22.1474 4.01809 23.6414 4.38688C23.9914 4.47329 23.9914 4.97085 23.6414 5.05725C22.1474 5.42605 20.9809 6.5925 20.6121 8.08646C20.5257 8.43645 20.0282 8.43645 19.9418 8.08646C19.5729 6.5925 18.4065 5.42605 16.9125 5.05725C16.5625 4.97085 16.5625 4.47329 16.9125 4.38688C18.4065 4.01809 19.5729 2.85164 19.9418 1.35768Z"
fill="url(#sg-h)"
/>
</svg>
</span>

<span class="ai-btn__label">AI 요약하기</span>
<span class="ai-btn__arrow" aria-hidden="true">›</span>
</button>
<span class="state-tag">Hover</span>
</div>

</div>

<!-- ── Token reference ─────────────────────────────────────────── -->
<div class="token-table-wrap">
<p class="token-table-heading">Color reference</p>
<table class="token-table">
<thead>
<tr>
<th>Role</th>
<th>Value</th>
<th>Swatch</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="t-name">Icon gradient start</span><br><span class="t-role">Sparkle — left edge</span></td>
<td><span class="t-val">#6B8EF5</span></td>
<td><span class="sw" style="background:#6B8EF5"></span></td>
</tr>
<tr>
<td><span class="t-name">Icon gradient end</span><br><span class="t-role">Sparkle — right edge / arrow</span></td>
<td><span class="t-val">#A78BFA</span></td>
<td><span class="sw" style="background:#A78BFA"></span></td>
</tr>
<tr>
<td><span class="t-name">Label</span><br><span class="t-role">font-weight 700, 13px, -0.02em</span></td>
<td><span class="t-val">#4B7BF5</span></td>
<td><span class="sw" style="background:#4B7BF5"></span></td>
</tr>
<tr>
<td><span class="t-name">Background default</span></td>
<td><span class="t-val">#EEF2FF</span></td>
<td><span class="sw" style="background:#EEF2FF"></span></td>
</tr>
<tr>
<td><span class="t-name">Background hover</span></td>
<td><span class="t-val">#E5EAFF</span></td>
<td><span class="sw" style="background:#E5EAFF"></span></td>
</tr>
<tr>
<td><span class="t-name">Border default</span></td>
<td><span class="t-val">#C7D2FE</span></td>
<td><span class="sw" style="background:#C7D2FE"></span></td>
</tr>
<tr>
<td><span class="t-name">Border hover</span></td>
<td><span class="t-val">#A5B4FC</span></td>
<td><span class="sw" style="background:#A5B4FC"></span></td>
</tr>
<tr>
<td><span class="t-name">Glow (hover)</span><br><span class="t-role">box-shadow 0 0 12px</span></td>
<td><span class="t-val">rgba(107,142,245, 0.35)</span></td>
<td><span class="sw" style="background:rgba(107,142,245,0.35);border-color:rgba(0,0,0,0.04)"></span></td>
</tr>
<tr>
<td><span class="t-name">Page background</span></td>
<td><span class="t-val">#EEF2F7</span></td>
<td><span class="sw" style="background:#EEF2F7"></span></td>
</tr>
</tbody>
</table>
</div>

</body>
</html>
3 changes: 3 additions & 0 deletions src/assets/icon/chevron/chevron-right.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading