From aa8819f4cf00c3719e5833b9699dad4c2a0549cc Mon Sep 17 00:00:00 2001 From: wookki Date: Wed, 3 Jan 2024 22:46:47 +0900 Subject: [PATCH 1/4] =?UTF-8?q?design:=20=EC=BB=AC=EB=9F=AC=20=ED=8C=94?= =?UTF-8?q?=EB=A0=88=ED=8A=B8=20=EB=B0=8F=20body=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=EB=A7=81=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/globals.css | 46 ++++++++++++++++++++++++++++---------- src/styles/colorPalette.ts | 13 +++++++++++ 2 files changed, 47 insertions(+), 12 deletions(-) create mode 100644 src/styles/colorPalette.ts diff --git a/src/app/globals.css b/src/app/globals.css index 8fd26620..61d6fa81 100644 --- a/src/app/globals.css +++ b/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; } - } \ No newline at end of file +} \ No newline at end of file diff --git a/src/styles/colorPalette.ts b/src/styles/colorPalette.ts new file mode 100644 index 00000000..fd1863de --- /dev/null +++ b/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; From 9c224daa17b92dde66a4009ab642f2f850e3d9d7 Mon Sep 17 00:00:00 2001 From: wookki Date: Wed, 3 Jan 2024 22:47:49 +0900 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20spacing=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EC=9E=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../query/shared/spacing/Spacing.tsx | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 src/components/query/shared/spacing/Spacing.tsx diff --git a/src/components/query/shared/spacing/Spacing.tsx b/src/components/query/shared/spacing/Spacing.tsx new file mode 100644 index 00000000..74d696cc --- /dev/null +++ b/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, direction = 'vertical', backgroundColor }: SpacingProps) { + const styles = useMemo(() => { + return { + width: direction === 'vertical' ? '100%' : `${size}px`, + height: direction === 'vertical' ? `${size}px` : '100%', + backgroundColor: backgroundColor && colors[backgroundColor], + }; + }, [size, direction, backgroundColor]); + return ( +
+ ); +} + +export default Spacing; From ab66e5523f4b081826b23cbf5ec0377bc12b34c5 Mon Sep 17 00:00:00 2001 From: wookki Date: Thu, 4 Jan 2024 00:06:01 +0900 Subject: [PATCH 3/4] =?UTF-8?q?test:=20Spacing=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=8A=A4=ED=86=A0=EB=A6=AC=EB=B6=81=20?= =?UTF-8?q?=EC=A0=9C=EC=9E=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../query/shared/spacing/Spacing.stories.ts | 32 +++++++++++++++++++ .../query/shared/spacing/Spacing.tsx | 6 ++-- 2 files changed, 35 insertions(+), 3 deletions(-) create mode 100644 src/components/query/shared/spacing/Spacing.stories.ts diff --git a/src/components/query/shared/spacing/Spacing.stories.ts b/src/components/query/shared/spacing/Spacing.stories.ts new file mode 100644 index 00000000..2e44db7d --- /dev/null +++ b/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; + +export default meta; +type Story = StoryObj; + +export const Horizontal: Story = { + args: { + size: 10, + backgroundColor: 'primary', + }, +}; + +export const Vertical: Story = { + args: { + size: 100, + direction: 'vertical', + backgroundColor: 'secondary', + }, +}; diff --git a/src/components/query/shared/spacing/Spacing.tsx b/src/components/query/shared/spacing/Spacing.tsx index 74d696cc..551cbc2a 100644 --- a/src/components/query/shared/spacing/Spacing.tsx +++ b/src/components/query/shared/spacing/Spacing.tsx @@ -8,11 +8,11 @@ interface SpacingProps { backgroundColor?: Colors } -function Spacing({ size, direction = 'vertical', backgroundColor }: SpacingProps) { +function Spacing({ size = 10, direction = 'horizontal', backgroundColor }: SpacingProps) { const styles = useMemo(() => { return { - width: direction === 'vertical' ? '100%' : `${size}px`, - height: direction === 'vertical' ? `${size}px` : '100%', + width: direction === 'horizontal' ? '100%' : `${size}px`, + height: direction === 'vertical' ? '100%' : `${size}px`, backgroundColor: backgroundColor && colors[backgroundColor], }; }, [size, direction, backgroundColor]); From 12d9b9ec7f63fd1f29e2f823ed19b11a8e25ccc3 Mon Sep 17 00:00:00 2001 From: wookki Date: Thu, 4 Jan 2024 00:07:05 +0900 Subject: [PATCH 4/4] =?UTF-8?q?design:=20=EC=8A=A4=ED=86=A0=EB=A6=AC?= =?UTF-8?q?=EB=B6=81=20=EA=B8=80=EB=A1=9C=EB=B2=8C=20css=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95=20=EB=B0=8F=20=EC=8A=A4=ED=86=A0=EB=A6=AC=EB=B6=81=20?= =?UTF-8?q?=EB=86=92=EC=9D=B4=20=EC=A1=B0=EC=A0=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/preview-head.html | 7 +++++++ .storybook/preview.ts | 1 + tsconfig.json | 3 +++ 3 files changed, 11 insertions(+) create mode 100644 .storybook/preview-head.html diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html new file mode 100644 index 00000000..6cf6b189 --- /dev/null +++ b/.storybook/preview-head.html @@ -0,0 +1,7 @@ + \ No newline at end of file diff --git a/.storybook/preview.ts b/.storybook/preview.ts index ff58bbda..b0ca2fba 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -1,3 +1,4 @@ +import '../src/app/globals.css' import type { Preview } from "@storybook/react"; const preview: Preview = { diff --git a/tsconfig.json b/tsconfig.json index d07a6aac..371378cc 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -27,6 +27,9 @@ "@/*": [ "src/*" ], + "@app/*": [ + "src/app/*" + ], "@components/*": [ "src/components/*" ],