@tripie-pyotato/design-system 0.0.0

package/src/components/TripieIcon/variants.ts

@@ -0,0 +1,177 @@
+import { MotionProps } from '../../shared/wrappers/motion-wrapper';
+
+export const ICON_VARIANTS = {
+  DEFAULT: {
+    closed: () => ({}),
+    open: () => ({
+      rotate: '45deg',
+      transition: {
+        duration: 0.5,
+        bounce: 0,
+      },
+    }),
+    hover: () => ({
+      rotate: '45deg',
+      transition: {
+        duration: 0.5,
+        bounce: 0,
+      },
+    }),
+  } as MotionProps['variants'],
+  ROTATE: {
+    hover: () => ({
+      rotate: '360deg',
+      transition: {
+        duration: 1.2,
+        bounce: 0.5,
+      },
+    }),
+  } as MotionProps['variants'],
+  NAVIGATE: (direction: 'back' | 'front') =>
+    (direction === 'back'
+      ? {
+          closed: () => ({
+            rotate: '-135deg',
+            transition: {
+              duration: 0.1,
+              bounce: 1,
+            },
+          }),
+          hover: () => ({
+            rotate: '-90deg',
+            transition: {
+              duration: 0.1,
+              bounce: 1,
+            },
+          }),
+        }
+      : {
+          closed: () => ({
+            rotate: '45deg',
+            transition: {
+              duration: 0.1,
+              bounce: 1,
+            },
+          }),
+          hover: () => ({
+            rotate: '0deg',
+            transition: {
+              duration: 0.1,
+              bounce: 1,
+            },
+          }),
+        }) as MotionProps['variants'],
+  REFRESH: (action: 'redo' | 'undo') =>
+    (action === 'redo'
+      ? {
+          closed: () => ({
+            rotate: '-135deg',
+            transition: {
+              duration: 0.1,
+              bounce: 1,
+            },
+          }),
+          hover: () => ({
+            rotate: '-90deg',
+            transition: {
+              duration: 0.1,
+              bounce: 1,
+            },
+          }),
+        }
+      : {
+          closed: () => ({
+            rotate: '45deg',
+            transition: {
+              duration: 0.1,
+              bounce: 1,
+            },
+          }),
+          hover: () => ({
+            rotate: '0deg',
+            transition: {
+              duration: 0.1,
+              bounce: 1,
+            },
+          }),
+        }) as MotionProps['variants'],
+  PLANE: {
+    rotate: {
+      rotate: '90deg',
+    },
+    fly: () => ({
+      translateX: '100vw',
+      transition: {
+        repeat: Infinity,
+        duration: 5,
+        bounce: 1,
+      },
+    }),
+  } as MotionProps['variants'],
+  CLOUD: {
+    rest: () => ({
+      opacity: `${Math.random()}`,
+      translateX: `${Math.random() * 1000}rem`,
+      translateY: `${Math.random() * 100}px`,
+    }),
+    float: () => ({
+      translateX: '-100%',
+      delay: 1,
+      transition: {
+        decelerate: 2,
+        repeat: Infinity,
+        duration: 8,
+        bounce: 1,
+      },
+    }),
+  } as MotionProps['variants'],
+  CURSOR: {
+    initial: () => ({
+      translateY: '-10px',
+    }),
+    hover: () => ({
+      pointerEvents: 'none',
+      translateX: '-50px',
+      translateY: '-5px',
+      transition: {
+        decelerate: 2,
+        duration: 0.5,
+        bounce: 0,
+      },
+    }),
+  } as MotionProps['variants'],
+  SCROLL: (next: boolean) =>
+    (next
+      ? {
+          initial: () => ({
+            rotate: '0deg',
+            transition: {
+              duration: 0.1,
+              bounce: 1,
+            },
+          }),
+          hover: () => ({
+            rotate: '-90deg',
+            transition: {
+              duration: 0.1,
+              bounce: 1,
+            },
+          }),
+        }
+      : {
+          initial: () => ({
+            rotate: '-180deg',
+            transition: {
+              duration: 0.1,
+              bounce: 1,
+            },
+          }),
+          hover: () => ({
+            rotate: '0deg',
+            transition: {
+              duration: 0.1,
+              bounce: 1,
+            },
+          }),
+        }) as MotionProps['variants'],
+};

package/src/components/TripieImage/TripieImage.tsx

