feat: �웹페이지 레이아웃, 스크롤 및 에셋 변경 (#27)

* feat: Apply breakpoints * feat: Add side background image * fix: Update right layout * feat: Update toast * fix: Change 0 slope text * feat: Update assets * fix: Update logo * feat: Add og image and favicon * feat: Add vote in detail page * feat: Add snow confetti * feat: Update vote text * feat: Add weather data * fix: Update vote dialog close * fix: Add point-events-none to SnowConfetti * fix: Fix build error
Nexters · Aug 22, 2024 · fc9d178 · fc9d178
1 parent f176f53
commit fc9d178
Show file tree

Hide file tree

Showing 27 changed files with 942 additions and 169 deletions.
diff --git a/package.json b/package.json
@@ -14,6 +14,8 @@
     "@react-spring/web": "^9.7.4",
     "@tanstack/react-query": "^5.51.21",
     "@tanstack/react-query-devtools": "^5.51.21",
+    "@tsparticles/preset-snow": "^3.1.0",
+    "@tsparticles/react": "^3.0.0",
     "@use-gesture/react": "^10.3.1",
     "autoprefixer": "^10.4.19",
     "class-variance-authority": "^0.7.0",

diff --git a/public/assets/background.png b/public/assets/background.png
diff --git a/public/assets/logo.svg b/public/assets/logo.svg
diff --git a/public/assets/og.png b/public/assets/og.png
diff --git a/public/downloads/left.png b/public/downloads/left.png
diff --git a/public/downloads/right-android.png b/public/downloads/right-android.png
diff --git a/public/downloads/right-ios.png b/public/downloads/right-ios.png
diff --git a/public/downloads/right-text.png b/public/downloads/right-text.png
diff --git a/src/app/(web)/layout.tsx b/src/app/(web)/layout.tsx
@@ -1,18 +1,45 @@
 'use client';
 
+import Image from 'next/image';
 import { GoogleAnalytics } from 'nextjs-google-analytics';
+import left from '@public/downloads/left.png';
+import android from '@public/downloads/right-android.png';
+import ios from '@public/downloads/right-ios.png';
+import text from '@public/downloads/right-text.png';
 import { cn } from '@/shared/lib';
+import { SnowConfetti } from '@/shared/ui/snow-confetti';
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <>
       <GoogleAnalytics trackPageViews />
-      <div className={cn('flex size-full justify-center bg-main-5 antialiased')}>
+      <SnowConfetti />
+      <div
+        className={cn(
+          'flex size-full min-w-[360px] items-center justify-evenly bg-main-5 antialiased'
+        )}
+      >
+        <div className={cn('hidden lg:block')}>
+          <Image src={left} alt="left" width={270} height={320} />
+        </div>
         <div
-          className={cn('size-full max-w-[670px] bg-opacity-65 bg-[url("/assets/background.png")]')}
+          className={cn(
+            'h-screen w-full max-w-[670px] overflow-scroll bg-opacity-65 bg-[url("/assets/background.png")]'
+          )}
         >
           {children}
         </div>
+        <div
+          className={cn(
+            'hidden h-[320px] w-[270px] flex-col items-center justify-center gap-[34px] lg:flex'
+          )}
+        >
+          <Image src={text} alt="text" width={194} />
+          <div className={cn('flex w-[200px] justify-between')}>
+            <Image src={ios} alt="ios" width={95} />
+            <Image src={android} alt="android" width={95} />
+          </div>
+        </div>
       </div>
     </>
   );

diff --git a/src/app/favicon.ico b/src/app/favicon.ico
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -5,16 +5,25 @@ import { Toaster } from '@/shared/ui/toaster';
 import Providers from './_providers';
 
 export const metadata: Metadata = {
-  title: 'WeSki',
-  description: 'We Ski',
+  title: 'WeSki : 스키장 혼잡도 확인 서비스',
+  description:
+    '위스키는 웹캠, 날씨, 슬로프 등 실시간 스키장 정보를 탐색할 수 있는 스키장 큐레이션 서비스입니다.',
+  openGraph: {
+    images: [
+      {
+        url: '/assets/og.png',
+        alt: 'WeSki',
+      },
+    ],
+  },
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <body>
         <Providers>{children}</Providers>
-        <Toaster />
+        <Toaster position="bottom-center" />
       </body>
     </html>
   );