From 20e2d15fb3fe06e2fc3aa14af320844723d69ea7 Mon Sep 17 00:00:00 2001 From: sikkzz Date: Wed, 29 Jan 2025 01:04:52 +0900 Subject: [PATCH 1/8] =?UTF-8?q?feat:=20=EB=B2=84=ED=8A=BC=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=ED=8B=80=20=EC=A0=9C=EC=9E=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 9 ++++++++- src/components/ui/Button/Button.module.scss | 15 ++++++++++++++ src/components/ui/Button/Button.tsx | 22 +++++++++++++++++++++ src/components/ui/Button/Button.types.ts | 7 +++++++ vite.config.ts | 9 ++++++--- 5 files changed, 58 insertions(+), 4 deletions(-) create mode 100644 src/components/ui/Button/Button.module.scss create mode 100644 src/components/ui/Button/Button.tsx create mode 100644 src/components/ui/Button/Button.types.ts diff --git a/src/App.tsx b/src/App.tsx index 729b1ea..e604d42 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,12 @@ +import Button from "@/components/ui/Button/Button"; + const App = () => { - return
App
; + return ( +
+
+ ); }; export default App; diff --git a/src/components/ui/Button/Button.module.scss b/src/components/ui/Button/Button.module.scss new file mode 100644 index 0000000..a891887 --- /dev/null +++ b/src/components/ui/Button/Button.module.scss @@ -0,0 +1,15 @@ +.Button { + cursor: pointer; + margin: 0; + padding: 0; + border: none; + + &.style-primary { + background-color: var(--color-text01); + color: var(--color-white); + } + + &.style-secondary { + background-color: red; + } +} diff --git a/src/components/ui/Button/Button.tsx b/src/components/ui/Button/Button.tsx new file mode 100644 index 0000000..58a178d --- /dev/null +++ b/src/components/ui/Button/Button.tsx @@ -0,0 +1,22 @@ +import React from "react"; + +import classNames from "classnames"; + +import styles from "@/components/ui/Button/Button.module.scss"; +import type { ButtonProps } from "@/components/ui/Button/Button.types"; + +const Button = React.forwardRef( + ({ className, variant = "primary", ...props }, ref) => { + return ( + + ); + }, +); + +export default Button; diff --git a/src/components/ui/Button/Button.types.ts b/src/components/ui/Button/Button.types.ts new file mode 100644 index 0000000..dbb4118 --- /dev/null +++ b/src/components/ui/Button/Button.types.ts @@ -0,0 +1,7 @@ +export type ButtonVariant = "primary" | "secondary"; + +export interface ButtonProps extends React.ButtonHTMLAttributes { + type?: "button" | "submit"; + text?: string; + variant?: ButtonVariant; +} diff --git a/vite.config.ts b/vite.config.ts index efc2bd5..7eafd3f 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -11,15 +11,18 @@ export default defineConfig({ base: "/", resolve: { alias: { - "@": path.resolve(__dirname, "./src"), + "@": path.resolve(__dirname, "src"), }, }, css: { + modules: { + localsConvention: "camelCase", + }, preprocessorOptions: { scss: { additionalData: ` - @use "@/styles/_variables.scss" as *; - @use "@/styles/_mixins.scss" as *; + @use "@/styles/_variables.scss"; + @use "@/styles/_mixins.scss"; `, }, }, From cbfa6f19261f75ac9a3f56a14889f354afe2c578 Mon Sep 17 00:00:00 2001 From: sikkzz Date: Wed, 29 Jan 2025 23:39:32 +0900 Subject: [PATCH 2/8] =?UTF-8?q?feat:=20=EB=B2=84=ED=8A=BC=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20style=20variant=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.module.scss | 9 +++++++++ src/App.tsx | 9 ++++++--- src/components/ui/Button/Button.module.scss | 18 ++++++++++++++++-- src/components/ui/Button/Button.tsx | 4 ++-- src/components/ui/Button/Button.types.ts | 2 +- src/styles/_mixins.scss | 6 +++--- src/styles/_variables.scss | 15 ++++++++------- 7 files changed, 45 insertions(+), 18 deletions(-) create mode 100644 src/App.module.scss diff --git a/src/App.module.scss b/src/App.module.scss new file mode 100644 index 0000000..cae945f --- /dev/null +++ b/src/App.module.scss @@ -0,0 +1,9 @@ +.Test { + display: flex; + flex-direction: column; + gap: 16px; + width: 300px; + align-items: center; + margin: 0 auto; + margin-top: 40px; +} diff --git a/src/App.tsx b/src/App.tsx index e604d42..6a4075a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,10 +1,13 @@ +import styles from "./App.module.scss"; + import Button from "@/components/ui/Button/Button"; const App = () => { return ( -
-
); }; diff --git a/src/components/ui/Button/Button.module.scss b/src/components/ui/Button/Button.module.scss index a891887..c0e2840 100644 --- a/src/components/ui/Button/Button.module.scss +++ b/src/components/ui/Button/Button.module.scss @@ -1,15 +1,29 @@ +@use "@/styles/mixins" as *; + .Button { cursor: pointer; margin: 0; - padding: 0; border: none; + border-radius: 0.875rem; + padding: 0.875rem; + width: 100%; + height: 3.25rem; &.style-primary { background-color: var(--color-text01); color: var(--color-white); + @include buttonPrimary; } &.style-secondary { - background-color: red; + background-color: var(--color-gray400); + color: var(--color-white); + @include buttonSecondary; + } + + &.style-disabled { + background-color: var(--color-gray350); + color: var(--color-text03); + @include buttonSecondary; } } diff --git a/src/components/ui/Button/Button.tsx b/src/components/ui/Button/Button.tsx index 58a178d..962074d 100644 --- a/src/components/ui/Button/Button.tsx +++ b/src/components/ui/Button/Button.tsx @@ -6,14 +6,14 @@ import styles from "@/components/ui/Button/Button.module.scss"; import type { ButtonProps } from "@/components/ui/Button/Button.types"; const Button = React.forwardRef( - ({ className, variant = "primary", ...props }, ref) => { + ({ className, variant = "primary", text, ...props }, ref) => { return ( ); }, diff --git a/src/components/ui/Button/Button.types.ts b/src/components/ui/Button/Button.types.ts index dbb4118..c1b673e 100644 --- a/src/components/ui/Button/Button.types.ts +++ b/src/components/ui/Button/Button.types.ts @@ -1,4 +1,4 @@ -export type ButtonVariant = "primary" | "secondary"; +export type ButtonVariant = "primary" | "secondary" | "disabled"; export interface ButtonProps extends React.ButtonHTMLAttributes { type?: "button" | "submit"; diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index 21419b3..b06644d 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -33,17 +33,17 @@ font-weight: var(--font-weight-medium); } -@mixin buttonMd { +@mixin buttonPrimary { font-size: var(--font-size-default); font-weight: var(--font-weight-semi-bold); } -@mixin buttonSm { +@mixin buttonSecondary { font-size: var(--font-size-default); font-weight: var(--font-weight-medium); } -@mixin buttonXs { +@mixin buttonTertiary { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index f714bcd..0b0e75d 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -4,13 +4,13 @@ --font-weight-semi-bold: 600; --font-weight-bold: 700; - --font-size-xl: 28px; - --font-size-lg: 24px; - --font-size-md: 22px; - --font-size-default: 16px; - --font-size-sm: 15px; - --font-size-xs: 14px; - --font-size-xxs: 13px; + --font-size-xl: 1.75rem; + --font-size-lg: 1.5rem; + --font-size-md: 1.375rem; + --font-size-default: 1rem; + --font-size-sm: 0.9375rem; + --font-size-xs: 0.875rem; + --font-size-xxs: 0.8125rem; --color-white: #fff; --color-black: #000; @@ -22,6 +22,7 @@ --color-gray100: #f8f8f8; --color-gray200: #ebecf0; --color-gray300: #e1e2e8; + --color-gray350: #dcdde3; --color-gray400: #00000026; --color-gray500: #00000040; --color-gray600: #363642; From de510ac23cd6aa14e70cea47c3b5cc7bcc650310 Mon Sep 17 00:00:00 2001 From: sikkzz Date: Thu, 30 Jan 2025 00:08:54 +0900 Subject: [PATCH 3/8] =?UTF-8?q?feat:=20=EC=95=84=EC=9D=B4=EC=BD=98=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.module.scss | 14 +++++++++ src/App.tsx | 8 +++++ .../ui/IconButton/IconButton.module.scss | 31 +++++++++++++++++++ src/components/ui/IconButton/IconButton.tsx | 24 ++++++++++++++ .../ui/IconButton/IconButton.types.ts | 10 ++++++ 5 files changed, 87 insertions(+) create mode 100644 src/components/ui/IconButton/IconButton.module.scss create mode 100644 src/components/ui/IconButton/IconButton.tsx create mode 100644 src/components/ui/IconButton/IconButton.types.ts diff --git a/src/App.module.scss b/src/App.module.scss index cae945f..674c893 100644 --- a/src/App.module.scss +++ b/src/App.module.scss @@ -7,3 +7,17 @@ margin: 0 auto; margin-top: 40px; } + +.Test2 { + width: 161px; + display: flex; + flex-direction: column; + gap: 16px; +} + +.Test3 { + width: 99px; + display: flex; + flex-direction: column; + gap: 16px; +} diff --git a/src/App.tsx b/src/App.tsx index 6a4075a..e38ce98 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,7 @@ import styles from "./App.module.scss"; import Button from "@/components/ui/Button/Button"; +import IconButton from "@/components/ui/IconButton/IconButton"; const App = () => { return ( @@ -8,6 +9,13 @@ const App = () => { + ); + }, +); + +export default IconButton; diff --git a/src/components/ui/IconButton/IconButton.types.ts b/src/components/ui/IconButton/IconButton.types.ts new file mode 100644 index 0000000..b3338aa --- /dev/null +++ b/src/components/ui/IconButton/IconButton.types.ts @@ -0,0 +1,10 @@ +import type { IconNameType } from "@/components/ui/Icon/Icon"; + +export type IconButtonSize = "md" | "sm"; + +export interface IconButtonProps extends React.ButtonHTMLAttributes { + type?: "button" | "submit"; + text?: string; + size?: IconButtonSize; + iconName: IconNameType; +} From 2c3b7ae95835bc69f6f10df4c60c00f5bff414bd Mon Sep 17 00:00:00 2001 From: sikkzz Date: Thu, 30 Jan 2025 00:26:46 +0900 Subject: [PATCH 4/8] =?UTF-8?q?feat:=20base=20button=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80,=20button,=20icon=20but?= =?UTF-8?q?ton=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ui/BaseButton/BaseButton.module.scss | 10 ++++++ src/components/ui/BaseButton/BaseButton.tsx | 18 ++++++++++ .../ui/BaseButton/BaseButton.types.ts | 6 ++++ src/components/ui/Button/Button.module.scss | 8 ----- src/components/ui/Button/Button.tsx | 27 +++++++++++--- src/components/ui/Button/Button.types.ts | 8 ++--- .../ui/IconButton/IconButton.module.scss | 8 ----- src/components/ui/IconButton/IconButton.tsx | 36 ++++++++++++++++--- .../ui/IconButton/IconButton.types.ts | 9 ++--- 9 files changed, 96 insertions(+), 34 deletions(-) create mode 100644 src/components/ui/BaseButton/BaseButton.module.scss create mode 100644 src/components/ui/BaseButton/BaseButton.tsx create mode 100644 src/components/ui/BaseButton/BaseButton.types.ts diff --git a/src/components/ui/BaseButton/BaseButton.module.scss b/src/components/ui/BaseButton/BaseButton.module.scss new file mode 100644 index 0000000..1f3880d --- /dev/null +++ b/src/components/ui/BaseButton/BaseButton.module.scss @@ -0,0 +1,10 @@ +@use "@/styles/mixins" as *; + +.BaseButton { + cursor: pointer; + margin: 0; + border: none; + border-radius: 0.875rem; + width: 100%; + height: 3.25rem; +} diff --git a/src/components/ui/BaseButton/BaseButton.tsx b/src/components/ui/BaseButton/BaseButton.tsx new file mode 100644 index 0000000..51ec0e5 --- /dev/null +++ b/src/components/ui/BaseButton/BaseButton.tsx @@ -0,0 +1,18 @@ +import React from "react"; + +import classNames from "classnames"; + +import styles from "@/components/ui/BaseButton/BaseButton.module.scss"; +import type { BaseButtonProps } from "@/components/ui/BaseButton/BaseButton.types"; + +const BaseButton = React.forwardRef( + ({ className, children, type = "button", ...props }, ref) => { + return ( + + ); + }, +); + +export default BaseButton; diff --git a/src/components/ui/BaseButton/BaseButton.types.ts b/src/components/ui/BaseButton/BaseButton.types.ts new file mode 100644 index 0000000..6ecb4da --- /dev/null +++ b/src/components/ui/BaseButton/BaseButton.types.ts @@ -0,0 +1,6 @@ +export interface ButtonOwnProps { + as?: React.ElementType; + text?: string; +} + +export type BaseButtonProps = React.ButtonHTMLAttributes; diff --git a/src/components/ui/Button/Button.module.scss b/src/components/ui/Button/Button.module.scss index c0e2840..f754b43 100644 --- a/src/components/ui/Button/Button.module.scss +++ b/src/components/ui/Button/Button.module.scss @@ -1,14 +1,6 @@ @use "@/styles/mixins" as *; .Button { - cursor: pointer; - margin: 0; - border: none; - border-radius: 0.875rem; - padding: 0.875rem; - width: 100%; - height: 3.25rem; - &.style-primary { background-color: var(--color-text01); color: var(--color-white); diff --git a/src/components/ui/Button/Button.tsx b/src/components/ui/Button/Button.tsx index 962074d..5b8f7d1 100644 --- a/src/components/ui/Button/Button.tsx +++ b/src/components/ui/Button/Button.tsx @@ -1,20 +1,37 @@ -import React from "react"; +import React, { useCallback } from "react"; import classNames from "classnames"; +import BaseButton from "@/components/ui/BaseButton/BaseButton"; import styles from "@/components/ui/Button/Button.module.scss"; import type { ButtonProps } from "@/components/ui/Button/Button.types"; const Button = React.forwardRef( - ({ className, variant = "primary", text, ...props }, ref) => { + ( + { as = BaseButton, className, variant = "primary", text, disabled = false, onClick, ...props }, + ref, + ) => { + const Comp = as as typeof BaseButton; + + const handleClick = useCallback( + (e: React.MouseEvent) => { + if (!disabled) { + onClick?.(e); + } + }, + [onClick, disabled], + ); + return ( - + ); }, ); diff --git a/src/components/ui/Button/Button.types.ts b/src/components/ui/Button/Button.types.ts index c1b673e..00a3f24 100644 --- a/src/components/ui/Button/Button.types.ts +++ b/src/components/ui/Button/Button.types.ts @@ -1,7 +1,7 @@ -export type ButtonVariant = "primary" | "secondary" | "disabled"; +import type { ButtonOwnProps } from "@/components/ui/BaseButton/BaseButton.types"; -export interface ButtonProps extends React.ButtonHTMLAttributes { - type?: "button" | "submit"; - text?: string; +type ButtonVariant = "primary" | "secondary" | "disabled"; + +export interface ButtonProps extends React.ButtonHTMLAttributes, ButtonOwnProps { variant?: ButtonVariant; } diff --git a/src/components/ui/IconButton/IconButton.module.scss b/src/components/ui/IconButton/IconButton.module.scss index bab2527..7f90ab7 100644 --- a/src/components/ui/IconButton/IconButton.module.scss +++ b/src/components/ui/IconButton/IconButton.module.scss @@ -1,20 +1,12 @@ @use "@/styles/mixins" as *; .IconButton { - cursor: pointer; - margin: 0; - border: none; - border-radius: 0.875rem; - padding: 0.875rem; - width: 100%; - display: flex; justify-content: center; align-items: center; &.size-md { gap: 0.375rem; - height: 3.25rem; background-color: var(--color-gray400); color: var(--color-white); @include buttonSecondary; diff --git a/src/components/ui/IconButton/IconButton.tsx b/src/components/ui/IconButton/IconButton.tsx index 0aa87b6..036a372 100644 --- a/src/components/ui/IconButton/IconButton.tsx +++ b/src/components/ui/IconButton/IconButton.tsx @@ -1,22 +1,48 @@ -import React from "react"; +import React, { useCallback } from "react"; import classNames from "classnames"; +import BaseButton from "@/components/ui/BaseButton/BaseButton"; import Icon from "@/components/ui/Icon/Icon"; import styles from "@/components/ui/IconButton/IconButton.module.scss"; import type { IconButtonProps } from "@/components/ui/IconButton/IconButton.types"; const IconButton = React.forwardRef( - ({ className, size = "md", text, iconName, ...props }, ref) => { + ( + { + as = BaseButton, + className, + size = "md", + disabled = false, + onClick, + text, + iconName, + ...props + }, + ref, + ) => { + const Comp = as as typeof BaseButton; + + const handleClick = useCallback( + (e: React.MouseEvent) => { + if (!disabled) { + onClick?.(e); + } + }, + [onClick, disabled], + ); + return ( - + ); }, ); diff --git a/src/components/ui/IconButton/IconButton.types.ts b/src/components/ui/IconButton/IconButton.types.ts index b3338aa..ba761ac 100644 --- a/src/components/ui/IconButton/IconButton.types.ts +++ b/src/components/ui/IconButton/IconButton.types.ts @@ -1,10 +1,11 @@ +import type { ButtonOwnProps } from "@/components/ui/BaseButton/BaseButton.types"; import type { IconNameType } from "@/components/ui/Icon/Icon"; -export type IconButtonSize = "md" | "sm"; +type IconButtonSize = "md" | "sm"; -export interface IconButtonProps extends React.ButtonHTMLAttributes { - type?: "button" | "submit"; - text?: string; +export interface IconButtonProps + extends React.ButtonHTMLAttributes, + ButtonOwnProps { size?: IconButtonSize; iconName: IconNameType; } From 82c22f1d3dd9919fa36f0aa791fe22cd76a62388 Mon Sep 17 00:00:00 2001 From: sikkzz Date: Thu, 30 Jan 2025 01:05:30 +0900 Subject: [PATCH 5/8] =?UTF-8?q?feat:=20=EB=B2=84=ED=8A=BC=20storybook=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/preview.module.scss | 10 ++++- .storybook/preview.tsx | 4 ++ src/components/ui/Button/Button.module.scss | 18 +++++++++ src/components/ui/Button/Button.stories.tsx | 43 +++++++++++++++++++++ src/components/ui/Icon/Icon.module.scss | 20 ++++++++++ src/components/ui/Icon/Icon.stories.tsx | 36 +++++++---------- src/components/ui/Icon/Icon.tsx | 6 ++- tsconfig.json | 2 +- 8 files changed, 113 insertions(+), 26 deletions(-) create mode 100644 src/components/ui/Button/Button.stories.tsx create mode 100644 src/components/ui/Icon/Icon.module.scss diff --git a/.storybook/preview.module.scss b/.storybook/preview.module.scss index a776076..1a1c876 100644 --- a/.storybook/preview.module.scss +++ b/.storybook/preview.module.scss @@ -10,5 +10,13 @@ .Story { height: 100%; padding: 2.5rem; - background-color: gray; + background-color: white; + color: black; +} + +.InverseStory { + height: 100%; + padding: 2.5rem; + background-color: black; + color: white; } diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 1c9de14..1c78c3c 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -18,6 +18,10 @@ const preview: Preview = {
+ +
+ +
), ], diff --git a/src/components/ui/Button/Button.module.scss b/src/components/ui/Button/Button.module.scss index f754b43..ab99216 100644 --- a/src/components/ui/Button/Button.module.scss +++ b/src/components/ui/Button/Button.module.scss @@ -19,3 +19,21 @@ @include buttonSecondary; } } + +.ButtonStory { + display: flex; + flex-direction: column; + gap: 1rem; + + .Wrapper { + display: flex; + gap: 1rem; + justify-content: center; + width: 300px; + } + + .Text { + font-size: 1.125rem; + width: 120px; + } +} diff --git a/src/components/ui/Button/Button.stories.tsx b/src/components/ui/Button/Button.stories.tsx new file mode 100644 index 0000000..bce9f3b --- /dev/null +++ b/src/components/ui/Button/Button.stories.tsx @@ -0,0 +1,43 @@ +import Button from "@/components/ui/Button/Button"; +import styles from "@/components/ui/Button/Button.module.scss"; +import type { ButtonProps } from "@/components/ui/Button/Button.types"; + +import type { Meta, StoryObj } from "@storybook/react"; + +const meta: Meta = { + title: "Example/Button", + component: Button, + parameters: { + layout: "centered", + }, + tags: ["!autodocs"], +}; + +export default meta; + +export const Primary: StoryObj = { + args: { + text: "정보가 맞아요", + disabled: false, + variant: "primary", + }, +}; + +export const VariantProps: StoryObj = { + render: () => ( +
+
+

primary

+
+
+

secondary

+
+
+

disabled

+
+
+ ), +}; diff --git a/src/components/ui/Icon/Icon.module.scss b/src/components/ui/Icon/Icon.module.scss new file mode 100644 index 0000000..611042c --- /dev/null +++ b/src/components/ui/Icon/Icon.module.scss @@ -0,0 +1,20 @@ +.IconStory { + display: flex; + align-items: center; + gap: 4rem; + + .Wrapper { + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; + + .InnerWrapper { + width: 1.5rem; + height: 1.5rem; + display: flex; + justify-content: center; + align-items: center; + } + } +} diff --git a/src/components/ui/Icon/Icon.stories.tsx b/src/components/ui/Icon/Icon.stories.tsx index 1e1ccbe..12e19ff 100644 --- a/src/components/ui/Icon/Icon.stories.tsx +++ b/src/components/ui/Icon/Icon.stories.tsx @@ -1,6 +1,7 @@ import Icon from "@/components/ui/Icon/Icon"; import { ICONS } from "@/components/ui/Icon/Icon"; -import type { IconNameType } from "@/components/ui/Icon/Icon"; +import type { IconNameType, IconProps } from "@/components/ui/Icon/Icon"; +import styles from "@/components/ui/Icon/Icon.module.scss"; import type { Meta, StoryObj } from "@storybook/react"; @@ -10,34 +11,23 @@ const meta: Meta = { parameters: { layout: "centered", }, - argTypes: { - name: { - control: { - type: "select", - options: ["camera", "close", "gallery", "leftArrow", "paste", "plus"], - }, - }, - }, + tags: ["!autodocs"], }; export default meta; -export const AllIcons: StoryObj = { +export const Primary: StoryObj = { + args: { + name: "camera", + }, +}; + +export const AllIcons: StoryObj = { render: () => ( -
+
{(Object.keys(ICONS) as IconNameType[]).map((iconName) => ( -
-
+
+

{iconName}

diff --git a/src/components/ui/Icon/Icon.tsx b/src/components/ui/Icon/Icon.tsx index c23ff85..e22f3a4 100644 --- a/src/components/ui/Icon/Icon.tsx +++ b/src/components/ui/Icon/Icon.tsx @@ -7,6 +7,10 @@ import PlusIcon from "@/assets/svg/ic-plus.svg?react"; export type IconNameType = "camera" | "close" | "gallery" | "leftArrow" | "paste" | "plus"; +export interface IconProps { + name: IconNameType; +} + export const ICONS = { camera: CameraIcon, close: CloseIcon, @@ -17,7 +21,7 @@ export const ICONS = { }; // 추후 사이즈, 컬러등 추가 가능 -const Icon = ({ name }: { name: IconNameType }) => { +const Icon = ({ name }: IconProps) => { const SvgIcon = ICONS[name]; return ; diff --git a/tsconfig.json b/tsconfig.json index ed6beba..0b035c7 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -27,5 +27,5 @@ "plugins": [{ "name": "typescript-plugin-css-modules" }], "types": ["@testing-library/jest-dom", "vite-plugin-svgr/client", "vite/client"] }, - "include": ["src", "src/types"] + "include": ["src", "src/types", ".storybook/**/*"] } From 9d69a262421084b040faa846f3b0d79330ae52de Mon Sep 17 00:00:00 2001 From: sikkzz Date: Thu, 30 Jan 2025 01:12:13 +0900 Subject: [PATCH 6/8] =?UTF-8?q?feat:=20=EC=95=84=EC=9D=B4=EC=BD=98=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20storybook=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ui/IconButton/IconButton.module.scss | 18 +++++++ .../ui/IconButton/IconButton.stories.tsx | 50 +++++++++++++++++++ 2 files changed, 68 insertions(+) create mode 100644 src/components/ui/IconButton/IconButton.stories.tsx diff --git a/src/components/ui/IconButton/IconButton.module.scss b/src/components/ui/IconButton/IconButton.module.scss index 7f90ab7..c5e2095 100644 --- a/src/components/ui/IconButton/IconButton.module.scss +++ b/src/components/ui/IconButton/IconButton.module.scss @@ -21,3 +21,21 @@ @include buttonTertiary; } } + +.IconButtonStory { + display: flex; + flex-direction: column; + gap: 1rem; + + .Wrapper { + display: flex; + gap: 1rem; + justify-content: center; + align-items: center; + } + + .Text { + font-size: 1.125rem; + width: 120px; + } +} diff --git a/src/components/ui/IconButton/IconButton.stories.tsx b/src/components/ui/IconButton/IconButton.stories.tsx new file mode 100644 index 0000000..f897bed --- /dev/null +++ b/src/components/ui/IconButton/IconButton.stories.tsx @@ -0,0 +1,50 @@ +import IconButton from "@/components/ui/IconButton/IconButton"; +import styles from "@/components/ui/IconButton/IconButton.module.scss"; +import type { IconButtonProps } from "@/components/ui/IconButton/IconButton.types"; + +import type { Meta, StoryObj } from "@storybook/react"; + +const meta: Meta = { + title: "Example/IconButton", + component: IconButton, + parameters: { + layout: "centered", + }, + tags: ["!autodocs"], +}; + +export default meta; + +export const Primary: StoryObj = { + args: { + text: "갤러리", + iconName: "gallery", + size: "md", + }, +}; + +export const IconNameProps: StoryObj = { + render: () => ( +
+
+

gallery

+ +
+
+

camera

+ +
+
+ ), +}; + +export const SizeProps: StoryObj = { + render: () => ( +
+
+

sm

+ +
+
+ ), +}; From cca32f7eeeda097b09377f47efc415ab1a1eb33d Mon Sep 17 00:00:00 2001 From: sikkzz Date: Fri, 31 Jan 2025 01:01:59 +0900 Subject: [PATCH 7/8] =?UTF-8?q?refactor:=20global=20scss=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80,=20=EC=9D=BC=EB=B6=80=20=EC=8A=A4=ED=83=80=EC=9D=BC?= =?UTF-8?q?=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ui/BaseButton/BaseButton.module.scss | 2 -- src/main.tsx | 1 + src/styles/global.scss | 29 +++++++++++++++++++ src/styles/reset.scss | 4 --- 4 files changed, 30 insertions(+), 6 deletions(-) create mode 100644 src/styles/global.scss diff --git a/src/components/ui/BaseButton/BaseButton.module.scss b/src/components/ui/BaseButton/BaseButton.module.scss index 1f3880d..5d5307d 100644 --- a/src/components/ui/BaseButton/BaseButton.module.scss +++ b/src/components/ui/BaseButton/BaseButton.module.scss @@ -2,8 +2,6 @@ .BaseButton { cursor: pointer; - margin: 0; - border: none; border-radius: 0.875rem; width: 100%; height: 3.25rem; diff --git a/src/main.tsx b/src/main.tsx index 0f2457d..40b99a9 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -8,6 +8,7 @@ import App from "@/App"; import ReactQueryClientProvider from "@/components/provider/ReactQueryClientProvider"; import "@/styles/reset.scss"; +import "@/styles/global.scss"; createRoot(document.getElementById("root")!).render( diff --git a/src/styles/global.scss b/src/styles/global.scss new file mode 100644 index 0000000..0e78698 --- /dev/null +++ b/src/styles/global.scss @@ -0,0 +1,29 @@ +* { + font-family: "Pretendard", sans-serif; + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + max-width: 37.5rem; + margin: 0 auto; +} + +a { + text-decoration: none; + color: inherit; +} + +button { + border: none; + outline: none; + background-color: transparent; +} + +input, +textarea { + border: none; + outline: none; + background-color: transparent; +} diff --git a/src/styles/reset.scss b/src/styles/reset.scss index a04e60e..2560287 100644 --- a/src/styles/reset.scss +++ b/src/styles/reset.scss @@ -128,7 +128,3 @@ table { border-collapse: collapse; border-spacing: 0; } - -* { - font-family: "Pretendard", sans-serif; -} From 2e6ed0d6bb65043bdaedd52c6ee4ab5380d80d2b Mon Sep 17 00:00:00 2001 From: sikkzz Date: Fri, 31 Jan 2025 14:25:05 +0900 Subject: [PATCH 8/8] =?UTF-8?q?refactor:=20=EB=B2=84=ED=8A=BC=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95,=20storybook=20global?= =?UTF-8?q?=20scss=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/preview.module.scss | 4 ++++ .storybook/preview.tsx | 2 ++ src/App.tsx | 2 +- .../ui/BaseButton/BaseButton.module.scss | 1 + src/components/ui/Button/Button.module.scss | 14 ++++++++++---- src/components/ui/Button/Button.stories.tsx | 4 ++-- src/components/ui/Button/Button.tsx | 4 ++-- src/components/ui/Button/Button.types.ts | 2 +- .../ui/IconButton/IconButton.module.scss | 1 + 9 files changed, 24 insertions(+), 10 deletions(-) diff --git a/.storybook/preview.module.scss b/.storybook/preview.module.scss index 1a1c876..6b67abb 100644 --- a/.storybook/preview.module.scss +++ b/.storybook/preview.module.scss @@ -1,3 +1,7 @@ +body { + max-width: initial; +} + .Wrapper { display: flex; flex-flow: row wrap; diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 1c78c3c..4ad260b 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -1,5 +1,7 @@ import type { Preview } from "@storybook/react"; +import "@/styles/reset.scss"; +import "@/styles/global.scss"; import styles from "./preview.module.scss"; const preview: Preview = { diff --git a/src/App.tsx b/src/App.tsx index e38ce98..1a8ea41 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -8,7 +8,7 @@ const App = () => {
-

disabled

-
), diff --git a/src/components/ui/Button/Button.tsx b/src/components/ui/Button/Button.tsx index 5b8f7d1..6b49acf 100644 --- a/src/components/ui/Button/Button.tsx +++ b/src/components/ui/Button/Button.tsx @@ -1,4 +1,4 @@ -import React, { useCallback } from "react"; +import { forwardRef, useCallback } from "react"; import classNames from "classnames"; @@ -6,7 +6,7 @@ import BaseButton from "@/components/ui/BaseButton/BaseButton"; import styles from "@/components/ui/Button/Button.module.scss"; import type { ButtonProps } from "@/components/ui/Button/Button.types"; -const Button = React.forwardRef( +const Button = forwardRef( ( { as = BaseButton, className, variant = "primary", text, disabled = false, onClick, ...props }, ref, diff --git a/src/components/ui/Button/Button.types.ts b/src/components/ui/Button/Button.types.ts index 00a3f24..5adc592 100644 --- a/src/components/ui/Button/Button.types.ts +++ b/src/components/ui/Button/Button.types.ts @@ -1,6 +1,6 @@ import type { ButtonOwnProps } from "@/components/ui/BaseButton/BaseButton.types"; -type ButtonVariant = "primary" | "secondary" | "disabled"; +type ButtonVariant = "primary" | "secondary" | "tertiary"; export interface ButtonProps extends React.ButtonHTMLAttributes, ButtonOwnProps { variant?: ButtonVariant; diff --git a/src/components/ui/IconButton/IconButton.module.scss b/src/components/ui/IconButton/IconButton.module.scss index c5e2095..f1f51d8 100644 --- a/src/components/ui/IconButton/IconButton.module.scss +++ b/src/components/ui/IconButton/IconButton.module.scss @@ -15,6 +15,7 @@ &.size-sm { gap: 0.125rem; height: 2.375rem; + padding: 0.5rem 0.875rem; background-color: var(--color-text01); color: var(--color-white); border-radius: 0.75rem;