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>
frontend/pages/index.vue
+870
View File
@@ -0,0 +1,870 @@
<script setup lang="ts">
// 메인(채용 홈) — Hero / About / 브랜드 / Growth / People / CTA
useHead({ title: '이너탭 (innertab)' })
// 브랜드 타일 데이터
interface BrandTile {
name: string
img: string
feature?: boolean
}
const brands: BrandTile[] = [
{ name: 'selite', img: '/images/img-selite.png', feature: true },
{ name: 'INNERDYSET', img: '/images/img-innerdyset.png' },
{ name: 'recurely', img: '/images/img-recurely.png' },
{ name: 'innerzen', img: '/images/img-innerzen.png' },
{ name: 'retriq', img: '/images/img-retriq.png' },
]
// 성장 지표 데이터
interface Stat {
title: string
value: number
unit: string
desc: string
}
const stats: Stat[] = [
{ title: '운영 브랜드', value: 5, unit: '개', desc: '서로 다른 문제를 해결하기 위해\n각기 다른 브랜드를 정교하게 설계했습니다.' },
{ title: '누적 매출', value: 150, unit: '억', desc: '고객의 믿음과 선택으로\n이너탭은 꾸준히 성장해왔습니다.' },
{ title: '연 평균 성장률', value: 320, unit: '%', desc: '끊임없는 도전과 실행으로\n이너탭은 더 빠르게 확장하고 있습니다.' },
{ title: '더 나은 일상을 연구한 시간', value: 1200, unit: '일', desc: '작은 변화가 만드는 큰 차이를\n매일 관찰하고 개선해왔습니다.' },
]
// 주요 연혁
const history: string[] = [
'일 최대 매출 4,500만원 달성',
'미국 법인 설립',
'홍콩 법인 설립',
'한국 소비자 평가 대상 2회',
]
// 구성원 카드 (실제 사진 준비 전 — 플레이스홀더)
interface PeopleCard {
label: string
shape: 'tall' | 'wide'
title: string
desc: string
}
const peopleColA: PeopleCard[] = [
{ label: '회사 사진 — 종무식', shape: 'tall', title: '2025 이너탭 종무식 : “Together, We Rise”', desc: '함께 만든 시간, 더 높이 올라가기 위한 시작' },
{ label: '회사 사진 — 인터뷰', shape: 'wide', title: '꿈은 크게, 실행은 집요하게!', desc: '브랜드사업본부장, 조이' },
]
const peopleColB: PeopleCard[] = [
{ label: '회사 사진 — 구성원', shape: 'wide', title: '2025 Innertab Superookie', desc: '최고의 순간은 함께 만든 성장 속에서 — 슈퍼루키 5인의 성장 스토리' },
{ label: '회사 사진 — 인터뷰', shape: 'tall', title: '실험·회고·학습으로 실제로 팔리는 브랜드를 만듭니다', desc: '글로벌사업본부 영미권실장, Gaby' },
]
</script>
<template>
<div>
<AppHeader variant="home" />
<!-- ===================== HERO ===================== -->
<section class="hero">
<div class="hero-video"><span class="ph-label">▶ Hero Video</span></div>
<div class="scroll-hint"><span>SCROLL</span><i /></div>
</section>
<!-- ===================== ABOUT ===================== -->
<section id="mission" class="about">
<div class="wrap">
<div class="inner">
<p v-reveal class="m-eyebrow">ABOUT ITAB</p>
<p v-reveal="{ delay: 80 }" class="m-lead">누군가의 매일을 더 낫게 만드는 일,</p>
<h2 v-reveal="{ delay: 160 }" class="m-title">이너탭은 <mark>그 답</mark>을 제시합니다.</h2>
<p v-reveal class="about-intro">매일은 당연한 의문들로 시작됩니다.</p>
<ul class="q-list">
<li v-reveal="{ delay: 60 }">더 가뿐한 아침은 불가능할까?</li>
<li v-reveal="{ delay: 160 }">더 단단한 나를 만드는 방법은 무엇일까?</li>
</ul>
<div v-reveal class="about-statement">
<p>이너탭은 질문에 답하는 무게가 다릅니다.</p>
<p>타협 없는 설계로 본질을 짚고, 데이터와 결과로 증명합니다.</p>
<p>우리는 안주하지 않습니다.</p>
<p class="closing">사람의 매일이 닿는 모든 곳에서,<br >우리는 가장 앞선 답을 증명합니다.</p>
</div>
</div>
<!-- 브랜드 벤토 그리드 -->
<div id="brands" class="brand-bento">
<article
v-for="(brand, i) in brands"
:key="brand.name"
v-reveal:scale="{ delay: i * 70 }"
class="btile"
:class="{ feature: brand.feature }"
>
<img :src="brand.img" :alt="`${brand.name} 브랜드 이미지`" >
<div class="tile-overlay" />
<span class="tile-name">{{ brand.name }}</span>
<span class="tile-arrow" aria-hidden="true">↗</span>
</article>
</div>
</div>
</section>
<!-- ===================== GROWTH ===================== -->
<section id="growth" class="growth">
<div class="growth-bg"><span class="bg-label">BACKGROUND VIDEO</span></div>
<div class="wrap">
<div class="growth-head">
<p v-reveal class="m-eyebrow">Growth</p>
<h2 v-reveal="{ delay: 100 }">우리가 만든 변화를 증명하며,<br >끊임없이 성장하고 있습니다.</h2>
</div>
<div class="growth-layout">
<div class="stat-grid">
<div
v-for="(stat, i) in stats"
:key="stat.title"
v-reveal="{ delay: i * 90 }"
class="gcard stat-card"
>
<div class="stat-orb" />
<div class="gcard-title">{{ stat.title }}</div>
<div class="stat-big">
<CountUp :value="stat.value" /><small>{{ stat.unit }}</small><span class="plus">+</span>
</div>
<p class="stat-desc">
<template v-for="(line, li) in stat.desc.split('\n')" :key="li">
{{ line }}<br v-if="li === 0" >
</template>
</p>
</div>
</div>
<div v-reveal="{ delay: 120 }" class="gcard history-card">
<div class="gcard-title">주요 연혁 내역</div>
<ul class="timeline">
<li v-for="(item, i) in history" :key="i" v-reveal="{ delay: 200 + i * 90 }">
<span class="t-text">{{ item }}</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- ===================== PEOPLE ===================== -->
<section id="people" class="people">
<div class="wrap">
<div class="people-head">
<p v-reveal class="people-lead">이너탭은</p>
<h2 v-reveal="{ delay: 100 }">구성원들과 함께 성장합니다.</h2>
</div>
<div class="people-cols">
<div class="pcol pcol-a">
<article v-for="(card, i) in peopleColA" :key="i" v-reveal="{ delay: i * 120 }" class="pcard">
<div class="pshot" :class="card.shape">
<ImagePlaceholder :label="card.label" />
</div>
<h3>{{ card.title }}</h3>
<p>{{ card.desc }}</p>
</article>
</div>
<div class="pcol pcol-b">
<article v-for="(card, i) in peopleColB" :key="i" v-reveal="{ delay: 80 + i * 120 }" class="pcard">
<div class="pshot" :class="card.shape">
<ImagePlaceholder :label="card.label" />
</div>
<h3>{{ card.title }}</h3>
<p>{{ card.desc }}</p>
</article>
</div>
</div>
</div>
</section>
<!-- ===================== CTA ===================== -->
<section id="cta" class="cta">
<div class="cta-bg" />
<div class="cta-overlay" />
<div class="wrap">
<div class="cta-inner">
<h2 v-reveal>바로 지금,<br >이너탭의 여정에 함께 하세요!</h2>
<p v-reveal="{ delay: 120 }">저희와 함께 더 큰 성장을 만들어 나갈 구성원을 기다리고 있습니다.</p>
<div v-reveal="{ delay: 240 }" class="cta-btns">
<NuxtLink to="/coffee-chat" class="btn btn-primary">커피챗 신청하기</NuxtLink>
</div>
</div>
</div>
</section>
<AppFooter />
</div>
</template>
<style scoped>
/* ===================== HERO ===================== */
.hero {
position: relative;
min-height: clamp(35rem, 86vh, 51.25rem); /* 560~820px */
display: flex;
align-items: flex-end;
overflow: hidden;
}
.hero-video {
position: absolute;
inset: 0;
display: grid;
place-items: center;
background: linear-gradient(160deg, #161d33 0%, #202a44 55%, #33415f 100%);
/* 로드 시 살짝 확대된 상태에서 천천히 안착 (Ken Burns) */
animation: hero-settle 2.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes hero-settle {
from {
transform: scale(1.12);
}
to {
transform: scale(1);
}
}
.hero-video .ph-label {
color: rgba(255, 255, 255, 0.4);
font-size: 0.9375rem; /* 15px */
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
animation: hero-fade-in 1.2s ease 0.4s both;
}
@keyframes hero-fade-in {
from {
opacity: 0;
transform: translateY(0.5rem);
}
to {
opacity: 1;
transform: none;
}
}
.scroll-hint {
position: absolute;
bottom: 1.75rem; /* 28px */
right: var(--pad);
z-index: 2;
color: rgba(255, 255, 255, 0.7);
font-size: 0.75rem; /* 12px */
letter-spacing: 0.12em;
text-transform: uppercase;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.625rem; /* 10px */
animation: hero-fade-in 1.2s ease 0.7s both;
}
.scroll-hint span {
writing-mode: vertical-rl;
}
.scroll-hint i {
position: relative;
width: 0.0625rem; /* 1px */
height: 2.875rem; /* 46px */
background: rgba(255, 255, 255, 0.25);
display: block;
overflow: hidden;
}
/* 라인을 따라 아래로 흐르는 펄스 — 스크롤 유도 */
.scroll-hint i::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: -100%;
height: 100%;
background: rgba(255, 255, 255, 0.9);
animation: scroll-pulse 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes scroll-pulse {
0% {
top: -100%;
}
60%,
100% {
top: 100%;
}
}
/* ===================== ABOUT ===================== */
.about {
padding: clamp(4.5rem, 11vw, 9.375rem) 0; /* 72~150px */
background: var(--white);
}
.about .inner {
max-width: 100%; /* 사이트 폭(.wrap)에 맞춰 브랜드 벤토와 동일하게 */
margin: 0 auto;
}
.m-eyebrow {
font-size: 1.4375rem; /* 23px */
font-weight: 700;
color: var(--label);
font-family: var(--font-display);
letter-spacing: 0.1em;
}
.m-lead {
font-size: clamp(1rem, 1.7vw, 1.25rem); /* 16~20px */
color: var(--ink-soft);
font-weight: 500;
margin-top: 1.875rem; /* 30px */
}
.m-title {
font-size: clamp(1.875rem, 4.4vw, 3.375rem); /* 30~54px */
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1.3;
margin-top: 0.875rem; /* 14px */
}
.m-title mark {
background: var(--brand);
color: var(--white);
padding: 0.04em 0.14em;
border-radius: 0.125rem; /* 2px */
}
.about-intro {
font-size: clamp(1rem, 1.5vw, 1.1875rem); /* 16~19px */
color: var(--ink-soft);
margin-top: clamp(2.5rem, 5vw, 4rem); /* 40~64px */
}
.q-list {
list-style: none;
margin-top: 1.375rem; /* 22px */
display: flex;
flex-direction: column;
gap: 0.875rem; /* 14px */
}
.q-list li {
font-size: clamp(1.25rem, 2.4vw, 1.875rem); /* 20~30px */
font-weight: 700;
letter-spacing: -0.02em;
color: var(--ink);
line-height: 1.35;
padding-left: 1.625rem; /* 26px */
position: relative;
}
.q-list li::before {
content: 'Q.';
position: absolute;
left: 0;
top: 0.08em;
color: var(--label);
font-weight: 800;
font-size: 0.78em;
}
.about-statement {
margin-top: clamp(3.5rem, 7vw, 6rem); /* 56~96px */
padding-top: clamp(2.5rem, 5vw, 3.75rem); /* 40~60px */
border-top: 0.0625rem solid var(--line);
display: flex;
flex-direction: column;
gap: 0.25rem; /* 4px */
}
.about-statement p {
font-size: clamp(1rem, 1.6vw, 1.25rem); /* 16~20px */
color: var(--ink-soft);
line-height: 1.5;
}
.about-statement .closing {
font-size: clamp(1.375rem, 2.6vw, 2.125rem); /* 22~34px */
font-weight: 800;
letter-spacing: -0.02em;
color: var(--ink);
line-height: 1.4;
margin-top: 0.875rem; /* 14px */
}
/* ===================== 브랜드 벤토 ===================== */
.brand-bento {
margin-top: clamp(3.5rem, 7vw, 6rem); /* 56~96px */
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: auto;
gap: clamp(0.75rem, 1.4vw, 1.125rem); /* 12~18px */
}
.btile {
position: relative;
overflow: hidden;
border-radius: 1.25rem; /* 20px */
aspect-ratio: 1;
background: #11151f;
cursor: pointer; /* 이미지 위에서 포인터 커서 */
}
.btile.feature {
/* 가로로 2칸 차지하는 와이드 타일 — 가로(landscape) 이미지가 잘리지 않도록 */
grid-column: span 2;
aspect-ratio: 2 / 1;
}
.btile img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.btile:hover img {
transform: scale(1.05); /* 호버 시 이미지 확대 */
}
.btile .tile-overlay {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: linear-gradient(to top, rgba(8, 11, 18, 0.78) 0%, rgba(8, 11, 18, 0.25) 34%, transparent 60%);
}
.btile .tile-name {
position: absolute;
left: clamp(1.25rem, 2vw, 1.875rem); /* 20~30px */
bottom: clamp(1.25rem, 2vw, 1.75rem); /* 20~28px */
z-index: 3;
color: #fff;
font-weight: 800;
letter-spacing: 0.01em;
line-height: 1;
text-transform: uppercase;
font-size: clamp(1.125rem, 1.6vw, 1.5rem); /* 18~24px */
pointer-events: none;
text-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.35);
}
.btile.feature .tile-name {
font-size: clamp(1.75rem, 2.8vw, 2.625rem); /* 28~42px */
}
.btile .tile-arrow {
position: absolute;
right: clamp(1rem, 1.6vw, 1.375rem); /* 16~22px */
bottom: clamp(1rem, 1.6vw, 1.375rem);
z-index: 3;
width: 2.875rem; /* 46px */
height: 2.875rem;
border-radius: 50%;
border: 0.09375rem solid rgba(255, 255, 255, 0.7); /* 1.5px */
color: #fff;
display: grid;
place-items: center;
font-size: 1.0625rem; /* 17px */
pointer-events: none;
transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.btile:hover .tile-arrow {
background: #fff;
color: var(--brand);
transform: translateY(-0.125rem);
}
/* ===================== GROWTH ===================== */
.growth {
position: relative;
padding: clamp(4.5rem, 11vw, 9.375rem) 0; /* 72~150px */
overflow: hidden;
}
.growth-bg {
position: absolute;
inset: 0;
z-index: 0;
background:
radial-gradient(circle at 16% 24%, rgba(255, 255, 255, 0.55), transparent 20%),
radial-gradient(circle at 70% 62%, rgba(255, 255, 255, 0.4), transparent 16%),
radial-gradient(circle at 88% 16%, rgba(255, 255, 255, 0.45), transparent 13%),
radial-gradient(circle at 38% 82%, rgba(255, 255, 255, 0.4), transparent 16%),
radial-gradient(circle at 58% 38%, rgba(120, 128, 136, 0.45), transparent 32%),
linear-gradient(125deg, #aeb6bc 0%, #cbd1d6 46%, #a6aeb4 100%);
}
.bg-label {
position: absolute;
right: 1.125rem; /* 18px */
bottom: 0.875rem; /* 14px */
font-family: var(--font-display);
font-size: 0.75rem; /* 12px */
letter-spacing: 0.18em;
color: rgba(40, 50, 70, 0.32);
}
.growth .wrap {
position: relative;
z-index: 1;
}
.growth-head {
text-align: center;
margin-bottom: clamp(2.5rem, 5vw, 4.375rem); /* 40~70px */
}
.growth-head .m-eyebrow {
margin-bottom: 1.125rem; /* 18px */
}
.growth-head h2 {
font-size: clamp(1.75rem, 4.2vw, 3.125rem); /* 28~50px */
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1.32;
color: var(--ink);
}
.growth-layout {
display: grid;
grid-template-columns: 1.45fr 1fr;
gap: clamp(1rem, 1.8vw, 1.5rem); /* 16~24px */
align-items: stretch;
}
.stat-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(1rem, 1.8vw, 1.5rem);
}
.gcard {
position: relative;
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(0.375rem) saturate(1.1);
-webkit-backdrop-filter: blur(0.375rem) saturate(1.1);
border: 0.0625rem solid rgba(255, 255, 255, 0.5);
border-radius: 1.5rem; /* 24px */
padding: clamp(1.625rem, 2.6vw, 2.375rem); /* 26~38px */
box-shadow: 0 1.25rem 3.125rem -2.125rem rgba(30, 40, 60, 0.5);
overflow: hidden;
}
.gcard-title,
.stat-big,
.stat-desc,
.timeline {
position: relative;
z-index: 1;
}
.stat-card {
display: flex;
flex-direction: column;
}
.stat-card .stat-orb {
position: absolute;
z-index: 0;
width: clamp(9.375rem, 17vw, 12.5rem); /* 150~200px */
aspect-ratio: 1;
border-radius: 50%;
left: 1rem; /* 16px — 카드 안쪽으로 이동 */
top: 3.75rem; /* 60px */
/* 가장자리를 투명하게 → 하드한 동그라미 테두리 제거 */
background: radial-gradient(
circle at 50% 42%,
rgba(255, 255, 255, 0.95),
rgba(255, 255, 255, 0.55) 54%,
rgba(255, 255, 255, 0) 78%
);
}
.gcard-title {
font-size: 1.0625rem; /* 17px */
font-weight: 700;
color: var(--ink);
}
.stat-card .stat-big {
font-size: clamp(2.5rem, 5vw, 3.75rem); /* 40~60px */
font-weight: 800;
letter-spacing: -0.03em;
color: var(--ink);
line-height: 1;
margin: clamp(1.75rem, 4vw, 3rem) 0 clamp(1.25rem, 3vw, 1.875rem);
}
.stat-card .stat-big small {
font-size: 0.36em;
font-weight: 700;
margin-left: 0.1875rem; /* 3px */
letter-spacing: 0;
}
.plus {
display: inline-grid;
place-items: center;
width: 1.125rem; /* 18px */
height: 1.125rem;
border-radius: 50%;
background: var(--brand);
color: #fff;
font-size: 0.6875rem; /* 11px */
font-weight: 700;
vertical-align: top;
margin-left: 0.25rem; /* 4px */
}
.stat-card .stat-desc {
font-size: 0.875rem; /* 14px */
color: var(--ink-soft);
line-height: 1.65;
margin-top: auto;
}
.history-card {
display: flex;
flex-direction: column;
}
.timeline {
list-style: none;
margin-top: clamp(1.25rem, 2.5vw, 1.875rem); /* 20~30px */
display: flex;
flex-direction: column;
}
.timeline li {
display: flex;
gap: 1.125rem; /* 18px */
align-items: baseline;
padding: clamp(0.9375rem, 1.6vw, 1.1875rem) 0; /* 15~19px */
border-top: 0.0625rem solid rgba(40, 50, 70, 0.1);
}
.timeline li:first-child {
border-top: 0;
}
.timeline .t-text {
font-size: 0.9375rem; /* 15px */
color: var(--ink);
font-weight: 500;
line-height: 1.4;
}
/* ===================== PEOPLE ===================== */
.people {
padding: clamp(4.5rem, 11vw, 9.375rem) 0; /* 72~150px */
}
.people-lead {
font-size: clamp(1.125rem, 1.9vw, 1.5rem); /* 18~24px */
font-weight: 700;
color: var(--ink);
letter-spacing: -0.01em;
}
.people-head h2 {
font-size: clamp(1.875rem, 4.4vw, 3.5rem); /* 30~56px */
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1.18;
color: var(--ink);
margin-top: 0.625rem; /* 10px */
}
.people-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(1.5rem, 2.6vw, 2.75rem); /* 24~44px */
margin-top: clamp(2.25rem, 4.5vw, 3.75rem); /* 36~60px */
align-items: start;
}
.pcol {
display: flex;
flex-direction: column;
gap: clamp(2.5rem, 5vw, 4.5rem); /* 40~72px */
}
.pcol-b {
margin-top: clamp(3rem, 7vw, 6.5rem); /* 48~104px */
}
.pcard {
cursor: pointer;
}
.pcard .pshot {
position: relative;
width: 100%;
border-radius: 1rem; /* 16px */
overflow: hidden;
background: #edeff2;
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.pcard .pshot.tall {
aspect-ratio: 4 / 5;
}
.pcard .pshot.wide {
aspect-ratio: 4 / 3;
}
.pcard:hover .pshot {
box-shadow: 0 1.625rem 3.5rem -2rem rgba(30, 40, 60, 0.5);
transform: translateY(-0.25rem); /* -4px */
}
.pcard h3 {
font-size: clamp(1.125rem, 1.7vw, 1.375rem); /* 18~22px */
font-weight: 700;
letter-spacing: -0.01em;
color: var(--ink);
margin-top: 1.25rem; /* 20px */
line-height: 1.4;
}
.pcard p {
font-size: clamp(0.8125rem, 1.2vw, 0.9375rem); /* 13~15px */
color: var(--ink-soft);
margin-top: 0.5rem; /* 8px */
line-height: 1.55;
}
/* ===================== CTA ===================== */
.cta {
position: relative;
overflow: hidden;
padding: clamp(4.5rem, 10vw, 8rem) 0; /* 72~128px — 높이 축소 */
}
.cta-bg {
position: absolute;
inset: 0;
z-index: 0;
/* 배너 이미지 배경 */
background: url('/images/img-banner.png') center / cover no-repeat;
}
.cta-overlay {
position: absolute;
inset: 0;
z-index: 1;
/* 더 어둡게 */
background: linear-gradient(90deg, rgba(16, 13, 9, 0.82) 0%, rgba(16, 13, 9, 0.7) 60%, rgba(16, 13, 9, 0.6) 100%);
}
.cta .wrap {
position: relative;
z-index: 2;
}
.cta-inner {
color: var(--white);
max-width: 45rem; /* 720px */
}
.cta-inner h2 {
font-size: clamp(1.75rem, 4.2vw, 3.25rem); /* 28~52px */
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.2;
}
.cta-inner p {
color: rgba(255, 255, 255, 0.82);
font-size: clamp(0.9375rem, 1.5vw, 1.125rem); /* 15~18px */
margin-top: 1.125rem; /* 18px */
}
.cta-btns {
display: flex;
gap: 0.875rem; /* 14px */
margin-top: clamp(2rem, 4vw, 3rem); /* 32~48px */
flex-wrap: wrap;
}
/* ===================== 반응형 ===================== */
@media (max-width: 56.25rem) {
/* 900px */
.growth-layout {
grid-template-columns: 1fr;
}
.brand-bento {
grid-template-columns: 1fr 1fr;
}
.btile.feature {
grid-row: auto;
grid-column: span 2;
aspect-ratio: 16 / 10;
}
}
@media (max-width: 32.5rem) {
/* 520px */
.brand-bento {
grid-template-columns: 1fr;
}
.btile.feature {
grid-column: auto;
aspect-ratio: 1; /* 1열에서는 다른 타일과 동일한 정사각 비율 */
}
/* Growth 스탯: 가장 작은 화면에서는 2x2 → 1열 나열 */
.stat-grid {
grid-template-columns: 1fr;
}
.people-cols {
grid-template-columns: 1fr;
gap: clamp(2.5rem, 8vw, 4rem);
}
.pcol {
gap: clamp(2.5rem, 8vw, 4rem);
}
.pcol-b {
margin-top: 0;
}
.pcard .pshot.tall,
.pcard .pshot.wide {
aspect-ratio: 4 / 3;
}
}
/* 모션 최소화 선호 시 히어로/호버 애니메이션 비활성화 */
@media (prefers-reduced-motion: reduce) {
.hero-video,
.hero-video .ph-label,
.scroll-hint,
.scroll-hint i::after {
animation: none !important;
}
.btile img {
transition: none;
}
.btile:hover img {
transform: none;
}
}
</style>
frontend/pages/privacy.vue
+371
View File
@@ -0,0 +1,371 @@
<script setup lang="ts">
// 개인정보처리방침 — 채용·커피챗 과정의 개인정보 처리 안내 문서
useHead({ title: '개인정보처리방침 | innertab' })
</script>
<template>
<div>
<AppHeader variant="back" />
<div class="doc-wrap">
<div class="doc-head">
<p v-reveal class="doc-eyebrow">Privacy Policy</p>
<h1 v-reveal="{ delay: 80 }">개인정보처리방침</h1>
<p v-reveal="{ delay: 160 }" class="meta">
본 방침은 이너탭(innertab) 채용 홈페이지를 통한 입사지원·채용 전형 및 커피챗(비공식 면담)
과정에서의 개인정보 처리에 적용됩니다.
</p>
</div>
<div v-reveal class="intro">
<p>
이너탭(이하 ‘회사’)은 「개인정보 보호법」 등 관련 법령을 준수하며, 채용 과정 및
커피챗(채용 전 비공식 면담)에서 수집하는 지원자·신청자의 개인정보를 안전하게 보호하기 위해
다음과 같은 개인정보처리방침을 수립·공개합니다. 본 방침은 채용 및 커피챗 목적에 한정하여
적용되며, 그 외 서비스 이용에 대한 처리방침과는 별도로 운영됩니다.
</p>
</div>
<div class="doc">
<section v-reveal class="article">
<h2><span class="no">01</span><span>수집하는 개인정보의 항목</span></h2>
<div class="body">
<p>회사는 채용 전형 진행을 위하여 지원자가 직접 제출하거나 전형 과정에서 생성되는 다음의 개인정보를 수집합니다.</p>
<p class="sub">필수 항목</p>
<ul>
<li><b>인적사항</b> — 성명, 생년월일, 연락처(휴대전화번호), 이메일 주소</li>
<li><b>학력 및 경력사항</b> — 최종 학력, 전공, 경력, 자격증, 어학 능력</li>
<li><b>지원서류</b> — 이력서, 자기소개서, 포트폴리오 등 지원자가 제출한 자료</li>
</ul>
<p class="sub">선택 항목</p>
<ul>
<li>증명사진, 희망 근무지 등 지원자가 자발적으로 기재한 정보</li>
</ul>
<p class="sub">자동 생성·수집 항목</p>
<ul>
<li>지원 일시, 전형 진행 기록, 접속 로그 등 채용 관리에 필요한 정보</li>
</ul>
<p class="sub">커피챗 신청 시 수집 항목</p>
<ul>
<li><b>신청자 정보</b> — 성명, 이메일(필수), 연락처(선택)</li>
<li><b>면담 관련 정보</b> — 관심 직무·분야, 현재 소속·직무(선택), 희망 일정, 사전 질문 등 신청자가 기재한 내용</li>
</ul>
</div>
</section>
<section v-reveal class="article">
<h2><span class="no">02</span><span>개인정보의 수집 및 이용 목적</span></h2>
<div class="body">
<ul>
<li>지원자 본인 확인 및 채용 전형(서류·면접 등) 진행</li>
<li>전형 결과 안내 및 합격자에 대한 입사 절차 진행</li>
<li>커피챗(비공식 면담) 신청 접수, 일정 조율 및 면담 진행</li>
<li>채용·커피챗 관련 문의 응대 및 원활한 의사소통</li>
<li>신청자 동의 시, 향후 채용 기회 제공을 위한 인재풀(Talent Pool) 운영</li>
</ul>
</div>
</section>
<section v-reveal class="article">
<h2><span class="no">03</span><span>개인정보의 보유 및 이용 기간</span></h2>
<div class="body">
<p>회사는 원칙적으로 개인정보의 수집·이용 목적이 달성되면 지체 없이 해당 정보를 파기합니다. 다만 다음의 경우에는 명시한 기간 동안 보관합니다.</p>
<div class="info-table">
<div class="row"><div class="k">합격자</div><div class="v">입사 후 인사기록으로 전환되며, 별도의 인사 관련 규정 및 법령에 따라 보관</div></div>
<div class="row"><div class="k">불합격자</div><div class="v">전형 종료 후 즉시 파기 (단, 분쟁 대응 등을 위해 필요한 경우 관련 법령이 정한 기간 동안 보관)</div></div>
<div class="row"><div class="k">인재풀 동의자</div><div class="v">동의일로부터 1년간 보관 후 파기 (동의 철회 시 즉시 파기)</div></div>
<div class="row"><div class="k">커피챗 신청자</div><div class="v">면담 종료 후 즉시 파기 (인재풀 보관에 동의한 경우 동의 기간 동안 보관 후 파기)</div></div>
</div>
</div>
</section>
<section v-reveal class="article">
<h2><span class="no">04</span><span>개인정보의 제3자 제공</span></h2>
<div class="body">
<p>회사는 지원자의 개인정보를 본 방침에서 명시한 범위를 넘어 외부에 제공하지 않습니다. 다만 지원자가 사전에 동의하였거나, 법령에 의해 요구되는 경우에 한하여 제공할 수 있습니다.</p>
</div>
</section>
<section v-reveal class="article">
<h2><span class="no">05</span><span>개인정보 처리의 위탁</span></h2>
<div class="body">
<p>회사는 원활한 채용 업무 처리를 위해 채용 플랫폼·클라우드 인프라 등 일부 업무를 외부 전문업체에 위탁할 수 있습니다. 위탁 시에는 관련 법령에 따라 개인정보가 안전하게 관리될 수 있도록 필요한 사항을 계약을 통해 규정합니다.</p>
</div>
</section>
<section v-reveal class="article">
<h2><span class="no">06</span><span>정보주체의 권리·의무 및 행사 방법</span></h2>
<div class="body">
<p>지원자는 언제든지 자신의 개인정보에 대하여 다음의 권리를 행사할 수 있습니다.</p>
<ul>
<li>개인정보 열람·정정·삭제 요구</li>
<li>개인정보 처리 정지 요구</li>
<li>개인정보 수집·이용 동의의 철회</li>
</ul>
<p>권리 행사는 아래 개인정보 보호책임자에게 서면, 이메일 등을 통해 요청할 수 있으며, 회사는 지체 없이 필요한 조치를 취합니다.</p>
</div>
</section>
<section v-reveal class="article">
<h2><span class="no">07</span><span>개인정보의 파기 절차 및 방법</span></h2>
<div class="body">
<ul>
<li><b>파기 절차</b> — 보유 기간이 경과하거나 처리 목적이 달성된 개인정보는 내부 방침에 따라 안전하게 파기합니다.</li>
<li><b>파기 방법</b> — 전자적 파일은 복구·재생이 불가능한 방법으로 영구 삭제하며, 출력물 등은 분쇄 또는 소각합니다.</li>
</ul>
</div>
</section>
<section v-reveal class="article">
<h2><span class="no">08</span><span>개인정보의 안전성 확보 조치</span></h2>
<div class="body">
<ul>
<li>개인정보 접근 권한의 최소화 및 접근 통제</li>
<li>개인정보가 포함된 자료의 암호화 및 안전한 저장</li>
<li>개인정보 처리 담당자에 대한 정기적인 교육 시행</li>
</ul>
</div>
</section>
<section v-reveal class="article">
<h2><span class="no">09</span><span>개인정보 보호책임자</span></h2>
<div class="body">
<p>회사는 개인정보 처리에 관한 업무를 총괄하고, 지원자의 문의·불만 처리 및 피해 구제를 위하여 개인정보 보호책임자를 지정하고 있습니다.</p>
<div class="contact-card">
<p class="role">개인정보 보호책임자</p>
<p>이메일 <span>people@innertab.co.kr</span></p>
<p>담당 부서 <span>People 팀</span></p>
</div>
</div>
</section>
<section v-reveal class="article">
<h2><span class="no">10</span><span>정보주체의 권익침해 구제 방법</span></h2>
<div class="body">
<p>정보주체는 개인정보 침해로 인한 상담 및 피해 구제를 위하여 아래 기관에 분쟁 해결, 상담 등을 신청할 수 있습니다. 회사의 자체적인 처리에 만족하지 못하시는 경우 아래 기관에 도움을 요청하실 수 있습니다.</p>
<ul>
<li><b>개인정보분쟁조정위원회</b> — 1833-6972 (www.kopico.go.kr)</li>
<li><b>개인정보침해신고센터</b> — (국번 없이) 118 (privacy.kisa.or.kr)</li>
<li><b>대검찰청 사이버수사과</b> — (국번 없이) 1301 (www.spo.go.kr)</li>
<li><b>경찰청 사이버수사국</b> — (국번 없이) 182 (ecrm.cyber.go.kr)</li>
</ul>
</div>
</section>
<section v-reveal class="article">
<h2><span class="no">11</span><span>방침의 변경</span></h2>
<div class="body">
<p>본 개인정보처리방침은 관련 법령 및 회사 내부 정책의 변경에 따라 수정될 수 있으며, 변경 시 본 페이지를 통해 그 내용을 공지합니다.</p>
<p>· 공고일자 : 2026년 1월 1일<br >· 시행일자 : 2026년 1월 1일</p>
</div>
</section>
</div>
</div>
<AppFooter />
</div>
</template>
<style scoped>
.doc-wrap {
max-width: var(--maxw); /* 사이트 공통 폭(1200px)과 동일 */
margin: 0 auto;
padding-inline: var(--pad);
}
.doc-head {
padding: clamp(3.5rem, 8vw, 6.25rem) 0 clamp(2rem, 4vw, 3rem); /* 56~100px / 32~48px */
border-bottom: 0.0625rem solid var(--line);
}
.doc-eyebrow {
font-family: var(--font-display);
font-size: 1.0625rem; /* 17px */
letter-spacing: 0.1em;
color: var(--label);
font-weight: 700;
}
.doc-head h1 {
font-size: clamp(1.875rem, 5vw, 2.875rem); /* 30~46px */
font-weight: 800;
letter-spacing: -0.025em;
margin-top: 0.875rem; /* 14px */
}
.doc-head .meta {
font-size: 0.875rem; /* 14px */
color: var(--ink-soft);
margin-top: 1.125rem; /* 18px */
}
.intro {
padding: clamp(2.25rem, 4.5vw, 3.5rem) 0 0.5rem; /* 36~56px / 8px */
}
.intro p {
font-size: 0.9375rem; /* 15px */
color: var(--ink-soft);
line-height: 1.85;
}
.doc {
padding: clamp(1.25rem, 3vw, 2rem) 0 clamp(4.5rem, 10vw, 7.5rem); /* 20~32px / 72~120px */
}
.article {
padding: clamp(1.75rem, 3.4vw, 2.5rem) 0; /* 28~40px */
border-top: 0.0625rem solid var(--line);
}
.article:first-child {
border-top: 0;
}
.article > h2 {
font-size: clamp(1.125rem, 1.9vw, 1.4375rem); /* 18~23px */
font-weight: 800;
letter-spacing: -0.01em;
line-height: 1.4;
display: flex;
gap: 0.75rem; /* 12px */
align-items: baseline;
word-break: keep-all;
}
.article > h2 .no {
font-family: var(--font-display);
color: var(--label);
font-weight: 700;
font-size: 0.92em;
letter-spacing: 0.04em;
flex-shrink: 0;
}
.article .body {
margin-top: 1.125rem; /* 18px */
padding-left: clamp(0rem, 3.4vw, 2.5rem); /* 0~40px */
}
.article p {
font-size: 0.9375rem; /* 15px */
color: var(--ink-soft);
line-height: 1.85;
}
.article p + p {
margin-top: 0.75rem; /* 12px */
}
.article ul {
list-style: none;
margin-top: 0.75rem; /* 12px */
display: flex;
flex-direction: column;
gap: 0.625rem; /* 10px */
}
.article ul li {
font-size: 0.9375rem; /* 15px */
color: var(--ink-soft);
line-height: 1.7;
padding-left: 1.125rem; /* 18px */
position: relative;
}
.article ul li::before {
content: '';
position: absolute;
left: 0;
top: 0.62em;
width: 0.3125rem; /* 5px */
height: 0.3125rem;
border-radius: 50%;
background: var(--label);
}
.article ul li b {
color: var(--ink);
font-weight: 700;
}
.article .sub {
font-size: 0.9375rem; /* 15px */
font-weight: 700;
color: var(--ink);
margin-top: 1.375rem; /* 22px */
}
/* 정보 테이블 */
.info-table {
margin-top: 1rem; /* 16px */
border: 0.0625rem solid var(--line);
border-radius: 0.75rem; /* 12px */
overflow: hidden;
}
.info-table .row {
display: grid;
grid-template-columns: 12.5rem 1fr; /* 200px */
border-top: 0.0625rem solid var(--line);
}
.info-table .row:first-child {
border-top: 0;
}
.info-table .k {
background: #f7f8fa;
padding: 1rem 1.25rem; /* 16px 20px */
font-size: 0.875rem; /* 14px */
font-weight: 700;
color: var(--ink);
}
.info-table .v {
padding: 1rem 1.25rem;
font-size: 0.875rem;
color: var(--ink-soft);
line-height: 1.7;
}
.contact-card {
margin-top: 1rem; /* 16px */
background: #f7f8fa;
border-radius: 0.875rem; /* 14px */
padding: clamp(1.375rem, 2.6vw, 1.875rem); /* 22~30px */
}
.contact-card .role {
font-size: 0.8125rem; /* 13px */
font-weight: 700;
color: var(--label);
letter-spacing: 0.02em;
}
.contact-card p {
font-size: 0.9375rem; /* 15px */
color: var(--ink);
line-height: 1.9;
margin-top: 0.5rem; /* 8px */
}
.contact-card p span {
color: var(--ink-soft);
}
@media (max-width: 38.75rem) {
/* 620px */
.info-table .row {
grid-template-columns: 1fr;
}
.info-table .k {
border-bottom: 0.0625rem solid var(--line);
}
.article .body {
padding-left: 0;
}
}
</style>