Merge pull request #10 from Kusitms-28th-Kobaco-B/feat/#5

[feat] Navbar, Footer 컴포넌트 완료
Kusitms-28th-Kobaco-B · Mar 3, 2024 · 3d7f059 · 3d7f059
2 parents 8fb33b2 + 728d12f
commit 3d7f059
Show file tree

Hide file tree

Showing 7 changed files with 251 additions and 3 deletions.
diff --git a/public/navbar/kobaco_logo.svg b/public/navbar/kobaco_logo.svg
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
 import "./globals.css";
 import { Noto_Sans_KR } from "@next/font/google";
+import Footer from "@/components/footer/Footer";
+import Navbar from "@/components/navbar/Navbar";
 
 const notoSansKR = Noto_Sans_KR({
   weight: ["400", "500", "700"],
@@ -19,7 +21,11 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={notoSansKR.className}>{children}</body>
+      <body className={notoSansKR.className}>
+        <Navbar />
+        {children}
+        <Footer />
+      </body>
     </html>
   );
 }
diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import { footerFirstData, footerSecondData } from "@/lib/footer/FooterData";
+import { styled } from "styled-components";
+
+export default function Footer() {
+  return (
+    <Layout>
+      <FooterBox>
+        {footerFirstData.map((data: string, index: number) => {
+          return <FooterText key={index}>{data}</FooterText>;
+        })}
+      </FooterBox>
+      <FooterBox>
+        {footerSecondData.map((data: string, index: number) => {
+          return <FooterText key={index}>{data}</FooterText>;
+        })}
+      </FooterBox>
+      <FooterText>
+        <span>
+          Copyright(C) Korea Broadcast Advertising Corp. All Righrts Reserved
+        </span>
+      </FooterText>
+    </Layout>
+  );
+}
+
+const Layout = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #888;
+  margin-bottom: 3rem;
+  gap: 0.5rem;
+`;
+
+const FooterBox = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1rem;
+`;
+
+const FooterText = styled.div`
+  font-size: 0.9rem;
+  span {
+    font-weight: 800;
+  }
+`;
diff --git a/src/components/main/Intro.tsx b/src/components/main/Intro.tsx
@@ -61,7 +61,7 @@ export default function Intro() {
 }
 
 const Layout = styled.div`
-  margin-top: 20px;
+  margin-top: 12rem;
   margin-bottom: 16rem;
 `;
 const Contents = styled(motion.div)`
@@ -153,7 +153,7 @@ const IntroMiniTextBlock = styled.div`
   font-weight: 400;
   line-height: 2.875rem;
   margin-top: 1.5rem;
-  margin-bottom: 5.25rem;
+  margin-bottom: 4rem;
   white-space: pre-line;
 `;
 const LinkButtonWrapper = styled.div`

diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx
@@ -0,0 +1,153 @@
+"use client";
+
+import { styled } from "styled-components";
+import { colors } from "@/styles/theme";
+import { useState } from "react";
+import { subtitleData, titleData } from "@/lib/navbar/navbarData";
+
+export default function Navbar() {
+  const [openNavbar, setOpenNavbar] = useState(false);
+
+  const handleNavbarTrue = () => {
+    setOpenNavbar(true);
+  };
+
+  const handleNavbarFalse = () => {
+    setOpenNavbar(false);
+  };
+
+  return (
+    <>
+      <Layout>
+        <LogoBox>
+          <Logo src={"/navbar/kobaco_logo.svg"} alt={"kobaco"} />
+        </LogoBox>
+        <TitleBox
+          onClick={handleNavbarTrue}
+          onMouseEnter={handleNavbarTrue}
+          onMouseLeave={handleNavbarFalse}
+        >
+          {titleData.map((title: string, index: number) => {
+            return <Title key={index}>{title}</Title>;
+          })}
+        </TitleBox>
+        <AuthBox>
+          <div>로그인</div>
+          <div>|</div>
+          <div>회원가입</div>
+        </AuthBox>
+        {openNavbar && (
+          <IndexBox
+            onMouseEnter={handleNavbarTrue}
+            onMouseLeave={handleNavbarFalse}
+          >
+            {subtitleData.map((title: string[], index: number) => (
+              <SubtitleBox key={index}>
+                {title.map((subtitle: string) => {
+                  return <Title key={subtitle}>{subtitle}</Title>;
+                })}
+              </SubtitleBox>
+            ))}
+          </IndexBox>
+        )}
+      </Layout>
+    </>
+  );
+}
+
+const Layout = styled.div`
+  display: flex;
+  width: 90%;
+  height: 5.5rem;
+  justify-content: center;
+  align-items: center;
+  margin: 0 auto;
+  gap: 2rem;
+  background: ${colors.background};
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 999;
+`;
+
+const LogoBox = styled.div`
+  width: 20%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const Logo = styled.img`
+  width: 100%;
+  height: 100%;
+`;
+
+const TitleBox = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+`;
+
+const Title = styled.div`
+  color: ${colors.white};
+  font-size: 1rem;
+  width: 60%;
+  display: flex;
+  justify-content: center;
+  white-space: nowrap;
+
+  &:hover {
+    color: ${colors.mainLight1};
+    transition: 0.1s;
+  }
+`;
+
+const AuthBox = styled.div`
+  display: flex;
+  width: 20%;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  cursor: pointer;
+  div {
+    color: ${colors.white};
+    font-size: 0.8rem;
+  }
+`;
+
+const IndexBox = styled.div`
+  width: 76%;
+  height: 18rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(26, 26, 26, 0.4);
+  backdrop-filter: blur(25px);
+  border: 1px solid #333;
+  border-radius: 20px;
+  margin: 0 auto;
+  padding: 0 7rem;
+  position: fixed;
+  top: 5.5rem;
+  left: 0;
+  right: 0;
+`;
+
+const SubtitleBox = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  align-items: center;
+  cursor: pointer;
+  gap: 2rem;
+  padding: 2rem 0;
+`;
diff --git a/src/lib/footer/footerData.ts b/src/lib/footer/footerData.ts
@@ -0,0 +1,14 @@
+export const footerFirstData = [
+  "AiSAC이란?",
+  "서비스 이용약관",
+  "개인정보 처리방침",
+  "이메일 무단수집 거부",
+];
+
+export const footerSecondData = [
+  "주소 : 서울시 중구 세종대로 124",
+  "담당부서 : 지능정보사업팀",
+  "02) 731-7350",
+  "이용문의 : 카카오톡 채널",
+  "kobaco_AiSAC",
+];
diff --git a/src/lib/navbar/navbarData.ts b/src/lib/navbar/navbarData.ts
@@ -0,0 +1,15 @@
+export const titleData = [
+  "광고 아카이브",
+  "트렌드 분석",
+  "광고 카피 제작",
+  "스토리보드 제작",
+  "아이작 활용",
+];
+
+export const subtitleData = [
+  ["광고 검색", "레퍼런스 보드", "광고 데이터 분석"],
+  ["인물 분석", "아이템 분석", "비교 분석"],
+  ["새 카피 만들기", "갤러리"],
+  ["스토리보드 만들기", "갤러리"],
+  ["공지사항", "홍보 콘텐츠", "공공데이터 개발", "활용 안내"],
+];