@kimdw-rtk/ui 0.0.0

package/src/components/Chip/Chip.tsx

@@ -0,0 +1,37 @@
+import { forwardRef } from 'react';
+
+import clsx from 'clsx';
+
+import { sx } from '#styles';
+import type { UIComponent } from '#types';
+
+import * as s from './Chip.css';
+
+type ChipProps = UIComponent<'div', typeof s.chip>;
+
+export const Chip = forwardRef<HTMLDivElement, ChipProps>(
+  (
+    {
+      children,
+      className,
+      color = 'primary',
+      size = 'md',
+      sx: propSx,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={clsx(s.chip({ color, size }), className, sx(propSx))}
+        {...props}
+      >
+        <span>{children}</span>
+      </div>
+    );
+  },
+);
+Chip.displayName = 'Chip';
+
+export { s as chipCss };

package/src/components/Chip/index.ts

@@ -0,0 +1 @@
+export * from './Chip';

package/src/components/Confirm/index.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { useImperativeHandle, type ReactNode, type Ref } from 'react';
+
+import { useOverlay, usePreventKeyboardInput } from '@kimdw-rtk/utils';
+
+import { Box, Button, Dialog, DialogContent, DialogFooter } from '#components';
+
+interface ConfirmProps {
+  children: ReactNode;
+  ref?: Ref<{ close: () => void }>;
+  onConfirm: () => void;
+  onCancle: () => void;
+}
+
+export const Confirm = ({
+  children,
+  ref,
+  onConfirm,
+  onCancle,
+}: ConfirmProps) => {
+  const { close } = useOverlay();
+  usePreventKeyboardInput();
+
+  useImperativeHandle(ref, () => ({
+    close,
+  }));
+
+  return (
+    <Dialog>
+      <DialogContent>{children}</DialogContent>
+      <DialogFooter>
+        <Box flex gap="md">
+          <Button size="sm" onClick={onConfirm}>
+            확인
+          </Button>
+          <Button color="secondary" size="sm" onClick={onCancle}>
+            취소
+          </Button>
+        </Box>
+      </DialogFooter>
+    </Dialog>
+  );
+};

package/src/components/Dialog/Dialog.css.ts

@@ -0,0 +1,25 @@
+import { style } from '@vanilla-extract/css';
+
+import { theme } from '#themes';
+
+export const container = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '1rem',
+  overflowY: 'auto',
+
+  maxWidth: 'calc(100vw - 2rem)',
+  minWidth: 'min(20rem, calc(100vw - 2rem))',
+  maxHeight: 'calc(100vh - 2rem)',
+  borderRadius: theme.borderRadius,
+  boxSizing: 'border-box',
+
+  backgroundColor: `rgb(${theme.color.background})`,
+});
+
+export const message = style({
+  marginBottom: '1rem',
+
+  lineHeight: '150%',
+  wordBreak: 'break-all',
+});

package/src/components/Dialog/Dialog.spec.tsx

