From 95d3a2c6e36d91926741d75bff0e8bd5dc5e90b5 Mon Sep 17 00:00:00 2001 From: smilevictory Date: Thu, 4 Sep 2025 13:53:12 +0900 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EB=A0=88=EC=9D=B4=EC=95=84?= =?UTF-8?q?=EC=9B=83=20=ED=91=B8=ED=84=B0=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ssh/package-lock.json | 24 ++++ ssh/package.json | 1 + ssh/src/components/Layout/Footer/index.tsx | 158 +++++++++++++++++++++ ssh/src/components/Layout/index.tsx | 4 +- ssh/src/components/ui/separator.tsx | 29 ++++ ssh/src/index.css | 3 +- 6 files changed, 216 insertions(+), 3 deletions(-) create mode 100644 ssh/src/components/Layout/Footer/index.tsx create mode 100644 ssh/src/components/ui/separator.tsx diff --git a/ssh/package-lock.json b/ssh/package-lock.json index ef1d54d..a69afef 100644 --- a/ssh/package-lock.json +++ b/ssh/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.0", "dependencies": { "@radix-ui/react-menubar": "^1.1.16", + "@radix-ui/react-separator": "^1.1.7", "@radix-ui/react-slot": "^1.2.3", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", @@ -1532,6 +1533,29 @@ } } }, + "node_modules/@radix-ui/react-separator": { + "version": "1.1.7", + "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz", + "integrity": "sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-primitive": "2.1.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-slot": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz", diff --git a/ssh/package.json b/ssh/package.json index b526c73..8968ab7 100644 --- a/ssh/package.json +++ b/ssh/package.json @@ -11,6 +11,7 @@ }, "dependencies": { "@radix-ui/react-menubar": "^1.1.16", + "@radix-ui/react-separator": "^1.1.7", "@radix-ui/react-slot": "^1.2.3", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", diff --git a/ssh/src/components/Layout/Footer/index.tsx b/ssh/src/components/Layout/Footer/index.tsx new file mode 100644 index 0000000..74d3079 --- /dev/null +++ b/ssh/src/components/Layout/Footer/index.tsx @@ -0,0 +1,158 @@ +import { Separator } from "@/components/ui/separator"; +import { Github, Slack, Instagram } from "lucide-react"; + +type LinkItem = { label: string; href: string }; +type LinkGroup = { title: string; links: LinkItem[] }; + +const linkGroups: LinkGroup[] = [ + { + title: "서비스 안내", + links: [ + { label: "은행 서비스 배우기", href: "#" }, + { label: "ATM 위치 찾기", href: "#" }, + { label: "보이스 피싱 자가 진단하기", href: "#" }, + { label: "보이스 피싱 관련 정보 조회하기", href: "#" }, + { label: "기부하기", href: "#" }, + { label: "자주 묻는 질문", href: "#" }, + ], + }, + { + title: "고객 지원", + links: [ + { label: "고객 센터", href: "#" }, + { label: "문의하기", href: "#" }, + ], + }, + { + title: "약관 및 정책", + links: [ + { label: "이용 약관", href: "#" }, + { label: "개인정보 처리방침", href: "#" }, + { label: "위치 기반 서비스 이용약관", href: "#" }, + ], + }, + { + title: "회사 정보", + links: [ + { label: "회사 소개", href: "#" }, + { label: "채용 안내", href: "#" }, + { label: "직원 소개", href: "#" }, + ], + }, +]; + +export default function Footer() { + return ( + + ); +} diff --git a/ssh/src/components/Layout/index.tsx b/ssh/src/components/Layout/index.tsx index 55e8a81..c67e38b 100644 --- a/ssh/src/components/Layout/index.tsx +++ b/ssh/src/components/Layout/index.tsx @@ -1,13 +1,15 @@ import { Outlet } from "react-router-dom"; import Header from "@/components/Layout/Header"; +import Footer from "@/components/Layout/Footer"; export default function RootLayout() { return ( <>
-
+
+