[Wip] 공통컴포넌트 제작(메인 헤더 컴포넌트 완료 및 배지 컴포넌트 제작)

.storybook/main.ts

@@ -7,6 +7,7 @@ const config: StorybookConfig = {
     '@storybook/addon-essentials',
     '@storybook/addon-onboarding',
     '@storybook/addon-interactions',
+    '@chakra-ui/storybook-addon'
   ],
   framework: {
     name: '@storybook/react-vite',

.storybook/preview.ts

@@ -1,7 +1,11 @@
 import type { Preview } from '@storybook/react';
+import {theme} from "../src/theme"
 
 const preview: Preview = {
   parameters: {
+    chakra:{
+      theme,
+    },
     actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {

package.json

@@ -14,6 +14,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
@@ -25,6 +26,7 @@
     "react-router-dom": "^6.21.1"
   },
   "devDependencies": {
+    "@chakra-ui/storybook-addon": "^5.1.0",
     "@storybook/addon-essentials": "^7.6.6",
     "@storybook/addon-interactions": "^7.6.6",
     "@storybook/addon-links": "^7.6.6",

src/App.tsx

@@ -1,7 +1,7 @@
-import Test from '@/components/Test';
+import MainHeader from '@/components/MainHeader';
 
 const App = () => {
-  return <Test />;
+  return <MainHeader width={428} height={80} />;
 };
 
 export default App;

src/components/MainHeader/index.tsx

@@ -0,0 +1,75 @@
+import Badge from '@/common/Badge';
+import {
+  BellIcon,
+  ChatIcon,
+  MoonIcon,
+  SearchIcon,
+  SunIcon,
+} from '@chakra-ui/icons';
+import {
+  Flex,
+  IconButton,
+  Image,
+  useColorMode,
+  useColorModeValue,
+} from '@chakra-ui/react';
+
+interface MainHeaderProps {
+  width?: number | string;
+  height?: number | string;
+}
+
+const MainHeader = ({ width = 428, height = 80 }: MainHeaderProps) => {
+  const { toggleColorMode } = useColorMode();
+  const DarkModeIcon = useColorModeValue(MoonIcon, SunIcon);
+
+  return (
+    <Flex
+      w={typeof width === 'string' ? width : `${width}px`}
+      h={typeof height === 'string' ? height : `${height}px`}
+      justify="space-between"
+      align="center"
+    >
+      {/* 로고 들어갈 자리입니다. 로고 사이즈에 맞춰서 사용해주세요*/}
+      <Image
+        alt="dopen logo"
+        w="130px"
+        h={typeof height === 'string' ? height : `${height}px`}
+        src="https://via.placeholder.com/80"
+      />
+      <Flex gap="20px">
+        <IconButton
+          aria-label="toggleDarkMode"
+          icon={<DarkModeIcon color="black" boxSize="icon" />}
+          bgColor="white"
+          size="md"
+          onClick={toggleColorMode}
+        />
+        <IconButton
+          aria-label="message"
+          icon={<ChatIcon color="black" boxSize="icon" />}
+          bgColor="white"
+          size="md"
+        />
+        <IconButton
+          aria-label="search"
+          icon={<SearchIcon color="black" boxSize="icon" />}
+          bgColor="white"
+          size="md"
+        />
+        <IconButton
+          aria-label="notify"
+          icon={
+            <Badge count={1}>
+              <BellIcon color="black" boxSize="icon" />
+            </Badge>
+          }
+          bgColor="white"
+          size="md"
+        />
+      </Flex>
+    </Flex>
+  );
+};
+
+export default MainHeader;

src/components/common/Badge/index.tsx

@@ -0,0 +1,88 @@
+import styled from '@emotion/styled';
+import { ReactNode } from 'react';
+
+interface BadgeProps {
+  children: ReactNode;
+  count: number;
+  size?: string;
+  maxCount?: number;
+  backgroundColor?: string;
+  textColor?: string;
+  dot?: boolean;
+  showZero?: boolean;
+}
+
+const Badge = ({
+  children,
+  count,
+  maxCount,
+  size = '16px',
+  backgroundColor = 'red',
+  textColor = 'white',
+  dot = false,
+  showZero = false,
+  ...props
+}: BadgeProps) => {
+  const colorStyle = {
+    backgroundColor,
+    color: textColor,
+  };
+
+  let badge = null;
+
+  if (count) {
+    badge = (
+      <Super size={size} style={colorStyle}>
+        {maxCount && count > maxCount ? `${maxCount}+` : count}
+      </Super>
+    );
+  } else {
+    if (count !== undefined) {
+      badge = showZero ? (
+        <Super size={size} style={colorStyle}>
+          0
+        </Super>
+      ) : null;
+    } else if (dot) {
+      badge = (
+        <Super size={size} className="dot" style={colorStyle}>
+          0
+        </Super>
+      );
+    }
+  }
+
+  return (
+    <BadgeContainer {...props}>
+      {children}
+      {count > 0 || (count === 0 && showZero) ? badge : null}
+    </BadgeContainer>
+  );
+};
+
+const BadgeContainer = styled.div`
+  position: relative;
+  width: 24px;
+  height: 24px;
+`;
+
+const Super = styled.span<{ size: string }>`
+  position: absolute;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  right: 0;
+  bottom: 0;
+  transform: translate(25%, 25%);
+  height: ${({ size }) => size};
+  width: ${({ size }) => size};
+  font-size: 12px;
+  border-radius: 50%;
+  color: white;
+  background-color: #f44;
+  &.dot {
+    border-radius: 50%;
+  }
+`;
+
+export default Badge;