diff --git a/.gitignore b/.gitignore
index 737d872..ec1856b 100755
--- a/.gitignore
+++ b/.gitignore
@@ -26,6 +26,7 @@ yarn-error.log*
.pnpm-debug.log*
# local env files
+.env
.env*.local
# vercel
diff --git a/components/common/Header.tsx b/components/common/Header.tsx
index 52423a2..1dda4e4 100644
--- a/components/common/Header.tsx
+++ b/components/common/Header.tsx
@@ -1,15 +1,126 @@
import styled from '@emotion/styled';
+import Link from 'next/link';
+import { IcNoriHeaderLogo, IcSearchIcon } from '../../public/assets/icons';
+
export default function Header() {
- return ;
+ return (
+
+
+
+ 고객센터 | 마이페이지 | 로그인
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 상품보기
+
+
+ 커뮤니티
+
+ ABOUT
+
+
+
+
+ );
}
const StHeaderWrapper = styled.header`
position: sticky;
- padding-top: 32px;
- top: -32px;
+ top: -3.2rem;
width: 100%;
height: 11.4rem;
- background-color: #31cc94;
+ background-color: ${({ theme }) => theme.colors.mainGreen};
+ color: ${({ theme }) => theme.colors.white};
+`;
+const StTopLink = styled.div`
+ display: flex;
+ align-items: center;
+
+ padding: 0rem;
+ padding-top: 0.7rem;
+ padding-left: 75%;
+ a {
+ ${({ theme }) => theme.fonts.b7_12_regular_120}
+
+ cursor: pointer;
+
+ &:hover {
+ ${({ theme }) => theme.fonts.b7_12_bold_120}
+ }
+ }
+`;
+const StHeaderContents = styled.section`
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+
+ width: 100%;
+ margin-top: 2.9rem;
+`;
+const StSearchWrapper = styled.div`
+ display: flex;
+ align-items: center;
+
+ gap: 4.8rem;
+`;
+const StSearchBar = styled.div`
+ display: flex;
+ justify-content: space-evenly;
+ align-items: center;
+
+ width: 28.5rem;
+ height: 4.2rem;
+
+ background: ${({ theme }) => theme.colors.white_opacity_14};
+ border-radius: 0.8rem;
+
+ input {
+ height: 2.2rem;
+ width: 22rem;
+
+ color: ${({ theme }) => theme.colors.white_opacity_75};
+ ${({ theme }) => theme.fonts.b3_16_medium_140}
+
+ &::placeholder {
+ color: ${({ theme }) => theme.colors.white_opacity_75};
+ }
+
+ :focus::placeholder {
+ opacity: 0;
+ }
+ }
+`;
+const StMenu = styled.div`
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+
+ width: 27.3rem;
+ height: 2.6rem;
+ gap: 3.2rem;
+
+ line-height: 2.6rem;
+`;
+const StMenuBtn = styled.a`
+ ${({ theme }) => theme.fonts.t4_18_regular_150}
+
+ color: ${({ theme }) => theme.colors.white};
+
+ &:hover {
+ ${({ theme }) => theme.fonts.t4_18_semibold_150};
+ }
+ cursor: pointer;
`;
diff --git a/pages/main.tsx b/pages/main.tsx
index 572cef1..cd954dd 100644
--- a/pages/main.tsx
+++ b/pages/main.tsx
@@ -1,3 +1,28 @@
+import styled from '@emotion/styled';
+
export default function main() {
- return 메인입니다
;
+ return (
+ <>
+
+
+ 이번주 인기 장난감
+
+
+
+ );
}
+
+const StMainSection = styled.section`
+ display: flex;
+ flex-direction: column;
+
+ align-items: center;
+`;
+const StConceptArticle = styled.article`
+ margin-top: 6.7rem;
+`;
+const StConceptTitle = styled.div`
+ padding-bottom: 5rem;
+
+ ${({ theme }) => theme.fonts.t2_26_semibold_150};
+`;
diff --git a/public/assets/icons/index.ts b/public/assets/icons/index.ts
index 746631e..7362380 100644
--- a/public/assets/icons/index.ts
+++ b/public/assets/icons/index.ts
@@ -1 +1,2 @@
-export { default as IcNoriLogo } from './noriLogoIcon.svg';
+export { default as IcNoriHeaderLogo } from './noriHeaderIcon.svg';
+export {default as IcSearchIcon } from './searchIcon.svg';
diff --git a/public/assets/icons/noriHeaderIcon.svg b/public/assets/icons/noriHeaderIcon.svg
new file mode 100644
index 0000000..f094129
--- /dev/null
+++ b/public/assets/icons/noriHeaderIcon.svg
@@ -0,0 +1,11 @@
+
diff --git a/public/assets/icons/noriLogoIcon.svg b/public/assets/icons/noriLogoIcon.svg
deleted file mode 100644
index fa2af80..0000000
--- a/public/assets/icons/noriLogoIcon.svg
+++ /dev/null
@@ -1,43 +0,0 @@
-
diff --git a/public/assets/icons/searchIcon.svg b/public/assets/icons/searchIcon.svg
new file mode 100644
index 0000000..35fed2d
--- /dev/null
+++ b/public/assets/icons/searchIcon.svg
@@ -0,0 +1,3 @@
+
diff --git a/styles/emotion.d.ts b/styles/emotion.d.ts
index 3f00078..cc738b6 100644
--- a/styles/emotion.d.ts
+++ b/styles/emotion.d.ts
@@ -1,8 +1,50 @@
-import { SerializedStyles } from '@emotion/utils';
+import { SerializedStyles } from '@emotion/react';
-declare module '@emotion/utils' {
+declare module '@emotion/react' {
export interface Theme {
- colors: {};
- fonts: {};
+ colors: {
+ mainGreen: string;
+ mainDarkgreen: string;
+ subYellow: string;
+ orange: string;
+ blue: string;
+ lightGreen: string;
+ white: string;
+ white_opacity_75: string;
+ white_opacity_40: string;
+ white_opacity_14: string;
+ gray001: string;
+ gray002: string;
+ gray003: string;
+ gray004: string;
+ gray005: string;
+ gray006: string;
+ gray007: string;
+ gray008: string;
+ gray009: string;
+ black: string;
+ };
+ fonts: {
+ t1_28_medium_150: SerializedStyles;
+ t2_26_semibold_150: SerializedStyles;
+ t3_19_bold_140: SerializedStyles;
+ t3_19_medium_130: SerializedStyles;
+ t4_18_semibold_150: SerializedStyles;
+ t4_18_regular_150: SerializedStyles;
+ b1_20_bold_140: SerializedStyles;
+ b2_18_bold_140: SerializedStyles;
+ b2_18_medium_130: SerializedStyles;
+ b2_18_regular_130: SerializedStyles;
+ b3_16_bold_140: SerializedStyles;
+ b3_16_semibold_140: SerializedStyles;
+ b3_16_medium_140: SerializedStyles;
+ b4_15_semibold_146: SerializedStyles;
+ b5_14_semibold_140: SerializedStyles;
+ b5_14_medium_140: SerializedStyles;
+ b6_13_medium_120: SerializedStyles;
+ b7_12_bold_120: SerializedStyles;
+ b7_12_medium_140: SerializedStyles;
+ b7_12_regular_120: SerializedStyles;
+ };
}
}
diff --git a/styles/theme.ts b/styles/theme.ts
index a67ba33..91dada5 100644
--- a/styles/theme.ts
+++ b/styles/theme.ts
@@ -1,33 +1,83 @@
import { css, Theme } from '@emotion/react';
-const colors = {};
+const colors = {
+ mainGreen: '#1DB981',
+ mainDarkgreen: '#1D8669',
+ subYellow: '#FFE766',
+ orange: '#FF9D55',
+ blue: '#4484FF',
+ lightGreen: '#F5FFF0',
+ white: '#FFFFFF',
+ white_opacity_75: 'rgba(255, 255, 255, 0.75)',
+ white_opacity_40: 'rgba(255, 255, 255, 0.4)',
+ white_opacity_14: 'rgba(255, 255, 255, 0.14)',
+
+ gray001: '#FCFCFC',
+ gray002: '#F8F8F8',
+ gray003: '#E8E8E8',
+ gray004: '#E2E2E2',
+ gray005: '#D9D9D9',
+ gray006: '#A9A9A9',
+ gray007: '#9D9D9D',
+ gray008: '#787878',
+ gray009: '#636363',
+ black: '#636363',
+};
interface Font {
weight: 400 | 500 | 600 | 700 | 800;
size: number;
- height: 'default' | 'long';
- spacing: 'default' | 'close';
-}
-
-interface TempFont extends Omit {
height: number;
+ spacing: 0;
}
-const fontHeight = {
- default: 1.3,
- long: 1.5,
-} as const;
-
-function FONT({ weight, size, height, spacing }: Font | TempFont) {
+function FONT({ weight, size, height, spacing }: Font) {
return css`
font-family: Pretendard;
font-weight: ${weight};
font-size: ${size}rem;
- line-height: ${typeof height === 'number' ? height : fontHeight[height]};
+ line-height: ${height}rem;
+ spacing: ${spacing}%;
`;
}
-const fonts = {};
+const fonts = {
+ t1_28_medium_150: FONT({ weight: 500, size: 2.8, height: 4.2, spacing: 0 }),
+ t2_26_semibold_150: FONT({ weight: 600, size: 2.6, height: 3.9, spacing: 0 }),
+ t3_19_bold_140: FONT({ weight: 700, size: 1.9, height: 2.66, spacing: 0 }),
+ t3_19_medium_130: FONT({ weight: 500, size: 1.8, height: 2.47, spacing: 0 }),
+ t4_18_semibold_150: FONT({ weight: 600, size: 1.8, height: 2.7, spacing: 0 }),
+ t4_18_regular_150: FONT({ weight: 400, size: 1.8, height: 2.7, spacing: 0 }),
+ b1_20_bold_140: FONT({ weight: 700, size: 2, height: 2.8, spacing: 0 }),
+ b2_18_bold_140: FONT({ weight: 700, size: 1.8, height: 2.52, spacing: 0 }),
+ b2_18_medium_130: FONT({ weight: 500, size: 1.8, height: 2.34, spacing: 0 }),
+ b2_18_regular_130: FONT({ weight: 400, size: 1.8, height: 2.34, spacing: 0 }),
+ b3_16_bold_140: FONT({ weight: 700, size: 1.6, height: 2.24, spacing: 0 }),
+ b3_16_semibold_140: FONT({
+ weight: 600,
+ size: 1.6,
+ height: 2.24,
+ spacing: 0,
+ }),
+ b3_16_medium_140: FONT({ weight: 500, size: 1.6, height: 2.24, spacing: 0 }),
+ b4_15_semibold_146: FONT({
+ weight: 600,
+ size: 1.5,
+ height: 2.19,
+ spacing: 0,
+ }),
+ b5_14_semibold_140: FONT({
+ weight: 600,
+ size: 1.4,
+ height: 1.96,
+ spacing: 0,
+ }),
+ b5_14_medium_140: FONT({ weight: 500, size: 1.4, height: 1.96, spacing: 0 }),
+ b6_13_medium_120: FONT({ weight: 500, size: 1.3, height: 1.56, spacing: 0 }),
+ b7_12_bold_120: FONT({ weight: 700, size: 1.2, height: 1.44, spacing: 0 }),
+ b7_12_medium_140: FONT({ weight: 500, size: 1.2, height: 1.68, spacing: 0 }),
+ b7_12_regular_120: FONT({ weight: 400, size: 1.2, height: 1.44, spacing: 0 }),
+};
const theme: Theme = {
colors,