feat(web): 눈내리는 이펙트 적용 (#236)

DNDACADEMY · Nov 25, 2024 · 4868662 · 4868662
1 parent 951f1ac
commit 4868662
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 0 deletions.
diff --git a/.yarn/cache/react-fast-compare-npm-3.2.2-45b585a872-a6826180ba.zip b/.yarn/cache/react-fast-compare-npm-3.2.2-45b585a872-a6826180ba.zip
diff --git a/.yarn/cache/react-snowfall-npm-2.2.0-a81957d5c6-ef9945ec75.zip b/.yarn/cache/react-snowfall-npm-2.2.0-a81957d5c6-ef9945ec75.zip
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -47,6 +47,7 @@
     "react-pdf": "9.1.1",
     "react-perfect-scrollbar": "1.5.8",
     "react-responsive-masonry": "2.2.0",
+    "react-snowfall": "2.2.0",
     "sanitize.css": "13.0.0",
     "use-sync-external-store": "1.2.2",
     "usehooks-ts": "3.1.0",

diff --git a/apps/web/src/components/global/ClientProviders/index.tsx b/apps/web/src/components/global/ClientProviders/index.tsx
@@ -2,6 +2,7 @@
 
 import { ReactNode, useEffect } from 'react';
 import PerfectScrollbar from 'react-perfect-scrollbar';
+import { Snowfall } from 'react-snowfall';
 
 import * as ChannelService from '@channel.io/channel-web-sdk-loader';
 
@@ -13,6 +14,14 @@ function ClientProviders({ children }: { children: ReactNode }) {
 
   return (
     <PerfectScrollbar>
+      <Snowfall
+        style={{
+          position: 'fixed',
+          width: '100vw',
+          height: '100vh',
+          zIndex: 100,
+        }}
+      />
       {children}
     </PerfectScrollbar>
   );

diff --git a/yarn.lock b/yarn.lock
@@ -15838,6 +15838,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-fast-compare@npm:^3.2.2":
+  version: 3.2.2
+  resolution: "react-fast-compare@npm:3.2.2"
+  checksum: 10/a6826180ba75cefba1c8d3ac539735f9b627ca05d3d307fe155487f5d0228d376dac6c9708d04a283a7b9f9aee599b637446635b79c8c8753d0b4eece56c125c
+  languageName: node
+  linkType: hard
+
 "react-fast-marquee@npm:1.6.4":
   version: 1.6.4
   resolution: "react-fast-marquee@npm:1.6.4"
@@ -15926,6 +15933,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-snowfall@npm:2.2.0":
+  version: 2.2.0
+  resolution: "react-snowfall@npm:2.2.0"
+  dependencies:
+    react-fast-compare: "npm:^3.2.2"
+  peerDependencies:
+    react: ^16.8 || 17.x || 18.x
+    react-dom: ^16.8 || 17.x || 18.x
+  checksum: 10/ef9945ec75294e44ff17ec2b90f3e6ab9ec07f2a04804b253fc5737e9838baa20085351d019dc6a366f24874f0c58e8360d23b38a08242a022ff86e3a68ed22c
+  languageName: node
+  linkType: hard
+
 "react@npm:18.3.1, react@npm:^16.8.0 || ^17.0.0 || ^18.0.0":
   version: 18.3.1
   resolution: "react@npm:18.3.1"
@@ -19211,6 +19230,7 @@ __metadata:
     react-pdf: "npm:9.1.1"
     react-perfect-scrollbar: "npm:1.5.8"
     react-responsive-masonry: "npm:2.2.0"
+    react-snowfall: "npm:2.2.0"
     sanitize.css: "npm:13.0.0"
     sass: "npm:1.69.6"
     sass-loader: "npm:12.6.0"