[FE-Feat] 랜딩페이지 마크업 및 이미지 webp 변환 스크립트 구현

frontend/package.json

@@ -13,6 +13,7 @@
     "setup-git-hook": "bash src/scripts/git-hook-init-command.sh",
     "create-theme": "node src/scripts/create-theme.cjs & pnpm eslint --fix",
     "create-icon": "node src/scripts/create-icon.cjs",
+    "optimize-image": "node src/scripts/optimize-image.cjs",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
@@ -54,6 +55,7 @@
     "eslint-plugin-storybook": "^0.11.2",
     "globals": "^15.14.0",
     "jsdom": "^26.0.0",
+    "sharp": "^0.33.5",
     "storybook": "^8.5.2",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.18.2",

frontend/src/components/Button/index.tsx

@@ -29,8 +29,8 @@ const Button = ({
   children,
   className,
 }: ButtonProps) => (
-  <button
-    className={clsx(className, containerStyle({ type, style, radius, size }))}
+  <button 
+    className={clsx(containerStyle({ type, style, radius, size }), className)}
     onClick={onClick}
   >
     {leftIcon && <ButtonIcon size={size}>{leftIcon}</ButtonIcon>}