Skip to content

Commit

Permalink
Merge pull request #3 from Iam2Jo/T2-16--feature/common-component/header
Browse files Browse the repository at this point in the history
Feat: Add Header
moonyah authored Nov 8, 2023
2 parents 3f2e6c4 + 276a454 commit 854b01e
Showing 26 changed files with 7,690 additions and 2,662 deletions.
11 changes: 6 additions & 5 deletions app/home/page.tsx
Original file line number Diff line number Diff line change
@@ -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;
24 changes: 14 additions & 10 deletions app/layout.tsx
Original file line number Diff line number Diff line change
@@ -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>
</>
);
}
28 changes: 28 additions & 0 deletions components/Header/Header.styles.ts
Original file line number Diff line number Diff line change
@@ -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;
}
`;
25 changes: 25 additions & 0 deletions components/Header/Header.tsx
Original file line number Diff line number Diff line change
@@ -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;
9 changes: 9 additions & 0 deletions components/Header/icons/BgmIcon.tsx
Original file line number Diff line number Diff line change
@@ -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;
14 changes: 14 additions & 0 deletions components/Header/icons/ChatIcon.tsx
Original file line number Diff line number Diff line change
@@ -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;
14 changes: 14 additions & 0 deletions components/Header/icons/Icon.styles.ts
Original file line number Diff line number Diff line change
@@ -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}
`;
14 changes: 14 additions & 0 deletions components/Header/icons/LogoutIcon.tsx
Original file line number Diff line number Diff line change
@@ -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;
29 changes: 29 additions & 0 deletions components/Header/icons/MyPageIcon.tsx
Original file line number Diff line number Diff line change
@@ -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;
14 changes: 14 additions & 0 deletions components/Header/icons/SearchIcon.tsx
Original file line number Diff line number Diff line change
@@ -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;
4 changes: 4 additions & 0 deletions components/Header/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
'use client';
import Header from './Header';

export { Header };
6 changes: 6 additions & 0 deletions custom.d.ts
Original file line number Diff line number Diff line change
@@ -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;
}
15 changes: 12 additions & 3 deletions next.config.js
Original file line number Diff line number Diff line change
@@ -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;
10,015 changes: 7,375 additions & 2,640 deletions package-lock.json

Large diffs are not rendered by default.

8 changes: 5 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
@@ -9,16 +9,18 @@
"lint": "next lint"
},
"dependencies": {
"@svgr/webpack": "^8.1.0",
"next": "14.0.1",
"react": "^18",
"react-dom": "^18",
"next": "14.0.1"
"styled-components": "^6.1.1"
},
"devDependencies": {
"typescript": "^5",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"eslint": "^8",
"eslint-config-next": "14.0.1"
"eslint-config-next": "14.0.1",
"typescript": "^5"
}
}
5 changes: 5 additions & 0 deletions public/assets/icons/bgm.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions public/assets/icons/chat.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions public/assets/icons/logout.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions public/assets/icons/mypage.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions public/assets/icons/search.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added styles/fonts/NotoSansKR-Bold.woff
Binary file not shown.
Binary file added styles/fonts/NotoSansKR-Medium.woff
Binary file not shown.
Binary file added styles/fonts/NotoSansKR-Regular.woff
Binary file not shown.
18 changes: 18 additions & 0 deletions styles/fonts/font.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
@font-face {
font-family: "Noto Sans KR";
font-style: normal;
font-weight: 400;
src: url(./NotoSansKR-Regular.woff) format("woff");
}
@font-face {
font-family: "Noto Sans KR";
font-style: normal;
font-weight: 500;
src: url(./NotoSansKR-Medium.woff) format("woff");
}
@font-face {
font-family: "Noto Sans KR";
font-style: normal;
font-weight: 700;
src: url(./NotoSansKR-Bold.woff) format("woff");
}
70 changes: 70 additions & 0 deletions styles/globalStyle.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
'use client';
import { createGlobalStyle } from 'styled-components';

export const GlobalStyle = createGlobalStyle`
* {
font-family: "Noto Sans KR";
line-height: 1.5;
font-size: 16px;
box-sizing: border-box;
}
#root {
position: relative;
}
html {
--color-main-yellow: #F2CC00;
--color-main-black: #050505;
--color-white: #ffffff;
--color-gray: #050505;
--color-disabled: #424242;
}
* {
padding: 0;
margin: 0;
}
body {
background-color: #222;
}
a {
color: inherit;
text-decoration: none;
}
div,
li,
section {
box-sizing: border-box;
}
ul,
li {
list-style: none;
}
input {
color: inherit;
font-family: inherit;
}
textarea {
color: inherit;
font-family: inherit;
}
::-webkit-scrollbar {
width: 0.5rem;
}
::-webkit-scrollbar-thumb {
background: var(--color-gray);
border: 0;
border-radius: 12px 12px 12px 12px;
}
`;

export default GlobalStyle;
8 changes: 7 additions & 1 deletion tsconfig.json
Original file line number Diff line number Diff line change
@@ -22,6 +22,12 @@
"@/*": ["./*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
"custom.d.ts",
".next/types/**/*.ts"
],
"exclude": ["node_modules"]
}

0 comments on commit 854b01e

Please sign in to comment.