feat: FloatButton 컴포넌트 구현

package.json

@@ -1,17 +1,16 @@
 {
   "name": "woori-design",
-  "private": false,
-  "version": "0.0.6",
+  "version": "0.0.36",
   "description": "A React component library for FloatButton and others",
   "type": "module",
-  "main": "dist/index.umd.js",
+  "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
   "exports": {
     ".": {
       "import": "./dist/index.es.js",
-      "require": "./dist/index.umd.js"
+      "require": "./dist/index.cjs.js"
     },
-    "./dist/Index.css": "./dist/Index.css"
+    "./dist/index.css": "./dist/index.css"
   },
   "files": [
     "dist",
@@ -20,32 +19,25 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "lint": "eslint .",
-    "preview": "vite preview",
-    "prepublishOnly": "npm run build"
-  },
-  "dependencies": {
-    "prop-types": "^15.8.1",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "vite-plugin-css-injected-by-js": "^3.5.2"
+    "preview": "vite preview"
   },
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": ">=16.0.0 <20.0.0",
+    "react-dom": ">=16.0.0 <20.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.7",
+    "@vitejs/plugin-react": "^4.3.4",
+    "vite": "^4.3.4",
+    "vite-plugin-css-injected-by-js": "^3.5.2"
   },
   "keywords": [
     "react",
-    "float-button",
+    "design-system",
     "component",
-    "library"
+    "library",
+    "woori-group"
   ],
   "author": "1223v",
-  "license": "MIT",
-  "devDependencies": {
-    "@types/node": "^22.10.10",
-    "@types/react": "^19.0.7",
-    "@vitejs/plugin-react": "^4.3.4",
-    "vite": "^6.0.7"
-  }
+  "license": "MIT"
 }

src/App.tsx

@@ -1,7 +1,17 @@
 import "./App.css";
+import FloatButton from "./libs/floatbutton/FloatButton";
 
 function App() {
-  return <div></div>;
+  return (
+    <div>
+      <FloatButton
+        icon="❓"
+        position="center"
+        size="large"
+        onClick={() => alert("Help clicked!")}
+      />
+    </div>
+  );
 }
 
 export default App;

src/global.d.ts

@@ -0,0 +1,5 @@
+// global.d.ts
+declare module "*.module.css" {
+  const classes: { [key: string]: string };
+  export default classes;
+}

src/index.css

@@ -1,69 +1,4 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.5em 1.2em;
-  margin: 0.3em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: red;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
+@import "./styles/colors.css";
+@import "./styles/spacing.css";
+@import "./styles/typography.css";
+@import "./libs/floatbutton/FloatButton.module.css";

src/index.ts

@@ -0,0 +1,8 @@
+import "./styles/colors.css";
+import "./styles/spacing.css";
+import "./styles/typography.css";
+
+export { default as FloatButton } from "./libs/floatbutton/FloatButton";
+export { default as Divider } from "./libs/divider/divider";
+export { default as Checkbox } from "./libs/checkbox/Checkbox";
+export { default as Button } from "./libs/button/Button";

src/libs/button/Button.tsx

@@ -2,7 +2,7 @@ import { forwardRef } from "react";
 import { ButtonProps } from ".";
 import styles from "./Button.module.css";
 
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   ({ size = "xlarge", width, children, onClick, ...props }, ref) => {
     const sizeClassName = styles[`button--${size}`];
 
@@ -20,3 +20,5 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     );
   }
 );
+
+export default Button;

src/libs/checkbox/Checkbox.tsx

@@ -2,16 +2,23 @@ import React, { forwardRef, useImperativeHandle, useRef } from "react";
 import styles from "./Checkbox.module.css";
 import { CheckboxProps } from "./Checkbox.type";
 
-export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
-  ({ label, checked, onChange, type, disabled = false, helperText, ...props }, ref) => {
+const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+  (
+    { label, checked, onChange, type, disabled = false, helperText, ...props },
+    ref
+  ) => {
     const inputRef = useRef<HTMLInputElement>(null);
     useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
       onChange?.(e.target.checked);
     };
 
-    const classNames = [styles.checkbox, disabled ? styles.disabled : "", type ? styles[type] : ""]
+    const classNames = [
+      styles.checkbox,
+      disabled ? styles.disabled : "",
+      type ? styles[type] : "",
+    ]
       .filter(Boolean)
       .join(" ");
 
@@ -29,10 +36,14 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
           />
           <div className={styles.textWrapper}>
             <span className={styles.label}>{label}</span>
-            {helperText && <div className={styles.helperText}>{helperText}</div>}
+            {helperText && (
+              <div className={styles.helperText}>{helperText}</div>
+            )}
           </div>
         </label>
       </>
     );
   }
 );
+
+export default Checkbox;

src/libs/divider/divider.tsx

@@ -1,7 +1,7 @@
 import styles from "./Divider.module.css";
 import { DividerProps } from "./Divider.types";
 
-export const Divider = ({
+const Divider = ({
   width = "300px",
   lineColor = "primary",
   thickness = 6,
@@ -12,9 +12,14 @@ export const Divider = ({
     backgroundColor: lineColor === "primary" ? "#007bff" : "#e0e0e0",
   };
 
-  const className = [styles.divider, lineColor !== "primary" && styles["divider-color--secondary"]]
+  const className = [
+    styles.divider,
+    lineColor !== "primary" && styles["divider-color--secondary"],
+  ]
     .filter(Boolean)
     .join(" ");
 
   return <hr className={className} style={dividerStyles} />;
 };
+
+export default Divider;

src/libs/floatbutton/FloatButton.module.css

@@ -0,0 +1,90 @@
+.floatButton {
+  position: fixed;
+  bottom: 16px;
+  right: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  transition: background-color 0.3s ease, box-shadow 0.3s ease,
+    transform 0.2s ease;
+  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+}
+
+.floatButton.left {
+  left: 16px;
+  right: auto;
+}
+
+.floatButton.right {
+  right: 16px;
+  left: auto;
+}
+
+.floatButton.center {
+  left: 50%;
+  bottom: 16px;
+}
+
+.floatButton.small {
+  width: 40px;
+  height: 40px;
+  font-size: var(--font-size-small);
+}
+
+.floatButton.medium {
+  width: 50px;
+  height: 50px;
+  font-size: var(--font-size-base);
+}
+
+.floatButton.large {
+  width: 60px;
+  height: 60px;
+  font-size: var(--font-size-large);
+}
+
+.floatButton.circle {
+  border-radius: 50%;
+}
+
+.floatButton.rounded {
+  border-radius: 12px;
+}
+
+.floatButton.default {
+  background-color: var(--color-primary);
+  color: var(--color-light);
+  box-shadow: 0 4px 6px var(--color-shadow-light);
+}
+
+.floatButton.default:hover {
+  background-color: var(--color-primary-hover);
+  box-shadow: 0 6px 10px var(--color-shadow-dark);
+  transform: scale(1.1);
+}
+
+.floatButton:active {
+  transform: scale(0.95);
+  background-color: var(--color-primary-active);
+  box-shadow: 0 2px 4px var(--color-shadow-dark);
+}
+
+.floatButton.custom {
+  box-shadow: 0 4px 6px var(--color-shadow-light);
+}
+
+.floatButton.custom:hover {
+  transform: scale(1.1);
+  box-shadow: 0 6px 10px var(--color-shadow-dark);
+}
+
+.floatButton.custom:active {
+  transform: scale(0.95);
+  box-shadow: 0 2px 4px var(--color-shadow-dark);
+}