@@ -0,0 +1,26 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+
+import { Dialog, DialogContent, DialogFooter, DialogHeader } from '#components';
+
+import { uiTest } from '../../tests/uiTest';
+
+describe('Dialog 컴포넌트', () => {
+  uiTest(Dialog, 'Dialog');
+  uiTest(DialogHeader, 'DialogHeader');
+  uiTest(DialogContent, 'DialogContent');
+  uiTest(DialogFooter, 'DialogFooter');
+
+  it('DialogHeader의 닫기 버튼을 클릭하면 onCloseClick이 호출되어야 한다', () => {
+    const handleCloseClick = jest.fn();
+    render(
+      <Dialog>
+        <DialogHeader onCloseClick={handleCloseClick}>Header</DialogHeader>
+        <DialogContent>Content</DialogContent>
+      </Dialog>,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '닫기' }));
+
+    expect(handleCloseClick).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/Dialog/Dialog.tsx

@@ -0,0 +1,30 @@
+import { forwardRef } from 'react';
+
+import clsx from 'clsx';
+
+import { Box } from '#components';
+import { sx } from '#styles';
+import type { UIComponent } from '#types';
+
+import * as s from './Dialog.css';
+
+type DialogProps = Omit<UIComponent<'div'>, 'color'>;
+
+export const Dialog = forwardRef<HTMLDivElement, DialogProps>(
+  ({ children, className, sx: propSx, ...props }, ref) => {
+    return (
+      <Box
+        ref={ref}
+        flex
+        flexDirection="row"
+        gap="lg"
+        boxShadow="border-sm"
+        className={clsx(s.container, className, sx(propSx))}
+        {...props}
+      >
+        {children}
+      </Box>
+    );
+  },
+);
+Dialog.displayName = 'Dialog';

package/src/components/Dialog/DialogContent.css.ts

@@ -0,0 +1,16 @@
+import { styleWithLayer } from '#styleUtils';
+import { theme } from '#themes';
+
+import * as header from './DialogHeader.css';
+
+export const container = styleWithLayer({
+  padding: '0 1.5rem 1.5rem 1.5rem',
+
+  wordBreak: 'break-all',
+
+  selectors: {
+    [`${header.container} + &`]: {
+      color: `rgb(${theme.color['muted-foreground']})`,
+    },
+  },
+});

package/src/components/Dialog/DialogContent.tsx

@@ -0,0 +1,26 @@
+import { forwardRef } from 'react';
+
+import clsx from 'clsx';
+
+import { Box } from '#components';
+import { sx } from '#styles';
+import type { UIComponent } from '#types';
+
+import * as s from './DialogContent.css';
+
+type DialogContentProps = Omit<UIComponent<'div'>, 'color'>;
+
+export const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(
+  ({ children, className, sx: propSx, ...props }, ref) => {
+    return (
+      <Box
+        ref={ref}
+        className={clsx(s.container, className, sx(propSx))}
+        {...props}
+      >
+        {children}
+      </Box>
+    );
+  },
+);
+DialogContent.displayName = 'DialogContent';

package/src/components/Dialog/DialogFooter.css.ts

@@ -0,0 +1,20 @@
+import { styleWithLayer } from '#styleUtils';
+
+export const container = styleWithLayer({
+  maxWidth: 'calc(100vw - 2rem)',
+  minWidth: 'min(20rem, calc(100vw - 2rem))',
+  padding: '1rem',
+  borderRadius: '0.25rem',
+  boxSizing: 'border-box',
+
+  backgroundColor: '#fff',
+
+  userSelect: 'none',
+});
+
+export const message = styleWithLayer({
+  marginBottom: '1rem',
+
+  lineHeight: '150%',
+  wordBreak: 'break-all',
+});

package/src/components/Dialog/DialogFooter.tsx

@@ -0,0 +1,26 @@
+import { forwardRef } from 'react';
+
+import clsx from 'clsx';
+
+import { Box } from '#components';
+import { sx } from '#styles';
+import type { UIComponent } from '#types';
+
+type DialogFooterProps = Omit<UIComponent<'div'>, 'color'>;
+
+export const DialogFooter = forwardRef<HTMLDivElement, DialogFooterProps>(
+  ({ children, className, sx: propSx, ...props }, ref) => {
+    return (
+      <Box
+        ref={ref}
+        flex
+        justifyContent="flex-end"
+        className={clsx(className, sx(propSx))}
+        {...props}
+      >
+        {children}
+      </Box>
+    );
+  },
+);
+DialogFooter.displayName = 'DialogFooter';

package/src/components/Dialog/DialogHeader.css.ts

@@ -0,0 +1,31 @@
+import { styleWithLayer } from '#styleUtils';
+import { theme } from '#themes';
+
+export const container = styleWithLayer({
+  position: 'sticky',
+  top: '0',
+  padding: '1.5rem',
+  zIndex: '10',
+
+  backgroundColor: `rgb(${theme.color.background})`,
+});
+
+export const close = styleWithLayer({
+  width: '1.25rem',
+  height: '1.25rem',
+  padding: '0',
+  border: '0',
+
+  backgroundColor: 'transparent',
+
+  fontSize: '1em',
+  color: `rgb(${theme.color['muted-foreground']})`,
+
+  cursor: 'pointer',
+
+  transition: 'color 0.1s ease',
+
+  ':hover': {
+    color: `rgb(${theme.color['foreground']})`,
+  },
+});

package/src/components/Dialog/DialogHeader.tsx

@@ -0,0 +1,37 @@
+import { forwardRef } from 'react';
+
+import clsx from 'clsx';
+import { XIcon } from 'lucide-react';
+
+import { Box } from '#components';
+import { sx } from '#styles';
+import type { UIComponent } from '#types';
+
+import * as s from './DialogHeader.css';
+
+interface DialogHeaderProps extends Omit<UIComponent<'div'>, 'color'> {
+  onCloseClick?: () => void;
+}
+
+export const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(
+  ({ children, className, sx: propSx, onCloseClick, ...props }, ref) => {
+    return (
+      <Box
+        ref={ref}
+        flex
+        justifyContent="space-between"
+        alignItems="center"
+        fontSize="lg"
+        fontWeight="normal"
+        className={clsx(s.container, className, sx(propSx))}
+        {...props}
+      >
+        <span>{children}</span>
+        <button className={s.close} onClick={onCloseClick} aria-label="닫기">
+          <XIcon />
+        </button>
+      </Box>
+    );
+  },
+);
+DialogHeader.displayName = 'DialogHeader';

package/src/components/Dialog/index.ts

@@ -0,0 +1,4 @@
+export * from './Dialog';
+export * from './DialogContent';
+export * from './DialogFooter';
+export * from './DialogHeader';

package/src/components/Navigation/Navigation.spec.tsx

@@ -0,0 +1,19 @@
+import {
+  NavigationAside,
+  NavigationBar,
+  NavigationItem,
+  NavigationLogo,
+  NavigationMenu,
+} from '#components';
+
+import { uiTest } from '../../tests/uiTest';
+import { NavigationContainer } from './NavigationContainer';
+
+describe('Navigation 컴포넌트', () => {
+  uiTest(NavigationAside, 'NavigationAside');
+  uiTest(NavigationBar, 'NavigationBar');
+  uiTest(NavigationItem, 'NavigationItem');
+  uiTest(NavigationLogo, 'NavigationLogo');
+  uiTest(NavigationMenu, 'NavigationMenu');
+  uiTest(NavigationContainer, 'NavigationContainer');
+});

package/src/components/Navigation/NavigationAside.css.ts

@@ -0,0 +1,7 @@
+import { styleWithLayer } from '#styleUtils';
+
+export const wide = styleWithLayer({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.5em',
+});

package/src/components/Navigation/NavigationAside.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { forwardRef } from 'react';
+
+import clsx from 'clsx';
+
+import { sx } from '#styles';
+import type { UIComponent } from '#types';
+
+import * as s from './NavigationAside.css';
+
+type NavigationAsideProps = UIComponent<'aside'>;
+
+export const NavigationAside = forwardRef<HTMLElement, NavigationAsideProps>(
+  ({ children, className, sx: propSx, ...props }, ref) => {
+    return (
+      <aside ref={ref} className={clsx(className, sx(propSx))} {...props}>
+        <div className={s.wide}>{children}</div>
+      </aside>
+    );
+  },
+);
+NavigationAside.displayName = 'NavigationAside';

package/src/components/Navigation/NavigationBar.css.ts

@@ -0,0 +1,42 @@
+import { createContainer } from '@vanilla-extract/css';
+
+import { recipeWithLayer } from '#styleUtils';
+import { theme } from '#themes';
+
+export const navigationBarContainer = createContainer();
+
+export const navigationBar = recipeWithLayer({
+  base: {
+    zIndex: '20',
+    position: 'sticky',
+    top: '0',
+
+    width: '100%',
+    borderBottom: `1px solid rgb(${theme.color['border.weak']})`,
+
+    backgroundColor: `rgba(${theme.color.background}, 0.75)`,
+    backdropFilter: 'blur(2rem) saturate(150%)',
+
+    color: `rgb(${theme.color.border})`,
+
+    transition: 'border-bottom-color 0.2s ease',
+
+    containerType: 'inline-size',
+    containerName: navigationBarContainer,
+  },
+  variants: {
+    size: {
+      sm: {
+        height: '4em',
+      },
+
+      md: {
+        height: '5em',
+      },
+
+      lg: {
+        height: '6em',
+      },
+    },
+  },
+});

package/src/components/Navigation/NavigationBar.tsx

@@ -0,0 +1,25 @@
+import { forwardRef } from 'react';
+
+import clsx from 'clsx';
+
+import { sx } from '#styles';
+import type { UIComponent } from '#types';
+
+import * as s from './NavigationBar.css';
+
+type NavigationBarProps = UIComponent<'nav', typeof s.navigationBar>;
+
+export const NavigationBar = forwardRef<HTMLElement, NavigationBarProps>(
+  ({ className, size = 'md', sx: propSx, ...props }, ref) => {
+    return (
+      <nav
+        ref={ref}
+        className={clsx(s.navigationBar({ size }), className, sx(propSx))}
+        {...props}
+      />
+    );
+  },
+);
+NavigationBar.displayName = 'NavigationBar';
+
+export { s as navigationBarCss };

package/src/components/Navigation/NavigationContainer.css.ts

@@ -0,0 +1,11 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: '0.5em',
+
+  height: '100%',
+  margin: '0 auto',
+});

