Skip to content

Commit 83a5561

Browse files
cjs1004oundscjs1004ounds
authored
Merge pull request #110 from pirogramming/feat/onboarding-faq
feat:온보딩 FAQ 제작
2 parents ea46e72 + d55c0b5 commit 83a5561

2 files changed

Lines changed: 109 additions & 15 deletions

File tree

‎accounts/static/accounts/css/onboarding.css‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -327,4 +327,65 @@ input::placeholder {
327327
padding: 4px 6px;
328328
margin-bottom: 4px;
329329
flex-shrink: 0;
330+
}
331+
332+
/* 스텝 상단: 인디케이터 + 도움말 물음표 */
333+
.step-top {
334+
display: flex;
335+
align-items: center;
336+
justify-content: space-between;
337+
margin-bottom: 12px;
338+
}
339+
.help-wrap { position: relative; }
340+
341+
/* 물음표 버튼 — 주황 포인트 */
342+
.help-btn {
343+
width: 26px;
344+
height: 26px;
345+
border-radius: 50%;
346+
border: 1.5px solid #FF7A00;
347+
background: #FFF7EB; /* 연한 주황빛 크림 */
348+
color: #FF7A00;
349+
font-size: 15px;
350+
font-weight: 700;
351+
line-height: 1;
352+
cursor: pointer;
353+
transition: background 0.15s, color 0.15s;
354+
}
355+
.help-btn:hover {
356+
background: #FF7A00;
357+
color: #fff;
358+
}
359+
360+
/* 툴팁 — 팝업창과 같은 크림 배경·둥근 모서리 */
361+
.help-tooltip {
362+
display: none;
363+
position: absolute;
364+
top: 34px;
365+
right: 0;
366+
width: 240px;
367+
background: #FDFCF9; /* 팝업과 동일한 크림 배경 */
368+
border: 1px solid #FFE3C2; /* 연한 주황 테두리 */
369+
border-radius: 16px; /* 팝업처럼 넉넉한 라운드 */
370+
padding: 16px 18px;
371+
font-size: 13px;
372+
line-height: 1.6;
373+
color: #333;
374+
box-shadow: 0 6px 20px rgba(255, 122, 0, 0.12); /* 주황빛 그림자 */
375+
z-index: 10;
376+
}
377+
.help-tooltip.open { display: block; }
378+
379+
/* 말풍선 꼬리 (물음표 쪽을 가리키는 작은 삼각형) */
380+
.help-tooltip::before {
381+
content: "";
382+
position: absolute;
383+
top: -7px;
384+
right: 14px;
385+
width: 12px;
386+
height: 12px;
387+
background: #FDFCF9;
388+
border-left: 1px solid #FFE3C2;
389+
border-top: 1px solid #FFE3C2;
390+
transform: rotate(45deg);
330391
}

‎accounts/templates/accounts/onboarding.html‎

Lines changed: 48 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,18 @@
1010
<!-- ================= 온보딩 1 ================= -->
1111
<div id="step-1" class="step">
1212
<div class ="inner-container">
13-
<div class="step-indicator">
14-
<div class="dot active"></div>
15-
<div class="dot"></div>
16-
<div class="dot"></div>
13+
<div class="step-top">
14+
<div class="step-indicator">
15+
<div class="dot active"></div>
16+
<div class="dot"></div>
17+
<div class="dot"></div>
18+
</div>
19+
<div class="help-wrap">
20+
<button type="button" class="help-btn" onclick="toggleHelp('help-1')" aria-label="도움말">?</button>
21+
<div class="help-tooltip" id="help-1">
22+
여기서 정한 활동은 홈에서 "숏폼에 쓴 시간을 ○○로 바꾸면?"으로 환산해 보여줘요. 주간 예산은 이번 주 숏폼 한도예요.
23+
</div>
24+
</div>
1725
</div>
1826

1927
<div class="title">
@@ -52,17 +60,24 @@
5260

5361
<div id="step-2" class="step" style="display: none;">
5462
<div class="inner-container">
55-
<div class="step-indicator">
56-
<div class="dot"></div>
57-
<div class="dot active"></div>
58-
<div class="dot"></div>
63+
<div class="step-top">
64+
<div class="step-indicator">
65+
<div class="dot"></div>
66+
<div class="dot active"></div>
67+
<div class="dot"></div>
68+
</div>
69+
<div class="help-wrap">
70+
<button type="button" class="help-btn" onclick="toggleHelp('help-2')" aria-label="도움말">?</button>
71+
<div class="help-tooltip" id="help-2">
72+
예산을 넘어도 기록을 막지 않아요. "얼마나 넘었는지"를 보여줘서 스스로 조절하게 돕는 방식이에요.
73+
</div>
74+
</div>
5975
</div>
6076

6177
<div class="title">
6278
예산을 다 쓰면<br>
6379
어떻게 될까요?
6480
</div>
65-
6681
<div class="step2-card-box">
6782
<div class="step2-notice-item">
6883
<div class="step2-badge">1</div>
@@ -88,10 +103,18 @@
88103
<!-- ================= 온보딩 3 ================= -->
89104
<div id="step-3" class="step" style="display: none;">
90105
<div class="inner-container">
91-
<div class="step-indicator">
92-
<div class="dot"></div>
93-
<div class="dot"></div>
94-
<div class="dot active"></div>
106+
<div class="step-top">
107+
<div class="step-indicator">
108+
<div class="dot"></div>
109+
<div class="dot"></div>
110+
<div class="dot active"></div>
111+
</div>
112+
<div class="help-wrap">
113+
<button type="button" class="help-btn" onclick="toggleHelp('help-3')" aria-label="도움말">?</button>
114+
<div class="help-tooltip" id="help-3">
115+
책·운동 같은 활동을 하면 여기서 정한 만큼 숏폼 시간을 적립해요. 홈과 결산에 반영돼요.
116+
</div>
117+
</div>
95118
</div>
96119

97120
<div class="title">
@@ -138,7 +161,6 @@
138161
</button>
139162
</div>
140163
</div>
141-
142164
<div class="btn-group">
143165
<button type="button" class="btn-prev" onclick="goToStep(2)">이전</button>
144166
<button type="button" class="btn-submit" onclick="submitOnboarding()">시작하기</button>
@@ -175,6 +197,15 @@
175197
}
176198
}
177199

200+
// 도움말 툴팁 토글
201+
function toggleHelp(id) {
202+
const tip = document.getElementById(id);
203+
document.querySelectorAll('.help-tooltip.open').forEach(el => {
204+
if (el.id !== id) el.classList.remove('open');
205+
});
206+
tip.classList.toggle('open');
207+
}
208+
178209
// 1. 스텝 이동 함수
179210
function goToStep(stepNumber) {
180211
const step1 = document.getElementById('step-1');
@@ -185,12 +216,14 @@
185216
if (step2) step2.style.display = 'none';
186217
if (step3) step3.style.display = 'none';
187218

219+
// 스텝 이동 시 열린 도움말 닫기
220+
document.querySelectorAll('.help-tooltip.open').forEach(el => el.classList.remove('open'));
221+
188222
const target = document.getElementById(`step-${stepNumber}`);
189223
if (target) {
190224
target.style.display = 'flex';
191225
}
192226
}
193-
194227
// 2. CSRF 토큰 추출 함수
195228
function getCookie(name) {
196229
let cookieValue = null;

0 commit comments

Comments
 (0)