ttipo/inneratb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
TtiPo
2026-05-30 15:02:45 +09:00
commit 005719edee
212 changed files with 38830 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/pages/coffee-chat.vue
+650
View File
@@ -0,0 +1,650 @@
<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>