Skip to content

Commit b6e93ef

Browse files
kangdy25kangdy25
committed
feat: header 컴포넌트 구현
- Logo, instagram, Thread 아이콘 다운로드 - figma 시안을 토대로 header 컴포넌트 반응형 구현
1 parent 44c78ba commit b6e93ef

6 files changed

Lines changed: 59 additions & 2 deletions

File tree

‎app/components/header.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import Link from 'next/link';
2+
import Image from 'next/image';
3+
4+
const Header = () => {
5+
return (
6+
<header className="border-gray-1 sticky top-0 right-0 left-0 flex h-15 items-center justify-center border-b bg-white">
7+
<div className="mx-5 my-2.5 flex w-300 items-center justify-between sm:mx-12.5 lg:mx-42.5">
8+
<Link href="/" className="shrink-0">
9+
<Image src="/logo.svg" alt="Mingling Logo" width={112} height={40} priority />
10+
</Link>
11+
<nav className="hidden items-center gap-2.5 sm:flex">
12+
<Link href="/login" className="text-gray-5 p-2 text-[16px]">
13+
문의하기
14+
</Link>
15+
<Link href="/login" className="text-gray-5 p-2 text-[16px]">
16+
피드백남기기
17+
</Link>
18+
</nav>
19+
</div>
20+
</header>
21+
);
22+
};
23+
24+
export default Header;

‎app/layout.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { Metadata } from 'next';
22
import localFont from 'next/font/local';
33
import './globals.css';
4+
import Header from './components/header';
45

56
const pretendard = localFont({
67
src: [
@@ -30,7 +31,10 @@ export default function RootLayout({
3031
}>) {
3132
return (
3233
<html lang="ko" className={pretendard.variable}>
33-
<body>{children}</body>
34+
<body>
35+
<Header />
36+
{children}
37+
</body>
3438
</html>
3539
);
3640
}

‎app/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export default function Home() {
22
return (
3-
<div className="flex h-screen w-screen justify-center gap-10 bg-slate-950">
3+
<div className="flex h-screen justify-center gap-10 bg-slate-950">
44
<div className="flex flex-col gap-5 text-white">
55
<h1 className="py-4 text-3xl font-bold text-white">타이포그래피 세팅</h1>
66
<h3 className="text-2xl font-thin">안녕, 세계!!</h3>

‎public/Logo.svg‎

Lines changed: 14 additions & 0 deletions
Loading

‎public/Thread.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎public/instagram.svg‎

Lines changed: 12 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)