Merge pull request #17 from prgrms-fe-devcourse/12-feat/headercomponent

12 feat/headercomponent

src/widgets/header/ui/Header.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import Header from './Header'
+
+const meta = {
+  title: 'Widgets/Header',
+  component: Header,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Header>
+
+export default meta
+type Story = StoryObj<typeof Header>
+
+export const Default: Story = {
+  args: {
+    isLoggedIn: false,
+  },
+}

src/widgets/header/ui/Header.styled.tsx

@@ -0,0 +1,34 @@
+import styled from 'styled-components'
+
+export const Container = styled.header`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem;
+  margin: 0 10% 0 10%;
+`
+
+export const Logo = styled.div`
+  display: flex;
+  cursor: pointer;
+`
+
+export const Nav = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  font-size: 15px;
+`
+
+export const NavItem = styled.div`
+  display: flex;
+  border-radius: 10%;
+  padding: 1rem;
+  cursor: pointer;
+  &:hover {
+    background-color: #f2f2f2;
+  }
+`

src/widgets/header/ui/Header.tsx

@@ -0,0 +1,19 @@
+import { Container, Logo, Nav, NavItem } from './Header.styled'
+
+const Header = () => {
+  return (
+    <Container>
+      <Logo>
+        <img src="/logo.svg" alt="logo" />
+      </Logo>
+      <Nav>
+        <NavItem>홈</NavItem>
+        <NavItem>타임라인</NavItem>
+        <NavItem>내 일기</NavItem>
+        <NavItem>마이페이지</NavItem>
+      </Nav>
+    </Container>
+  )
+}
+
+export default Header