From e671f09a6a552c2f2a704ff876a596bfaa5c6a94 Mon Sep 17 00:00:00 2001 From: geun <1416geun@naver.com> Date: Thu, 7 May 2026 17:26:06 +0900 Subject: [PATCH] =?UTF-8?q?footer=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 10 ++++ package.json | 1 + src/components/Footer.jsx | 118 ++++++++++++++++++++++++++++++++++---- src/css/footer.css | 44 ++++++++++++++ 4 files changed, 161 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index 73f0631..c9f12ed 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "framer-motion": "^12.38.0", "gsap": "^3.15.0", + "lucide-react": "^1.14.0", "react": "^19.2.4", "react-dom": "^19.2.4", "react-router-dom": "^7.14.1" @@ -2114,6 +2115,15 @@ "yallist": "^3.0.2" } }, + "node_modules/lucide-react": { + "version": "1.14.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.14.0.tgz", + "integrity": "sha512-+1mdWcfSJVUsaTIjN9zoezmUhfXo5l0vP7ekBMPo3jcS/aIkxHnXqAPsByszMZx/Y8oQBRJxJx5xg+RH3urzxA==", + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/minimatch": { "version": "3.1.5", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz", diff --git a/package.json b/package.json index de8de4f..fdb7c0b 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "dependencies": { "framer-motion": "^12.38.0", "gsap": "^3.15.0", + "lucide-react": "^1.14.0", "react": "^19.2.4", "react-dom": "^19.2.4", "react-router-dom": "^7.14.1" diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx index 1bd227c..d32f307 100644 --- a/src/components/Footer.jsx +++ b/src/components/Footer.jsx @@ -1,23 +1,117 @@ +import { Link } from "react-router-dom"; + +const footerNav = [ + { + title: "COMPANY", + items: [ + { label: "회사소개", to: "/company/about" }, + { label: "연혁", to: "/company/history" }, + { label: "고객 및 협력사", to: "/company/partners" }, + { label: "찾아오시는 길", to: "/company/location" }, + ], + }, + { + title: "UAM/UATM", + items: [ + { label: "소개", to: "/uam/intro" }, + { label: "도입사례", to: "/uam/case" }, + ], + }, + { + title: "BUSINESS", + items: [ + { label: "System Integration", to: "/business/si" }, + { label: "R&D", to: "/business/rnd" }, + { label: "운영 · 유지보수", to: "/business/maintenance" }, + ], + }, + { + title: "SOLUTION", + items: [ + { label: "비행상황관리 시스템", to: "/solution/flight-control" }, + { label: "IBE", to: "/solution/ibe" }, + { label: "스마트 관광 예약", to: "/solution/smart-tour" }, + { label: "KT G-cloud 인천총판", to: "/solution/kt-gcloud" }, + ], + }, + { + title: "CONTACT", + items: [ + { label: "문의하기", to: "/contact/inquiry" }, + { label: "채용정보", to: "/contact/recruit" }, + ], + }, +]; + function Footer() { return ( - ) + ); } -export default Footer +export default Footer; diff --git a/src/css/footer.css b/src/css/footer.css index e69de29..6b962a8 100644 --- a/src/css/footer.css +++ b/src/css/footer.css @@ -0,0 +1,44 @@ +.site-footer{background:#0a0a0a;color:rgba(255,255,255,.55);} +.footer-inner{max-width:1440px;margin:0 auto;padding:60px 40px 28px;} + +.footer-top{display:grid;grid-template-columns:1.2fr 3.8fr;gap:40px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.08);}.footer-logo{display:inline-block;width:fit-content;} +.footer-logo{min-width:200px} +.footer-logo img{display:block;height:40px;width:auto;} +.footer-tagline{margin:0;font-size:13px;line-height:1.6;color:rgba(255,255,255,.5);letter-spacing:.2px;} + +.footer-nav{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;} +.footer-nav-group h5{margin:0 0 14px;font-size:12px;font-weight:600;color:#fff;letter-spacing:.6px;} +.footer-nav-group ul{list-style:none;padding:0;margin:0;} +.footer-nav-group li{margin-bottom:8px;} +.footer-nav-group a{font-size:13px;color:rgba(255,255,255,.5);text-decoration:none;transition:color .2s ease;} +.footer-nav-group a:hover{color:#fff;} + +.footer-mid{padding:24px 0;border-bottom:1px solid rgba(255,255,255,.08);} +.footer-info p{margin:0 0 4px;font-size:12px;line-height:1.8;color:rgba(255,255,255,.5);} +.footer-info p:last-child{margin-bottom:0;} +.footer-info .strong{color:rgba(255,255,255,.85);font-weight:500;} +.footer-info .sep{display:inline-block;margin:0 10px;color:rgba(255,255,255,.2);} +.footer-info a{color:inherit;text-decoration:none;} +.footer-info a:hover{color:#fff;} + +.footer-bot{display:flex;justify-content:space-between;align-items:center;padding-top:18px;} +.footer-copy{margin:0;font-size:12px;color:rgba(255,255,255,.35);letter-spacing:.2px;} +.footer-policy{list-style:none;padding:0;margin:0;display:flex;gap:20px;} +.footer-policy a{font-size:12px;color:rgba(255,255,255,.55);text-decoration:none;transition:color .2s ease;} +.footer-policy a:hover{color:#fff;} + +@media (max-width:1024px){ +.footer-inner{padding:48px 24px 24px;} +.footer-top{grid-template-columns:1fr;gap:32px;padding-bottom:28px;} +.footer-nav{grid-template-columns:repeat(3,1fr);gap:24px 16px;} +.footer-bot{flex-direction:column;align-items:flex-start;gap:10px;padding-top:14px;} +} +@media (max-width:640px){ +.footer-nav{grid-template-columns:repeat(2,1fr);} +} +@media (max-width:540px){ +.footer-info p{margin-bottom:14px;} +.footer-info p:last-child{margin-bottom:0;} +.footer-info .sep{display:none;} +.footer-info .info-item{display:block;line-height:1.9;} +} \ No newline at end of file