@@ -0,0 +1,90 @@
+'use client';
+import { classNames } from '../../shared/wrappers';
+
+import Image from 'next/image';
+
+import { PLACEHOLDER } from '../../shared/resource';
+import Text from '../Text';
+import TripieContainer from '../TripieContainer';
+import Style from './tripie-image.module.scss';
+
+const cx = classNames.bind(Style);
+
+export type ImageSizes = 'default' | 'full' | 'large' | 'medium' | 'small' | 'tiny' | 'icon' | 'card';
+
+const TripieImage = ({
+  alt,
+  src,
+  refs,
+  sizes = 'default',
+  className,
+  withBorder = true,
+  blurDataURL,
+  fill = true,
+}: {
+  alt: string;
+  src?: string;
+  refs?: (node?: Element | null | undefined) => void;
+  className?: string;
+  sizes?: ImageSizes;
+  blurDataURL?: string;
+  withBorder?: boolean;
+  fill?: boolean;
+}) => {
+  return (
+    <TripieContainer
+      margin="none"
+      className={cx('tripie-image', 'img-wrap', sizes, withBorder && 'with-border', className)}
+    >
+      {blurDataURL == null ? (
+        <img
+          className={cx('tripie-image', 'img-wrap', sizes, withBorder && 'with-border')}
+          src={src ?? PLACEHOLDER}
+          alt={`${alt}의 이미지일 수 있음`}
+        />
+      ) : (
+        <Image
+          src={src ?? PLACEHOLDER}
+          className={cx('tripie-image', 'img-wrap', sizes, withBorder && 'with-border')}
+          alt={alt}
+          sizes={'(min-width:640px) 50vw, 100vw'}
+          placeholder="blur"
+          fill={fill}
+          blurDataURL={blurDataURL}
+          ref={refs}
+        />
+      )}
+    </TripieContainer>
+  );
+};
+
+const ImageWithSourceUrl = ({
+  alt,
+  src,
+  refs,
+  className,
+  sizes = 'medium',
+  sourceUrl,
+  withBorder = true,
+  blurDataURL,
+}: {
+  alt: string;
+  src?: string;
+  refs?: (node?: Element | null | undefined) => void;
+  className?: string;
+  sourceUrl: string;
+  sizes?: ImageSizes;
+  withBorder?: boolean;
+  blurDataURL?: string;
+}) => {
+  return (
+    <TripieContainer margin="none" className={cx('img-wrap', withBorder ?? 'with-border', className)}>
+      <TripieImage src={src} alt={alt} refs={refs} sizes={sizes} blurDataURL={blurDataURL} />
+      <Text className={cx('source-url', 'img-source')}>{`출처 ${sourceUrl}`}</Text>
+    </TripieContainer>
+  );
+};
+
+TripieImage.WithSourceUrl = ImageWithSourceUrl;
+
+export default TripieImage;

package/src/components/TripieImage/index.ts

@@ -0,0 +1,2 @@
+export * from './TripieImage';
+export { default } from './TripieImage';

package/src/components/TripieImage/tripie-image.module.scss

@@ -0,0 +1,73 @@
+@use '../../mixins' as *;
+@use '../../variables' as *;
+
+.img-wrap {
+  padding: 0;
+  overflow: hidden;
+  display: inline-block;
+  box-sizing: border-box;
+  position: relative;
+  & > img {
+    width: 100%;
+    height: 100%;
+    display: block;
+    object-fit: cover;
+  }
+}
+.with-border {
+  @include with-border;
+}
+
+.img-source {
+  position: absolute;
+  bottom: 1rem;
+  right: 1rem;
+}
+
+.source-url {
+  text-wrap: nowrap;
+  font-size: 0.66rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  z-index: 100;
+  max-width: 30%;
+  display: inline-block;
+}
+
+.small {
+  height: 4rem;
+}
+
+.medium {
+  height: 24rem;
+}
+.card {
+  height: 12rem;
+}
+
+.icon {
+  height: 1rem;
+  width: 1rem;
+}
+
+.tripie-image {
+  padding: 0;
+  overflow: hidden;
+  position: relative;
+  & img {
+    width: 100%;
+    height: 100%;
+    display: block;
+    object-fit: cover;
+  }
+}
+
+.default {
+  width: 24rem;
+  height: 24rem;
+}
+
+.large {
+  height: 24rem;
+}

package/src/components/TripieImage/tripie-image.stories.tsx

