[feature/#1/header] - 헤더 컴포넌트 구현

package.json

@@ -28,6 +28,7 @@
     "axios": "^1.6.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.0.1",
     "react-router-dom": "^6.22.0",
     "styled-components": "^6.1.8",
     "zustand": "^4.5.0"

src/components/Header/Header.tsx

@@ -0,0 +1,65 @@
+import { IoSearch } from "react-icons/io5"
+
+import {
+  Box,
+  Center,
+  Flex,
+  Icon,
+  Input,
+  InputGroup,
+  InputRightElement,
+  Spacer,
+} from "@chakra-ui/react"
+
+import HeaderLogo from "./components/HeaderLogo"
+import Menu from "./components/Menu"
+
+const Header = () => {
+  return (
+    <Center
+      w="100%"
+      position="fixed"
+      bg="white"
+      boxShadow="md">
+      <Flex
+        flex="1"
+        h="headerHeight"
+        maxW="1280px"
+        align="center"
+        gap="1.6rem"
+        px="1.6rem">
+        {/* 로고 */}
+        <Box>
+          <HeaderLogo />
+        </Box>
+        {/* 검색창 */}
+        <Box
+          pl="1.5rem"
+          alignSelf="end"
+          pb="2rem">
+          <InputGroup>
+            <InputRightElement>
+              <Icon
+                as={IoSearch}
+                w="2rem"
+                h="2rem"
+              />
+            </InputRightElement>
+            <Input
+              size="lg"
+              variant="flushed"
+              placeholder="검색어를 입력하세요"
+            />
+          </InputGroup>
+        </Box>
+        <Spacer />
+        {/* 메뉴 */}
+        <Box>
+          <Menu />
+        </Box>
+      </Flex>
+    </Center>
+  )
+}
+
+export default Header

src/components/Header/components/HeaderLogo.tsx

@@ -0,0 +1,20 @@
+import { Link as ReactRouterLink } from "react-router-dom"
+
+import { Image, Link } from "@chakra-ui/react"
+
+import SidePeekLogoSVG from "@assets/svgs/sidepeek_logo.svg"
+
+const HeaderLogo = () => {
+  return (
+    <Link
+      as={ReactRouterLink}
+      to="/">
+      <Image
+        src={SidePeekLogoSVG}
+        alt="side peek logo"
+      />
+    </Link>
+  )
+}
+
+export default HeaderLogo

src/components/Header/components/Menu.tsx

@@ -0,0 +1,51 @@
+import { FaRegBell } from "react-icons/fa"
+
+import { Avatar, HStack, Icon, IconButton } from "@chakra-ui/react"
+
+import NotificationPopover from "./NotificationPopover"
+import ProfilePopover from "./ProfilePopover"
+
+const Menu = () => {
+  return (
+    <HStack spacing="1.6rem">
+      <NotificationPopover
+        NotificationIconButton={
+          <IconButton
+            aria-label="notification popover"
+            icon={
+              <Icon
+                as={FaRegBell}
+                w="3rem"
+                h="3rem"
+              />
+            }
+            bg={"transparent"}
+            _before={{
+              content: "''",
+              position: "absolute",
+              top: "5%",
+              right: "10%",
+              width: "1rem",
+              height: "1rem",
+              bg: "red",
+              borderRadius: "full",
+            }}
+          />
+        }
+      />
+      <ProfilePopover
+        ProfileButton={
+          <Avatar
+            as="button"
+            size="md"
+            aria-label="profile popover"
+            transition="all 0.2s"
+            _hover={{ filter: "brightness(90%)" }}
+          />
+        }
+      />
+    </HStack>
+  )
+}
+
+export default Menu

src/components/Header/components/NotificationPopover.tsx

@@ -0,0 +1,38 @@
+import { ReactNode } from "react"
+
+import {
+  Divider,
+  Heading,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverCloseButton,
+  PopoverContent,
+  PopoverHeader,
+  PopoverTrigger,
+} from "@chakra-ui/react"
+
+interface NotificationPopoverProps {
+  NotificationIconButton: ReactNode
+}
+
+const NotificationPopover = ({
+  NotificationIconButton,
+}: NotificationPopoverProps) => {
+  return (
+    <Popover>
+      <PopoverTrigger>{NotificationIconButton}</PopoverTrigger>
+      <PopoverContent>
+        <PopoverArrow />
+        <PopoverCloseButton />
+        <PopoverHeader>
+          <Heading size="md">알림</Heading>
+        </PopoverHeader>
+        <Divider />
+        <PopoverBody>이쪽에 알림 목록을 넣을 예정입니다</PopoverBody>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export default NotificationPopover

src/components/Header/components/ProfilePopover.tsx

@@ -0,0 +1,36 @@
+import { ReactNode } from "react"
+
+import {
+  Divider,
+  Heading,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverCloseButton,
+  PopoverContent,
+  PopoverHeader,
+  PopoverTrigger,
+} from "@chakra-ui/react"
+
+interface ProfilePopoverProps {
+  ProfileButton: ReactNode
+}
+
+const ProfilePopover = ({ ProfileButton }: ProfilePopoverProps) => {
+  return (
+    <Popover>
+      <PopoverTrigger>{ProfileButton}</PopoverTrigger>
+      <PopoverContent>
+        <PopoverArrow />
+        <PopoverCloseButton />
+        <PopoverHeader>
+          <Heading size="md">프로필</Heading>
+        </PopoverHeader>
+        <Divider />
+        <PopoverBody>이쪽에 프로필 팝오버 목록을 넣을 예정입니다</PopoverBody>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export default ProfilePopover

src/routes/index.tsx

@@ -1,6 +1,7 @@
 import { Outlet, createBrowserRouter } from "react-router-dom"
-import App from "@/App"
+
 import TestPage from "@/pages/TestPage/TestPage"
+
 import ErrorPage from "@pages/ErrorPage/ErrorPage"
 import HomePage from "@pages/HomePage/HomePage"
 import LoginPage from "@pages/LoginPage/LoginPage"

src/styles/theme.ts

@@ -81,6 +81,9 @@ const themeConfig = {
     toast: 90,
     tooltip: 100,
   },
+  sizes: {
+    headerHeight: "9.5rem",
+  },
   semanticTokens: {},
 }