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..e49c5e4 --- /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 ( <> - + + > ); } diff --git a/ssh/src/components/ui/separator.tsx b/ssh/src/components/ui/separator.tsx new file mode 100644 index 0000000..6d7f122 --- /dev/null +++ b/ssh/src/components/ui/separator.tsx @@ -0,0 +1,29 @@ +import * as React from "react" +import * as SeparatorPrimitive from "@radix-ui/react-separator" + +import { cn } from "@/lib/utils" + +const Separator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>( + ( + { className, orientation = "horizontal", decorative = true, ...props }, + ref + ) => ( + + ) +) +Separator.displayName = SeparatorPrimitive.Root.displayName + +export { Separator } diff --git a/ssh/src/index.css b/ssh/src/index.css index 6a6cb79..17e54ad 100644 --- a/ssh/src/index.css +++ b/ssh/src/index.css @@ -28,8 +28,7 @@ a:hover { body { margin: 0; - display: flex; - place-items: center; + display: block; min-width: 320px; min-height: 100vh; }