@@ -0,0 +1,128 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { useEffect } from 'react';
+
+import { useAppTheme } from '../../hooks';
+import TripieImage from './TripieImage';
+
+const meta: Meta<typeof TripieImage> = {
+  title: 'tripie-ui/Image',
+  component: TripieImage,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '이미지 컴포넌트입니다. withBorder boolean 값으로 테두리를 설정할 수 있고, TripieImage.WithSourceUrl 컴포넌트의 경우 sourceUrl을 제공하여 이미지 출처를 표기할 수 있습니다.',
+      },
+    },
+  },
+  argTypes: {},
+  decorators: [
+    (story, context) => {
+      const { mode, setMode } = useAppTheme();
+      const selectedTheme = context.globals.theme || mode;
+
+      useEffect(() => {
+        setMode(selectedTheme);
+      }, [selectedTheme]);
+
+      return <div className={`${context.globals.theme}`}>{story()}</div>;
+    },
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: 'Default',
+  args: {
+    alt: 'https://media.triple.guide/triple-cms/c_fill,f_auto,h_256,w_256/54e3594d-1087-43ff-b760-7231d4103edf.jpeg이미지일수도 있음',
+    src: 'https://media.triple.guide/triple-cms/c_fill,f_auto,h_256,w_256/54e3594d-1087-43ff-b760-7231d4103edf.jpeg',
+    blurDataURL:
+      'data:image/svg+xml;base64,CiAgPHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA4IDUnPgogICAgPGZpbHRlciBpZD0nYicgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSdzUkdCJz4KICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0nMScgLz4KICAgIDwvZmlsdGVyPgogICAgPGltYWdlIHByZXNlcnZlQXNwZWN0UmF0aW89J25vbmUnIGZpbHRlcj0ndXJsKCNiKScgeD0nMCcgeT0nMCcgaGVpZ2h0PScxMDAlJyB3aWR0aD0nMTAwJScgCiAgICBocmVmPSdkYXRhOmltYWdlL2F2aWY7YmFzZTY0LC85ai8yd0JEQUFnSUNBZ0pDQWtLQ2drTkRnd09EUk1SRUJBUkV4d1VGaFFXRkJ3ckd4OGJHeDhiS3lZdUpTTWxMaVpFTlM4dk5VUk9RajVDVGw5VlZWOTNjWGVjbk5ILzJ3QkRBUWdJQ0FnSkNBa0tDZ2tORGd3T0RSTVJFQkFSRXh3VUZoUVdGQndyR3g4Ykd4OGJLeVl1SlNNbExpWkVOUzh2TlVST1FqNUNUbDlWVlY5M2NYZWNuTkgvd2dBUkNBQUxBQkFEQVNJQUFoRUJBeEVCLzhRQUZnQUJBUUVBQUFBQUFBQUFBQUFBQUFBQUJnVUgvOFFBRlFFQkFRQUFBQUFBQUFBQUFBQUFBQUFBQkFYLzJnQU1Bd0VBQWhBREVBQUFBS0NuRFhhSjMvL0VBQ0lRQUFFREF3TUZBQUFBQUFBQUFBQUFBQUlCQXdVQUJCSVJFeUV4TWtGaHNmL2FBQWdCQVFBQlB3Q01uYmQ1eHNIV2tISXROVStwUXpFRXp0NVhIZVdLWWdTODFBcVRyd01tU2szb2E0K3c2VmNtVzZmUG12L0VBQm9SQUFJQ0F3QUFBQUFBQUFBQUFBQUFBQUVDQXhFQUVpTC8yZ0FJQVFJQkFUOEFFMHBUWXZmVlovL0VBQm9SQVFBQ0F3RUFBQUFBQUFBQUFBQUFBQUVDQXdBRUVSTC8yZ0FJQVFNQkFUOEFxMXFtYkh5SERQL1onIC8+CiAgPC9zdmc+Cg==',
+    sizes: 'default',
+  },
+};
+
+export const NoImage: Story = {
+  name: 'Image.None',
+  args: {
+    sizes: 'medium',
+  },
+};
+
+export const IconImage: Story = {
+  name: 'Image.Icon',
+  args: {
+    alt: 'https://media.triple.guide/triple-cms/c_fill,f_auto,h_256,w_256/54e3594d-1087-43ff-b760-7231d4103edf.jpeg이미지일수도 있음',
+    src: 'https://media.triple.guide/triple-cms/c_fill,f_auto,h_256,w_256/54e3594d-1087-43ff-b760-7231d4103edf.jpeg',
+    sizes: 'icon',
+    withBorder: false,
+  },
+};
+
+export const MediumImage: Story = {
+  name: 'Image.Medium',
+  args: {
+    alt: 'https://media.triple.guide/triple-cms/c_fill,f_auto,h_256,w_256/54e3594d-1087-43ff-b760-7231d4103edf.jpeg이미지일수도 있음',
+    src: 'https://media.triple.guide/triple-cms/c_fill,f_auto,h_256,w_256/54e3594d-1087-43ff-b760-7231d4103edf.jpeg',
+    sizes: 'medium',
+  },
+};
+export const SmallImage: Story = {
+  name: 'Image.Small',
+  args: {
+    alt: 'https://media.triple.guide/triple-cms/c_fill,f_auto,h_256,w_256/54e3594d-1087-43ff-b760-7231d4103edf.jpeg이미지일수도 있음',
+    src: 'https://media.triple.guide/triple-cms/c_fill,f_auto,h_256,w_256/54e3594d-1087-43ff-b760-7231d4103edf.jpeg',
+    sizes: 'small',
+  },
+};
+
+export const WithSourceUrl: Story = {
+  name: 'Image.WithSourceUrl',
+  render: () => (
+    <TripieImage.WithSourceUrl
+      sourceUrl={'https://이미지 출처'}
+      alt={
+        'https://media.triple.guide/triple-cms/c_fill,f_auto,h_256,w_256/54e3594d-1087-43ff-b760-7231d4103edf.jpeg이미지일수도 있음'
+      }
+      src={'https://media.triple.guide/triple-cms/c_fill,f_auto,h_256,w_256/54e3594d-1087-43ff-b760-7231d4103edf.jpeg'}
+    />
+  ),
+};
+
+export const WithLongSourceUrl: Story = {
+  name: 'Image.WithLongSourceUrl',
+  render: () => (
+    <TripieImage.WithSourceUrl
+      sourceUrl={
+        'https://엄청 긴 이미지 출처 엄청 긴 이미지 출처엄청 긴 이미지 출처엄청 긴 이미지 출처엄청 긴 이미지 출처엄청 긴 이미지 출처엄청 긴 이미지 출처엄청 긴 이미지 출처엄청 긴 이미지 출처엄청 긴 이미지 출처엄청 긴 이미지 출처엄청 긴 이미지 출처'
+      }
+      alt={
+        'https://media.triple.guide/triple-cms/c_fill,f_auto,h_256,w_256/54e3594d-1087-43ff-b760-7231d4103edf.jpeg이미지일수도 있음'
+      }
+      src={'https://media.triple.guide/triple-cms/c_fill,f_auto,h_256,w_256/54e3594d-1087-43ff-b760-7231d4103edf.jpeg'}
+    />
+  ),
+};
+
+export const WithBlurDataUrl: Story = {
+  name: 'Image.WithBlurDataUrl',
+  render: () => {
+    return (
+      <div style={{ width: '24rem' }}>
+        <TripieImage
+          alt={
+            'https://media.triple.guide/triple-cms/c_fill,f_auto,h_256,w_256/54e3594d-1087-43ff-b760-7231d4103edf.jpeg이미지일수도 있음'
+          }
+          src={
+            'https://media.triple.guide/triple-cms/c_fill,f_auto,h_256,w_256/54e3594d-1087-43ff-b760-7231d4103edf.jpeg'
+          }
+          blurDataURL="data:image/svg+xml;base64,CiAgPHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA4IDUnPgogICAgPGZpbHRlciBpZD0nYicgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSdzUkdCJz4KICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0nMScgLz4KICAgIDwvZmlsdGVyPgogICAgPGltYWdlIHByZXNlcnZlQXNwZWN0UmF0aW89J25vbmUnIGZpbHRlcj0ndXJsKCNiKScgeD0nMCcgeT0nMCcgaGVpZ2h0PScxMDAlJyB3aWR0aD0nMTAwJScgCiAgICBocmVmPSdkYXRhOmltYWdlL2F2aWY7YmFzZTY0LC85ai8yd0JEQUFnSUNBZ0pDQWtLQ2drTkRnd09EUk1SRUJBUkV4d1VGaFFXRkJ3ckd4OGJHeDhiS3lZdUpTTWxMaVpFTlM4dk5VUk9RajVDVGw5VlZWOTNjWGVjbk5ILzJ3QkRBUWdJQ0FnSkNBa0tDZ2tORGd3T0RSTVJFQkFSRXh3VUZoUVdGQndyR3g4Ykd4OGJLeVl1SlNNbExpWkVOUzh2TlVST1FqNUNUbDlWVlY5M2NYZWNuTkgvd2dBUkNBQUxBQkFEQVNJQUFoRUJBeEVCLzhRQUZnQUJBUUVBQUFBQUFBQUFBQUFBQUFBQUJnVUgvOFFBRlFFQkFRQUFBQUFBQUFBQUFBQUFBQUFBQkFYLzJnQU1Bd0VBQWhBREVBQUFBS0NuRFhhSjMvL0VBQ0lRQUFFREF3TUZBQUFBQUFBQUFBQUFBQUlCQXdVQUJCSVJFeUV4TWtGaHNmL2FBQWdCQVFBQlB3Q01uYmQ1eHNIV2tISXROVStwUXpFRXp0NVhIZVdLWWdTODFBcVRyd01tU2szb2E0K3c2VmNtVzZmUG12L0VBQm9SQUFJQ0F3QUFBQUFBQUFBQUFBQUFBQUVDQXhFQUVpTC8yZ0FJQVFJQkFUOEFFMHBUWXZmVlovL0VBQm9SQVFBQ0F3RUFBQUFBQUFBQUFBQUFBQUVDQXdBRUVSTC8yZ0FJQVFNQkFUOEFxMXFtYkh5SERQL1onIC8+CiAgPC9zdmc+Cg=="
+        />
+      </div>
+    );
+  },
+};

