From f06f9408c34af98f26bfc1a516dba955ee75c027 Mon Sep 17 00:00:00 2001 From: geun <1416geun@naver.com> Date: Wed, 27 May 2026 16:52:46 +0900 Subject: [PATCH] =?UTF-8?q?=EC=B1=84=EC=9A=A9=EC=A0=95=EB=B3=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/common.css | 56 +++++++++++++ src/pages/contact/RecruitPage.jsx | 134 +++++++++++++++++++++--------- 2 files changed, 153 insertions(+), 37 deletions(-) diff --git a/src/css/common.css b/src/css/common.css index fd6255e..8ceb674 100644 --- a/src/css/common.css +++ b/src/css/common.css @@ -354,3 +354,59 @@ body{overflow-x:hidden;} .inq-head {padding:48px 0 32px} } + + +/* ── Recruit ── */ +.rc-head {padding:80px 0 40px 0} +.rc-title {font-size:32px; font-weight:800; color:#111; letter-spacing:-.02em; line-height:1.25; margin-bottom:16px;} +.rc-desc {font-size:15px; color:#666; line-height:1.7;} + +/* ── Section Title ── */ +.rc-section-title {font-size:20px; font-weight:700; color:#111; letter-spacing:-.01em; margin-bottom:28px;} + +/* ── Benefits ── */ +.rc-benefits {padding-bottom:72px; border-bottom:1px solid var(--color-primary-soft-border);} +.rc-benefits-grid {display:grid; grid-template-columns:repeat(4,1fr); gap:16px;} +.rc-benefit-item {background:#f7f8fc; border-radius:12px; padding:24px 20px; display:flex; flex-direction:column; gap:8px;} +.rc-benefit-icon {font-size:24px;} +.rc-benefit-title {font-size:14px; font-weight:700; color:#111;} +.rc-benefit-desc {font-size:13px; color:#666; line-height:1.5;} + +/* ── Jobs ── */ +.rc-jobs {padding:56px 0 100px;} +.rc-jobs-grid {display:grid; grid-template-columns:repeat(2,1fr); gap:20px;} +.rc-job-card {background:#fff; border:1.5px solid var(--color-primary-soft-border); border-radius:16px; padding:28px 32px; display:flex; flex-direction:column; gap:12px; transition:border-color .2s, box-shadow .2s;} +.rc-job-card:hover {border-color:var(--color-primary); box-shadow:0 4px 20px var(--color-primary-shadow);} +.rc-job-top {display:flex; gap:8px;} +.rc-job-part {font-size:12px; font-weight:600; color:var(--color-primary); background:var(--color-primary-soft); padding:3px 10px; border-radius:100px;} +.rc-job-type {font-size:12px; font-weight:600; color:#666; background:#f0f0f0; padding:3px 10px; border-radius:100px;} +.rc-job-title {font-size:22px; font-weight:800; color:#111; letter-spacing:-.02em;} +.rc-job-career {font-size:13px; color:#888; font-weight:500;} +.rc-job-desc {font-size:14px; color:#555; line-height:1.6;} +.rc-job-stack {display:flex; flex-wrap:wrap; gap:6px;} +.rc-job-tag {font-size:12px; font-weight:500; color:#555; background:#f5f5f5; padding:4px 10px; border-radius:6px;} +.rc-job-bottom {display:flex; align-items:center; justify-content:space-between; margin-top:4px; padding-top:16px; border-top:1px solid var(--color-primary-soft);} +.rc-job-deadline {font-size:13px; color:#aaa;} +.rc-job-apply {font-size:14px; font-weight:600; color:#fff; background:var(--color-primary); padding:9px 22px; border-radius:8px; text-decoration:none; transition:background .2s;} +.rc-job-apply:hover {background:var(--color-primary-hover);} + +/* ── Responsive ── */ +@media (max-width: 1024px) { + .rc-benefits-grid { + grid-template-columns: repeat(3, 1fr); + } +} +@media (max-width: 768px) { + .rc-head { + padding: 48px 0 32px; + } + .rc-title { + font-size: 24px; + } + .rc-benefits-grid { + grid-template-columns: repeat(2, 1fr); + } + .rc-jobs-grid { + grid-template-columns: 1fr; + } +} \ No newline at end of file diff --git a/src/pages/contact/RecruitPage.jsx b/src/pages/contact/RecruitPage.jsx index b97eb3a..051d05a 100644 --- a/src/pages/contact/RecruitPage.jsx +++ b/src/pages/contact/RecruitPage.jsx @@ -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 = [ - { label: "문의하기", to: "/contact/inquiry" }, - { label: "채용정보", to: "/contact/recruit" }, - ]; +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 ( -
+ +
+ {job.part} + {job.type} +
+

{job.title}

+

{job.career}

+

{job.desc}

+
+ {job.stack.map((s) => ( + + {s} + + ))} +
+
+ 마감 {job.deadline} + + 지원하기 + +
+ + ); +} + +export default function RecruitPage() { + return ( +
- {/* 기술과 사람을 연결합니다. -
*/} Careers } - // desc="PAL Networks와 함께 성장할 - // 새로운 동료를 기다리고 있습니다." navItems={CONTACT_NAV} />
-
- 채용정보 - {/*
-
-
-

채용정보

-

Recruit

-
-
- -
-
-

함께할 동료를 찾습니다

-

- PAL Networks와 함께 성장할 -
- 새로운 동료를 기다리고 있습니다. -

-
-
-
*/} -
+
+ {/* 상단 타이틀 */} + +

하늘길을 함께 만들어갈 인재를 찾습니다.

+

팔네트웍스는 항공 IT, UAM, 드론 분야의 미래를 함께 개척할 열정 있는 분들을 환영합니다.

+ + + {/* 복리후생 */} + +

복리후생

+
+ {BENEFITS.map((b, i) => ( +
+ {b.icon} + {b.title} +

{b.desc}

+
+ ))} +
+ + + {/* 채용 공고 */} +
+

채용 공고

+
+ {JOBS.map((job, i) => ( + + ))} +
+
+
); } - -export default RecruitPage;