Skip to content

[Feature/#52] 공통 버튼에 스타일 개선 #53

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jjjsun merged 4 commits into from
Feb 24, 2026
Merged

[Feature/#52] 공통 버튼에 스타일 개선 #53

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bc2e206
feat: 공통 버튼에 danger, dangerSoft 추가 및 기존 스타일 개선
jjjsun Feb 23, 2026
a9c19e2
fix: gradient varient 타입 복구
jjjsun Feb 23, 2026
ccece1a
chore: 코드래빗 수정사항 반영
jjjsun Feb 23, 2026
15c8d3e
chore: 코드래빗 수정사항 반영
jjjsun Feb 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions src/components/common/button/Button.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,12 @@ export const Outline: TButtonStory = {
args: { variant: "outline" },
};

export const Gradient: TButtonStory = {
args: { variant: "gradient" },
export const Danger: TButtonStory = {
args: { variant: "danger" },
};

export const DangerSoft: TButtonStory = {
args: { variant: "dangerSoft" },
};

export const Disabled: TButtonStory = {
Expand Down
27 changes: 18 additions & 9 deletions src/components/common/button/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,13 @@ import { twMerge } from "tailwind-merge";

interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
size?: "big" | "small";
variant?: "primary" | "secondary" | "outline" | "gradient" | "custom";
variant?:
| "primary"
| "secondary"
| "outline"
| "danger"
| "dangerSoft"
| "custom";
isLoading?: boolean;
leftIcon?: ReactNode;
fullWidth?: boolean;
Expand All @@ -21,26 +27,29 @@ export default function Button({
...rest
}: IButtonProps) {
const sizeClasses = {
big: "h-button-big px-6 rounded-component-md font-heading3",
small: "h-button-small px-4 rounded-component-md font-body1",
big: "h-button-big px-6 rounded-component-md font-heading3 transition-colors duration-normal ease-out",
small:
"h-button-small px-4 rounded-component-sm font-body1 transition-colors duration-normal ease-out",
};

const variantClasses = {
primary:
"bg-brand-800 text-white hover:bg-brand-700 disabled:bg-bg-disabled disabled:text-text-disabled disabled:hover:bg-bg-disabled",
"bg-chart-3 text-white hover:opacity-80 disabled:bg-bg-disabled disabled:text-text-disabled disabled:hover:opacity-100",
secondary:
"bg-gray-100 text-brand-900 hover:bg-gray-200 disabled:bg-bg-disabled disabled:text-text-disabled disabled:hover:bg-bg-disabled",
"bg-gray-100 text-brand-900 hover:bg-gray-200 disabled:bg-bg-disabled disabled:text-text-disabled disabled:hover:opacity-100",
outline:
"bg-transparent border-2 border-brand-800 text-brand-800 hover:bg-brand-50 disabled:border-gray-300 disabled:text-text-disabled disabled:hover:bg-transparent",
gradient:
"bg-linear-to-r from-logo-1 to-logo-2 text-white hover:opacity-90 shadow-brand-500/30 disabled:bg-none disabled:bg-bg-disabled disabled:text-text-disabled disabled:shadow-none disabled:opacity-100",
"bg-transparent border border-chart-3 text-chart-3 hover:bg-brand-300 disabled:border-gray-300 disabled:text-text-disabled disabled:hover:bg-transparent",
danger:
"bg-status-red text-white hover:opacity-80 disabled:bg-bg-disabled disabled:text-text-disabled disabled:hover:opacity-100",
Comment thread
jjjsun marked this conversation as resolved.
Resolved
dangerSoft:
"bg-status-red/10 text-status-red border border-status-red hover:bg-status-red/20 disabled:bg-bg-disabled disabled:text-text-disabled disabled:border-gray-300",
Comment thread
jjjsun marked this conversation as resolved.
Resolved
custom: "",
};

return (
<button
className={twMerge(
"flex items-center justify-center gap-2 transition-smooth active-scale whitespace-nowrap",
"flex items-center justify-center gap-2 active-scale whitespace-nowrap",
sizeClasses[size],
variantClasses[variant],
fullWidth && "w-full relative",
Expand Down
Loading