651 lines
18 KiB
Vue
651 lines
18 KiB
Vue
<script setup lang="ts">
|
|
// 커피챗 신청 — 클라이언트 검증 + 완료 화면 (원본 바닐라 JS → Vue 반응형 이식)
|
|
import { reactive, ref, nextTick } from 'vue'
|
|
|
|
useHead({ title: '커피챗 신청 | innertab' })
|
|
|
|
// 폼 상태
|
|
const form = reactive({
|
|
name: '',
|
|
phone: '',
|
|
email: '',
|
|
interest: '',
|
|
when: '',
|
|
current: '',
|
|
message: '',
|
|
})
|
|
const agreePrivacy = ref(false)
|
|
const agreePool = ref(false)
|
|
|
|
// 검증 에러 상태
|
|
const errors = reactive({
|
|
name: false,
|
|
email: false,
|
|
interest: false,
|
|
})
|
|
const consentInvalid = ref(false)
|
|
|
|
// 완료 화면 상태
|
|
const submitted = ref(false)
|
|
const summary = ref<Array<{ k: string; v: string }>>([])
|
|
const formCard = ref<HTMLElement | null>(null)
|
|
|
|
const interestOptions = [
|
|
'브랜드 · 마케팅',
|
|
'콘텐츠 · 디자인',
|
|
'커머스 · 세일즈',
|
|
'글로벌 사업',
|
|
'프로덕트 · 개발',
|
|
'R&D · 상품기획',
|
|
'경영지원 · People',
|
|
'기타',
|
|
]
|
|
const whenOptions = ['평일 오전', '평일 오후', '평일 저녁', '주말', '조율 가능']
|
|
|
|
// 입력 시 해당 필드 에러 해제
|
|
function clearError(field: keyof typeof errors) {
|
|
errors[field] = false
|
|
}
|
|
function clearConsent() {
|
|
if (agreePrivacy.value) consentInvalid.value = false
|
|
}
|
|
|
|
const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
|
|
|
|
async function handleSubmit() {
|
|
errors.name = !form.name.trim()
|
|
errors.email = !EMAIL_RE.test(form.email.trim())
|
|
errors.interest = !form.interest
|
|
consentInvalid.value = !agreePrivacy.value
|
|
|
|
const ok = !errors.name && !errors.email && !errors.interest && !consentInvalid.value
|
|
if (!ok) {
|
|
// 첫 번째 오류 위치로 스크롤
|
|
await nextTick()
|
|
const firstErr = formCard.value?.querySelector('.invalid') as HTMLElement | null
|
|
if (firstErr) {
|
|
const y = firstErr.getBoundingClientRect().top + window.scrollY - 120
|
|
window.scrollTo({ top: y, behavior: 'smooth' })
|
|
}
|
|
return
|
|
}
|
|
|
|
// 완료 요약 구성
|
|
summary.value = [
|
|
{ k: '성명', v: form.name.trim() },
|
|
{ k: '이메일', v: form.email.trim() },
|
|
{ k: '관심 분야', v: form.interest },
|
|
{ k: '희망 시간대', v: form.when || '조율 가능' },
|
|
]
|
|
|
|
// TODO: 백엔드 연동 시 useApi() 기반 composable 로 POST 처리
|
|
submitted.value = true
|
|
window.scrollTo({ top: 0, behavior: 'smooth' })
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<AppHeader variant="back" />
|
|
|
|
<main class="cc">
|
|
<div class="wrap cc-grid">
|
|
<!-- LEFT: 소개 -->
|
|
<section class="intro">
|
|
<p v-reveal class="cc-eyebrow">Coffee Chat</p>
|
|
<h1 v-reveal="{ delay: 80 }">지원 전에,<br >가볍게 먼저 이야기 나눠요.</h1>
|
|
<p v-reveal="{ delay: 160 }" class="lead">
|
|
이너탭이 어떤 곳인지, 어떤 동료들과 일하게 될지 궁금하신가요? 정식 지원이 아니어도
|
|
좋습니다. 편하게 신청해 주시면, 담당자가 일정을 조율해 연락드립니다.
|
|
</p>
|
|
|
|
<div class="facts">
|
|
<div v-reveal="{ delay: 60 }" class="fact">
|
|
<span class="ico">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></svg>
|
|
</span>
|
|
<div><h3>약 30분 내외</h3><p>부담 없는 짧은 대화로 진행됩니다.</p></div>
|
|
</div>
|
|
<div v-reveal="{ delay: 140 }" class="fact">
|
|
<span class="ico">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2" /><path d="M3 9h18M8 4v16" /></svg>
|
|
</span>
|
|
<div><h3>온라인 · 오프라인</h3><p>편하신 방식으로 진행할 수 있어요.</p></div>
|
|
</div>
|
|
<div v-reveal="{ delay: 220 }" class="fact">
|
|
<span class="ico">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16v12H5.2L4 17.5z" /></svg>
|
|
</span>
|
|
<div><h3>일정 조율 후 안내</h3><p>신청 내용 확인 후 이메일로 연락드립니다.</p></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- RIGHT: 폼 -->
|
|
<section>
|
|
<div ref="formCard" v-reveal="{ delay: 120 }" class="form-card">
|
|
<!-- 입력 폼 -->
|
|
<div v-show="!submitted" class="form-live">
|
|
<h2 class="fc-title">커피챗 신청</h2>
|
|
<p class="fc-sub">아래 정보를 남겨주시면 담당자가 확인 후 연락드립니다.</p>
|
|
|
|
<form novalidate @submit.prevent="handleSubmit">
|
|
<div class="two">
|
|
<div class="field" :class="{ invalid: errors.name }">
|
|
<label for="name">성명<span class="req">*</span></label>
|
|
<input
|
|
id="name"
|
|
v-model="form.name"
|
|
class="ctrl"
|
|
type="text"
|
|
placeholder="홍길동"
|
|
autocomplete="name"
|
|
@input="clearError('name')"
|
|
>
|
|
<p class="err-msg">성명을 입력해 주세요.</p>
|
|
</div>
|
|
<div class="field">
|
|
<label for="phone">연락처<span class="opt">선택</span></label>
|
|
<input
|
|
id="phone"
|
|
v-model="form.phone"
|
|
class="ctrl"
|
|
type="tel"
|
|
placeholder="010-0000-0000"
|
|
autocomplete="tel"
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field" :class="{ invalid: errors.email }">
|
|
<label for="email">이메일<span class="req">*</span></label>
|
|
<input
|
|
id="email"
|
|
v-model="form.email"
|
|
class="ctrl"
|
|
type="email"
|
|
placeholder="you@example.com"
|
|
autocomplete="email"
|
|
@input="clearError('email')"
|
|
>
|
|
<p class="err-msg">올바른 이메일 주소를 입력해 주세요.</p>
|
|
</div>
|
|
|
|
<div class="two">
|
|
<div class="field" :class="{ invalid: errors.interest }">
|
|
<label for="interest">관심 직무·분야<span class="req">*</span></label>
|
|
<select id="interest" v-model="form.interest" class="ctrl" @change="clearError('interest')">
|
|
<option value="" disabled>선택해 주세요</option>
|
|
<option v-for="opt in interestOptions" :key="opt">{{ opt }}</option>
|
|
</select>
|
|
<p class="err-msg">관심 분야를 선택해 주세요.</p>
|
|
</div>
|
|
<div class="field">
|
|
<label for="when">희망 시간대<span class="opt">선택</span></label>
|
|
<select id="when" v-model="form.when" class="ctrl">
|
|
<option value="" disabled>선택해 주세요</option>
|
|
<option v-for="opt in whenOptions" :key="opt">{{ opt }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="current">현재 소속 · 직무<span class="opt">선택</span></label>
|
|
<input
|
|
id="current"
|
|
v-model="form.current"
|
|
class="ctrl"
|
|
type="text"
|
|
placeholder="예) ○○회사 마케터 / 취업준비생 / 학생"
|
|
>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="message">사전에 나누고 싶은 이야기<span class="opt">선택</span></label>
|
|
<textarea
|
|
id="message"
|
|
v-model="form.message"
|
|
class="ctrl"
|
|
placeholder="궁금한 점이나 듣고 싶은 이야기를 자유롭게 남겨주세요."
|
|
/>
|
|
</div>
|
|
|
|
<div class="consent" :class="{ invalid: consentInvalid }">
|
|
<label class="check">
|
|
<input v-model="agreePrivacy" type="checkbox" @change="clearConsent" >
|
|
<span class="box">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5L20 7" /></svg>
|
|
</span>
|
|
<span class="ctext">
|
|
<b>(필수)</b> 개인정보 수집·이용에 동의합니다. 성명·이메일 등은 커피챗 진행
|
|
목적에 한해 이용되며 면담 종료 후 파기됩니다.
|
|
<NuxtLink to="/privacy" target="_blank">자세히 보기</NuxtLink>
|
|
</span>
|
|
</label>
|
|
<label class="check">
|
|
<input v-model="agreePool" type="checkbox" >
|
|
<span class="box">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5L20 7" /></svg>
|
|
</span>
|
|
<span class="ctext">
|
|
<b>(선택)</b> 향후 채용 기회 제공을 위한 인재풀 보관에 동의합니다. (동의일로부터
|
|
1년, 언제든 철회 가능)
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
<button type="submit" class="submit">커피챗 신청하기</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- 완료 화면 -->
|
|
<div v-show="submitted" class="success">
|
|
<div class="badge">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6" /></svg>
|
|
</div>
|
|
<h2>신청이 완료되었습니다!</h2>
|
|
<p>
|
|
소중한 신청 감사합니다.<br >담당자가 신청 내용을 확인한 뒤 입력하신 이메일로 일정을
|
|
안내드릴게요.
|
|
</p>
|
|
<div class="summary">
|
|
<div v-for="row in summary" :key="row.k" class="row">
|
|
<span class="k">{{ row.k }}</span><span class="v">{{ row.v }}</span>
|
|
</div>
|
|
</div>
|
|
<NuxtLink to="/" class="home-link">채용 홈으로 돌아가기 →</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
|
|
<AppFooter />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.cc {
|
|
padding: clamp(2.75rem, 6vw, 5.25rem) 0 clamp(4.5rem, 10vw, 7.5rem); /* 44~84px / 72~120px */
|
|
}
|
|
|
|
.cc-grid {
|
|
display: grid;
|
|
grid-template-columns: 0.92fr 1.08fr;
|
|
gap: clamp(2.5rem, 6vw, 5.5rem); /* 40~88px */
|
|
align-items: start;
|
|
}
|
|
|
|
/* LEFT 소개 */
|
|
.intro {
|
|
position: sticky;
|
|
top: 6.5rem; /* 104px */
|
|
}
|
|
|
|
.cc-eyebrow {
|
|
font-family: var(--font-display);
|
|
font-size: 1.125rem; /* 18px */
|
|
letter-spacing: 0.1em;
|
|
color: var(--label);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.intro h1 {
|
|
font-size: clamp(1.875rem, 4vw, 2.875rem); /* 30~46px */
|
|
font-weight: 800;
|
|
letter-spacing: -0.025em;
|
|
line-height: 1.22;
|
|
margin-top: 1rem; /* 16px */
|
|
}
|
|
|
|
.intro .lead {
|
|
font-size: clamp(0.9375rem, 1.5vw, 1.0625rem); /* 15~17px */
|
|
color: var(--ink-soft);
|
|
line-height: 1.8;
|
|
margin-top: 1.375rem; /* 22px */
|
|
}
|
|
|
|
.facts {
|
|
margin-top: clamp(2rem, 4vw, 3rem); /* 32~48px */
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.125rem; /* 2px */
|
|
border-top: 0.0625rem solid var(--line);
|
|
}
|
|
|
|
.fact {
|
|
display: flex;
|
|
gap: 1.125rem; /* 18px */
|
|
padding: 1.125rem 0; /* 18px */
|
|
border-bottom: 0.0625rem solid var(--line);
|
|
}
|
|
|
|
.fact .ico {
|
|
width: 2.375rem; /* 38px */
|
|
height: 2.375rem;
|
|
border-radius: 0.625rem; /* 10px */
|
|
background: var(--bg-alt);
|
|
display: grid;
|
|
place-items: center;
|
|
flex-shrink: 0;
|
|
color: var(--brand);
|
|
}
|
|
|
|
.fact .ico svg {
|
|
width: 1.1875rem; /* 19px */
|
|
height: 1.1875rem;
|
|
}
|
|
|
|
.fact h3 {
|
|
font-size: 0.9375rem; /* 15px */
|
|
font-weight: 700;
|
|
}
|
|
|
|
.fact p {
|
|
font-size: 0.875rem; /* 14px */
|
|
color: var(--ink-soft);
|
|
margin-top: 0.1875rem; /* 3px */
|
|
line-height: 1.55;
|
|
}
|
|
|
|
/* RIGHT 폼 */
|
|
.form-card {
|
|
background: var(--white);
|
|
border: 0.0625rem solid var(--line);
|
|
border-radius: 1.375rem; /* 22px */
|
|
padding: clamp(1.75rem, 3.4vw, 2.875rem); /* 28~46px */
|
|
box-shadow: 0 1.875rem 4.375rem -3.125rem rgba(30, 40, 60, 0.5);
|
|
}
|
|
|
|
.fc-title {
|
|
font-size: clamp(1.25rem, 2vw, 1.5625rem); /* 20~25px */
|
|
font-weight: 800;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.fc-sub {
|
|
font-size: 0.875rem; /* 14px */
|
|
color: var(--ink-soft);
|
|
margin-top: 0.5rem; /* 8px */
|
|
}
|
|
|
|
form {
|
|
margin-top: clamp(1.5rem, 3vw, 2.125rem); /* 24~34px */
|
|
}
|
|
|
|
.field {
|
|
margin-bottom: 1.375rem; /* 22px */
|
|
}
|
|
|
|
.field label {
|
|
display: block;
|
|
font-size: 0.875rem; /* 14px */
|
|
font-weight: 700;
|
|
color: var(--ink);
|
|
margin-bottom: 0.5625rem; /* 9px */
|
|
}
|
|
|
|
.field label .req {
|
|
color: var(--danger);
|
|
margin-left: 0.1875rem; /* 3px */
|
|
}
|
|
|
|
.field label .opt {
|
|
color: var(--ink-soft);
|
|
font-weight: 500;
|
|
margin-left: 0.375rem; /* 6px */
|
|
font-size: 0.75rem; /* 12px */
|
|
}
|
|
|
|
.ctrl {
|
|
width: 100%;
|
|
font-family: inherit;
|
|
font-size: 0.9375rem; /* 15px */
|
|
color: var(--ink);
|
|
background: var(--bg-alt);
|
|
border: 0.09375rem solid transparent; /* 1.5px */
|
|
border-radius: 0.75rem; /* 12px */
|
|
padding: 0.875rem 1rem; /* 14px 16px */
|
|
transition: border-color 0.18s ease, background 0.18s ease;
|
|
}
|
|
|
|
.ctrl::placeholder {
|
|
color: #a2a5ae;
|
|
}
|
|
|
|
.ctrl:focus {
|
|
outline: none;
|
|
background: #fff;
|
|
border-color: var(--brand);
|
|
}
|
|
|
|
textarea.ctrl {
|
|
resize: vertical;
|
|
min-height: 6.875rem; /* 110px */
|
|
line-height: 1.6;
|
|
}
|
|
|
|
select.ctrl {
|
|
appearance: none;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236C6E78' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: right 1rem center;
|
|
padding-right: 2.5rem; /* 40px */
|
|
cursor: pointer;
|
|
}
|
|
|
|
.field.invalid .ctrl {
|
|
border-color: var(--danger);
|
|
background: #fff;
|
|
}
|
|
|
|
.err-msg {
|
|
display: none;
|
|
font-size: 0.78125rem; /* 12.5px */
|
|
color: var(--danger);
|
|
margin-top: 0.4375rem; /* 7px */
|
|
}
|
|
|
|
.field.invalid .err-msg {
|
|
display: block;
|
|
}
|
|
|
|
.two {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1rem; /* 16px */
|
|
}
|
|
|
|
/* 동의 */
|
|
.consent {
|
|
margin-top: 0.25rem; /* 4px */
|
|
padding-top: 1.375rem; /* 22px */
|
|
border-top: 0.0625rem solid var(--line);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.875rem; /* 14px */
|
|
}
|
|
|
|
.check {
|
|
display: flex;
|
|
gap: 0.75rem; /* 12px */
|
|
align-items: flex-start;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.check input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.check .box {
|
|
flex-shrink: 0;
|
|
width: 1.25rem; /* 20px */
|
|
height: 1.25rem;
|
|
border-radius: 0.375rem; /* 6px */
|
|
border: 0.09375rem solid #c4c7cf; /* 1.5px */
|
|
background: #fff;
|
|
display: grid;
|
|
place-items: center;
|
|
margin-top: 0.0625rem; /* 1px */
|
|
transition: background 0.15s ease, border-color 0.15s ease;
|
|
}
|
|
|
|
.check .box svg {
|
|
width: 0.75rem; /* 12px */
|
|
height: 0.75rem;
|
|
opacity: 0;
|
|
transition: opacity 0.15s ease;
|
|
}
|
|
|
|
.check input:checked + .box {
|
|
background: var(--brand);
|
|
border-color: var(--brand);
|
|
}
|
|
|
|
.check input:checked + .box svg {
|
|
opacity: 1;
|
|
}
|
|
|
|
.check input:focus-visible + .box {
|
|
box-shadow: 0 0 0 0.1875rem rgba(32, 42, 68, 0.2); /* 3px */
|
|
}
|
|
|
|
.check .ctext {
|
|
font-size: 0.84375rem; /* 13.5px */
|
|
color: var(--ink-soft);
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.check .ctext b {
|
|
color: var(--ink);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.check .ctext a {
|
|
color: var(--brand);
|
|
font-weight: 700;
|
|
text-decoration: underline;
|
|
text-underline-offset: 0.125rem; /* 2px */
|
|
}
|
|
|
|
.consent.invalid .check:first-child .box {
|
|
border-color: var(--danger);
|
|
}
|
|
|
|
.submit {
|
|
width: 100%;
|
|
margin-top: 1.75rem; /* 28px */
|
|
padding: 1.0625rem; /* 17px */
|
|
border: 0;
|
|
border-radius: 6.25rem; /* 100px */
|
|
background: var(--brand);
|
|
color: #fff;
|
|
font-family: inherit;
|
|
font-size: 1rem; /* 16px */
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
transition: background 0.2s ease, transform 0.2s ease;
|
|
}
|
|
|
|
.submit:hover {
|
|
background: #161e36;
|
|
transform: translateY(-0.125rem); /* -2px */
|
|
}
|
|
|
|
/* 완료 화면 */
|
|
.success {
|
|
text-align: center;
|
|
padding: clamp(1.25rem, 3vw, 2.25rem) 0; /* 20~36px */
|
|
}
|
|
|
|
.success .badge {
|
|
width: 4.75rem; /* 76px */
|
|
height: 4.75rem;
|
|
border-radius: 50%;
|
|
background: var(--brand);
|
|
display: grid;
|
|
place-items: center;
|
|
margin: 0 auto clamp(1.25rem, 2.5vw, 1.75rem); /* 20~28px */
|
|
}
|
|
|
|
.success .badge svg {
|
|
width: 2.125rem; /* 34px */
|
|
height: 2.125rem;
|
|
}
|
|
|
|
.success h2 {
|
|
font-size: clamp(1.375rem, 2.4vw, 1.875rem); /* 22~30px */
|
|
font-weight: 800;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.success p {
|
|
font-size: 0.9375rem; /* 15px */
|
|
color: var(--ink-soft);
|
|
line-height: 1.7;
|
|
margin-top: 0.875rem; /* 14px */
|
|
}
|
|
|
|
.success .summary {
|
|
text-align: left;
|
|
background: var(--bg-alt);
|
|
border-radius: 0.875rem; /* 14px */
|
|
padding: 1.375rem 1.5rem; /* 22px 24px */
|
|
margin-top: 1.75rem; /* 28px */
|
|
}
|
|
|
|
.success .summary .row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 1rem; /* 16px */
|
|
padding: 0.5625rem 0; /* 9px */
|
|
font-size: 0.875rem; /* 14px */
|
|
}
|
|
|
|
.success .summary .row .k {
|
|
color: var(--ink-soft);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.success .summary .row .v {
|
|
color: var(--ink);
|
|
font-weight: 600;
|
|
text-align: right;
|
|
}
|
|
|
|
.success .home-link {
|
|
display: inline-block;
|
|
margin-top: 1.75rem; /* 28px */
|
|
font-size: 0.9375rem; /* 15px */
|
|
font-weight: 700;
|
|
color: var(--brand);
|
|
}
|
|
|
|
.success .home-link:hover {
|
|
text-decoration: underline;
|
|
text-underline-offset: 0.1875rem; /* 3px */
|
|
}
|
|
|
|
@media (max-width: 56.25rem) {
|
|
/* 900px */
|
|
.cc-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: clamp(2.25rem, 6vw, 3.5rem);
|
|
}
|
|
|
|
.intro {
|
|
position: static;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 32.5rem) {
|
|
/* 520px */
|
|
.two {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|