[ feat ] Header 컴포넌트 구현

.gitignore

@@ -26,6 +26,7 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # local env files
+.env
 .env*.local
 
 # vercel

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 <StHeaderWrapper></StHeaderWrapper>;
+  return (
+    <StHeaderWrapper>
+      <StTopLink>
+        <p>
+          <a>고객센터</a> | <a>마이페이지</a> | <a>로그인</a>
+        </p>
+      </StTopLink>
+      <StHeaderContents>
+        <Link href="/main">
+          <IcNoriHeaderLogo />
+        </Link>
+        <StSearchWrapper>
+          <StSearchBar>
+            <input type="text" placeholder="상품명, 스토어명을 검색해보세요!" />
+            <IcSearchIcon />
+          </StSearchBar>
+          <StMenu>
+            <Link href="/toyView">
+              <StMenuBtn type="button">상품보기</StMenuBtn>
+            </Link>
+            <Link href="/community">
+              <StMenuBtn type="button">커뮤니티</StMenuBtn>
+            </Link>
+            <StMenuBtn>ABOUT</StMenuBtn>
+          </StMenu>
+        </StSearchWrapper>
+      </StHeaderContents>
+    </StHeaderWrapper>
+  );
 }
 
 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;
 `;

pages/main.tsx

@@ -1,3 +1,28 @@
+import styled from '@emotion/styled';
+
 export default function main() {
-  return <div>메인입니다</div>;
+  return (
+    <>
+      <StMainSection>
+        <StConceptArticle>
+          <StConceptTitle>이번주 인기 장난감</StConceptTitle>
+        </StConceptArticle>
+      </StMainSection>
+    </>
+  );
 }
+
+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};
+`;

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';