From 2b0ee9b9b93cd8391b225394a71fa59d86b05c77 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=88=98=EC=9D=B8?= Date: Sun, 9 Jun 2024 01:50:19 +0900 Subject: [PATCH] =?UTF-8?q?feat=20:=20Web=20Header=20=EA=B0=9C=EB=B0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- gitdeco/public/gitdeco.svg | 17 +++++++ .../app/_components/common/Header/index.tsx | 10 ++++- .../app/_components/common/Header/style.ts | 45 +++++++++++++++++++ gitdeco/src/app/layout.tsx | 13 ++++-- 4 files changed, 80 insertions(+), 5 deletions(-) create mode 100644 gitdeco/public/gitdeco.svg diff --git a/gitdeco/public/gitdeco.svg b/gitdeco/public/gitdeco.svg new file mode 100644 index 0000000..0f2cdc1 --- /dev/null +++ b/gitdeco/public/gitdeco.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/gitdeco/src/app/_components/common/Header/index.tsx b/gitdeco/src/app/_components/common/Header/index.tsx index fccc802..f64d96d 100644 --- a/gitdeco/src/app/_components/common/Header/index.tsx +++ b/gitdeco/src/app/_components/common/Header/index.tsx @@ -1,9 +1,17 @@ import * as S from "./style"; +import Image from "next/image"; +import LogoIco from "/public/gitdeco.svg"; const Header = () => { return ( -
hello
+ + + Logo Img + + GitDeco + + Download ); }; diff --git a/gitdeco/src/app/_components/common/Header/style.ts b/gitdeco/src/app/_components/common/Header/style.ts index dc2d80c..dd54eb0 100644 --- a/gitdeco/src/app/_components/common/Header/style.ts +++ b/gitdeco/src/app/_components/common/Header/style.ts @@ -8,4 +8,49 @@ export const HeaderContainer = styled.div` background-color: black; box-sizing: border-box; border-bottom: 1px solid #3d4145; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 3vw; `; + +export const Logo = styled.div` + display: flex; + flex-direction: row; + align-items: center; +`; + +export const LogoTxt = styled.div` + color: white; + font-weight: 500; + font-size: 1.5vw; + margin-top: 0.5vw; + margin-left: 0.5vw; +`; + +export const LogoImage = styled.div` + position: relative; + width: 50px; + height: 50px; +`; + +export const DownloadBtn = styled.button` + width: 7vw; + height: 1vh; + padding: 15px; + background-color: #2B64E7; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; + font-size:1vw; + margin-bottom: 0.5vw; + + display:flex; + align-items: center; + justify-content: center; + + &:hover { + background-color: #6062AA; + } +`; \ No newline at end of file diff --git a/gitdeco/src/app/layout.tsx b/gitdeco/src/app/layout.tsx index 89c7e76..cfbdce9 100644 --- a/gitdeco/src/app/layout.tsx +++ b/gitdeco/src/app/layout.tsx @@ -1,5 +1,4 @@ -import type { Metadata } from "next"; -import { Inter } from "next/font/google"; +import { Metadata } from "next"; import "./globals.css"; import Header from "./_components/common/Header"; import Sidebar from "./_components/common/Sidebar"; @@ -7,15 +6,21 @@ import Sidebar from "./_components/common/Sidebar"; export const metadata: Metadata = { title: "GitDeco", description: "GitHub Readme.md Editor Web Services", + icons: { + icon: "/gitdeco.svg", + }, }; export default function RootLayout({ children, -}: Readonly<{ +}: { children: React.ReactNode; -}>) { +}) { return ( + + +