|
|
|
|
@ -1,54 +1,114 @@
|
|
|
|
|
import useFadeIn from "../../hooks/useFadeIn"; |
|
|
|
|
import { useState } from "react"; |
|
|
|
|
import { motion as Motion } from "framer-motion"; |
|
|
|
|
import SubHero from "../../components/SubHero"; |
|
|
|
|
|
|
|
|
|
function RecruitPage() { |
|
|
|
|
const ref = useFadeIn(); |
|
|
|
|
const CONTACT_NAV = [ |
|
|
|
|
const CONTACT_NAV = [ |
|
|
|
|
{ label: "문의하기", to: "/contact/inquiry" }, |
|
|
|
|
{ label: "채용정보", to: "/contact/recruit" }, |
|
|
|
|
]; |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
const JOBS = [ |
|
|
|
|
{ |
|
|
|
|
id: 1, |
|
|
|
|
part: "개발", |
|
|
|
|
title: "백엔드 개발자", |
|
|
|
|
type: "정규직", |
|
|
|
|
career: "경력 3년 이상", |
|
|
|
|
stack: ["Java", "Spring Boot", "MySQL", "AWS"], |
|
|
|
|
desc: "항공 IT 시스템 및 UAM/UTM 플랫폼 백엔드 개발을 담당합니다.", |
|
|
|
|
deadline: "2025.07.31", |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 2, |
|
|
|
|
part: "개발", |
|
|
|
|
title: "프론트엔드 개발자", |
|
|
|
|
type: "정규직", |
|
|
|
|
career: "경력 2년 이상", |
|
|
|
|
stack: ["React", "TypeScript", "Vite", "Framer Motion"], |
|
|
|
|
desc: "항공 관제 시스템 및 웹 서비스의 UI/UX 개발을 담당합니다.", |
|
|
|
|
deadline: "2025.07.31", |
|
|
|
|
}, |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
const BENEFITS = [ |
|
|
|
|
{ icon: "🏢", title: "유연근무", desc: "자율 출퇴근 및 재택근무 지원" }, |
|
|
|
|
{ icon: "📚", title: "자기계발", desc: "도서 구입비 및 교육비 지원" }, |
|
|
|
|
{ icon: "🍱", title: "식사 지원", desc: "중식 제공 또는 식대 지원" }, |
|
|
|
|
{ icon: "💰", title: "성과 보상", desc: "우수 성과자 인센티브 지급" }, |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
function JobCard({ job, index }) { |
|
|
|
|
return ( |
|
|
|
|
<Motion.div className="rc-job-card" initial={{ opacity: 0, y: 16 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, margin: "-40px" }} transition={{ duration: 0.4, delay: index * 0.08, ease: [0.4, 0, 0.2, 1] }}> |
|
|
|
|
<div className="rc-job-top"> |
|
|
|
|
<span className="rc-job-part">{job.part}</span> |
|
|
|
|
<span className="rc-job-type">{job.type}</span> |
|
|
|
|
</div> |
|
|
|
|
<h3 className="rc-job-title">{job.title}</h3> |
|
|
|
|
<p className="rc-job-career">{job.career}</p> |
|
|
|
|
<p className="rc-job-desc">{job.desc}</p> |
|
|
|
|
<div className="rc-job-stack"> |
|
|
|
|
{job.stack.map((s) => ( |
|
|
|
|
<span key={s} className="rc-job-tag"> |
|
|
|
|
{s} |
|
|
|
|
</span> |
|
|
|
|
))} |
|
|
|
|
</div> |
|
|
|
|
<div className="rc-job-bottom"> |
|
|
|
|
<span className="rc-job-deadline">마감 {job.deadline}</span> |
|
|
|
|
<a href="mailto:1416geun@palnet.co.kr?subject=채용 지원 - {job.title}" className="rc-job-apply"> |
|
|
|
|
지원하기 |
|
|
|
|
</a> |
|
|
|
|
</div> |
|
|
|
|
</Motion.div> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
export default function RecruitPage() { |
|
|
|
|
return ( |
|
|
|
|
<article ref={ref}> |
|
|
|
|
<article> |
|
|
|
|
<SubHero |
|
|
|
|
label="CONTACT US" |
|
|
|
|
title={ |
|
|
|
|
<> |
|
|
|
|
{/* <span style={{ color: "#111" }}>기술과 사람을 연결합니다.</span> |
|
|
|
|
<br /> */} |
|
|
|
|
<em>Careers</em> |
|
|
|
|
</> |
|
|
|
|
} |
|
|
|
|
// desc="PAL Networks와 함께 성장할 |
|
|
|
|
// 새로운 동료를 기다리고 있습니다." |
|
|
|
|
navItems={CONTACT_NAV} |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<div className="sub-content"> |
|
|
|
|
<section className="sub-section"> |
|
|
|
|
<span className="sub-section-eyebrow sub-fade-in">채용정보</span> |
|
|
|
|
{/* <main className="sub-page"> |
|
|
|
|
<section className="sub-visual"> |
|
|
|
|
<div className="inner"> |
|
|
|
|
<h2>채용정보</h2> |
|
|
|
|
<p>Recruit</p> |
|
|
|
|
</div> |
|
|
|
|
</section> |
|
|
|
|
|
|
|
|
|
<section className="sub-content-section"> |
|
|
|
|
<div className="inner"> |
|
|
|
|
<h3>함께할 동료를 찾습니다</h3> |
|
|
|
|
<p> |
|
|
|
|
PAL Networks와 함께 성장할 |
|
|
|
|
<br /> |
|
|
|
|
새로운 동료를 기다리고 있습니다. |
|
|
|
|
</p> |
|
|
|
|
</div> |
|
|
|
|
</section> |
|
|
|
|
</main> */} |
|
|
|
|
</section> |
|
|
|
|
<div className="inner-wrap"> |
|
|
|
|
{/* 상단 타이틀 */} |
|
|
|
|
<Motion.div className="rc-head" initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, margin: "-60px" }} transition={{ duration: 0.5, ease: [0.4, 0, 0.2, 1] }}> |
|
|
|
|
<h2 className="rc-title">하늘길을 함께 만들어갈 인재를 찾습니다.</h2> |
|
|
|
|
<p className="rc-desc">팔네트웍스는 항공 IT, UAM, 드론 분야의 미래를 함께 개척할 열정 있는 분들을 환영합니다.</p> |
|
|
|
|
</Motion.div> |
|
|
|
|
|
|
|
|
|
{/* 복리후생 */} |
|
|
|
|
<Motion.div className="rc-benefits" initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, margin: "-60px" }} transition={{ duration: 0.5, delay: 0.1, ease: [0.4, 0, 0.2, 1] }}> |
|
|
|
|
<h3 className="rc-section-title">복리후생</h3> |
|
|
|
|
<div className="rc-benefits-grid"> |
|
|
|
|
{BENEFITS.map((b, i) => ( |
|
|
|
|
<div key={i} className="rc-benefit-item"> |
|
|
|
|
<span className="rc-benefit-icon">{b.icon}</span> |
|
|
|
|
<strong className="rc-benefit-title">{b.title}</strong> |
|
|
|
|
<p className="rc-benefit-desc">{b.desc}</p> |
|
|
|
|
</div> |
|
|
|
|
))} |
|
|
|
|
</div> |
|
|
|
|
</Motion.div> |
|
|
|
|
|
|
|
|
|
{/* 채용 공고 */} |
|
|
|
|
<div className="rc-jobs"> |
|
|
|
|
<h3 className="rc-section-title">채용 공고</h3> |
|
|
|
|
<div className="rc-jobs-grid"> |
|
|
|
|
{JOBS.map((job, i) => ( |
|
|
|
|
<JobCard key={job.id} job={job} index={i} /> |
|
|
|
|
))} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</article> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
export default RecruitPage; |
|
|
|
|
|
