Skip to content

Commit 3d7f059

Browse files
uiop5809uiop5809
authored
Merge pull request #10 from Kusitms-28th-Kobaco-B/feat/#5
[feat] Navbar, Footer 컴포넌트 완료
2 parents 8fb33b2 + 728d12f commit 3d7f059

File tree

7 files changed

+251
-3
lines changed

7 files changed

+251
-3
lines changed

‎public/navbar/kobaco_logo.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎src/app/layout.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import type { Metadata } from "next";
22
import "./globals.css";
33
import { Noto_Sans_KR } from "@next/font/google";
4+
import Footer from "@/components/footer/Footer";
5+
import Navbar from "@/components/navbar/Navbar";
46

57
const notoSansKR = Noto_Sans_KR({
68
weight: ["400", "500", "700"],
@@ -19,7 +21,11 @@ export default function RootLayout({
1921
}>) {
2022
return (
2123
<html lang="en">
22-
<body className={notoSansKR.className}>{children}</body>
24+
<body className={notoSansKR.className}>
25+
<Navbar />
26+
{children}
27+
<Footer />
28+
</body>
2329
</html>
2430
);
2531
}

‎src/components/footer/Footer.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
"use client";
2+
3+
import { footerFirstData, footerSecondData } from "@/lib/footer/FooterData";
4+
import { styled } from "styled-components";
5+
6+
export default function Footer() {
7+
return (
8+
<Layout>
9+
<FooterBox>
10+
{footerFirstData.map((data: string, index: number) => {
11+
return <FooterText key={index}>{data}</FooterText>;
12+
})}
13+
</FooterBox>
14+
<FooterBox>
15+
{footerSecondData.map((data: string, index: number) => {
16+
return <FooterText key={index}>{data}</FooterText>;
17+
})}
18+
</FooterBox>
19+
<FooterText>
20+
<span>
21+
Copyright(C) Korea Broadcast Advertising Corp. All Righrts Reserved
22+
</span>
23+
</FooterText>
24+
</Layout>
25+
);
26+
}
27+
28+
const Layout = styled.div`
29+
width: 100%;
30+
display: flex;
31+
flex-direction: column;
32+
justify-content: center;
33+
align-items: center;
34+
color: #888;
35+
margin-bottom: 3rem;
36+
gap: 0.5rem;
37+
`;
38+
39+
const FooterBox = styled.div`
40+
display: flex;
41+
flex-direction: row;
42+
align-items: center;
43+
gap: 1rem;
44+
`;
45+
46+
const FooterText = styled.div`
47+
font-size: 0.9rem;
48+
span {
49+
font-weight: 800;
50+
}
51+
`;

‎src/components/main/Intro.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ export default function Intro() {
6161
}
6262

6363
const Layout = styled.div`
64-
margin-top: 20px;
64+
margin-top: 12rem;
6565
margin-bottom: 16rem;
6666
`;
6767
const Contents = styled(motion.div)`
@@ -153,7 +153,7 @@ const IntroMiniTextBlock = styled.div`
153153
font-weight: 400;
154154
line-height: 2.875rem;
155155
margin-top: 1.5rem;
156-
margin-bottom: 5.25rem;
156+
margin-bottom: 4rem;
157157
white-space: pre-line;
158158
`;
159159
const LinkButtonWrapper = styled.div`

‎src/components/navbar/Navbar.tsx‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
"use client";
2+
3+
import { styled } from "styled-components";
4+
import { colors } from "@/styles/theme";
5+
import { useState } from "react";
6+
import { subtitleData, titleData } from "@/lib/navbar/navbarData";
7+
8+
export default function Navbar() {
9+
const [openNavbar, setOpenNavbar] = useState(false);
10+
11+
const handleNavbarTrue = () => {
12+
setOpenNavbar(true);
13+
};
14+
15+
const handleNavbarFalse = () => {
16+
setOpenNavbar(false);
17+
};
18+
19+
return (
20+
<>
21+
<Layout>
22+
<LogoBox>
23+
<Logo src={"/navbar/kobaco_logo.svg"} alt={"kobaco"} />
24+
</LogoBox>
25+
<TitleBox
26+
onClick={handleNavbarTrue}
27+
onMouseEnter={handleNavbarTrue}
28+
onMouseLeave={handleNavbarFalse}
29+
>
30+
{titleData.map((title: string, index: number) => {
31+
return <Title key={index}>{title}</Title>;
32+
})}
33+
</TitleBox>
34+
<AuthBox>
35+
<div>로그인</div>
36+
<div>|</div>
37+
<div>회원가입</div>
38+
</AuthBox>
39+
{openNavbar && (
40+
<IndexBox
41+
onMouseEnter={handleNavbarTrue}
42+
onMouseLeave={handleNavbarFalse}
43+
>
44+
{subtitleData.map((title: string[], index: number) => (
45+
<SubtitleBox key={index}>
46+
{title.map((subtitle: string) => {
47+
return <Title key={subtitle}>{subtitle}</Title>;
48+
})}
49+
</SubtitleBox>
50+
))}
51+
</IndexBox>
52+
)}
53+
</Layout>
54+
</>
55+
);
56+
}
57+
58+
const Layout = styled.div`
59+
display: flex;
60+
width: 90%;
61+
height: 5.5rem;
62+
justify-content: center;
63+
align-items: center;
64+
margin: 0 auto;
65+
gap: 2rem;
66+
background: ${colors.background};
67+
position: fixed;
68+
top: 0;
69+
left: 0;
70+
right: 0;
71+
z-index: 999;
72+
`;
73+
74+
const LogoBox = styled.div`
75+
width: 20%;
76+
height: 100%;
77+
display: flex;
78+
align-items: center;
79+
justify-content: center;
80+
`;
81+
82+
const Logo = styled.img`
83+
width: 100%;
84+
height: 100%;
85+
`;
86+
87+
const TitleBox = styled.div`
88+
display: flex;
89+
flex-direction: row;
90+
width: 100%;
91+
height: 100%;
92+
justify-content: center;
93+
align-items: center;
94+
cursor: pointer;
95+
`;
96+
97+
const Title = styled.div`
98+
color: ${colors.white};
99+
font-size: 1rem;
100+
width: 60%;
101+
display: flex;
102+
justify-content: center;
103+
white-space: nowrap;
104+
105+
&:hover {
106+
color: ${colors.mainLight1};
107+
transition: 0.1s;
108+
}
109+
`;
110+
111+
const AuthBox = styled.div`
112+
display: flex;
113+
width: 20%;
114+
flex-direction: row;
115+
justify-content: center;
116+
align-items: center;
117+
gap: 1rem;
118+
cursor: pointer;
119+
div {
120+
color: ${colors.white};
121+
font-size: 0.8rem;
122+
}
123+
`;
124+
125+
const IndexBox = styled.div`
126+
width: 76%;
127+
height: 18rem;
128+
display: flex;
129+
justify-content: center;
130+
align-items: center;
131+
background: rgba(26, 26, 26, 0.4);
132+
backdrop-filter: blur(25px);
133+
border: 1px solid #333;
134+
border-radius: 20px;
135+
margin: 0 auto;
136+
padding: 0 7rem;
137+
position: fixed;
138+
top: 5.5rem;
139+
left: 0;
140+
right: 0;
141+
`;
142+
143+
const SubtitleBox = styled.div`
144+
width: 100%;
145+
height: 100%;
146+
display: flex;
147+
flex-direction: column;
148+
width: 100%;
149+
align-items: center;
150+
cursor: pointer;
151+
gap: 2rem;
152+
padding: 2rem 0;
153+
`;

‎src/lib/footer/footerData.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
export const footerFirstData = [
2+
"AiSAC이란?",
3+
"서비스 이용약관",
4+
"개인정보 처리방침",
5+
"이메일 무단수집 거부",
6+
];
7+
8+
export const footerSecondData = [
9+
"주소 : 서울시 중구 세종대로 124",
10+
"담당부서 : 지능정보사업팀",
11+
"02) 731-7350",
12+
"이용문의 : 카카오톡 채널",
13+
"kobaco_AiSAC",
14+
];

‎src/lib/navbar/navbarData.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
export const titleData = [
2+
"광고 아카이브",
3+
"트렌드 분석",
4+
"광고 카피 제작",
5+
"스토리보드 제작",
6+
"아이작 활용",
7+
];
8+
9+
export const subtitleData = [
10+
["광고 검색", "레퍼런스 보드", "광고 데이터 분석"],
11+
["인물 분석", "아이템 분석", "비교 분석"],
12+
["새 카피 만들기", "갤러리"],
13+
["스토리보드 만들기", "갤러리"],
14+
["공지사항", "홍보 콘텐츠", "공공데이터 개발", "활용 안내"],
15+
];

0 commit comments

Comments
 (0)