diff --git a/.changeset/strange-buckets-wonder.md b/.changeset/strange-buckets-wonder.md new file mode 100644 index 00000000..9ce154b2 --- /dev/null +++ b/.changeset/strange-buckets-wonder.md @@ -0,0 +1,5 @@ +--- +"wowds-ui": patch +--- + +Spinner 컴포넌트를 배포합니다. diff --git a/packages/wow-ui/package.json b/packages/wow-ui/package.json index 66de2540..9f69fa31 100644 --- a/packages/wow-ui/package.json +++ b/packages/wow-ui/package.json @@ -40,6 +40,16 @@ "require": "./dist/Stepper.cjs", "import": "./dist/Stepper.js" }, + "./BlueSpinner": { + "types": "./dist/components/Spinner/BlueSpinner.d.ts", + "require": "./dist/BlueSpinner.cjs", + "import": "./dist/BlueSpinner.js" + }, + "./RainbowSpinner": { + "types": "./dist/components/Spinner/RainbowSpinner.d.ts", + "require": "./dist/RainbowSpinner.cjs", + "import": "./dist/RainbowSpinner.js" + }, "./SearchBar": { "types": "./dist/components/SearchBar/index.d.ts", "require": "./dist/SearchBar.cjs", @@ -137,6 +147,7 @@ "typescript": "^5.3.3" }, "dependencies": { + "lottie-react": "^2.4.0", "wowds-icons": "workspace:^" }, "peerDependencies": { diff --git a/packages/wow-ui/rollup.config.js b/packages/wow-ui/rollup.config.js index 66f0276e..b12cc0eb 100644 --- a/packages/wow-ui/rollup.config.js +++ b/packages/wow-ui/rollup.config.js @@ -24,6 +24,8 @@ export default { TextButton: "./src/components/TextButton", Switch: "./src/components/Switch", Stepper: "./src/components/Stepper", + BlueSpinner: "./src/components/Spinner/BlueSpinner", + RainbowSpinner: "./src/components/Spinner/RainbowSpinner", SearchBar: "./src/components/SearchBar", RadioButton: "./src/components/RadioGroup/RadioButton", RadioGroup: "./src/components/RadioGroup/RadioGroup", @@ -50,7 +52,7 @@ export default { entryFileNames: "[name].cjs", }, ], - external: ["react/jsx-runtime"], + external: ["react/jsx-runtime", "lottie-react"], plugins: [ alias({ entries: [ diff --git a/packages/wow-ui/src/assets/lottie/blueSpinner.json b/packages/wow-ui/src/assets/lottie/blueSpinner.json new file mode 100644 index 00000000..00bc771d --- /dev/null +++ b/packages/wow-ui/src/assets/lottie/blueSpinner.json @@ -0,0 +1,452 @@ +{ + "nm": "Untitled file", + "ddd": 0, + "h": 500, + "w": 500, + "meta": { "g": "@lottiefiles/creator 1.13.0" }, + "layers": [ + { + "ty": 4, + "nm": "Shape Layer - SVG", + "sr": 1, + "st": 0, + "op": 60, + "ip": 0, + "hd": false, + "ddd": 0, + "bm": 0, + "hasMask": false, + "ao": 0, + "ks": { + "a": { "a": 0, "k": [160.55200004577637, 143.99999842639] }, + "s": { "a": 0, "k": [175, 175] }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [249.55200004577637, 249.99999842639] }, + "r": { + "a": 1, + "k": [ + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [0], + "t": 0 + }, + { "s": [360], "t": 60 } + ] + }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + }, + "shapes": [ + { + "ty": "gr", + "bm": 0, + "hd": false, + "nm": "Group 1", + "it": [ + { + "ty": "sh", + "bm": 0, + "hd": false, + "nm": "Path 1", + "d": 1, + "ks": { + "a": 0, + "k": { + "c": true, + "i": [ + [0, 0], + [13.503, 13.501999999999981], + [0, 19.095600000000005], + [-13.502299999999991, 13.502599999999997], + [-19.096000000000004, 0.00000204866], + [0, 0], + [0, 0] + ], + "o": [ + [-19.096000000000004, 0], + [-13.502299999999991, -13.503], + [0, -19.095599999999997], + [13.503, -13.50261], + [0, 0], + [0, 0], + [0, 0] + ], + "v": [ + [160, 144], + [109.088, 122.912], + [88, 72], + [109.088, 21.0883], + [160, -0.00000314722], + [160, 72], + [160, 144] + ] + } + } + }, + { + "ty": "fl", + "bm": 0, + "hd": false, + "nm": "Fill", + "c": { "a": 0, "k": [0.686, 0.823, 0.988] }, + "r": 1, + "o": { "a": 0, "k": 100 } + }, + { + "ty": "tr", + "a": { "a": 0, "k": [0, 0] }, + "s": { "a": 0, "k": [100, 100] }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [0, 0] }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + } + ] + }, + { + "ty": "gr", + "bm": 0, + "hd": false, + "nm": "Group 2", + "it": [ + { + "ty": "sh", + "bm": 0, + "hd": false, + "nm": "Path 2", + "d": 1, + "ks": { + "a": 0, + "k": { + "c": true, + "i": [ + [0, 0], + [-18.438999999999993, 4.9410000000000025], + [-16.531999999999982, -9.545000000000002], + [-4.940999999999974, -18.438999999999993], + [9.545000000000016, -16.531999999999982], + [0, 0], + [0, 0] + ], + "o": [ + [9.544999999999987, -16.531999999999982], + [18.43900000000002, -4.939999999999998], + [16.53200000000004, 9.543999999999997], + [4.941000000000031, 18.438999999999993], + [0, 0], + [0, 0], + [0, 0] + ], + "v": [ + [160.448, 144.807], + [204.153, 111.271], + [258.77, 118.462], + [292.306, 162.166], + [285.115, 216.784], + [222.782, 180.795], + [160.448, 144.807] + ] + } + } + }, + { + "ty": "fl", + "bm": 0, + "hd": false, + "nm": "Fill", + "c": { "a": 0, "k": [0.765, 0.867, 0.992] }, + "r": 1, + "o": { "a": 0, "k": 100 } + }, + { + "ty": "tr", + "a": { "a": 0, "k": [0, 0] }, + "s": { "a": 0, "k": [100, 100] }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [0, 0] }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + } + ] + }, + { + "ty": "gr", + "bm": 0, + "hd": false, + "nm": "Group 3", + "it": [ + { + "ty": "sh", + "bm": 0, + "hd": false, + "nm": "Path 3", + "d": 1, + "ks": { + "a": 0, + "k": { + "c": true, + "i": [ + [0, 0], + [4.9410000000000025, -18.438999999999993], + [16.53200000000001, -9.544999999999987], + [18.438999999999993, 4.939999999999998], + [9.544699999999999, 16.53200000000001], + [0, 0], + [0, 0] + ], + "o": [ + [9.543999999999983, 16.53200000000001], + [-4.939999999999998, 18.438999999999993], + [-16.531999999999996, 9.545000000000016], + [-18.439, -4.9410000000000025], + [0, 0], + [0, 0], + [0, 0] + ], + "v": [ + [160.656, 144.057], + [167.846, 198.674], + [134.31, 242.379], + [79.6931, 249.57], + [35.9884, 216.034], + [98.322, 180.045], + [160.656, 144.057] + ] + } + } + }, + { + "ty": "fl", + "bm": 0, + "hd": false, + "nm": "Fill", + "c": { "a": 0, "k": [0.369, 0.647, 0.976] }, + "r": 1, + "o": { "a": 0, "k": 100 } + }, + { + "ty": "tr", + "a": { "a": 0, "k": [0, 0] }, + "s": { "a": 0, "k": [100, 100] }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [0, 0] }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + } + ] + }, + { + "ty": "gr", + "bm": 0, + "hd": false, + "nm": "Group 4", + "it": [ + { + "ty": "sh", + "bm": 0, + "hd": false, + "nm": "Path 4", + "d": 1, + "ks": { + "a": 0, + "k": { + "c": true, + "i": [ + [0, 0], + [-4.9410000000000025, 18.439400000000006], + [-16.53200000000001, 9.544800000000002], + [-18.438999999999993, -4.9407], + [-9.543999999999983, -16.5319], + [0, 0], + [0, 0] + ], + "o": [ + [-9.545000000000016, -16.531999999999982], + [4.939999999999998, -18.438999999999993], + [16.531999999999982, -9.544699999999999], + [18.43900000000002, 4.9407], + [0, 0], + [0, 0], + [0, 0] + ], + "v": [ + [160.448, 144.807], + [153.258, 90.1896], + [186.793, 46.4848], + [241.411, 39.2943], + [285.115, 72.8301], + [222.782, 108.819], + [160.448, 144.807] + ] + } + } + }, + { + "ty": "fl", + "bm": 0, + "hd": false, + "nm": "Fill", + "c": { "a": 0, "k": [0.843, 0.914, 0.992] }, + "r": 1, + "o": { "a": 0, "k": 100 } + }, + { + "ty": "tr", + "a": { "a": 0, "k": [0, 0] }, + "s": { "a": 0, "k": [100, 100] }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [0, 0] }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + } + ] + }, + { + "ty": "gr", + "bm": 0, + "hd": false, + "nm": "Group 5", + "it": [ + { + "ty": "sh", + "bm": 0, + "hd": false, + "nm": "Path 5", + "d": 1, + "ks": { + "a": 0, + "k": { + "c": true, + "i": [ + [0, 0], + [18.438999999999993, -4.9410000000000025], + [16.531900000000007, 9.544000000000011], + [4.9407, 18.439000000000007], + [-9.544699999999999, 16.531899999999993], + [0, 0], + [0, 0] + ], + "o": [ + [-9.545000000000016, 16.53200000000001], + [-18.43889999999999, 4.9410000000000025], + [-16.531999999999996, -9.544999999999987], + [-4.9407, -18.438999999999993], + [0, 0], + [0, 0], + [0, 0] + ], + "v": [ + [160.656, 144.057], + [116.951, 177.593], + [62.3338, 170.403], + [28.7979, 126.698], + [35.9884, 72.0805], + [98.3221, 108.069], + [160.656, 144.057] + ] + } + } + }, + { + "ty": "fl", + "bm": 0, + "hd": false, + "nm": "Fill", + "c": { "a": 0, "k": [0.525, 0.737, 0.98] }, + "r": 1, + "o": { "a": 0, "k": 100 } + }, + { + "ty": "tr", + "a": { "a": 0, "k": [0, 0] }, + "s": { "a": 0, "k": [100, 100] }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [0, 0] }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + } + ] + }, + { + "ty": "gr", + "bm": 0, + "hd": false, + "nm": "Group 6", + "it": [ + { + "ty": "sh", + "bm": 0, + "hd": false, + "nm": "Path 6", + "d": 1, + "ks": { + "a": 0, + "k": { + "c": true, + "i": [ + [0, 0], + [-13.503000000000014, -13.501999999999981], + [0, -19.096000000000004], + [13.501999999999981, -13.502999999999986], + [19.096000000000004, 0], + [0, 0], + [0, 0] + ], + "o": [ + [19.096000000000004, 0], + [13.501999999999981, 13.503000000000014], + [0, 19.096000000000004], + [-13.503000000000014, 13.50200000000001], + [0, 0], + [0, 0], + [0, 0] + ], + "v": [ + [160, 144], + [210.912, 165.088], + [232, 216], + [210.912, 266.912], + [160, 288], + [160, 216], + [160, 144] + ] + } + } + }, + { + "ty": "fl", + "bm": 0, + "hd": false, + "nm": "Fill", + "c": { "a": 0, "k": [0.212, 0.56, 0.968] }, + "r": 1, + "o": { "a": 0, "k": 100 } + }, + { + "ty": "tr", + "a": { "a": 0, "k": [0, 0] }, + "s": { "a": 0, "k": [100, 100] }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [0, 0] }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + } + ] + } + ], + "ind": 1 + } + ], + "v": "5.7.0", + "fr": 30, + "op": 60, + "ip": 0, + "assets": [] +} diff --git a/packages/wow-ui/src/assets/lottie/rainbowSpinner.json b/packages/wow-ui/src/assets/lottie/rainbowSpinner.json new file mode 100644 index 00000000..8ac59c02 --- /dev/null +++ b/packages/wow-ui/src/assets/lottie/rainbowSpinner.json @@ -0,0 +1,452 @@ +{ + "nm": "Untitled file", + "ddd": 0, + "h": 500, + "w": 500, + "meta": { "g": "@lottiefiles/creator 1.13.0" }, + "layers": [ + { + "ty": 4, + "nm": "Shape Layer - SVG", + "sr": 1, + "st": 0, + "op": 60, + "ip": 0, + "hd": false, + "ddd": 0, + "bm": 0, + "hasMask": false, + "ao": 0, + "ks": { + "a": { "a": 0, "k": [160.55200004577637, 143.99999842639] }, + "s": { "a": 0, "k": [175, 175] }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [249.55200004577637, 249.99999842639] }, + "r": { + "a": 1, + "k": [ + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [0], + "t": 0 + }, + { "s": [360], "t": 60 } + ] + }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + }, + "shapes": [ + { + "ty": "gr", + "bm": 0, + "hd": false, + "nm": "Group 1", + "it": [ + { + "ty": "sh", + "bm": 0, + "hd": false, + "nm": "Path 1", + "d": 1, + "ks": { + "a": 0, + "k": { + "c": true, + "i": [ + [0, 0], + [13.503, 13.501999999999981], + [0, 19.095600000000005], + [-13.502299999999991, 13.502599999999997], + [-19.096000000000004, 0.00000204866], + [0, 0], + [0, 0] + ], + "o": [ + [-19.096000000000004, 0], + [-13.502299999999991, -13.503], + [0, -19.095599999999997], + [13.503, -13.50261], + [0, 0], + [0, 0], + [0, 0] + ], + "v": [ + [160, 144], + [109.088, 122.912], + [88, 72], + [109.088, 21.0883], + [160, -0.00000314722], + [160, 72], + [160, 144] + ] + } + } + }, + { + "ty": "fl", + "bm": 0, + "hd": false, + "nm": "Fill", + "c": { "a": 0, "k": [0.9176, 0.2627, 0.2078] }, + "r": 1, + "o": { "a": 0, "k": 100 } + }, + { + "ty": "tr", + "a": { "a": 0, "k": [0, 0] }, + "s": { "a": 0, "k": [100, 100] }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [0, 0] }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + } + ] + }, + { + "ty": "gr", + "bm": 0, + "hd": false, + "nm": "Group 2", + "it": [ + { + "ty": "sh", + "bm": 0, + "hd": false, + "nm": "Path 2", + "d": 1, + "ks": { + "a": 0, + "k": { + "c": true, + "i": [ + [0, 0], + [-18.438999999999993, 4.9410000000000025], + [-16.531999999999982, -9.545000000000002], + [-4.940999999999974, -18.438999999999993], + [9.545000000000016, -16.531999999999982], + [0, 0], + [0, 0] + ], + "o": [ + [9.544999999999987, -16.531999999999982], + [18.43900000000002, -4.939999999999998], + [16.53200000000004, 9.543999999999997], + [4.941000000000031, 18.438999999999993], + [0, 0], + [0, 0], + [0, 0] + ], + "v": [ + [160.448, 144.807], + [204.153, 111.271], + [258.77, 118.462], + [292.306, 162.166], + [285.115, 216.784], + [222.782, 180.795], + [160.448, 144.807] + ] + } + } + }, + { + "ty": "fl", + "bm": 0, + "hd": false, + "nm": "Fill", + "c": { "a": 0, "k": [0.2039, 0.6588, 0.3255] }, + "r": 1, + "o": { "a": 0, "k": 100 } + }, + { + "ty": "tr", + "a": { "a": 0, "k": [0, 0] }, + "s": { "a": 0, "k": [100, 100] }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [0, 0] }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + } + ] + }, + { + "ty": "gr", + "bm": 0, + "hd": false, + "nm": "Group 3", + "it": [ + { + "ty": "sh", + "bm": 0, + "hd": false, + "nm": "Path 3", + "d": 1, + "ks": { + "a": 0, + "k": { + "c": true, + "i": [ + [0, 0], + [4.9410000000000025, -18.438999999999993], + [16.53200000000001, -9.544999999999987], + [18.438999999999993, 4.939999999999998], + [9.544699999999999, 16.53200000000001], + [0, 0], + [0, 0] + ], + "o": [ + [9.543999999999983, 16.53200000000001], + [-4.939999999999998, 18.438999999999993], + [-16.531999999999996, 9.545000000000016], + [-18.439, -4.9410000000000025], + [0, 0], + [0, 0], + [0, 0] + ], + "v": [ + [160.656, 144.057], + [167.846, 198.674], + [134.31, 242.379], + [79.6931, 249.57], + [35.9884, 216.034], + [98.322, 180.045], + [160.656, 144.057] + ] + } + } + }, + { + "ty": "fl", + "bm": 0, + "hd": false, + "nm": "Fill", + "c": { "a": 0, "k": [0.9765, 0.6706, 0] }, + "r": 1, + "o": { "a": 0, "k": 100 } + }, + { + "ty": "tr", + "a": { "a": 0, "k": [0, 0] }, + "s": { "a": 0, "k": [100, 100] }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [0, 0] }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + } + ] + }, + { + "ty": "gr", + "bm": 0, + "hd": false, + "nm": "Group 4", + "it": [ + { + "ty": "sh", + "bm": 0, + "hd": false, + "nm": "Path 4", + "d": 1, + "ks": { + "a": 0, + "k": { + "c": true, + "i": [ + [0, 0], + [-4.9410000000000025, 18.439400000000006], + [-16.53200000000001, 9.544800000000002], + [-18.438999999999993, -4.9407], + [-9.543999999999983, -16.5319], + [0, 0], + [0, 0] + ], + "o": [ + [-9.545000000000016, -16.531999999999982], + [4.939999999999998, -18.438999999999993], + [16.531999999999982, -9.544699999999999], + [18.43900000000002, 4.9407], + [0, 0], + [0, 0], + [0, 0] + ], + "v": [ + [160.448, 144.807], + [153.258, 90.1896], + [186.793, 46.4848], + [241.411, 39.2943], + [285.115, 72.8301], + [222.782, 108.819], + [160.448, 144.807] + ] + } + } + }, + { + "ty": "fl", + "bm": 0, + "hd": false, + "nm": "Fill", + "c": { "a": 0, "k": [0.2118, 0.5608, 0.9686] }, + "r": 1, + "o": { "a": 0, "k": 100 } + }, + { + "ty": "tr", + "a": { "a": 0, "k": [0, 0] }, + "s": { "a": 0, "k": [100, 100] }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [0, 0] }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + } + ] + }, + { + "ty": "gr", + "bm": 0, + "hd": false, + "nm": "Group 5", + "it": [ + { + "ty": "sh", + "bm": 0, + "hd": false, + "nm": "Path 5", + "d": 1, + "ks": { + "a": 0, + "k": { + "c": true, + "i": [ + [0, 0], + [18.438999999999993, -4.9410000000000025], + [16.531900000000007, 9.544000000000011], + [4.9407, 18.439000000000007], + [-9.544699999999999, 16.531899999999993], + [0, 0], + [0, 0] + ], + "o": [ + [-9.545000000000016, 16.53200000000001], + [-18.43889999999999, 4.9410000000000025], + [-16.531999999999996, -9.544999999999987], + [-4.9407, -18.438999999999993], + [0, 0], + [0, 0], + [0, 0] + ], + "v": [ + [160.656, 144.057], + [116.951, 177.593], + [62.3338, 170.403], + [28.7979, 126.698], + [35.9884, 72.0805], + [98.3221, 108.069], + [160.656, 144.057] + ] + } + } + }, + { + "ty": "fl", + "bm": 0, + "hd": false, + "nm": "Fill", + "c": { "a": 0, "k": [0.2118, 0.5608, 0.9686] }, + "r": 1, + "o": { "a": 0, "k": 100 } + }, + { + "ty": "tr", + "a": { "a": 0, "k": [0, 0] }, + "s": { "a": 0, "k": [100, 100] }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [0, 0] }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + } + ] + }, + { + "ty": "gr", + "bm": 0, + "hd": false, + "nm": "Group 6", + "it": [ + { + "ty": "sh", + "bm": 0, + "hd": false, + "nm": "Path 6", + "d": 1, + "ks": { + "a": 0, + "k": { + "c": true, + "i": [ + [0, 0], + [-13.503000000000014, -13.501999999999981], + [0, -19.096000000000004], + [13.501999999999981, -13.502999999999986], + [19.096000000000004, 0], + [0, 0], + [0, 0] + ], + "o": [ + [19.096000000000004, 0], + [13.501999999999981, 13.503000000000014], + [0, 19.096000000000004], + [-13.503000000000014, 13.50200000000001], + [0, 0], + [0, 0], + [0, 0] + ], + "v": [ + [160, 144], + [210.912, 165.088], + [232, 216], + [210.912, 266.912], + [160, 288], + [160, 216], + [160, 144] + ] + } + } + }, + { + "ty": "fl", + "bm": 0, + "hd": false, + "nm": "Fill", + "c": { "a": 0, "k": [0.2118, 0.5608, 0.9686] }, + "r": 1, + "o": { "a": 0, "k": 100 } + }, + { + "ty": "tr", + "a": { "a": 0, "k": [0, 0] }, + "s": { "a": 0, "k": [100, 100] }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [0, 0] }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + } + ] + } + ], + "ind": 1 + } + ], + "v": "5.7.0", + "fr": 30, + "op": 60, + "ip": 0, + "assets": [] +} diff --git a/packages/wow-ui/src/components/Spinner/BlueSpinner.stories.tsx b/packages/wow-ui/src/components/Spinner/BlueSpinner.stories.tsx new file mode 100644 index 00000000..07412c91 --- /dev/null +++ b/packages/wow-ui/src/components/Spinner/BlueSpinner.stories.tsx @@ -0,0 +1,45 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import BlueSpinner from "@/components/Spinner/BlueSpinner"; + +const meta = { + title: "UI/BlueSpinner", + component: BlueSpinner, + tags: ["autodocs"], + parameters: { + componentSubtitle: "블루 스피너 컴포넌트", + }, + argTypes: { + width: { + description: "스피너의 너비를 나타냅니다.", + table: { + type: { summary: "CSSProperties['width']" }, + defaultValue: { summary: "223px" }, + }, + control: false, + }, + height: { + description: "스피너의 높이를 나타냅니다.", + table: { + type: { summary: "CSSProperties['height']" }, + defaultValue: { summary: "200px" }, + }, + control: false, + }, + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: {}, +}; + +export const WithCustomSize: Story = { + args: { + width: "446px", + height: "400px", + }, +}; diff --git a/packages/wow-ui/src/components/Spinner/BlueSpinner.tsx b/packages/wow-ui/src/components/Spinner/BlueSpinner.tsx new file mode 100644 index 00000000..354d26b6 --- /dev/null +++ b/packages/wow-ui/src/components/Spinner/BlueSpinner.tsx @@ -0,0 +1,36 @@ +import type { LottieComponentProps } from "lottie-react"; +import Lottie from "lottie-react"; +import type { CSSProperties } from "react"; + +import blueSpinner from "@/assets/lottie/blueSpinner.json"; + +/** + * @description 블루 스피너 컴포넌트입니다. + * + * @param {CSSProperties["width"]} [width] - 스피너의 너비. + * @param {CSSProperties["height"]} [height] - 스피너의 높이. + */ +export interface BlueSpinnerProps + extends Omit { + width?: CSSProperties["width"]; + height?: CSSProperties["height"]; +} + +const BlueSpinner = ({ + width = 223, + height = 200, + ...rest +}: BlueSpinnerProps) => { + return ( + + ); +}; + +export default BlueSpinner; diff --git a/packages/wow-ui/src/components/Spinner/RainbowSpinner.stories.tsx b/packages/wow-ui/src/components/Spinner/RainbowSpinner.stories.tsx new file mode 100644 index 00000000..22d87b8b --- /dev/null +++ b/packages/wow-ui/src/components/Spinner/RainbowSpinner.stories.tsx @@ -0,0 +1,45 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import RainbowSpinner from "@/components/Spinner/RainbowSpinner"; + +const meta = { + title: "UI/RainbowSpinner", + component: RainbowSpinner, + tags: ["autodocs"], + parameters: { + componentSubtitle: "레인보우 스피너 컴포넌트", + }, + argTypes: { + width: { + description: "스피너의 너비를 나타냅니다.", + table: { + type: { summary: "CSSProperties['width']" }, + defaultValue: { summary: "223px" }, + }, + control: false, + }, + height: { + description: "스피너의 높이를 나타냅니다.", + table: { + type: { summary: "CSSProperties['height']" }, + defaultValue: { summary: "200px" }, + }, + control: false, + }, + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: {}, +}; + +export const WithCustomSize: Story = { + args: { + width: "446px", + height: "400px", + }, +}; diff --git a/packages/wow-ui/src/components/Spinner/RainbowSpinner.tsx b/packages/wow-ui/src/components/Spinner/RainbowSpinner.tsx new file mode 100644 index 00000000..5020d788 --- /dev/null +++ b/packages/wow-ui/src/components/Spinner/RainbowSpinner.tsx @@ -0,0 +1,36 @@ +import type { LottieComponentProps } from "lottie-react"; +import Lottie from "lottie-react"; +import type { CSSProperties } from "react"; + +import rainbowSpinner from "@/assets/lottie/rainbowSpinner.json"; + +/** + * @description 레인보우 스피너 컴포넌트입니다. Lottie 애니메이션을 사용하여 스피너를 표시합니다. + * + * @param {CSSProperties["width"]} [width] - 스피너의 너비. + * @param {CSSProperties["height"]} [height] - 스피너의 높이. + */ +export interface RainbowSpinnerProps + extends Omit { + width?: CSSProperties["width"]; + height?: CSSProperties["height"]; +} + +const RainbowSpinner = ({ + width = 223, + height = 200, + ...rest +}: RainbowSpinnerProps) => { + return ( + + ); +}; + +export default RainbowSpinner; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0a7ea04a..203b317e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -253,6 +253,9 @@ importers: packages/wow-ui: dependencies: + lottie-react: + specifier: ^2.4.0 + version: 2.4.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0) next: specifier: ^14.1.1 version: 14.1.1(@babel/core@7.24.5)(babel-plugin-macros@3.1.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) @@ -5747,6 +5750,15 @@ packages: resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==} hasBin: true + lottie-react@2.4.0: + resolution: {integrity: sha512-pDJGj+AQlnlyHvOHFK7vLdsDcvbuqvwPZdMlJ360wrzGFurXeKPr8SiRCjLf3LrNYKANQtSsh5dz9UYQHuqx4w==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + + lottie-web@5.12.2: + resolution: {integrity: sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==} + loupe@2.3.7: resolution: {integrity: sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==} @@ -15076,6 +15088,14 @@ snapshots: dependencies: js-tokens: 4.0.0 + lottie-react@2.4.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0): + dependencies: + lottie-web: 5.12.2 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + + lottie-web@5.12.2: {} + loupe@2.3.7: dependencies: get-func-name: 2.0.2