-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcorca-offboarding.html
More file actions
547 lines (503 loc) · 22.6 KB
/
corca-offboarding.html
File metadata and controls
547 lines (503 loc) · 22.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>코르카 오프보딩 인터뷰</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500&family=DM+Serif+Display&display=swap" rel="stylesheet">
<style>
:root {
--bg: #F7F5F0;
--surface: #FFFFFF;
--border: #E8E4DC;
--text-primary: #1A1916;
--text-secondary: #6B6760;
--text-hint: #A8A49E;
--accent: #2D4A3E;
--accent-light: #EAF0ED;
--accent-mid: #4A7A66;
--bubble-user: #2D4A3E;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Noto Sans KR', sans-serif;
background: var(--bg);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem 1rem;
}
.header {
width: 100%; max-width: 640px;
margin-bottom: 2rem; text-align: center;
}
.header-logo {
font-family: 'DM Serif Display', serif;
font-size: 13px; letter-spacing: 0.15em;
color: var(--text-hint); text-transform: uppercase;
margin-bottom: 1.5rem;
}
.header h1 { font-size: 22px; font-weight: 400; color: var(--text-primary); line-height: 1.5; margin-bottom: 0.5rem; }
.header p { font-size: 13px; color: var(--text-secondary); line-height: 1.7; }
.progress-wrap { width: 100%; max-width: 640px; margin-bottom: 1.25rem; }
.stage-label {
font-size: 11px; letter-spacing: 0.08em;
color: var(--text-hint); text-transform: uppercase;
margin-bottom: 8px; display: flex; justify-content: space-between;
}
.progress-bar { height: 2px; background: var(--border); border-radius: 2px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.6s ease; width: 0%; }
.chat-wrap {
width: 100%; max-width: 640px;
background: var(--surface); border: 1px solid var(--border);
border-radius: 16px; overflow: hidden;
box-shadow: 0 2px 24px rgba(0,0,0,0.04);
}
.chat-area {
padding: 1.5rem; min-height: 360px; max-height: 460px;
overflow-y: auto; display: flex; flex-direction: column;
gap: 16px; scroll-behavior: smooth;
}
.chat-area::-webkit-scrollbar { width: 4px; }
.chat-area::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.msg { display: flex; gap: 10px; align-items: flex-end; }
.msg.user { flex-direction: row-reverse; }
.avatar {
width: 30px; height: 30px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 500; flex-shrink: 0;
letter-spacing: -0.02em; white-space: nowrap;
overflow: hidden;
}
.bot-av { background: var(--accent-light); color: var(--accent); font-size: 8px; line-height: 1.3; text-align: center; }
.user-av { background: var(--accent); color: #fff; font-size: 11px; }
.bubble {
padding: 11px 15px; font-size: 14px; line-height: 1.7;
max-width: 78%; word-break: keep-all;
}
.msg.bot .bubble {
background: var(--bg); color: var(--text-primary);
border-radius: 4px 14px 14px 14px;
border: 1px solid var(--border);
}
.msg.user .bubble {
background: var(--bubble-user); color: #fff;
border-radius: 14px 4px 14px 14px;
}
.thinking-dots span {
display: inline-block; width: 5px; height: 5px;
background: var(--text-hint); border-radius: 50%;
margin: 0 2px; animation: bounce 1.2s infinite;
}
.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce {
0%, 60%, 100% { transform: translateY(0); }
30% { transform: translateY(-5px); }
}
.input-area {
border-top: 1px solid var(--border); padding: 1rem 1.25rem;
display: flex; gap: 10px; align-items: flex-end;
background: var(--surface);
}
textarea {
flex: 1; font-family: 'Noto Sans KR', sans-serif;
font-size: 14px; color: var(--text-primary);
background: var(--bg); border: 1px solid var(--border);
border-radius: 10px; padding: 10px 14px;
resize: none; height: 68px; line-height: 1.6;
transition: border-color 0.2s; outline: none;
}
textarea:focus { border-color: var(--accent-mid); }
textarea::placeholder { color: var(--text-hint); }
.send-btn {
width: 42px; height: 42px; background: var(--accent);
border: none; border-radius: 10px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: opacity 0.2s, transform 0.1s; flex-shrink: 0;
}
.send-btn:hover { opacity: 0.85; }
.send-btn:active { transform: scale(0.96); }
.send-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.send-btn svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.report-wrap {
width: 100%; max-width: 640px; margin-top: 1.5rem;
background: var(--surface); border: 1px solid var(--border);
border-radius: 16px; overflow: hidden;
box-shadow: 0 2px 24px rgba(0,0,0,0.04); display: none;
}
.report-header {
padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border);
display: flex; align-items: center; gap: 10px;
}
.report-header-icon {
width: 28px; height: 28px; background: var(--accent-light);
border-radius: 8px; display: flex; align-items: center; justify-content: center;
}
.report-header-icon svg { width: 14px; height: 14px; stroke: var(--accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.report-header span { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.report-header .report-date { margin-left: auto; font-size: 12px; color: var(--text-hint); }
.report-body { padding: 1.5rem; font-size: 14px; line-height: 1.9; color: var(--text-primary); word-break: keep-all; }
.report-section { margin-bottom: 1.25rem; }
.report-section-title {
font-size: 12px; font-weight: 500; letter-spacing: 0.06em;
color: var(--accent); text-transform: uppercase;
margin-bottom: 6px; padding-bottom: 6px;
border-bottom: 1px solid var(--accent-light);
}
.report-section-body { font-size: 14px; color: var(--text-primary); line-height: 1.8; white-space: pre-wrap; }
.report-loading { padding: 2rem 1.5rem; text-align: center; color: var(--text-hint); font-size: 13px; }
.save-status {
margin-top: 1rem; padding: 10px 14px; border-radius: 10px;
font-size: 13px; text-align: center; display: none;
}
.save-status.success { background: var(--accent-light); color: var(--accent); }
.save-status.error { background: #FFF0F0; color: #C0392B; }
.copy-btn {
margin-top: 1rem; width: 100%; padding: 10px;
background: var(--bg); border: 1px solid var(--border);
border-radius: 10px; font-size: 13px; color: var(--text-secondary);
cursor: pointer; font-family: 'Noto Sans KR', sans-serif;
transition: background 0.2s;
}
.copy-btn:hover { background: var(--border); }
</style>
</head>
<body>
<div class="header">
<div class="header-logo">Corca</div>
<h1>오프보딩 인터뷰</h1>
<p>함께한 시간을 돌아보며 솔직한 이야기를 나눠요.<br>모든 내용은 조직 개선을 위해서만 활용됩니다.</p>
</div>
<div class="progress-wrap">
<div class="stage-label">
<span id="stage-name">시작</span>
<span id="stage-count">1 / 5</span>
</div>
<div class="progress-bar">
<div class="progress-fill" id="progress-fill"></div>
</div>
</div>
<div class="chat-wrap">
<div class="chat-area" id="chat"></div>
<div class="input-area" id="input-area">
<textarea id="user-input" placeholder="자유롭게 입력해주세요..." onkeydown="handleKey(event)"></textarea>
<button class="send-btn" id="send-btn" onclick="sendMessage()" title="전송">
<svg viewBox="0 0 24 24"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
</button>
</div>
</div>
<div class="report-wrap" id="report-wrap">
<div class="report-header">
<div class="report-header-icon">
<svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
</div>
<span>이탈 원인 분석 리포트</span>
<span class="report-date" id="report-date"></span>
</div>
<div id="report-body" class="report-body"></div>
<div style="padding: 0 1.5rem 1.5rem;">
<div class="save-status" id="save-status"></div>
<button class="copy-btn" id="copy-btn" onclick="copyReport()" style="display:none;">리포트 복사하기</button>
</div>
</div>
<script src="config.js"></script>
<script>
const API_KEY = CONFIG.API_KEY;
// ⬇️ Google Apps Script 웹앱 URL (설정 후 교체)
const SHEETS_URL = 'https://script.google.com/macros/s/AKfycbzFYfDl6x2XTlYbs-ZNQMbJiWIFugJ3p_zBmxu940vY1ZkFTnxnlAXewQaFugPonlMQlA/exec';
const STAGES = [
{ label: '떠나는 이유', key: 'reason' },
{ label: '코르카에서 배운 것', key: 'learned' },
{ label: '코르카에 아쉬운 점', key: 'regret' },
{ label: '앞으로의 계획', key: 'plan' },
{ label: '마무리', key: 'close' }
];
const SYSTEM_PROMPT = `당신은 코르카(AI 스타트업)의 오프보딩 인터뷰를 진행하는 따뜻한 동료입니다.
넷플릭스의 '부검 메일' 문화에서 영감을 받아, 퇴사자가 솔직하고 편안하게 회고할 수 있도록 돕는 것이 목표입니다.
인터뷰는 5단계로 진행됩니다:
1. 떠나는 이유 — 언제부터 퇴사를 생각하게 됐는지 시점과 계기, 이유를 파악. 그때의 감정과 가장 중요하게 여긴 가치도 함께 살피기. (몰아붙이지 않고 자연스럽게. "처음 퇴사를 생각하게 된 게 언제였어요?" 같은 질문으로 시작)
2. 코르카에서 배운 것 — 업무적/비업무적으로 새로 배운 것과 경험. 그 경험이 본인에게 어떤 의미였는지도.
3. 코르카에 아쉬운 점 — "코르카가 이랬다면 퇴사하지 않았을 것"을 전제로. 고려했지만 결국 선택하지 않은 길이 있었다면 함께 듣기.
4. 앞으로의 계획 — 이직하는 곳과 대략적인 업무 내용. 그곳을 택한 이유와 기대.
5. 마무리 — 따뜻하게 마무리
각 단계에서 표면 답변에 머물지 말고 결을 살피기:
- 답변에 머뭇거림, 양가성, 감정 신호가 보이면 부드럽게 한 번만 더 묻기 ("그 부분은 어떤 마음이었어요?")
- 캐묻는 인상이 들지 않도록 한 번이면 충분 — 두 번 이상 파고들지 않는다
대화 규칙:
- 절대 몰아붙이지 않는다. 회고하는 분위기로 편안하게
- 한 번에 하나의 질문만
- 답변이 짧으면 "조금 더 이야기해줄 수 있어요?" 같은 부드러운 꼬리 질문
- 판단하거나 설득하지 않는다
- 충분한 이야기가 나오면 다음 단계로 자연스럽게 넘어간다
- 단계 전환 시 응답 맨 끝에 반드시 [STAGE:다음단계키] 포함 (예: [STAGE:learned])
- 5단계(close)에서 퇴사자가 작별 인사류("감사합니다", "고생하셨어요", "이만 마칠게요" 등)를 하면 따뜻하게 화답한 뒤 응답 맨 끝에 [DONE] 포함
- [STAGE:...] 와 [DONE] 태그는 자동으로 제거되어 사용자에게 보이지 않음
- 봇 이름은 "코르카안녕"이며 친근하고 따뜻한 톤 유지`;
let history = [];
let currentStage = 0;
let answers = {};
let stageHistory = { reason: [], learned: [], regret: [], plan: [], close: [] };
let isThinking = false;
let reportText = '';
function addMessage(role, text) {
const chat = document.getElementById('chat');
const div = document.createElement('div');
div.className = 'msg ' + (role === 'user' ? 'user' : 'bot');
const av = document.createElement('div');
av.className = 'avatar ' + (role === 'user' ? 'user-av' : 'bot-av');
if (role === 'user') {
av.textContent = '나';
} else {
av.innerHTML = '코르카<br>안녕';
}
const bubble = document.createElement('div');
bubble.className = 'bubble';
bubble.textContent = text;
div.appendChild(av);
div.appendChild(bubble);
chat.appendChild(div);
chat.scrollTop = chat.scrollHeight;
}
function addThinking() {
const chat = document.getElementById('chat');
const div = document.createElement('div');
div.className = 'msg bot'; div.id = 'thinking-msg';
const av = document.createElement('div');
av.className = 'avatar bot-av'; av.innerHTML = '코르카<br>안녕';
const bubble = document.createElement('div');
bubble.className = 'bubble';
bubble.innerHTML = '<div class="thinking-dots"><span></span><span></span><span></span></div>';
div.appendChild(av); div.appendChild(bubble);
chat.appendChild(div); chat.scrollTop = chat.scrollHeight;
}
function removeThinking() {
const el = document.getElementById('thinking-msg');
if (el) el.remove();
}
function updateProgress(stage) {
const pct = (stage / STAGES.length) * 100;
document.getElementById('progress-fill').style.width = pct + '%';
const s = STAGES[Math.min(stage, STAGES.length - 1)];
document.getElementById('stage-name').textContent = s.label;
document.getElementById('stage-count').textContent = (stage + 1) + ' / ' + STAGES.length;
}
async function callClaude(userMsg) {
if (userMsg) {
history.push({ role: 'user', content: userMsg });
const key = STAGES[currentStage].key;
answers[key] = answers[key] ? answers[key] + '\n' + userMsg : userMsg;
if (stageHistory[key]) stageHistory[key].push({ role: 'user', content: userMsg });
}
const stageCtx = `\n\n현재 단계: ${currentStage + 1}/5 — ${STAGES[currentStage].label}`;
const res = await fetch('https://api.anthropic.com/v1/messages', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-api-key': API_KEY,
'anthropic-version': '2023-06-01',
'anthropic-dangerous-direct-browser-access': 'true'
},
body: JSON.stringify({
model: 'claude-sonnet-4-20250514',
max_tokens: 1000,
system: SYSTEM_PROMPT + stageCtx,
messages: history
})
});
if (!res.ok) throw new Error('API 오류: ' + res.status);
const data = await res.json();
let reply = data.content?.[0]?.text || '죄송해요, 오류가 발생했어요.';
const stageMatch = reply.match(/\[STAGE:(\w+)\]/);
if (stageMatch) {
reply = reply.replace(/\[STAGE:\w+\]/, '').trim();
const nextIdx = STAGES.findIndex(s => s.key === stageMatch[1]);
if (nextIdx > -1) { currentStage = nextIdx; updateProgress(currentStage); }
}
let isDone = false;
if (reply.includes('[DONE]')) {
isDone = true;
reply = reply.replace('[DONE]', '').trim();
updateProgress(STAGES.length);
}
history.push({ role: 'assistant', content: reply });
const currentKey = STAGES[Math.min(currentStage, STAGES.length-1)].key;
if (stageHistory[currentKey]) stageHistory[currentKey].push({ role: 'assistant', content: reply });
if (isDone) {
setTimeout(generateReport, 1000);
} else if (currentStage === STAGES.length - 1 &&
stageHistory.close.filter(m => m.role === 'user').length >= 2) {
// [DONE] 태그 누락 폴백 — close 단계에서 사용자 2턴 후 자동 종료
updateProgress(STAGES.length);
setTimeout(generateReport, 1000);
}
return reply;
}
async function sendMessage() {
const input = document.getElementById('user-input');
const btn = document.getElementById('send-btn');
const text = input.value.trim();
if (!text || isThinking) return;
addMessage('user', text);
input.value = '';
isThinking = true; btn.disabled = true;
addThinking();
try {
const reply = await callClaude(text);
removeThinking(); addMessage('bot', reply);
} catch(e) {
removeThinking();
addMessage('bot', '오류가 발생했어요. API 키를 확인하거나 잠시 후 다시 시도해주세요.');
}
isThinking = false; btn.disabled = false;
input.focus();
}
function handleKey(e) {
if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); }
}
async function generateReport() {
document.getElementById('input-area').style.display = 'none';
document.getElementById('report-wrap').style.display = 'block';
const now = new Date();
document.getElementById('report-date').textContent =
now.getFullYear() + '.' + String(now.getMonth()+1).padStart(2,'0') + '.' + String(now.getDate()).padStart(2,'0');
// 퇴사자에게는 따뜻한 마무리 메시지만 보여줌
renderClosingMessage();
const summary = STAGES.map(s => {
const ans = answers[s.key];
return ans ? `[${s.label}]\n${ans}` : null;
}).filter(Boolean).join('\n\n');
// HR용 분석 리포트는 백그라운드에서 생성 후 시트에만 저장
try {
const res = await fetch('https://api.anthropic.com/v1/messages', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-api-key': API_KEY,
'anthropic-version': '2023-06-01',
'anthropic-dangerous-direct-browser-access': 'true'
},
body: JSON.stringify({
model: 'claude-sonnet-4-20250514',
max_tokens: 1200,
messages: [{
role: 'user',
content: `다음은 코르카 퇴직자 오프보딩 인터뷰 내용입니다. HR 담당자가 바로 활용할 수 있는 분석 리포트를 작성해주세요.
${summary}
아래 섹션으로 구분해서 작성해주세요. 각 섹션은 "==[섹션제목]==" 형식으로 구분해주세요.
==핵심 이탈 원인==
(1~3가지, 간결하게)
==코르카에서 얻은 것==
(퇴사자가 언급한 배움과 경험 요약)
==코르카에 아쉬운 점==
(개선 가능한 요인 중심으로)
==잔류 가능성==
높음 / 중간 / 낮음 중 선택 후 근거 한 줄
==HR 액션 제안==
(유사 이탈 방지를 위한 단기 실행 가능한 제안 1~2가지)
==중장기 개선 방향==
(이번 케이스를 바탕으로 조직/문화/제도적으로 개선할 수 있는 방향 2~3가지. 구체적인 대안 중심으로)
==행간과 결==
(표면 답변엔 안 드러났지만 대화 흐름에서 읽힌 신호 — 머뭇거린 부분, 양가적 감정, 명시하지 않은 가치관, 회피한 주제. 정형 분석에선 잘려나가지만 다음 케이스 예방에 도움될 미세한 단서. 없으면 "특이사항 없음")
==고려했으나 선택하지 않은 길==
(퇴사자가 언급한 "이랬다면 머물렀을 것" 또는 "이런 길도 생각했지만 안 택했다" 같은 대안과 그 이유. 회사가 막은 건지 본인이 포기한 건지 구분해서 기록. 없으면 "언급 없음")
마크다운 기호(#, **, - 등) 없이 plain text로 작성해주세요.`
}]
})
});
const data = await res.json();
const raw = data.content?.[0]?.text || '';
saveToSheets(summary, raw);
} catch(e) {
// 시트 저장 실패해도 퇴사자 화면에는 영향 없음
}
}
function renderClosingMessage() {
const body = document.getElementById('report-body');
body.innerHTML = '';
const msg = document.createElement('div');
msg.style.cssText = 'text-align:center; padding: 2.5rem 1rem;';
msg.innerHTML = `
<div style="font-size:36px; margin-bottom:1rem;">🌿</div>
<div style="font-size:16px; font-weight:500; color:var(--text-primary); margin-bottom:0.75rem;">소중한 이야기를 나눠주셔서 감사해요.</div>
<div style="font-size:14px; color:var(--text-secondary); line-height:1.9;">
코르카에서 함께한 시간이 앞으로의 여정에<br>좋은 밑거름이 되길 바랍니다.<br><br>
앞날을 진심으로 응원해요. 🍀
</div>
`;
body.appendChild(msg);
const statusEl = document.getElementById('save-status');
statusEl.style.display = 'block';
statusEl.className = 'save-status success';
statusEl.textContent = '소중한 의견이 전달되었어요.';
}
function buildQA(stageKey) {
const msgs = stageHistory[stageKey] || [];
return msgs.map(m => {
const prefix = m.role === 'assistant' ? 'Q' : 'A';
return prefix + ': ' + m.content;
}).join('\n');
}
async function saveToSheets(interviewRaw, reportRaw) {
if (SHEETS_URL === 'YOUR_APPS_SCRIPT_URL_HERE') return;
const statusEl = document.getElementById('save-status');
statusEl.style.display = 'block';
statusEl.className = 'save-status';
statusEl.textContent = '구글 시트에 저장 중...';
const sections = reportRaw.split(/==(.+?)==/).filter(s => s.trim());
const sectionMap = {};
for (let i = 0; i < sections.length; i += 2) {
const title = sections[i]?.trim();
const content = sections[i+1]?.trim();
if (title) sectionMap[title] = content || '';
}
try {
await fetch(SHEETS_URL, {
method: 'POST',
mode: 'no-cors',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
date: new Date().toISOString().split('T')[0],
reason: buildQA('reason'),
learned: buildQA('learned'),
regret: buildQA('regret'),
plan: buildQA('plan'),
cause: sectionMap['핵심 이탈 원인'] || '',
push: sectionMap['코르카에 아쉬운 점'] || '',
retain: sectionMap['잔류 가능성'] || '',
action: sectionMap['HR 액션 제안'] || '',
longterm: sectionMap['중장기 개선 방향'] || '',
inner: sectionMap['행간과 결'] || '',
alternatives: sectionMap['고려했으나 선택하지 않은 길'] || ''
})
});
statusEl.className = 'save-status success';
statusEl.textContent = '구글 시트에 저장되었어요.';
} catch(e) {
statusEl.className = 'save-status error';
statusEl.textContent = '저장 중 오류가 발생했어요.';
}
}
function copyReport() {
navigator.clipboard.writeText(reportText).then(() => {
const btn = document.getElementById('copy-btn');
btn.textContent = '복사 완료!';
setTimeout(() => { btn.textContent = '리포트 복사하기'; }, 2000);
});
}
async function init() {
updateProgress(0);
addThinking();
try {
const opening = await callClaude(null);
removeThinking(); addMessage('bot', opening);
} catch(e) {
removeThinking();
addMessage('bot', '안녕하세요! 코르카에서 함께한 시간을 돌아보는 인터뷰예요. 편하게 이야기 나눠봐요. 먼저, 코르카를 떠나기로 결심하게 된 이야기를 들어볼 수 있을까요?');
}
}
init();
</script>
</body>
</html>