package/src/components/Navigation/NavigationContainer.tsx

@@ -0,0 +1,26 @@
+import { forwardRef } from 'react';
+
+import clsx from 'clsx';
+
+import { sx } from '#styles';
+import type { UIComponent } from '#types';
+
+import * as s from './NavigationContainer.css';
+
+type NavigationContainerProps = UIComponent<'div'>;
+
+export const NavigationContainer = forwardRef<
+  HTMLDivElement,
+  NavigationContainerProps
+>(({ children, className, sx: propSx, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={clsx(className, s.container, sx(propSx))}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+});
+NavigationContainer.displayName = 'NavigationContainer';

package/src/components/Navigation/NavigationDrawer.css.ts

@@ -0,0 +1,61 @@
+import { recipeWithLayer, styleWithLayer } from '#styleUtils';
+import { theme } from '#themes';
+
+import { navigationBarContainer } from './NavigationBar.css';
+
+export const narrow = styleWithLayer({
+  display: 'none',
+
+  '@container': {
+    [`${navigationBarContainer} (max-width: 800px)`]: {
+      display: 'block',
+    },
+  },
+});
+
+export const wide = styleWithLayer({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: '0.5em',
+  flexGrow: '1',
+
+  '@container': {
+    [`${navigationBarContainer} (max-width: 800px)`]: {
+      display: 'none',
+    },
+  },
+});
+
+export const popup = recipeWithLayer({
+  base: {
+    position: 'absolute',
+    top: '100%',
+    height: 'calc(100vh - 100%)',
+    left: '0',
+    width: '100%',
+    zIndex: '100',
+
+    maxHeight: '100vh',
+    padding: '0.75em',
+    borderBottom: `1px solid rgb(${theme.color.border})`,
+
+    backgroundColor: `rgb(${theme.color.background})`,
+
+    transition: 'opacity 0.2s ease',
+  },
+
+  variants: {
+    isVisible: {
+      true: {
+        opacity: '1',
+      },
+
+      false: {
+        opacity: '0',
+
+        pointerEvents: 'none',
+      },
+    },
+  },
+});

package/src/components/Navigation/NavigationDrawer.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import { useEffect, useState, type ReactNode } from 'react';
+
+import { AlignJustifyIcon, XIcon } from 'lucide-react';
+
+import { Box, Button } from '#components';
+
+import * as s from './NavigationDrawer.css';
+
+interface NavigationDrawerProps {
+  menu: ReactNode;
+  aside: ReactNode;
+}
+
+export const NavigationDrawer = ({ menu, aside }: NavigationDrawerProps) => {
+  const [isExpanded, setIsExpanded] = useState<boolean>(false);
+
+  const handleClick = () => {
+    setIsExpanded((prev) => !prev);
+  };
+
+  useEffect(() => {
+    if (isExpanded) {
+      document.body.style.overflow = 'hidden';
+    }
+
+    return () => {
+      if (isExpanded) {
+        document.body.style.overflow = 'auto';
+      }
+    };
+  }, [isExpanded]);
+
+  return (
+    <>
+      <div className={s.wide}>
+        {menu}
+        {aside}
+      </div>
+      <div className={s.narrow}>
+        <Button
+          size="icon-md"
+          color="secondary"
+          variant="ghost"
+          onClick={handleClick}
+        >
+          {isExpanded ? <XIcon /> : <AlignJustifyIcon />}
+        </Button>
+        <div className={s.popup({ isVisible: isExpanded })}>
+          <Box
+            flex
+            gap="xl"
+            flexDirection="column-reverse"
+            alignItems="flex-end"
+            paddingY="lg"
+          >
+            <Box width="100%" onClick={() => setIsExpanded(false)}>
+              {menu}
+            </Box>
+            {aside}
+          </Box>
+        </div>
+      </div>
+    </>
+  );
+};

package/src/components/Navigation/NavigationItem.css.ts

@@ -0,0 +1,43 @@
+import { recipeWithLayer } from '#styleUtils';
+import { theme } from '#themes';
+import { spacing, typography } from '#tokens';
+
+import { narrow } from './NavigationDrawer.css';
+
+export const container = recipeWithLayer({
+  base: {
+    position: 'relative',
+
+    lineHeight: '0',
+    padding: spacing.lg,
+
+    fontSize: '0.9375em',
+    fontWeight: typography.weight.semiBold,
+
+    transition: 'color 0.2s ease',
+
+    cursor: 'pointer',
+
+    ':hover': {
+      color: `rgb(${theme.color.foreground})`,
+    },
+
+    selectors: {
+      [`${narrow} &`]: {
+        padding: `${spacing['2xl']} ${spacing.lg}`,
+
+        fontSize: '1.125em',
+      },
+    },
+  },
+  variants: {
+    isSelected: {
+      true: {
+        color: `rgb(${theme.color['secondary-foreground']})`,
+      },
+      false: {
+        color: `rgba(${theme.color['secondary-foreground']}, 0.5)`,
+      },
+    },
+  },
+});