Merge pull request #3 from Iam2Jo/T2-16--feature/common-component/header

Feat: Add Header
KDT1-FE · Nov 8, 2023 · 854b01e · 854b01e
2 parents 3f2e6c4 + 276a454
commit 854b01e
Show file tree

Hide file tree

Showing 26 changed files with 7,690 additions and 2,662 deletions.
diff --git a/app/home/page.tsx b/app/home/page.tsx
@@ -1,11 +1,12 @@
-import type { NextPage } from 'next'
+import type { NextPage } from 'next';
+import { Header } from '../../components/Header';
 
 const home: NextPage = () => {
   return (
-    <h1>
-      home Page ㅋㅋㅋfff
-    </h1>
+    <div>
+      <Header />
+    </div>
   );
 };
 
-export default home;
+export default home;
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,22 +1,26 @@
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-import './globals.css'
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import GlobalStyle from '../styles/globalStyle';
+import '../styles/fonts/font.css';
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
   title: 'Create Next App',
   description: 'Generated by create next app',
-}
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
-    </html>
-  )
+    <>
+      <GlobalStyle />
+      <html lang="en">
+        <body className={inter.className}>{children}</body>
+      </html>
+    </>
+  );
 }
diff --git a/components/Header/Header.styles.ts b/components/Header/Header.styles.ts
@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+
+const flexCenter = `
+  display: flex;
+  align-items: center;
+`;
+
+export const HeaderWrapper = styled.header`
+  background-color: #222;
+  height: 50px;
+  padding: 0 20px;
+  ${flexCenter}
+  justify-content: space-between;
+`;
+
+export const LeftIcons = styled.div`
+  ${flexCenter}
+  & > *:not(:last-child) {
+    margin-right: 15px;
+  }
+`;
+
+export const RightIcons = styled.div`
+  ${flexCenter}
+  & > *:not(:last-child) {
+    margin-right: 16px;
+  }
+`;
diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { HeaderWrapper, LeftIcons, RightIcons } from './Header.styles';
+import MyPageIcon from './icons/MyPageIcon';
+import SearchIcon from './icons/SearchIcon';
+import ChatIcon from './icons/ChatIcon';
+import BgmIcon from './icons/BgmIcon';
+import LogoutIcon from './icons/LogoutIcon';
+
+const Header = () => {
+  return (
+    <HeaderWrapper>
+      <LeftIcons>
+        <MyPageIcon />
+        <SearchIcon />
+        <ChatIcon />
+      </LeftIcons>
+      <RightIcons>
+        <BgmIcon />
+        <LogoutIcon />
+      </RightIcons>
+    </HeaderWrapper>
+  );
+};
+
+export default Header;
diff --git a/components/Header/icons/BgmIcon.tsx b/components/Header/icons/BgmIcon.tsx
@@ -0,0 +1,9 @@
+import { StyledImage } from './Icon.styles';
+
+const BgmIcon = () => {
+  return (
+    <StyledImage src="/assets/icons/bgm.svg" alt="Bgm" width="15" height="15" />
+  );
+};
+
+export default BgmIcon;
diff --git a/components/Header/icons/ChatIcon.tsx b/components/Header/icons/ChatIcon.tsx
@@ -0,0 +1,14 @@
+import { StyledImage } from './Icon.styles';
+
+const ChatIcon = () => {
+  return (
+    <StyledImage
+      src="/assets/icons/chat.svg"
+      alt="Chat"
+      width="18"
+      height="18"
+    />
+  );
+};
+
+export default ChatIcon;
diff --git a/components/Header/icons/Icon.styles.ts b/components/Header/icons/Icon.styles.ts
@@ -0,0 +1,14 @@
+import styled, { css } from 'styled-components';
+
+export const commonIconStyles = css`
+  cursor: pointer;
+  transition: filter 0.1s;
+
+  &:hover {
+    filter: sepia(89%) saturate(6054%) brightness(97%) contrast(113%);
+  }
+`;
+
+export const StyledImage = styled.img`
+  ${commonIconStyles}
+`;
diff --git a/components/Header/icons/LogoutIcon.tsx b/components/Header/icons/LogoutIcon.tsx
@@ -0,0 +1,14 @@
+import { StyledImage } from './Icon.styles';
+
+const LogoutIcon = () => {
+  return (
+    <StyledImage
+      src="/assets/icons/logout.svg"
+      alt="Logout"
+      width="14"
+      height="14"
+    />
+  );
+};
+
+export default LogoutIcon;
diff --git a/components/Header/icons/MyPageIcon.tsx b/components/Header/icons/MyPageIcon.tsx
@@ -0,0 +1,29 @@
+import { StyledImage } from './Icon.styles';
+
+const MyPageIcon = () => {
+  return (
+    <StyledImage
+      src="/assets/icons/mypage.svg"
+      alt="My Page"
+      width="16"
+      height="16"
+    />
+  );
+
+  // return (
+  //   <svg
+  //     width="16"
+  //     height="16"
+  //     viewBox="0 0 16 16"
+  //     fill="none"
+  //     xmlns="http://www.w3.org/2000/svg"
+  //   >
+  //     <path
+  //       d="M7.90625 0.40625C6.42289 0.40625 4.97284 0.846117 3.73948 1.67023C2.50611 2.49434 1.54481 3.66568 0.977157 5.03612C0.4095 6.40657 0.260975 7.91457 0.550364 9.36943C0.839753 10.8243 1.55406 12.1607 2.60295 13.2095C3.65185 14.2584 4.98822 14.9727 6.44307 15.2621C7.89793 15.5515 9.40593 15.403 10.7764 14.8353C12.1468 14.2677 13.3182 13.3064 14.1423 12.073C14.9664 10.8397 15.4062 9.38961 15.4062 7.90625C15.4042 5.91775 14.6134 4.01128 13.2073 2.6052C11.8012 1.19912 9.89475 0.408286 7.90625 0.40625ZM3.83702 12.7678C4.33828 12.1708 4.95975 11.6862 5.6609 11.3456C6.36205 11.0049 7.12714 10.8159 7.90625 10.7909C8.68558 10.8131 9.45116 11.0016 10.1517 11.3439C10.8522 11.6862 11.4714 12.1743 11.9678 12.7755C10.8289 13.7315 9.38942 14.2556 7.90241 14.2556C6.41539 14.2556 4.97595 13.7315 3.83702 12.7755V12.7678ZM5.37548 7.13702C5.37552 6.64388 5.5214 6.16177 5.79477 5.75134C6.06813 5.34091 6.45678 5.0205 6.9118 4.83041C7.36683 4.64032 7.86791 4.58905 8.352 4.68304C8.8361 4.77704 9.28158 5.0121 9.6324 5.35866C9.98323 5.70522 10.2237 6.1478 10.3236 6.6307C10.4235 7.11361 10.3784 7.61528 10.1939 8.0726C10.0094 8.52991 9.69375 8.92245 9.28669 9.20082C8.87964 9.47918 8.39935 9.63095 7.90625 9.63702C7.24383 9.63499 6.60913 9.37094 6.14073 8.90254C5.67232 8.43414 5.40828 7.79943 5.40625 7.13702H5.37548ZM12.7601 11.9524C12.0279 11.1075 11.0975 10.4573 10.0524 10.0601C10.672 9.60193 11.1313 8.95995 11.3648 8.22556C11.5984 7.49117 11.5942 6.70183 11.353 5.96993C11.1118 5.23802 10.6459 4.60088 10.0215 4.14923C9.39708 3.69757 8.6461 3.45443 7.87548 3.45443C7.10486 3.45443 6.35388 3.69757 5.72949 4.14923C5.1051 4.60088 4.63912 5.23802 4.39792 5.96993C4.15672 6.70183 4.15259 7.49117 4.38612 8.22556C4.61965 8.95995 5.07893 9.60193 5.69856 10.0601C4.66211 10.4772 3.73561 11.1273 2.99087 11.9601C2.34892 11.174 1.9049 10.2453 1.69604 9.2521C1.48719 8.25888 1.5196 7.23006 1.79056 6.25195C2.06152 5.27385 2.56312 4.37501 3.25327 3.63084C3.94343 2.88666 4.802 2.31888 5.75696 1.97512C6.71191 1.63137 7.73538 1.52167 8.7415 1.65523C9.74761 1.78879 10.707 2.16171 11.5392 2.74271C12.3714 3.32371 13.0521 4.09583 13.5242 4.99429C13.9963 5.89274 14.246 6.89133 14.2524 7.90625C14.2551 9.38468 13.7377 10.817 12.7909 11.9524H12.7601Z"
+  //       fill="white"
+  //     />
+  //   </svg>
+  // );
+};
+
+export default MyPageIcon;
diff --git a/components/Header/icons/SearchIcon.tsx b/components/Header/icons/SearchIcon.tsx
@@ -0,0 +1,14 @@
+import { StyledImage } from './Icon.styles';
+
+const SearchIcon = () => {
+  return (
+    <StyledImage
+      src="/assets/icons/search.svg"
+      alt="Search"
+      width="18"
+      height="18"
+    />
+  );
+};
+
+export default SearchIcon;
diff --git a/components/Header/index.ts b/components/Header/index.ts
@@ -0,0 +1,4 @@
+'use client';
+import Header from './Header';
+
+export { Header };
diff --git a/custom.d.ts b/custom.d.ts
@@ -0,0 +1,6 @@
+declare module '*.svg' {
+  import React = require('react');
+  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
+  const src: string;
+  export default src;
+}
diff --git a/next.config.js b/next.config.js
@@ -1,4 +1,13 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
-
-module.exports = nextConfig
+const nextConfig = {
+    webpack: (config) => {
+      config.module.rules.push({
+        test: /\.svg$/,
+        use: ['@svgr/webpack'],
+      });
+
+      return config;
+    },
+  };
+
+  module.exports = nextConfig;