@dotss/ui 0.0.4

package/components/Backdrop/Backdrop.tsx

@@ -0,0 +1,140 @@
+import type { HTMLAttributes, RefObject } from 'react';
+import { forwardRef, useEffect, useRef, useState } from 'react';
+
+import { createPortal } from 'react-dom';
+
+import type { GeneralComponentProps } from '@typings/component';
+
+import { Dimmed, DimmedInner } from './Backdrop.styles';
+
+export interface BackdropProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
+  open?: boolean;
+  onClose?: () => void;
+  transitionDuration?: number;
+  fullScreen?: boolean;
+  centered?: boolean;
+  containerRef?: RefObject<HTMLElement>;
+}
+
+const Backdrop = forwardRef<HTMLDivElement, BackdropProps>(function Backdrop(
+  {
+    children,
+    open,
+    onClose,
+    transitionDuration = 200,
+    fullScreen,
+    centered,
+    containerRef,
+    inlineCSS,
+    ...props
+  },
+  ref
+) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isClosed, setIsClosed] = useState(true);
+  const [containerTop, setContainerTop] = useState(0);
+  const [containerLeft, setContainerLeft] = useState(0);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [containerHeight, setContainerHeight] = useState(0);
+
+  const openTimerRef = useRef<ReturnType<typeof setTimeout>>();
+  const closeTimerRef = useRef<ReturnType<typeof setTimeout>>();
+
+  const hasContainer = !!containerRef?.current;
+
+  useEffect(() => {
+    if (open) {
+      if (closeTimerRef.current) {
+        clearTimeout(closeTimerRef.current);
+      }
+
+      document.body.style.overflow = 'hidden';
+
+      setIsClosed(false);
+
+      openTimerRef.current = setTimeout(() => {
+        setIsOpen(true);
+        // Mount Delay
+      }, 100);
+    }
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) {
+      if (openTimerRef.current) {
+        clearTimeout(openTimerRef.current);
+      }
+
+      document.body.removeAttribute('style');
+
+      setIsOpen(false);
+
+      closeTimerRef.current = setTimeout(() => {
+        setIsClosed(true);
+      }, transitionDuration);
+    }
+  }, [open, transitionDuration]);
+
+  useEffect(() => {
+    const containerElement = containerRef?.current;
+
+    const handleResize = () => {
+      if (!containerElement) return;
+
+      setContainerTop(containerElement?.offsetTop || 0);
+      setContainerLeft(containerElement.getBoundingClientRect()?.left || 0);
+      setContainerWidth(containerElement?.offsetWidth || 0);
+      setContainerHeight(containerElement?.offsetHeight || 0);
+    };
+
+    if (containerElement) {
+      handleResize();
+
+      window.addEventListener('resize', handleResize);
+    }
+
+    return () => {
+      if (containerElement) {
+        window.removeEventListener('resize', handleResize);
+      }
+    };
+  }, [containerRef]);
+
+  useEffect(() => {
+    return () => {
+      document.body.removeAttribute('style');
+
+      if (openTimerRef.current) {
+        clearTimeout(openTimerRef.current);
+      }
+      if (closeTimerRef.current) {
+        clearTimeout(closeTimerRef.current);
+      }
+    };
+  }, []);
+
+  if (isClosed) return null;
+
+  return createPortal(
+    <Dimmed
+      ref={ref}
+      open={isOpen}
+      transitionDuration={transitionDuration}
+      onClick={onClose}
+      hasContainer={hasContainer}
+      containerTop={containerTop}
+      containerLeft={containerLeft}
+      containerWidth={containerWidth}
+      containerHeight={containerHeight}
+      {...props}
+      css={inlineCSS}
+    >
+      <DimmedInner fullScreen={fullScreen} centered={centered}>
+        {children}
+      </DimmedInner>
+    </Dimmed>,
+    document.body
+  );
+});
+
+export default Backdrop;

package/components/Backdrop/index.ts

@@ -0,0 +1,3 @@
+import Backdrop from './Backdrop';
+
+export default Backdrop;

