diff --git a/package.json b/package.json index 245878a..e81db38 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,6 @@ "eslint-plugin-react": "^7.33.2", "framer-motion": "^11.0.3", "lodash": "^4.17.21", - "lottie-react": "^2.4.0", "next": "14.0.3", "react": "^18", "react-dom": "^18", diff --git a/src/assets/lottie.json b/src/assets/lottie.json deleted file mode 100644 index 53297b3..0000000 --- a/src/assets/lottie.json +++ /dev/null @@ -1,317 +0,0 @@ -{ - "v": "5.5.8", - "fr": 29.9700012207031, - "ip": 2.00000008146167, - "op": 42.0000017106951, - "w": 500, - "h": 300, - "nm": "컴포지션 2", - "ddd": 0, - "assets": [], - "layers": [ - { - "ddd": 0, - "ind": 1, - "ty": 4, - "nm": "모양 레이어 3", - "sr": 1, - "ks": { - "o": { "a": 0, "k": 100, "ix": 11 }, - "r": { "a": 0, "k": 0, "ix": 10 }, - "p": { - "a": 1, - "k": [ - { - "i": { "x": 0.833, "y": 0.833 }, - "o": { "x": 0.133, "y": 0.133 }, - "t": 0, - "s": [350, 220, 0], - "to": [0, 0, 0], - "ti": [0, 0, 0] - }, - { - "i": { "x": 0.382, "y": 1 }, - "o": { "x": 0.63, "y": 0 }, - "t": 12, - "s": [350, 220, 0], - "to": [0, -17.301, 0], - "ti": [0, 0, 0] - }, - { - "i": { "x": 0.09, "y": 1 }, - "o": { "x": 0.294, "y": 0 }, - "t": 27, - "s": [350, 116.195, 0], - "to": [0, 0, 0], - "ti": [0, -17.301, 0] - }, - { - "i": { "x": 0.861, "y": 0.861 }, - "o": { "x": 0.167, "y": 0.167 }, - "t": 42.5, - "s": [350, 220, 0], - "to": [0, 0, 0], - "ti": [0, 0, 0] - }, - { "t": 47.0000019143492, "s": [350, 220, 0] } - ], - "ix": 2 - }, - "a": { "a": 0, "k": [0, 0, 0], "ix": 1 }, - "s": { "a": 0, "k": [98, 98, 100], "ix": 6 } - }, - "ao": 0, - "shapes": [ - { - "ty": "gr", - "it": [ - { - "d": 1, - "ty": "el", - "s": { "a": 0, "k": [45.688, 45.688], "ix": 2 }, - "p": { "a": 0, "k": [0, 0], "ix": 3 }, - "nm": "타원 패스 1", - "mn": "ADBE Vector Shape - Ellipse", - "hd": false - }, - { - "ty": "fl", - "c": { "a": 0, "k": [0.3216, 0.7725, 0.651, 1], "ix": 4 }, - "o": { "a": 0, "k": 100, "ix": 5 }, - "r": 1, - "bm": 0, - "nm": "칠 1", - "mn": "ADBE Vector Graphic - Fill", - "hd": false - }, - { - "ty": "tr", - "p": { "a": 0, "k": [1, 0], "ix": 2 }, - "a": { "a": 0, "k": [0, 0], "ix": 1 }, - "s": { "a": 0, "k": [100, 100], "ix": 3 }, - "r": { "a": 0, "k": 0, "ix": 6 }, - "o": { "a": 0, "k": 100, "ix": 7 }, - "sk": { "a": 0, "k": 0, "ix": 4 }, - "sa": { "a": 0, "k": 0, "ix": 5 }, - "nm": "변형" - } - ], - "nm": "타원 1", - "np": 3, - "cix": 2, - "bm": 0, - "ix": 1, - "mn": "ADBE Vector Group", - "hd": false - } - ], - "ip": 0, - "op": 60.0000024438501, - "st": 0, - "bm": 0 - }, - { - "ddd": 0, - "ind": 2, - "ty": 4, - "nm": "모양 레이어 1", - "sr": 1, - "ks": { - "o": { "a": 0, "k": 100, "ix": 11 }, - "r": { "a": 0, "k": 0, "ix": 10 }, - "p": { - "a": 1, - "k": [ - { - "i": { "x": 0.833, "y": 0.833 }, - "o": { "x": 0.133, "y": 0.133 }, - "t": 0, - "s": [250, 220, 0], - "to": [0, 0, 0], - "ti": [0, 0, 0] - }, - { - "i": { "x": 0.528, "y": 1 }, - "o": { "x": 0.698, "y": 0 }, - "t": 7, - "s": [250, 220, 0], - "to": [0, -16.134, 0], - "ti": [0, 0, 0] - }, - { - "i": { "x": 0.152, "y": 1 }, - "o": { "x": 0.284, "y": 0 }, - "t": 22, - "s": [250, 123.195, 0], - "to": [0, 0, 0], - "ti": [0, -16.134, 0] - }, - { - "i": { "x": 0.409, "y": 0.409 }, - "o": { "x": 0.167, "y": 0.167 }, - "t": 39, - "s": [250, 220, 0], - "to": [0, 0, 0], - "ti": [0, 0, 0] - }, - { "t": 47.0000019143492, "s": [250, 220, 0] } - ], - "ix": 2 - }, - "a": { "a": 0, "k": [0, 0, 0], "ix": 1 }, - "s": { "a": 0, "k": [98, 98, 100], "ix": 6 } - }, - "ao": 0, - "shapes": [ - { - "ty": "gr", - "it": [ - { - "d": 1, - "ty": "el", - "s": { "a": 0, "k": [45.688, 45.688], "ix": 2 }, - "p": { "a": 0, "k": [0, 0], "ix": 3 }, - "nm": "타원 패스 1", - "mn": "ADBE Vector Shape - Ellipse", - "hd": false - }, - { - "ty": "fl", - "c": { "a": 0, "k": [0.3216, 0.7725, 0.651, 1], "ix": 4 }, - "o": { "a": 0, "k": 100, "ix": 5 }, - "r": 1, - "bm": 0, - "nm": "칠 1", - "mn": "ADBE Vector Graphic - Fill", - "hd": false - }, - { - "ty": "tr", - "p": { "a": 0, "k": [1, 0], "ix": 2 }, - "a": { "a": 0, "k": [0, 0], "ix": 1 }, - "s": { "a": 0, "k": [100, 100], "ix": 3 }, - "r": { "a": 0, "k": 0, "ix": 6 }, - "o": { "a": 0, "k": 100, "ix": 7 }, - "sk": { "a": 0, "k": 0, "ix": 4 }, - "sa": { "a": 0, "k": 0, "ix": 5 }, - "nm": "변형" - } - ], - "nm": "타원 1", - "np": 3, - "cix": 2, - "bm": 0, - "ix": 1, - "mn": "ADBE Vector Group", - "hd": false - } - ], - "ip": 0, - "op": 60.0000024438501, - "st": 0, - "bm": 0 - }, - { - "ddd": 0, - "ind": 3, - "ty": 4, - "nm": "모양 레이어 2", - "sr": 1, - "ks": { - "o": { "a": 0, "k": 100, "ix": 11 }, - "r": { "a": 0, "k": 0, "ix": 10 }, - "p": { - "a": 1, - "k": [ - { - "i": { "x": 0.833, "y": 0.833 }, - "o": { "x": 0.133, "y": 0.133 }, - "t": 0, - "s": [150, 220, 0], - "to": [0, 0, 0], - "ti": [0, 0, 0] - }, - { - "i": { "x": 0.726, "y": 1 }, - "o": { "x": 0.728, "y": 0 }, - "t": 2, - "s": [150, 220, 0], - "to": [0, -12.801, 0], - "ti": [0, 0, 0] - }, - { - "i": { "x": 0.254, "y": 1 }, - "o": { "x": 0.263, "y": 0 }, - "t": 18, - "s": [150, 143.195, 0], - "to": [0, 0, 0], - "ti": [0, -12.801, 0] - }, - { - "i": { "x": 0.861, "y": 0.861 }, - "o": { "x": 0.167, "y": 0.167 }, - "t": 35, - "s": [150, 220, 0], - "to": [0, 0, 0], - "ti": [0, 0, 0] - }, - { "t": 47.0000019143492, "s": [150, 220, 0] } - ], - "ix": 2 - }, - "a": { "a": 0, "k": [0, 0, 0], "ix": 1 }, - "s": { "a": 0, "k": [98, 98, 100], "ix": 6 } - }, - "ao": 0, - "shapes": [ - { - "ty": "gr", - "it": [ - { - "d": 1, - "ty": "el", - "s": { "a": 0, "k": [45.688, 45.688], "ix": 2 }, - "p": { "a": 0, "k": [0, 0], "ix": 3 }, - "nm": "타원 패스 1", - "mn": "ADBE Vector Shape - Ellipse", - "hd": false - }, - { - "ty": "fl", - "c": { "a": 0, "k": [0.3216, 0.7725, 0.651, 1], "ix": 4 }, - "o": { "a": 0, "k": 100, "ix": 5 }, - "r": 1, - "bm": 0, - "nm": "칠 1", - "mn": "ADBE Vector Graphic - Fill", - "hd": false - }, - { - "ty": "tr", - "p": { "a": 0, "k": [1, 0], "ix": 2 }, - "a": { "a": 0, "k": [0, 0], "ix": 1 }, - "s": { "a": 0, "k": [100, 100], "ix": 3 }, - "r": { "a": 0, "k": 0, "ix": 6 }, - "o": { "a": 0, "k": 100, "ix": 7 }, - "sk": { "a": 0, "k": 0, "ix": 4 }, - "sa": { "a": 0, "k": 0, "ix": 5 }, - "nm": "변형" - } - ], - "nm": "타원 1", - "np": 3, - "cix": 2, - "bm": 0, - "ix": 1, - "mn": "ADBE Vector Group", - "hd": false - } - ], - "ip": 0, - "op": 60.0000024438501, - "st": 0, - "bm": 0 - } - ], - "markers": [] -} diff --git a/src/assets/lottie.webp b/src/assets/lottie.webp new file mode 100644 index 0000000..1ed9c4d Binary files /dev/null and b/src/assets/lottie.webp differ diff --git a/src/components/atoms/Lottie.tsx b/src/components/atoms/Lottie.tsx index ad32cf5..cc1d35c 100644 --- a/src/components/atoms/Lottie.tsx +++ b/src/components/atoms/Lottie.tsx @@ -1,12 +1,9 @@ import React from 'react'; -// import Lottie from 'lottie-react'; -// import animationData from './../../assets/lottie.json'; +import animationData from './../../assets/lottie.webp'; +import Image from 'next/image'; const LottieComponent = () => { - return ( - // -
로딩중
- ); + return 로딩중; }; export default LottieComponent;