채용정보

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;
+  }
+}

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 CONTACT_NAV = [
-  const ref = useFadeIn();
+  { label: "문의하기", to: "/contact/inquiry" },
-  const CONTACT_NAV = [
+  { label: "채용정보", to: "/contact/recruit" },
-    { 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 (
-    <article ref={ref}>
+    <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>
       <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">
+        <div className="inner-wrap">
-          <span className="sub-section-eyebrow sub-fade-in">채용정보</span>
+          {/* 상단 타이틀 */}
-          {/* <main className="sub-page">
+          <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] }}>
-            <section className="sub-visual">
+            <h2 className="rc-title">하늘길을 함께 만들어갈 인재를 찾습니다.</h2>
-              <div className="inner">
+            <p className="rc-desc">팔네트웍스는 항공 IT, UAM, 드론 분야의 미래를 함께 개척할 열정 있는 분들을 환영합니다.</p>
-                <h2>채용정보</h2>
+          </Motion.div>
-                <p>Recruit</p>
+
-              </div>
+          {/* 복리후생 */}
-            </section>
+          <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>
-            <section className="sub-content-section">
+            <div className="rc-benefits-grid">
-              <div className="inner">
+              {BENEFITS.map((b, i) => (
-                <h3>함께할 동료를 찾습니다</h3>
+                <div key={i} className="rc-benefit-item">
-                <p>
+                  <span className="rc-benefit-icon">{b.icon}</span>
-                  PAL Networks와 함께 성장할
+                  <strong className="rc-benefit-title">{b.title}</strong>
-                  <br />
+                  <p className="rc-benefit-desc">{b.desc}</p>
-                  새로운 동료를 기다리고 있습니다.
+                </div>
-                </p>
+              ))}
-              </div>
+            </div>
-            </section>
+          </Motion.div>
-          </main> */}
+
-        </section>
+          {/* 채용 공고 */}
+          <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;