package/src/components/TripieSkeleton/Skeleton.tsx

@@ -0,0 +1,27 @@
+import { ComponentProps } from 'react';
+import { classNames } from '../../shared/wrappers';
+import Style from './skeleton.module.scss';
+
+export type GridProps = ComponentProps<'div'>;
+
+const cx = classNames.bind(Style);
+
+const Skeleton = ({ children, className, ...props }: GridProps) => {
+  return (
+    <div className={cx('skeleton', className)} {...props}>
+      {children}
+    </div>
+  );
+};
+
+const SkeletonImage = ({ children, className, ...props }: GridProps) => {
+  return (
+    <div className={cx('skeleton', className)} {...props}>
+      {children}
+    </div>
+  );
+};
+
+Skeleton.Image = SkeletonImage;
+
+export default Skeleton;

package/src/components/TripieSkeleton/index.ts

@@ -0,0 +1,2 @@
+export * from './Skeleton';
+export { default } from './Skeleton';

package/src/components/TripieSkeleton/skeleton.module.scss

@@ -0,0 +1,7 @@
+@use '../../functions/' as *;
+@use '../../mixins/' as *;
+@use 'sass:map';
+
+.skeleton {
+  @include skeleton(1);
+}

package/src/components/TripieSkeleton/skeleton.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useEffect } from 'react';
+import { useAppTheme } from '../../hooks';
+import { default as Skeleton } from './Skeleton';
+
+const meta: Meta<typeof Skeleton> = {
+  title: 'tripie-ui/Skeleton',
+  component: Skeleton,
+  tags: ['autodocs'],
+  decorators: [
+    (story, context) => {
+      const { mode, setMode } = useAppTheme();
+      const selectedTheme = context.globals.theme || mode;
+
+      useEffect(() => {
+        setMode(selectedTheme);
+      }, [selectedTheme]);
+
+      return <div className={`${context.globals.theme}`}>{story()}</div>;
+    },
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: 'Default Skeleton',
+  args: {
+    children: <Skeleton></Skeleton>,
+  },
+};

package/src/components/index.ts

@@ -0,0 +1,25 @@
+export { default as Accordion } from './Accordian/Accordian';
+export { default as Carousel } from './Carousel/Carousel';
+export { default as Chip } from './Chip/Chip';
+export { default as ChipMarker } from './ChipMarker';
+export { default as Divider } from './Divider';
+export { default as Headings } from './Headings';
+export { default as Link } from './Link';
+export { default as List } from './List/List';
+export { default as MotionSlideUp } from './MotionSlideUp';
+export { default as ParticleBackground } from './Particle/Background';
+export { default as ParticleField } from './Particle/Field';
+export { default as RotatingBlur } from './RotatingBlur';
+export { default as SplashScreen } from './SplashScreen/SplashScreen';
+export { default as Switch } from './Switch';
+export { default as Text } from './Text/Text';
+export { default as TextFillAnimation } from './TextFill/TextFillAnimation';
+export { default as TextUnderLineAnimation } from './TextUnderlineAnimation';
+export { default as AnimatedButton, default as AnimatedText } from './TripieButton/Animated';
+export { default as MenuToggle } from './TripieButton/MenuToggle';
+export { default as NoStyleButton } from './TripieButton/NoStyle';
+export { default as Card } from './TripieCard/Card';
+export { default as Container } from './TripieContainer/TripieContainer';
+export { default as Icon } from './TripieIcon/Icon';
+export { default as TripieImage } from './TripieImage/TripieImage';
+export { default as Skeleton } from './TripieSkeleton';

package/src/font.ts

@@ -0,0 +1,12 @@
+import localFont from 'next/font/local';
+
+const maruBuri = localFont({
+  src: [
+    {
+      path: './static/fonts/MaruBuri-Regular.woff2',
+      style: 'normal',
+    },
+  ],
+});
+
+export default maruBuri;

package/src/functions/_breakpoint.scss

@@ -0,0 +1,21 @@
+@use "sass:map";
+@use "sass:meta";
+@use "../base/" as *;
+
+/// config 맵으로부터 z-index 값 반환
+/// @param {string} $layer : `$z-indexes` 맵에서의 값
+/// @return {number} : z-index 값
+/// @throws {Error} : 없는 layer 옵션일 경우
+@function breakpoint($size: default) {
+  $fetched-breakpoint: map.get($config-breakpoint, $size);
+
+  @if meta.type-of($size) == number {
+    @return $size;
+  }
+
+  @if meta.type-of($fetched-breakpoint) {
+    @return $fetched-breakpoint;
+  } @else {
+    @error "Breakpoint with such  `#{$size}` not found. Available breakpoints: #{$config-breakpoint}";
+  }
+}

package/src/functions/_color.scss

@@ -0,0 +1,63 @@
+@use "sass:color";
+@use "sass:map";
+@use "sass:math";
+@use "../base/" as *;
+
+/// $colors또는 Sass map에서 컬러 값을 리턴
+/// @param {string} $type : base, primary, secondary 등등 컬러 그룹 타입
+/// @param {string} $key : 컬러의 이름
+/// @param {boolean} $only-color : true일 경우 컬러 값만 가져오기
+/// @return {$type} : $map : 컬러를 가져올 map
+@function color($type: "default", $key, $only-color: false, $map: $colors) {
+  @if not map.has-key($map, $type, $key) {
+    @error "The #{$key} key name doesn't exist under #{$type} at the specified map (default: $colors).";
+  }
+
+  @if not map.get($map, $type, $key) {
+    @return null;
+  }
+
+  @if $only-color {
+    @return map.get($map, $type, $key);
+  }
+
+  @return var(--#{$internal-prefix}#{$type}-color-#{$key});
+}
+
+/// $colors 컬러 map으로부터 아무 / 하나의 컬러 값만 반환
+/// @param {string} $type : 컬러 그룹의 타입 (base, primary, secondary 등등)
+/// @param {string} $key : 컬러의 키 이름
+/// @param {map} $map : 컬러를 가져올 map
+/// @return {color}: 컬러 값
+@function color-value($type: "default", $key, $map: $colors) {
+  @if not map.has-key($map, $type, $key) {
+    @error "The #{$key} key name doesn't exist under #{$type} at the specified map (default: $colors).";
+  }
+
+  @if not map.get($map, $type, $key) {
+    @return null;
+  }
+
+  @return map.get($map, $type, $key);
+}
+
+/// 흑/백 색 대조 리턴 (WCAG 기준)
+/// 참고 출처 : https://codepen.io/davidhalford/pen/ALrbEP
+/// @param {color} $color : 대조 바탕이 될 컬러
+/// @return {color} : 대조 컬러
+@function color-contrast($color) {
+  $color-brightness: math.round(
+    (color.red($color) * 299) + (color.green($color) * 587) +
+      math.div(color.blue($color) * 114, 1000)
+  );
+  $light-color: math.round(
+    (color.red(#ffffff) * 299) + (color.green(#ffffff) * 587) +
+      math.div(color.blue(#ffffff) * 114, 1000)
+  );
+
+  @if math.abs($color-brightness) < math.div($light-color, 2) {
+    @return hsl(0 0% 100%);
+  } @else {
+    @return hsl(0 100% 0%);
+  }
+}