gahusb
e27d13b6ec
- 질문지 HTML에 제출/임시저장 JavaScript 추가 (localStorage 임시저장, API 제출) - questionnaire_responses 테이블 마이그레이션 (005) - /api/questionnaire/submit POST 엔드포인트 - 관리자 질문지 응답 목록/상세/상태변경 페이지 및 API - 관리자 문서 미리보기를 fetch+srcdoc 방식으로 변경 (X-Frame-Options 우회) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
973 lines
27 KiB
HTML
973 lines
27 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>이베이 자동차 부품 AI 리스팅 자동화 — 사전 요구사항 질문지</title>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&display=swap');
|
|
|
|
*, *::before, *::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
color: #1e293b;
|
|
background: #f8fafc;
|
|
line-height: 1.7;
|
|
-webkit-print-color-adjust: exact;
|
|
print-color-adjust: exact;
|
|
}
|
|
|
|
.page {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
background: #ffffff;
|
|
padding: 48px 56px;
|
|
}
|
|
|
|
/* ── Header ── */
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-bottom: 3px solid #1a56db;
|
|
padding-bottom: 20px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
}
|
|
|
|
.brand-icon {
|
|
width: 44px;
|
|
height: 44px;
|
|
background: #1a56db;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.brand-icon svg {
|
|
width: 26px;
|
|
height: 26px;
|
|
fill: #ffffff;
|
|
}
|
|
|
|
.brand-name {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
color: #0f172a;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
.brand-sub {
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
color: #64748b;
|
|
}
|
|
|
|
.doc-date {
|
|
font-size: 13px;
|
|
color: #94a3b8;
|
|
text-align: right;
|
|
}
|
|
|
|
.doc-title {
|
|
font-size: 19px;
|
|
font-weight: 700;
|
|
color: #0f172a;
|
|
margin-bottom: 4px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.doc-subtitle {
|
|
font-size: 14px;
|
|
color: #64748b;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
/* ── Client Info ── */
|
|
.client-info {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 12px 24px;
|
|
background: #f8fafc;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 8px;
|
|
padding: 20px 24px;
|
|
margin-bottom: 36px;
|
|
}
|
|
|
|
.client-info .field {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.client-info .field-label {
|
|
font-weight: 600;
|
|
color: #475569;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.client-info .field-value {
|
|
flex: 1;
|
|
border-bottom: 1px solid #cbd5e1;
|
|
min-height: 24px;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.client-info .field-input {
|
|
flex: 1;
|
|
border: none;
|
|
border-bottom: 1px solid #cbd5e1;
|
|
min-height: 24px;
|
|
padding: 2px 4px;
|
|
font-family: inherit;
|
|
font-size: 14px;
|
|
color: #1e293b;
|
|
background: transparent;
|
|
outline: none;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.client-info .field-input:focus {
|
|
border-bottom-color: #1a56db;
|
|
}
|
|
|
|
.client-info .field-input::placeholder {
|
|
color: #cbd5e1;
|
|
}
|
|
|
|
/* ── Submit Section ── */
|
|
.submit-section {
|
|
margin-top: 32px;
|
|
text-align: center;
|
|
}
|
|
|
|
.submit-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 14px 48px;
|
|
background: #1a56db;
|
|
color: #ffffff;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-family: inherit;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.submit-btn:hover {
|
|
background: #1e40af;
|
|
}
|
|
|
|
.submit-btn:disabled {
|
|
background: #94a3b8;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.submit-msg {
|
|
margin-top: 12px;
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.submit-msg.success {
|
|
color: #16a34a;
|
|
}
|
|
|
|
.submit-msg.error {
|
|
color: #dc2626;
|
|
}
|
|
|
|
.save-draft-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 10px 24px;
|
|
background: #f1f5f9;
|
|
color: #475569;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 8px;
|
|
font-family: inherit;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
margin-right: 12px;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.save-draft-btn:hover {
|
|
background: #e2e8f0;
|
|
}
|
|
|
|
/* ── Section ── */
|
|
.section {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.section-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 4px 12px;
|
|
border-radius: 6px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.3px;
|
|
text-transform: uppercase;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.badge-required {
|
|
background: #1a56db;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.badge-optional {
|
|
background: #e2e8f0;
|
|
color: #475569;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 17px;
|
|
font-weight: 700;
|
|
color: #0f172a;
|
|
}
|
|
|
|
.section-desc {
|
|
font-size: 13px;
|
|
color: #64748b;
|
|
margin-bottom: 16px;
|
|
padding-left: 2px;
|
|
}
|
|
|
|
/* ── Question Card ── */
|
|
.question {
|
|
background: #ffffff;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 8px;
|
|
padding: 20px 24px;
|
|
margin-bottom: 16px;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.question:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.q-top {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.q-num {
|
|
width: 28px;
|
|
height: 28px;
|
|
background: #1a56db;
|
|
color: #ffffff;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
flex-shrink: 0;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.badge-optional + .section-title ~ .question .q-num,
|
|
.section.optional .q-num {
|
|
background: #64748b;
|
|
}
|
|
|
|
.q-text {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: #1e293b;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.q-hint {
|
|
font-size: 13px;
|
|
color: #94a3b8;
|
|
margin-top: 4px;
|
|
padding-left: 40px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.q-options {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-top: 10px;
|
|
padding-left: 40px;
|
|
}
|
|
|
|
.q-option {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 14px;
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 6px;
|
|
font-size: 13px;
|
|
color: #475569;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.q-option input[type="checkbox"],
|
|
.q-option input[type="radio"] {
|
|
accent-color: #1a56db;
|
|
}
|
|
|
|
.answer-area {
|
|
margin-top: 12px;
|
|
padding-left: 40px;
|
|
}
|
|
|
|
.answer-area textarea {
|
|
width: 100%;
|
|
min-height: 64px;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 6px;
|
|
padding: 10px 14px;
|
|
font-family: inherit;
|
|
font-size: 14px;
|
|
color: #1e293b;
|
|
resize: vertical;
|
|
background: #fafbfc;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.answer-area textarea:focus {
|
|
outline: none;
|
|
border-color: #1a56db;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.answer-area textarea.large {
|
|
min-height: 96px;
|
|
}
|
|
|
|
.answer-line {
|
|
margin-top: 12px;
|
|
padding-left: 40px;
|
|
border-bottom: 1px solid #cbd5e1;
|
|
min-height: 28px;
|
|
}
|
|
|
|
/* ── Footer ── */
|
|
.footer {
|
|
margin-top: 40px;
|
|
border-top: 2px solid #e2e8f0;
|
|
padding-top: 24px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.footer-left {
|
|
font-size: 13px;
|
|
color: #64748b;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.footer-left strong {
|
|
color: #0f172a;
|
|
}
|
|
|
|
.footer-right {
|
|
text-align: right;
|
|
font-size: 12px;
|
|
color: #94a3b8;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.footer-notice {
|
|
margin-top: 20px;
|
|
background: #f1f5f9;
|
|
border-radius: 8px;
|
|
padding: 16px 20px;
|
|
font-size: 13px;
|
|
color: #64748b;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.footer-notice strong {
|
|
color: #475569;
|
|
}
|
|
|
|
/* ── Print Styles ── */
|
|
@media print {
|
|
body {
|
|
background: #ffffff;
|
|
}
|
|
|
|
.page {
|
|
padding: 24px 32px;
|
|
max-width: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.question {
|
|
border: 1px solid #d1d5db;
|
|
break-inside: avoid;
|
|
}
|
|
|
|
.answer-area textarea {
|
|
border: none;
|
|
border-bottom: 1px solid #999;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
min-height: 48px;
|
|
}
|
|
|
|
.q-option {
|
|
border-color: #999;
|
|
}
|
|
|
|
.header {
|
|
border-bottom-color: #1a56db;
|
|
}
|
|
|
|
.q-num {
|
|
-webkit-print-color-adjust: exact;
|
|
print-color-adjust: exact;
|
|
}
|
|
|
|
.section-badge {
|
|
-webkit-print-color-adjust: exact;
|
|
print-color-adjust: exact;
|
|
}
|
|
|
|
.footer-notice {
|
|
-webkit-print-color-adjust: exact;
|
|
print-color-adjust: exact;
|
|
}
|
|
}
|
|
|
|
@page {
|
|
margin: 16mm 12mm;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="page">
|
|
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<div class="brand">
|
|
<div class="brand-icon">
|
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
|
</div>
|
|
<div>
|
|
<div class="brand-name">쟁승메이드</div>
|
|
<div class="brand-sub">JaengseungMade Co.</div>
|
|
</div>
|
|
</div>
|
|
<div class="doc-date">문서 작성일: 2026. 04. 02.</div>
|
|
</div>
|
|
|
|
<div style="height: 24px;"></div>
|
|
|
|
<div class="doc-title">이베이 자동차 부품 AI 리스팅 자동화 — 사전 요구사항 질문지</div>
|
|
<div class="doc-subtitle">프로젝트 착수 전, 아래 질문에 답변해 주시면 최적의 솔루션을 설계할 수 있습니다.</div>
|
|
|
|
<!-- Client Info -->
|
|
<div class="client-info">
|
|
<div class="field">
|
|
<span class="field-label">고객명 <span style="color:#ef4444">*</span></span>
|
|
<input type="text" id="clientName" class="field-input" placeholder="홍길동" required>
|
|
</div>
|
|
<div class="field">
|
|
<span class="field-label">연락처</span>
|
|
<input type="tel" id="clientPhone" class="field-input" placeholder="010-0000-0000">
|
|
</div>
|
|
<div class="field">
|
|
<span class="field-label">이메일 <span style="color:#ef4444">*</span></span>
|
|
<input type="email" id="clientEmail" class="field-input" placeholder="example@email.com" required>
|
|
</div>
|
|
<div class="field">
|
|
<span class="field-label">작성일</span>
|
|
<span class="field-value" id="fillDate"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 1: Required -->
|
|
<div class="section">
|
|
<div class="section-header">
|
|
<span class="section-badge badge-required">REQUIRED</span>
|
|
<span class="section-title">필수 항목 (착수 전 반드시 필요)</span>
|
|
</div>
|
|
<div class="section-desc">아래 9개 항목은 개발 범위 확정과 견적 산출에 필수적인 정보입니다. 빠짐없이 작성 부탁드립니다.</div>
|
|
|
|
<!-- Q1 -->
|
|
<div class="question">
|
|
<div class="q-top">
|
|
<span class="q-num">1</span>
|
|
<span class="q-text">주로 사용하시는 자동차 부품 사이트 URL을 알려주세요 (최소 3개)</span>
|
|
</div>
|
|
<div class="q-hint">예: RockAuto, AutoZone, PartsGeek, partsouq.com 등</div>
|
|
<div class="answer-area">
|
|
<textarea class="large" placeholder="사이트명과 URL을 함께 작성해주세요"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Q2 -->
|
|
<div class="question">
|
|
<div class="q-top">
|
|
<span class="q-num">2</span>
|
|
<span class="q-text">주요 취급 부품 카테고리는 무엇인가요?</span>
|
|
</div>
|
|
<div class="q-hint">예: 브레이크, 엔진, 서스펜션, 전기장치, 외장 등</div>
|
|
<div class="answer-area">
|
|
<textarea placeholder="취급하시는 부품 카테고리를 나열해주세요"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Q3 -->
|
|
<div class="question">
|
|
<div class="q-top">
|
|
<span class="q-num">3</span>
|
|
<span class="q-text">테스트용 샘플 품번(Part Number) 10~20개를 작성해주세요</span>
|
|
</div>
|
|
<div class="q-hint">예: 16610-0H040, 04465-33471 등 — 실제 리스팅에 사용하실 품번이면 더 좋습니다</div>
|
|
<div class="answer-area">
|
|
<textarea class="large" placeholder="품번을 줄바꿈 또는 쉼표로 구분하여 작성해주세요"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Q4 -->
|
|
<div class="question">
|
|
<div class="q-top">
|
|
<span class="q-num">4</span>
|
|
<span class="q-text">현재 운영 중인 eBay 리스팅 URL을 3~5개 공유해주세요</span>
|
|
</div>
|
|
<div class="q-hint">현재 리스팅 스타일과 구조를 파악하여 최적화 방향을 설정합니다</div>
|
|
<div class="answer-area">
|
|
<textarea class="large" placeholder="eBay 리스팅 URL을 줄바꿈으로 구분하여 작성해주세요"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Q5 -->
|
|
<div class="question">
|
|
<div class="q-top">
|
|
<span class="q-num">5</span>
|
|
<span class="q-text">eBay 셀러 계정 등급은 무엇인가요?</span>
|
|
</div>
|
|
<div class="q-options">
|
|
<label class="q-option"><input type="radio" name="q5"> Basic</label>
|
|
<label class="q-option"><input type="radio" name="q5"> Premium</label>
|
|
<label class="q-option"><input type="radio" name="q5"> Anchor</label>
|
|
<label class="q-option"><input type="radio" name="q5"> Enterprise</label>
|
|
<label class="q-option"><input type="radio" name="q5"> 잘 모르겠음</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Q6 -->
|
|
<div class="question">
|
|
<div class="q-top">
|
|
<span class="q-num">6</span>
|
|
<span class="q-text">주 판매 카테고리를 알려주세요</span>
|
|
</div>
|
|
<div class="q-hint">eBay Motors > Parts & Accessories 하위 카테고리 기준</div>
|
|
<div class="answer-area">
|
|
<textarea placeholder="예: Car & Truck Parts > Brakes & Brake Parts"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Q7 -->
|
|
<div class="question">
|
|
<div class="q-top">
|
|
<span class="q-num">7</span>
|
|
<span class="q-text">예상 월간 리스팅 건수는 몇 건인가요?</span>
|
|
</div>
|
|
<div class="q-options">
|
|
<label class="q-option"><input type="radio" name="q7"> 100건 미만</label>
|
|
<label class="q-option"><input type="radio" name="q7"> 100~500건</label>
|
|
<label class="q-option"><input type="radio" name="q7"> 500~1,000건</label>
|
|
<label class="q-option"><input type="radio" name="q7"> 1,000~5,000건</label>
|
|
<label class="q-option"><input type="radio" name="q7"> 5,000건 이상</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Q8 -->
|
|
<div class="question">
|
|
<div class="q-top">
|
|
<span class="q-num">8</span>
|
|
<span class="q-text">Fitment(호환 차종) 데이터의 정확도 기대치는?</span>
|
|
</div>
|
|
<div class="q-hint">정확도 요구 수준에 따라 데이터 소스와 검증 로직의 설계가 달라집니다</div>
|
|
<div class="q-options">
|
|
<label class="q-option"><input type="radio" name="q8"> (A) 참고용이면 충분</label>
|
|
<label class="q-option"><input type="radio" name="q8"> (B) 정확해야 함 — 틀리면 eBay 계정에 영향</label>
|
|
</div>
|
|
<div class="answer-area">
|
|
<textarea placeholder="추가 의견이 있으시면 작성해주세요 (선택)" style="min-height: 48px;"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Q9 -->
|
|
<div class="question">
|
|
<div class="q-top">
|
|
<span class="q-num">9</span>
|
|
<span class="q-text">타겟 마켓은 어디인가요?</span>
|
|
</div>
|
|
<div class="q-options">
|
|
<label class="q-option"><input type="checkbox"> US (미국)</label>
|
|
<label class="q-option"><input type="checkbox"> UK (영국)</label>
|
|
<label class="q-option"><input type="checkbox"> DE (독일)</label>
|
|
<label class="q-option"><input type="checkbox"> AU (호주)</label>
|
|
<label class="q-option"><input type="checkbox"> 기타</label>
|
|
</div>
|
|
<div class="answer-area">
|
|
<textarea placeholder="기타를 선택하신 경우 국가명을 작성해주세요" style="min-height: 48px;"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 2: Optional -->
|
|
<div class="section optional">
|
|
<div class="section-header">
|
|
<span class="section-badge badge-optional">OPTIONAL</span>
|
|
<span class="section-title">권장 항목 (있으면 도움)</span>
|
|
</div>
|
|
<div class="section-desc">아래 항목은 필수는 아니지만, 답변해 주시면 더 정밀한 솔루션 설계에 도움이 됩니다.</div>
|
|
|
|
<!-- Q10 -->
|
|
<div class="question">
|
|
<div class="q-top">
|
|
<span class="q-num" style="background: #64748b;">10</span>
|
|
<span class="q-text">현재 리스팅 1건 작성에 소요되는 시간은?</span>
|
|
</div>
|
|
<div class="q-options">
|
|
<label class="q-option"><input type="radio" name="q10"> 5분 미만</label>
|
|
<label class="q-option"><input type="radio" name="q10"> 5~15분</label>
|
|
<label class="q-option"><input type="radio" name="q10"> 15~30분</label>
|
|
<label class="q-option"><input type="radio" name="q10"> 30분 이상</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Q11 -->
|
|
<div class="question">
|
|
<div class="q-top">
|
|
<span class="q-num" style="background: #64748b;">11</span>
|
|
<span class="q-text">기존 리스팅 관리 방식은?</span>
|
|
</div>
|
|
<div class="q-options">
|
|
<label class="q-option"><input type="radio" name="q11"> 수동 (eBay 웹에서 직접)</label>
|
|
<label class="q-option"><input type="radio" name="q11"> CSV 파일 업로드</label>
|
|
<label class="q-option"><input type="radio" name="q11"> eBay Seller Hub</label>
|
|
<label class="q-option"><input type="radio" name="q11"> 서드파티 툴</label>
|
|
</div>
|
|
<div class="answer-area">
|
|
<textarea placeholder="서드파티 툴을 사용 중이시면 이름을 알려주세요" style="min-height: 48px;"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Q12 -->
|
|
<div class="question">
|
|
<div class="q-top">
|
|
<span class="q-num" style="background: #64748b;">12</span>
|
|
<span class="q-text">관세/통관 계산 시 참고하는 사이트나 방식은?</span>
|
|
</div>
|
|
<div class="answer-area">
|
|
<textarea placeholder="사용 중인 관세 계산 방식이나 참고 사이트가 있으면 작성해주세요"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Q13 -->
|
|
<div class="question">
|
|
<div class="q-top">
|
|
<span class="q-num" style="background: #64748b;">13</span>
|
|
<span class="q-text">eBay Developer Program API 키를 보유하고 계신가요?</span>
|
|
</div>
|
|
<div class="q-options">
|
|
<label class="q-option"><input type="radio" name="q13"> 예, 보유하고 있음</label>
|
|
<label class="q-option"><input type="radio" name="q13"> 아니오, 없음</label>
|
|
<label class="q-option"><input type="radio" name="q13"> 잘 모르겠음</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Q14 -->
|
|
<div class="question">
|
|
<div class="q-top">
|
|
<span class="q-num" style="background: #64748b;">14</span>
|
|
<span class="q-text">선호하는 AI 모델이 있나요?</span>
|
|
</div>
|
|
<div class="q-options">
|
|
<label class="q-option"><input type="radio" name="q14"> OpenAI (GPT)</label>
|
|
<label class="q-option"><input type="radio" name="q14"> Anthropic (Claude)</label>
|
|
<label class="q-option"><input type="radio" name="q14"> 상관없음</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Q15 -->
|
|
<div class="question">
|
|
<div class="q-top">
|
|
<span class="q-num" style="background: #64748b;">15</span>
|
|
<span class="q-text">현재 사용 중인 자동화 도구가 있나요?</span>
|
|
</div>
|
|
<div class="answer-area">
|
|
<textarea placeholder="사용 중인 도구명과 용도를 작성해주세요 (없으면 '없음')"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Q16 -->
|
|
<div class="question">
|
|
<div class="q-top">
|
|
<span class="q-num" style="background: #64748b;">16</span>
|
|
<span class="q-text">OpenAI 또는 Anthropic API 키를 보유하고 계신가요?</span>
|
|
</div>
|
|
<div class="q-options">
|
|
<label class="q-option"><input type="radio" name="q16"> 예, OpenAI</label>
|
|
<label class="q-option"><input type="radio" name="q16"> 예, Anthropic</label>
|
|
<label class="q-option"><input type="radio" name="q16"> 둘 다 보유</label>
|
|
<label class="q-option"><input type="radio" name="q16"> 없음</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Q17 -->
|
|
<div class="question">
|
|
<div class="q-top">
|
|
<span class="q-num" style="background: #64748b;">17</span>
|
|
<span class="q-text">완성된 프로젝트를 쟁승메이드 포트폴리오(사례)로 활용해도 괜찮으신가요?</span>
|
|
</div>
|
|
<div class="q-hint">고객사명은 비공개 처리 가능합니다</div>
|
|
<div class="q-options">
|
|
<label class="q-option"><input type="radio" name="q17"> 괜찮습니다</label>
|
|
<label class="q-option"><input type="radio" name="q17"> 고객사명 비공개 시 가능</label>
|
|
<label class="q-option"><input type="radio" name="q17"> 불가합니다</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Additional Notes -->
|
|
<div class="section">
|
|
<div class="section-header">
|
|
<span class="section-title">추가 요청사항</span>
|
|
</div>
|
|
<div class="question" style="border-color: #cbd5e1;">
|
|
<div class="answer-area" style="padding-left: 0;">
|
|
<textarea class="large" placeholder="위 항목 외에 추가로 전달하고 싶은 내용이 있으시면 자유롭게 작성해주세요" style="min-height: 120px;"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Submit Section -->
|
|
<div class="submit-section">
|
|
<button type="button" class="save-draft-btn" onclick="saveDraft()">
|
|
임시 저장
|
|
</button>
|
|
<button type="button" class="submit-btn" id="submitBtn" onclick="submitQuestionnaire()">
|
|
질문지 제출하기
|
|
</button>
|
|
<div id="submitMsg" class="submit-msg"></div>
|
|
</div>
|
|
|
|
<!-- Footer Notice -->
|
|
<div class="footer-notice">
|
|
<strong>안내사항</strong><br>
|
|
본 질문지는 프로젝트 범위 확정 및 정확한 견적 산출을 위한 자료입니다.<br>
|
|
작성하신 정보는 프로젝트 진행 목적 외에 사용되지 않으며, 프로젝트 종료 후 안전하게 폐기됩니다.<br>
|
|
작성 후 이메일(<strong>bgg8988@gmail.com</strong>)로 회신하시거나, 인쇄 후 스캔본을 보내주셔도 됩니다.
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="footer">
|
|
<div class="footer-left">
|
|
<strong>쟁승메이드 (JaengseungMade Co.)</strong><br>
|
|
담당: 박재오<br>
|
|
이메일: bgg8988@gmail.com<br>
|
|
연락처: 010-3907-1392
|
|
</div>
|
|
<div class="footer-right">
|
|
본 문서는 고객 맞춤형 프로젝트<br>
|
|
사전 조사를 위해 작성되었습니다.<br>
|
|
© 2026 JaengseungMade
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
// 작성일 자동 채우기
|
|
document.getElementById('fillDate').textContent = new Date().toLocaleDateString('ko-KR', {
|
|
year: 'numeric', month: '2-digit', day: '2-digit'
|
|
});
|
|
|
|
// 모든 응답 수집
|
|
function collectResponses() {
|
|
const responses = {};
|
|
|
|
// 텍스트 질문 (textarea)
|
|
document.querySelectorAll('.question').forEach((q, idx) => {
|
|
const num = idx + 1;
|
|
const textarea = q.querySelector('textarea');
|
|
const radios = q.querySelectorAll('input[type="radio"]');
|
|
const checkboxes = q.querySelectorAll('input[type="checkbox"]');
|
|
|
|
if (radios.length > 0) {
|
|
const checked = q.querySelector('input[type="radio"]:checked');
|
|
if (checked) {
|
|
responses['q' + num] = checked.closest('.q-option').textContent.trim();
|
|
}
|
|
}
|
|
|
|
if (checkboxes.length > 0) {
|
|
const selected = [];
|
|
checkboxes.forEach(cb => {
|
|
if (cb.checked) selected.push(cb.closest('.q-option').textContent.trim());
|
|
});
|
|
if (selected.length > 0) {
|
|
responses['q' + num + '_selected'] = selected;
|
|
}
|
|
}
|
|
|
|
if (textarea) {
|
|
const val = textarea.value.trim();
|
|
if (val) {
|
|
responses['q' + num + (radios.length > 0 || checkboxes.length > 0 ? '_detail' : '')] = val;
|
|
}
|
|
}
|
|
});
|
|
|
|
// 추가 요청사항 (마지막 textarea)
|
|
const lastSection = document.querySelectorAll('.section');
|
|
const additionalTextarea = lastSection[lastSection.length - 1]?.querySelector('textarea');
|
|
if (additionalTextarea && additionalTextarea.value.trim()) {
|
|
responses['additional'] = additionalTextarea.value.trim();
|
|
}
|
|
|
|
return responses;
|
|
}
|
|
|
|
// 유효성 검사
|
|
function validate() {
|
|
const name = document.getElementById('clientName').value.trim();
|
|
const email = document.getElementById('clientEmail').value.trim();
|
|
|
|
if (!name) {
|
|
alert('고객명을 입력해주세요.');
|
|
document.getElementById('clientName').focus();
|
|
return false;
|
|
}
|
|
if (!email) {
|
|
alert('이메일을 입력해주세요.');
|
|
document.getElementById('clientEmail').focus();
|
|
return false;
|
|
}
|
|
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
|
|
alert('올바른 이메일 형식을 입력해주세요.');
|
|
document.getElementById('clientEmail').focus();
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
// 임시 저장 (로컬)
|
|
function saveDraft() {
|
|
const data = {
|
|
clientName: document.getElementById('clientName').value,
|
|
clientEmail: document.getElementById('clientEmail').value,
|
|
clientPhone: document.getElementById('clientPhone').value,
|
|
responses: collectResponses(),
|
|
savedAt: new Date().toISOString()
|
|
};
|
|
localStorage.setItem('questionnaire_draft_ebay', JSON.stringify(data));
|
|
|
|
const msg = document.getElementById('submitMsg');
|
|
msg.className = 'submit-msg success';
|
|
msg.textContent = '임시 저장 완료! (브라우저에 저장됨)';
|
|
setTimeout(() => { msg.textContent = ''; }, 3000);
|
|
}
|
|
|
|
// 임시 저장 복원
|
|
function loadDraft() {
|
|
const saved = localStorage.getItem('questionnaire_draft_ebay');
|
|
if (!saved) return;
|
|
|
|
try {
|
|
const data = JSON.parse(saved);
|
|
if (data.clientName) document.getElementById('clientName').value = data.clientName;
|
|
if (data.clientEmail) document.getElementById('clientEmail').value = data.clientEmail;
|
|
if (data.clientPhone) document.getElementById('clientPhone').value = data.clientPhone;
|
|
} catch (e) {
|
|
// 복원 실패 시 무시
|
|
}
|
|
}
|
|
|
|
// 제출
|
|
async function submitQuestionnaire() {
|
|
if (!validate()) return;
|
|
|
|
const btn = document.getElementById('submitBtn');
|
|
const msg = document.getElementById('submitMsg');
|
|
|
|
btn.disabled = true;
|
|
btn.textContent = '제출 중...';
|
|
msg.textContent = '';
|
|
|
|
const payload = {
|
|
clientName: document.getElementById('clientName').value.trim(),
|
|
clientEmail: document.getElementById('clientEmail').value.trim(),
|
|
clientPhone: document.getElementById('clientPhone').value.trim() || null,
|
|
responses: collectResponses(),
|
|
type: 'ebay-tool'
|
|
};
|
|
|
|
try {
|
|
const res = await fetch('/api/questionnaire/submit', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
|
|
const result = await res.json();
|
|
|
|
if (res.ok && result.success) {
|
|
msg.className = 'submit-msg success';
|
|
msg.innerHTML = '질문지가 성공적으로 제출되었습니다!<br>담당자가 확인 후 연락드리겠습니다. 감사합니다.';
|
|
btn.textContent = '제출 완료';
|
|
localStorage.removeItem('questionnaire_draft_ebay');
|
|
} else {
|
|
throw new Error(result.error || '제출에 실패했습니다.');
|
|
}
|
|
} catch (err) {
|
|
msg.className = 'submit-msg error';
|
|
msg.textContent = err.message || '서버 오류가 발생했습니다. 이메일(bgg8988@gmail.com)로 직접 보내주세요.';
|
|
btn.disabled = false;
|
|
btn.textContent = '질문지 제출하기';
|
|
}
|
|
}
|
|
|
|
// 페이지 로드 시 임시 저장 복원
|
|
loadDraft();
|
|
</script>
|
|
|
|
</body>
|
|
</html> |