chore: 후원사 로고 수정 (#327)

* refactor: snowfall  코드 리팩토링

* feat: 직행, F-lab 후원사 로고 추가

Author: Zero-1016

apps/web/public/assets/logos/sponsors/f-lab.png

@@ -2,45 +2,21 @@
 
 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';
-import { useMediaQuery } from 'usehooks-ts';
 
-import BREAK_POINT from '@/lib/constants/breakPoint';
+import SnowfallSection from '@/components/organisms/SnowfallSection';
+import { isChristmasTheme } from '@/utils';
 
 function ClientProviders({ children }: { children: ReactNode }) {
-  const isSmall = useMediaQuery(BREAK_POINT.small);
-  const isXLarge = useMediaQuery(BREAK_POINT.xLarge);
-
-  const getSnowflakeCount = () => {
-    if (isXLarge) {
-      return 100;
-    }
-
-    if (isSmall) {
-      return 60;
-    }
-
-    return 80;
-  };
-
   useEffect(() => {
     ChannelService.loadScript();
     ChannelService.boot({ pluginKey: process.env.NEXT_PUBLIC_CHANNEL_IO_PLUGIN_KEY });
   }, []);
 
   return (
     <PerfectScrollbar>
-      <Snowfall
-        snowflakeCount={getSnowflakeCount()}
-        style={{
-          position: 'fixed',
-          width: '100vw',
-          height: '100vh',
-          zIndex: 100,
-        }}
-      />
+      {isChristmasTheme() && <SnowfallSection />}
       {children}
     </PerfectScrollbar>
   );

apps/web/public/assets/logos/sponsors/zighang.png

@@ -0,0 +1,41 @@
+'use client';
+
+import { useMemo } from 'react';
+import { Snowfall } from 'react-snowfall';
+
+import { useMediaQuery } from 'usehooks-ts';
+
+import BREAK_POINT from '@/lib/constants/breakPoint';
+
+function SnowfallSection() {
+  const isSmall = useMediaQuery(BREAK_POINT.small);
+  const isXLarge = useMediaQuery(BREAK_POINT.xLarge);
+
+  const snowflakeCount = useMemo(() => {
+    if (isXLarge) {
+      return 100;
+    }
+
+    if (isSmall) {
+      return 60;
+    }
+
+    return 80;
+  }, [isSmall, isXLarge]);
+
+  return (
+    <Snowfall
+      style={
+        {
+          position: 'fixed',
+          width: '100vw',
+          height: '100vh',
+          zIndex: 100,
+        }
+    }
+      snowflakeCount={snowflakeCount}
+    />
+  );
+}
+
+export default SnowfallSection;

apps/web/src/components/global/ClientProviders/index.tsx

@@ -21,6 +21,8 @@ function SponsorSection() {
     { sponsor: 'notefolio', url: 'https://notefolio.net', image: 'notefolio.png' },
     { sponsor: 'elice', url: 'https://elice.io/ko', image: 'elice.png' },
     { sponsor: 'sniperfactory', url: 'https://sniperfactory.com', image: 'sniperfactory.png' },
+    { sponsor: 'zighang', url: 'https://zighang.com', image: 'zighang.png' },
+    { sponsor: 'f-lab', url: 'https://f-lab.kr', image: 'f-lab.png' },
   ];
 
   return (