Skip to content

Commit

Permalink
fix: 컴포넌트 오류 수정
Browse files Browse the repository at this point in the history
  • Loading branch information
sohee-K committed Jun 14, 2024
1 parent c2b8607 commit c3353b3
Show file tree
Hide file tree
Showing 6 changed files with 51 additions and 53 deletions.
8 changes: 5 additions & 3 deletions packages/ui/Button/Button.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import React, { type ButtonHTMLAttributes } from 'react';
import * as S from './style.css';
import createButtonVariant from './utils';
import { iconSizes } from './constants';

interface IconProps { color?: string }
interface IconProps { color?: string, width: number, height: number }

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
children?: React.ReactNode;
Expand All @@ -25,14 +26,15 @@ function Button({
...buttonElementProps
}: ButtonProps) {
const variant = createButtonVariant(theme, rounded, size);
const iconSize = iconSizes[size];
return (
<button className={`${S.root} ${variant} ${className}`}
type="button"
{...buttonElementProps}
>
{LeftIcon ? <LeftIcon /> : null}
{LeftIcon ? <LeftIcon height={iconSize} width={iconSize} /> : null}
<span>{children}</span>
{RightIcon ? <RightIcon /> : null}
{(RightIcon && !LeftIcon) ? <RightIcon height={iconSize} width={iconSize} /> : null}
</button>
);
}
Expand Down
69 changes: 35 additions & 34 deletions packages/ui/Button/constants.ts
Original file line number Diff line number Diff line change
@@ -1,52 +1,53 @@
import theme from '../theme.css';
import type {
ButtonColorTheme,
ButtonColorThemeWithStatus,
ButtonSizeTheme,
} from './types';
import theme from "../theme.css";
import type { ButtonColorTheme, ButtonColorThemeWithStatus, ButtonSizeTheme } from "./types";

export const bgColors: Record<ButtonColorThemeWithStatus, string> = {
'white-default': theme.colors.white,
'black-default': theme.colors.gray700,
'blue-default': theme.colors.success,
'red-default': theme.colors.error,
'white-hover': theme.colors.gray50,
'black-hover': theme.colors.gray600,
'blue-hover': theme.colors.blue500,
'red-hover': theme.colors.red500,
'white-press': theme.colors.gray100,
'black-press': theme.colors.gray500,
'blue-press': theme.colors.blue600,
'red-press': theme.colors.red600,
"white-default": theme.colors.white,
"black-default": theme.colors.gray700,
"blue-default": theme.colors.success,
"red-default": theme.colors.error,
"white-hover": theme.colors.gray50,
"black-hover": theme.colors.gray600,
"blue-hover": theme.colors.blue500,
"red-hover": theme.colors.red500,
"white-press": theme.colors.gray100,
"black-press": theme.colors.gray500,
"blue-press": theme.colors.blue600,
"red-press": theme.colors.red600,
};

export const textColors = {
light: theme.colors.white,
dark: theme.colors.gray800,
};

export const colorThemeToTextColor: Record<ButtonColorTheme, 'light' | 'dark'> =
{
white: 'dark',
black: 'light',
red: 'light',
blue: 'light',
};
export const colorThemeToTextColor: Record<ButtonColorTheme, "light" | "dark"> = {
white: "dark",
black: "light",
red: "light",
blue: "light",
};

export const borderRadiuses: Record<ButtonSizeTheme, string> = {
sm: '8px',
md: '10px',
lg: '12px',
sm: "8px",
md: "10px",
lg: "12px",
};

export const paddings: Record<ButtonSizeTheme, string> = {
sm: '9px 14px',
md: '12px 20px',
lg: '16px 26px',
sm: "9px 14px",
md: "12px 20px",
lg: "16px 26px",
};

export const fontSizes: Record<ButtonSizeTheme, string> = {
sm: '14px',
md: '14px',
lg: '18px',
sm: "14px",
md: "14px",
lg: "18px",
};

export const iconSizes: Record<ButtonSizeTheme, number> = {
sm: 16,
md: 20,
lg: 24,
};
8 changes: 4 additions & 4 deletions packages/ui/Control/CheckBox.tsx
Original file line number Diff line number Diff line change
@@ -1,34 +1,34 @@
import type { InputHTMLAttributes } from "react";
import { forwardRef } from "react";
import { IconCheck } from "@sopt-makers/icons";
import theme from "../theme.css";
import {
check,
checkBox,
checkBoxChecked,
checkBoxInput,
controlLabel,
controlWrapper,
labelColor,
} from "./style.css";

export interface CheckBoxProps
extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
label?: string;
size?: "sm" | "lg";
checked?: boolean;
color?: "white";
color?: string;
}

const CheckBox = forwardRef<HTMLInputElement, CheckBoxProps>(
({ checked = false, label, size = "sm", color = "white", ...props }, ref) => {
({ checked = false, label, size = "sm", color = theme.colors.gray10, ...props }, ref) => {
return (
<label className={controlWrapper}>
<input className={checkBoxInput} ref={ref} type="checkbox" {...props} />
<div className={`${checkBox[size]} ${checkBoxChecked[`${checked}`]}`}>
{checked ? <IconCheck className={check[size]} /> : null}
</div>
{label ? (
<p className={`${controlLabel[size]} ${labelColor[color]}`}>label</p>
<p className={controlLabel[size]} style={{ color }}>{label}</p>
) : null}
</label>
);
Expand Down
9 changes: 5 additions & 4 deletions packages/ui/Control/Radio.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
import type { InputHTMLAttributes } from "react";
import { forwardRef } from "react";
import { controlLabel, controlWrapper, labelColor, radio } from "./style.css";
import theme from "../theme.css";
import { controlLabel, controlWrapper, radio } from "./style.css";

export interface RadioProps
extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
label?: string;
size?: "sm" | "lg";
checked?: boolean;
color?: "white";
color?: string;
}

const Radio = forwardRef<HTMLInputElement, RadioProps>(
({ checked = false, label, size = "sm", color = "white", ...props }, ref) => {
({ checked = false, label, size = "sm", color = theme.colors.gray10, ...props }, ref) => {
return (
<label className={controlWrapper}>
<input
Expand All @@ -22,7 +23,7 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>(
{...props}
/>
{label ? (
<p className={`${controlLabel[size]} ${labelColor[color]}`}>label</p>
<p className={controlLabel[size]} style={{ color }}>label</p>
) : null}
</label>
);
Expand Down
6 changes: 0 additions & 6 deletions packages/ui/Control/style.css.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,6 @@ export const controlLabel = styleVariants({
],
});

export const labelColor = styleVariants({
white: {
color: theme.colors.gray10,
},
});

// Radio 관련 스타일링
const radioBase = style({
all: "unset",
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/Toast/parts/style.css.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const toastAnimation = keyframes({
});

export const root = style({
animation: `${toastAnimation} 4s`,
animation: `${toastAnimation} 3s`,
animationFillMode: "forwards",

display: "flex",
Expand All @@ -19,7 +19,7 @@ export const root = style({
left: "calc(50% - 16px)",
transform: "translateX(-50%)",
transition: "transform .2s linear",

width: "var(--mds-toast-width, 380px)",
margin: "0 16px",
padding: "14px 16px",
Expand Down

0 comments on commit c3353b3

Please sign in to comment.