package/components/Badge/Badge.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Button from '@components/Button';
+import Flexbox from '@components/Flexbox';
+import Typography from '@components/Typography';
+
+import Badge from './Badge';
+
+const meta = {
+  title: 'Component/Badge',
+  component: Badge,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Absolute: Story = {
+  render: (props) => {
+    return (
+      <Badge
+        position={props?.position}
+        color={props?.color}
+        size={props?.size}
+        horizontal={props?.horizontal}
+        content={props?.content}
+      >
+        <Button>Button</Button>
+      </Badge>
+    );
+  },
+  args: {
+    position: 'absolute',
+    size: 'large',
+    color: 'pink',
+    horizontal: 'right',
+    content: 2
+  }
+};
+
+export const Static: Story = {
+  render: (props) => {
+    return (
+      <Flexbox alignItems="center" justifyContent="space-between" gap={10}>
+        <Typography variant="h4B">놀이부터 돌봄까지</Typography>
+        <Badge
+          position={props?.position}
+          color={props?.color}
+          size={props?.size}
+          horizontal={props?.horizontal}
+          content={props?.content}
+        />
+      </Flexbox>
+    );
+  },
+  args: {
+    position: 'static',
+    size: 'large',
+    color: 'pink',
+    horizontal: 'right',
+    content: 2
+  }
+};

package/components/Badge/Badge.styles.ts

@@ -0,0 +1,75 @@
+import type { CSSObject } from '@emotion/styled';
+import styled from '@emotion/styled';
+
+import type { BadgeProps } from './Badge';
+
+export const Wrapper = styled.div`
+  position: relative;
+  width: inherit;
+`;
+
+export const StyledBadge = styled.div<
+  Pick<BadgeProps, 'position' | 'color' | 'size' | 'horizontal'>
+>`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: ${({ position }) => position};
+  border-radius: 20px;
+
+  ${({
+    theme: {
+      palette: { pink, etc }
+    },
+    color
+  }): CSSObject => {
+    let cssObject: CSSObject = {
+      backgroundColor: pink['90']
+    };
+
+    if (color === 'orange') {
+      cssObject = {
+        backgroundColor: etc.orange
+      };
+    }
+
+    return cssObject;
+  }};
+
+  ${({ size, horizontal }): CSSObject => {
+    let cssObject: CSSObject = {
+      height: 8,
+      minWidth: 8,
+      top: 0,
+      left: horizontal === 'left' ? 0 : 'auto',
+      right: horizontal === 'right' ? 0 : 'auto'
+    };
+
+    if (size === 'large') {
+      cssObject = {
+        height: 16,
+        minWidth: 16,
+        top: -4,
+        left: horizontal === 'left' ? -8 : 'auto',
+        right: horizontal === 'right' ? -8 : 'auto'
+      };
+    }
+
+    return cssObject;
+  }};
+`;
+
+export const Content = styled.span`
+  ${({
+    theme: {
+      palette: { grey },
+      typography: { c4B }
+    }
+  }) => ({
+    fontSize: c4B.size,
+    fontWeight: c4B.weight,
+    lineHeight: c4B.lineHeight,
+    letterSpacing: c4B.letterSpacing,
+    color: grey.white
+  })}
+`;

package/components/Badge/Badge.tsx

@@ -0,0 +1,67 @@
+import type { HTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+
+import type { ColorScaleKey } from '@typings/color';
+import type { GeneralComponentProps, Size } from '@typings/component';
+
+import type { EtcColorKey } from '@typings/theme/core';
+
+import { Content, StyledBadge, Wrapper } from './Badge.styles';
+
+export interface BadgeProps
+  extends GeneralComponentProps<Omit<HTMLAttributes<HTMLDivElement>, 'content'>> {
+  color?: Extract<ColorScaleKey, 'pink'> | Extract<EtcColorKey, 'orange'>;
+  size?: Extract<Size, 'small' | 'large'>;
+  position?: 'absolute' | 'static';
+  horizontal?: 'left' | 'right';
+  content?: string | number;
+}
+
+const Badge = forwardRef<HTMLDivElement, BadgeProps>(function Badge(
+  {
+    children,
+    color,
+    size = 'small',
+    position = 'absolute',
+    horizontal = 'right',
+    content,
+    inlineCSS,
+    ...props
+  },
+  ref
+) {
+  if (position === 'static') {
+    return (
+      <StyledBadge
+        ref={ref}
+        position={position}
+        color={color}
+        size={size}
+        horizontal={horizontal}
+        {...props}
+        css={inlineCSS}
+      >
+        {size === 'large' && content && <Content>{content}</Content>}
+      </StyledBadge>
+    );
+  }
+
+  return (
+    <Wrapper>
+      <StyledBadge
+        ref={ref}
+        position={position}
+        color={color}
+        size={size}
+        horizontal={horizontal}
+        {...props}
+        css={inlineCSS}
+      >
+        {size === 'large' && content && <Content>{content}</Content>}
+      </StyledBadge>
+      {children}
+    </Wrapper>
+  );
+});
+
+export default Badge;

package/components/Badge/index.ts

@@ -0,0 +1,3 @@
+import Badge from './Badge';
+
+export default Badge;