공통 컴포넌트: Spacing

.storybook/preview-head.html

@@ -0,0 +1,7 @@
+<style>
+  html,
+  body,
+  #storybook-root {
+    height: 100%;
+  }
+</style>

.storybook/preview.ts

@@ -1,3 +1,4 @@
+import '../src/app/globals.css'
 import type { Preview } from "@storybook/react";
 
 const preview: Preview = {

src/app/globals.css

@@ -1,4 +1,19 @@
+:root {
+  --primary: #0075FF;
+  --secondary: #B2D6FF;
+  --red: #FF5247;
+  --gray-100: #CDCFD0;
+  --gray-200: #979C9E;
+  --gray-300: #72777A;
+  --gray-400: #404446;
+  --black: #090A0A;
+  --white: #EEE;
+}
+
 body {
+  margin: 0;
+  padding: 0;
+
   html, body, div, span, applet, object, iframe,
   h1, h2, h3, h4, h5, h6, p, blockquote, pre,
   a, abbr, acronym, address, big, cite, code,
@@ -15,58 +30,65 @@ body {
     margin: 0;
     padding: 0;
     border: 0;
-    font-size: 100%;
     font: inherit;
+    font-size: 100%;
     vertical-align: baseline;
   }
+
   /* HTML5 display-role reset for older browsers */
   article, aside, details, figcaption, figure, 
   footer, header, hgroup, menu, nav, section {
     display: block;
   }
+
   body {
     line-height: 1;
   }
+
   ol, ul {
     list-style: none;
   }
+
   blockquote, q {
     quotes: none;
   }
-  blockquote:before, blockquote:after,
-  q:before, q:after {
+
+  blockquote::before, blockquote::after,
+  q::before, q::after {
     content: '';
     content: none;
   }
+
   table {
-    border-collapse: collapse;
     border-spacing: 0;
+    border-collapse: collapse;
   }
+
   a {
     color: inherit;
     text-decoration: inherit; /* no underline */
   }
+
   button {
-    border: none;
+    width: auto;
     margin: 0;
     padding: 0;
-    width: auto;
     overflow: visible;
-
+    border: none;
     background: transparent;
 
     /* inherit font & color from ancestor */
     color: inherit;
     font: inherit;
 
-    /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
-    line-height: normal;
-
     /* Corrects font smoothing for webkit */
     -webkit-font-smoothing: inherit;
     -moz-osx-font-smoothing: inherit;
 
+    /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
+    line-height: normal;
+
     /* Corrects inability to style clickable `input` types in iOS */
-    -webkit-appearance: none;
+    appearance: none;
   }
-  }
+}

src/components/query/shared/spacing/Spacing.stories.ts

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Spacing from './Spacing';
+
+const meta = {
+  title: 'Shared/Spacing',
+  component: Spacing,
+  parameters: {
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} satisfies Meta<typeof Spacing>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Horizontal: Story = {
+  args: {
+    size: 10,
+    backgroundColor: 'primary',
+  },
+};
+
+export const Vertical: Story = {
+  args: {
+    size: 100,
+    direction: 'vertical',
+    backgroundColor: 'secondary',
+  },
+};

src/components/query/shared/spacing/Spacing.tsx

@@ -0,0 +1,24 @@
+import { useMemo } from 'react';
+
+import { Colors, colors } from '@styles/colorPalette';
+
+interface SpacingProps {
+  size: number
+  direction?: 'vertical' | 'horizontal'
+  backgroundColor?: Colors
+}
+
+function Spacing({ size = 10, direction = 'horizontal', backgroundColor }: SpacingProps) {
+  const styles = useMemo(() => {
+    return {
+      width: direction === 'horizontal' ? '100%' : `${size}px`,
+      height: direction === 'vertical' ? '100%' : `${size}px`,
+      backgroundColor: backgroundColor && colors[backgroundColor],
+    };
+  }, [size, direction, backgroundColor]);
+  return (
+    <div style={styles} />
+  );
+}
+
+export default Spacing;

src/styles/colorPalette.ts

@@ -0,0 +1,13 @@
+export const colors = {
+  primary: 'var(--primary)',
+  secondary: 'var(--secondary)',
+  red: 'var(--red)',
+  gray100: 'var(--gray-100)',
+  gray200: 'var(--gray-200) ',
+  gray300: 'var(--gray-300)',
+  gray400: 'var(--gray-400)',
+  black: 'var(--black)',
+  white: 'var(--white)',
+};
+
+export type Colors = keyof typeof colors;

tsconfig.json

@@ -27,6 +27,9 @@
       "@/*": [
         "src/*"
       ],
+      "@app/*": [
+        "src/app/*"
+      ],
       "@components/*": [
         "src/components/*"
       ],