geonhwiii · geonhwiii · Apr 4, 2025 · Apr 4, 2025 · Apr 4, 2025 · Apr 4, 2025
diff --git a/public/kia.svg b/public/kia.svg
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -1,16 +1,23 @@
 @import "tailwindcss";
 
-:root {
-	--background: #ffffff;
-	--primary: #05141f;
-	--max-width: 1660px;
+@layer base {
+	:root {
+		--background: #ffffff;
+		--primary: #05141f;
+		--max-width: 1660px;
+	}
 }
 
-@theme inline {
+@theme {
 	--font-sans: var(--font-geist-sans);
 	--font-mono: var(--font-geist-mono);
-	--color-background: var(--background);
+
 	--color-primary: var(--primary);
+
+	--color-background: var(--background);
+	--color-footer-background: var(--primary);
+
+	--breakpoint-md: 46.5rem;
 }
 
 @layer base {
@@ -27,6 +34,11 @@
 	textarea {
 		@apply text-primary;
 	}
+	address,
+	i,
+	em {
+		@apply not-italic;
+	}
 }
 
 @layer utilities {

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,8 +2,9 @@ import type { Metadata } from 'next';
 import { Geist, Geist_Mono } from 'next/font/google';
 import './globals.css';
 import { cn } from '@/shared/utils/cn';
-import { meta } from '@/shared/constants/meta';
+import { meta } from '@/shared/data/meta';
 import { Header } from '@/widgets/header';
+import { Footer } from '@/widgets/footer';
 
 const geistSans = Geist({
 	variable: '--font-geist-sans',
@@ -27,6 +28,7 @@ export default function RootLayout({
 			<body className={cn(geistSans.variable, geistMono.variable, 'antialiased')}>
 				<Header />
 				{children}
+				<Footer />
 			</body>
 		</html>
 	);

diff --git a/src/shared/constants/meta.ts → src/shared/data/meta.ts b/src/shared/constants/meta.ts → src/shared/data/meta.ts
diff --git a/src/widgets/footer/.gitkeep b/src/widgets/footer/.gitkeep
diff --git a/src/widgets/footer/data/address.ts b/src/widgets/footer/data/address.ts
@@ -0,0 +1,47 @@
+export type AddressField = {
+	label: string;
+	value: string;
+	href?: string;
+};
+
+type Address = {
+	위치: AddressField;
+	회사: AddressField;
+	대표: AddressField;
+	사업자등록번호: AddressField;
+	통신판매번호: AddressField;
+	고객센터: AddressField;
+	제휴문의: AddressField;
+};
+
+export const ADDRESS: Address = {
+	위치: {
+		label: '',
+		value: '서울특별시 서초구 헌릉로 12',
+	},
+	회사: {
+		label: '',
+		value: '기아㈜',
+	},
+	대표: {
+		label: '대표: ',
+		value: '송호성, 최준영',
+	},
+	사업자등록번호: {
+		label: '사업자등록번호: ',
+		value: '119-81-02316',
+	},
+	통신판매번호: {
+		label: '통신판매번호: ',
+		value: '2006-07935',
+	},
+	고객센터: {
+		label: '고객센터: ',
+		value: '1833-4964',
+	},
+	제휴문의: {
+		label: '제휴문의: ',
+		value: 'kiabiz@kia.com',
+		href: 'mailto:kiabiz@kia.com',
+	},
+};
diff --git a/src/widgets/footer/data/copyright.ts b/src/widgets/footer/data/copyright.ts
@@ -0,0 +1 @@
+export const COPYRIGHT = '© 2023 KIA CORP. All Rights Reserved.';
diff --git a/src/widgets/footer/data/index.ts b/src/widgets/footer/data/index.ts
@@ -0,0 +1,2 @@
+export * from './address';
+export * from './copyright';
diff --git a/src/widgets/footer/index.tsx b/src/widgets/footer/index.tsx
@@ -0,0 +1,21 @@
+import { cn } from '@/shared/utils/cn';
+import { FooterAddress, FooterCopyright, FooterTerms } from './ui';
+
+export function Footer() {
+	return (
+		<footer className="bg-footer-background px-6 md:px-12">
+			<div
+				className={cn(
+					'max-w-[var(--max-width)] mx-auto pt-4.5 md:pt-[34px] pb-7 md:pb-11 lg:py-0 lg:h-[176px] h-[296px]',
+					'flex flex-col-reverse justify-between lg:flex-row lg:items-center',
+				)}
+			>
+				<FooterCopyright />
+				<div className="md:space-y-2.5 w-full">
+					<FooterTerms />
+					<FooterAddress />
+				</div>
+			</div>
+		</footer>
+	);
+}
diff --git a/src/widgets/footer/ui/footer.address.tsx b/src/widgets/footer/ui/footer.address.tsx
@@ -0,0 +1,47 @@
+import { cn } from '@/shared/utils/cn';
+import { type AddressField, ADDRESS } from '../data';
+
+type Props = {
+	field: AddressField;
+	isCompany?: boolean;
+};
+
+export function FooterAddress() {
+	return (
+		<address
+			className={cn(
+				'flex flex-col md:flex-row md:flex-wrap lg:justify-end *:inline-flex',
+				'*:mr-3 *:lg:mr-0 *:lg:ml-3 gap-1 lg:gap-0',
+				'text-xs md:text-sm text-gray-400 lg:text-right',
+			)}
+		>
+			<span>
+				<AddressItem field={ADDRESS.위치} />
+				<AddressItem field={ADDRESS.회사} isCompany />
+			</span>
+			<AddressItem field={ADDRESS.대표} />
+			<AddressItem field={ADDRESS.사업자등록번호} />
+			<AddressItem field={ADDRESS.통신판매번호} />
+			<AddressItem field={ADDRESS.고객센터} />
+			<AddressItem field={ADDRESS.제휴문의} />
+		</address>
+	);
+}
+
+function AddressItem({ field, isCompany }: Props) {
+	const value = field.href ? (
+		<a href={field.href} className="underline">
+			{field.value}
+		</a>
+	) : isCompany ? (
+		<em className="ml-3">{field.value}</em>
+	) : (
+		<i>{field.value}</i>
+	);
+	return (
+		<span>
+			{field.label && <span>{field.label}</span>}
+			{value}
+		</span>
+	);
+}
diff --git a/src/widgets/footer/ui/footer.copyright.tsx b/src/widgets/footer/ui/footer.copyright.tsx
@@ -0,0 +1,13 @@
+import Image from 'next/image';
+import { COPYRIGHT } from '../data';
+
+export function FooterCopyright() {
+	return (
+		<div>
+			<div className="relative aspect-[2/1] h-8 md:h-12 lg:h-14">
+				<Image src="/kia.svg" alt="Kia logo" fill />
+			</div>
+			<span className="text-gray-400 text-xs md:text-sm">{COPYRIGHT}</span>
+		</div>
+	);
+}
diff --git a/src/widgets/footer/ui/footer.terms.tsx b/src/widgets/footer/ui/footer.terms.tsx
@@ -0,0 +1,14 @@
+import Link from 'next/link';
+
+export function FooterTerms() {
+	return (
+		<div className="h-12 md:h-fit flex items-center lg:justify-end gap-6 *:text-white *:hover:underline">
+			<Link href={'#'}>
+				<b>{'개인정보 처리방침'}</b>
+			</Link>
+			<Link href={'#'}>
+				<span>{'이용 약관'}</span>
+			</Link>
+		</div>
+	);
+}
diff --git a/src/widgets/footer/ui/index.ts b/src/widgets/footer/ui/index.ts
@@ -0,0 +1,3 @@
+export { FooterAddress } from './footer.address';
+export { FooterTerms } from './footer.terms';
+export { FooterCopyright } from './footer.copyright';
diff --git a/src/widgets/header/data/index.ts b/src/widgets/header/data/index.ts
@@ -0,0 +1 @@
+export * from './menu';
diff --git a/src/widgets/header/ui/header.nav.tsx b/src/widgets/header/ui/header.nav.tsx
@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import { headerMenus } from '../data/menu';
+import { headerMenus } from '../data';
 
 export function HeaderNav() {
 	return (
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const COPYRIGHT = '© 2023 KIA CORP. All Rights Reserved.';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from './address';
		export * from './copyright';