fix: QA 반영 및 카카오톡 공유하기 추가 (#28)

* fix: Fix padding and font size in mobile view * fix: Fix Card layout * feat: Add kakao share * feat: Update snow particle in confetti * fix: Fix snow position * fix: Update share dialog * fix: Fix build error * fix: change pages to views * fix: revert pages api * fix: Fix error
Nexters · Aug 22, 2024 · bef20ef · bef20ef
1 parent fc9d178
commit bef20ef
Show file tree

Hide file tree

Showing 21 changed files with 89 additions and 70 deletions.
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "@tanstack/react-query-devtools": "^5.51.21",
     "@tsparticles/preset-snow": "^3.1.0",
     "@tsparticles/react": "^3.0.0",
+    "@tsparticles/shape-image": "^3.5.0",
     "@use-gesture/react": "^10.3.1",
     "autoprefixer": "^10.4.19",
     "class-variance-authority": "^0.7.0",

diff --git a/public/assets/snow-particle.svg b/public/assets/snow-particle.svg
diff --git a/public/shares/share_04.png b/public/shares/share_04.png
diff --git a/src/app/(web)/[resortId]/page.tsx b/src/app/(web)/[resortId]/page.tsx
@@ -1 +1 @@
-export { default } from '@/pages/discovery-detail/ui/discovery-detail-page';
+export { default } from '@/views/discovery-detail/ui/discovery-detail-page';
diff --git a/src/app/(web)/page.tsx b/src/app/(web)/page.tsx
@@ -1 +1 @@
-export { default } from '@/pages/discovery/ui/discovery-page';
+export { default } from '@/views/discovery/ui/discovery-page';
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import '@/app/globals.css';
 
 import type { Metadata } from 'next';
+import KakaoScript from '@/shared/lib/kakao-script';
 import { Toaster } from '@/shared/ui/toaster';
 import Providers from './_providers';
 
@@ -24,6 +25,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       <body>
         <Providers>{children}</Providers>
         <Toaster position="bottom-center" />
+        <KakaoScript />
       </body>
     </html>
   );

diff --git a/src/app/mobile/slop-status/[key]/page.tsx b/src/app/mobile/slop-status/[key]/page.tsx
@@ -1,6 +1,6 @@
 import { redirect } from 'next/navigation';
 import React from 'react';
-import WebcamMobileMapPage from '@/pages/slop-status/ui/slop-status-page';
+import WebcamMobileMapPage from '@/views/slop-status/ui/slop-status-page';
 import { RESORT_DOMAIN } from '@/entities/slop/model';
 
 const isValidKey = (key: string): key is keyof typeof RESORT_DOMAIN => key in RESORT_DOMAIN;

diff --git a/src/app/mobile/webcam/[key]/page.tsx b/src/app/mobile/webcam/[key]/page.tsx
@@ -1,6 +1,6 @@
 import { redirect } from 'next/navigation';
 import React from 'react';
-import WebcamMobileMapPage from '@/pages/webcam/ui/webcam-mobile-map-page';
+import WebcamMobileMapPage from '@/views/webcam/ui/webcam-mobile-map-page';
 import { RESORT_DOMAIN } from '@/entities/slop/model';
 
 const Page = ({ params }: { params: { key: string } }) => {

diff --git a/src/features/discovery-detail/ui/share-dialog.tsx b/src/features/discovery-detail/ui/share-dialog.tsx
@@ -4,8 +4,6 @@ import { toast } from 'sonner';
 import logo from '@public/assets/logo.svg';
 import snow from '@public/assets/snow.png';
 import share1 from '@public/shares/share_01.png';
-import share2 from '@public/shares/share_02.png';
-import share3 from '@public/shares/share_03.png';
 import share4 from '@public/shares/share_04.png';
 import { CloseIcon } from '@/shared/icons';
 import { cn, getPostposition } from '@/shared/lib';
@@ -24,6 +22,14 @@ interface ShareDialogProps {
 }
 
 const ShareDialog = ({ trigger, name }: ShareDialogProps) => {
+  const handleShareToKakao = useCallback(() => {
+    const { Kakao, location } = window;
+    Kakao.Share.sendScrap({
+      requestUrl: location.href,
+      templateId: 111416,
+    });
+  }, []);
+
   const handleCopyUrl = useCallback(() => {
     const currentUrl = window.location.href;
     navigator.clipboard
@@ -39,7 +45,6 @@ const ShareDialog = ({ trigger, name }: ShareDialogProps) => {
   return (
     <Dialog>
       <DialogTrigger>{trigger}</DialogTrigger>
-
       <DialogContent
         className={cn(
           'w-[321px] gap-0 overflow-hidden rounded-[7px] bg-white px-[30px] pb-[30px] pt-[27px]'
@@ -55,36 +60,23 @@ const ShareDialog = ({ trigger, name }: ShareDialogProps) => {
         <DialogClose>
           <CloseIcon className={cn('absolute right-6 top-6 size-6 cursor-pointer text-gray-50')} />
         </DialogClose>
-        <Image src={logo} alt="logo" />
+        <Image src={logo} alt="logo" width={56} />
         <div className={cn('h3-semibold mb-[31px] mt-[38px] flex h-16 flex-col justify-evenly')}>
           <p>{getPostposition(name || '')}</p>
           <p>공유해보세요!</p>
         </div>
-        <div className={cn('body3-medium z-10 flex justify-between gap-3 text-gray-70')}>
-          <div className={cn('flex flex-col items-center gap-[6px]')}>
-            <button>
-              <Image src={share1} alt="kakao-talk" width={46} height={46} />
-            </button>
+        <div className={cn('body2-medium z-10 flex gap-[14px] text-gray-70')}>
+          <button
+            className={cn('flex w-[120px] items-center gap-[10px]')}
+            onClick={handleShareToKakao}
+          >
+            <Image src={share1} alt="kakao-talk" width={46} height={46} />
             <p>카카오톡</p>
-          </div>
-          <div className={cn('flex flex-col items-center gap-[6px]')}>
-            <button>
-              <Image src={share2} alt="instagram" width={46} height={46} />
-            </button>
-            <p>인스타그램</p>
-          </div>
-          <div className={cn('flex flex-col items-center gap-[6px]')}>
-            <button>
-              <Image src={share3} alt="thread" width={46} height={46} />
-            </button>
-            <p>스레드</p>
-          </div>
-          <div className={cn('flex flex-col items-center gap-[6px]')}>
-            <button onClick={handleCopyUrl}>
-              <Image src={share4} alt="link" width={46} height={46} />
-            </button>
-            <p>링크 공유</p>
-          </div>
+          </button>
+          <button className={cn('flex w-[120px] items-center gap-[10px]')} onClick={handleCopyUrl}>
+            <Image src={share4} alt="link" width={46} height={46} />
+            <p>링크 복사</p>
+          </button>
         </div>
       </DialogContent>
     </Dialog>

diff --git a/src/shared/lib/kakao-script.tsx b/src/shared/lib/kakao-script.tsx
@@ -0,0 +1,20 @@
+'use client';
+
+import Script from 'next/script';
+
+declare global {
+  interface Window {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Kakao: any;
+  }
+}
+
+function KakaoScript() {
+  const onLoad = () => {
+    window.Kakao.init(process.env.NEXT_PUBLIC_KAKAO_API_KEY);
+  };
+
+  return <Script src="https://developers.kakao.com/sdk/js/kakao.js" async onLoad={onLoad} />;
+}
+
+export default KakaoScript;
diff --git a/src/shared/ui/snow-confetti.tsx b/src/shared/ui/snow-confetti.tsx
@@ -1,5 +1,6 @@
 import { loadSnowPreset } from '@tsparticles/preset-snow';
 import Particles, { initParticlesEngine } from '@tsparticles/react';
+import { loadImageShape } from '@tsparticles/shape-image';
 import { useEffect, useState } from 'react';
 import { cn } from '../lib';
 
@@ -9,6 +10,7 @@ export const SnowConfetti = () => {
   useEffect(() => {
     initParticlesEngine(async (engine) => {
       await loadSnowPreset(engine);
+      await loadImageShape(engine);
     }).then(() => {
       setInit(true);
     });
@@ -18,9 +20,21 @@ export const SnowConfetti = () => {
     <>
       {init && (
         <Particles
-          className={cn('pointer-events-none fixed left-0 top-0 size-full')}
+          className={cn(
+            'pointer-events-none fixed left-1/2 top-0 size-full max-w-[670px] -translate-x-1/2'
+          )}
           id="tsparticles"
           options={{
+            particles: {
+              shape: {
+                type: 'image',
+                options: {
+                  image: {
+                    src: '/assets/snow-particle.svg',
+                  },
+                },
+              },
+            },
             preset: 'snow',
             fullScreen: false,
             background: { opacity: 0 },

diff --git a/...overy-detail/ui/discovery-detail-page.tsx → ...overy-detail/ui/discovery-detail-page.tsx b/...overy-detail/ui/discovery-detail-page.tsx → ...overy-detail/ui/discovery-detail-page.tsx
@@ -22,19 +22,11 @@ import CheckIcon from '@/shared/icons/check';
 import { cn } from '@/shared/lib';
 
 const DiscoveryDetailPage = ({ params }: { params: { resortId: string } }) => {
-  if (typeof window === 'undefined') {
-    return null;
-  }
-
-  return <DiscoveryDetailPageContent params={params} />;
-};
-
-const DiscoveryDetailPageContent = ({ params }: { params: { resortId: string } }) => {
   const discovery = DiscoveryData.find(
     (discovery) => discovery.id === +params?.resortId
   ) as Discovery;
   const { data: voteData } = useQuery(discoveryApi.discoveryQueries.vote(params?.resortId));
-  const data = RESORT_DOMAIN[discovery.map as keyof typeof RESORT_DOMAIN];
+  const data = RESORT_DOMAIN[discovery?.map as keyof typeof RESORT_DOMAIN];
   const [selectedTab, setSelectedTab] = useState('webcam');
   const [showAppDownloadDialog, setShowAppDownloadDialog] = useState(true);
   const { mutateAsync } = usePostVote(params?.resortId);

diff --git a/src/pages/discovery/ui/discovery-page.tsx → src/views/discovery/ui/discovery-page.tsx b/src/pages/discovery/ui/discovery-page.tsx → src/views/discovery/ui/discovery-page.tsx
@@ -7,14 +7,6 @@ import { discoveryApi } from '@/entities/discovery';
 import { cn } from '@/shared/lib';
 
 const DiscoveryPage = () => {
-  if (typeof window === 'undefined') {
-    return null;
-  }
-
-  return <DiscoveryPageContent />;
-};
-
-const DiscoveryPageContent = () => {
   const { data: discoveryData } = useQuery(discoveryApi.discoveryQueries.list());
 
   if (!discoveryData) return null;

diff --git a/...pages/slop-status/ui/slop-status-page.tsx → ...views/slop-status/ui/slop-status-page.tsx b/...pages/slop-status/ui/slop-status-page.tsx → ...views/slop-status/ui/slop-status-page.tsx
@@ -10,14 +10,6 @@ import { RESORT_DOMAIN } from '@/entities/slop/model';
 import { cn } from '@/shared/lib';
 
 const SlopStatusPage = ({ params }: { params: { key: keyof typeof RESORT_DOMAIN } }) => {
-  if (typeof window === 'undefined') {
-    return null;
-  }
-
-  return <SlopStatusPageContent params={params} />;
-};
-
-const SlopStatusPageContent = ({ params }: { params: { key: keyof typeof RESORT_DOMAIN } }) => {
   const { ref, style, containerRef } = useMapPinch();
 
   const { data } = useQuery(slopQueries.list(params.key));

diff --git a/...ages/webcam/ui/webcam-mobile-map-page.tsx → ...iews/webcam/ui/webcam-mobile-map-page.tsx b/...ages/webcam/ui/webcam-mobile-map-page.tsx → ...iews/webcam/ui/webcam-mobile-map-page.tsx
diff --git a/src/widgets/discovery-detail/ui/discovery-summary.tsx b/src/widgets/discovery-detail/ui/discovery-summary.tsx
@@ -10,8 +10,12 @@ import DiscoverySummaryAction from './discovery-summary-action';
 
 const DiscoverySummary = ({ id, name, slope, url, weather }: Discovery) => {
   return (
-    <div className={cn('flex w-full gap-[26px] px-[30px] pb-[34px] pt-[10px]')}>
-      <Card className={cn('flex h-[123px] flex-1 items-center justify-between pl-[30px] pr-6')}>
+    <div className={cn('flex w-full gap-[26px] px-5 pb-[34px] pt-[10px] md:px-[30px]')}>
+      <Card
+        className={cn(
+          'flex h-[134px] flex-1 items-center justify-between pl-[30px] pr-6 md:h-[123px]'
+        )}
+      >
         <div className={cn('flex flex-col gap-[5px]')}>
           <p className={cn('title1 text-gray-90')}>{name}</p>
           <p className={cn('body1-medium text-gray-60')}>운행중인 슬로프 {slope ?? 0}개</p>

diff --git a/src/widgets/discovery/ui/discovery-card.tsx b/src/widgets/discovery/ui/discovery-card.tsx
@@ -12,20 +12,20 @@ const DiscoveryCard = ({ id, name, slope, weather, weeklyWeather }: Discovery) =
   return (
     <Card
       className={cn(
-        'box-border flex cursor-pointer flex-col gap-[15px] pb-[26px] pt-10',
-        'transition-all hover:scale-[1.02] hover:border-2 hover:border-main-1 hover:pb-[25px] hover:pt-[39px]'
+        'box-border flex cursor-pointer flex-col gap-[15px] pb-4 pt-[34px] md:pb-[26px] md:pt-10',
+        'transition-all hover:scale-[1.02] hover:border-2 hover:border-main-1 hover:pb-[15px] hover:pt-[33px] hover:md:pb-[25px] hover:md:pt-[39px]'
       )}
       onClick={() => router.push(`/${id}`)}
     >
-      <div className={cn('mx-[42px] flex items-center justify-between py-1')}>
+      <div className={cn('mx-[30px] flex items-center justify-between py-1 md:mx-[42px]')}>
         <div className={cn('flex flex-col gap-[5px] py-1')}>
-          <h2 className={cn('h2 text-gray-90')}>{name}</h2>
-          <p className={cn('body1-regular text-gray-60')}>운행중인 슬로프 {slope ?? 0}개</p>
+          <h2 className={cn('title1 md:h2 text-gray-90')}>{name}</h2>
+          <p className={cn('body1-medium text-gray-60')}>운행중인 슬로프 {slope ?? 0}개</p>
         </div>
         <div className={cn('flex flex-col items-end gap-2')}>
           <div className={cn('flex gap-2')}>
             <WeatherIcon className={cn('origin-right scale-[1.17]')} weather={weather.weather} />
-            <p className={cn('h1-semibold text-[30px]')}>{weather.temperature}</p>
+            <p className={cn('h1-semibold text-[30px]')}>{weather.temperature}°</p>
           </div>
           <p className={cn('body1-semibold text-gray-60')}>{weather.description}</p>
         </div>

diff --git a/src/widgets/discovery/ui/discovery-list.tsx b/src/widgets/discovery/ui/discovery-list.tsx
@@ -3,7 +3,7 @@ import { cn } from '@/shared/lib';
 import DiscoveryCard from './discovery-card';
 
 const DiscoveryList = ({ discoveryData }: { discoveryData: Discovery[] }) => (
-  <div className={cn('flex flex-col gap-4 px-8 py-4')}>
+  <div className={cn('flex flex-col gap-4 px-5 py-4 md:px-8')}>
     {discoveryData.map((discovery) => (
       <DiscoveryCard key={discovery.id} {...discovery} />
     ))}

diff --git a/src/widgets/header/ui/header.tsx b/src/widgets/header/ui/header.tsx
@@ -15,7 +15,7 @@ const Header = ({ resortName, hasBackButton, hasShareButton }: HeaderProps) => {
   const router = useRouter();
 
   return (
-    <div className={cn('relative h-20')}>
+    <div className={cn('relative h-16 md:h-20')}>
       {hasBackButton && (
         <button
           className={cn('absolute left-7 top-1/2 -translate-y-1/2')}
@@ -24,7 +24,7 @@ const Header = ({ resortName, hasBackButton, hasShareButton }: HeaderProps) => {
           <ChevronLeftIcon />
         </button>
       )}
-      <h2 className={cn('h2 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2')}>
+      <h2 className={cn('absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2')}>
         <Image src={logo} alt="logo" width={67} />
       </h2>
       {hasShareButton && (

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -3,7 +3,7 @@ import type { Config } from 'tailwindcss';
 const config = {
   darkMode: ['class'],
   content: [
-    './pages/**/*.{ts,tsx}',
+    './views/**/*.{ts,tsx}',
     './components/**/*.{ts,tsx}',
     './app/**/*.{ts,tsx}',
     './src/**/*.{ts,tsx}',

diff --git a/yarn.lock b/yarn.lock
@@ -534,6 +534,13 @@
   dependencies:
     "@tsparticles/engine" "^3.5.0"
 
+"@tsparticles/shape-image@^3.5.0":
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/@tsparticles/shape-image/-/shape-image-3.5.0.tgz#9a66358592cc5ebbf3a366bcadf8f6495e36b6a7"
+  integrity sha512-lWYg7DTv74dSOnXy+4dr7t1/OSuUmxDpIo12Lbxgx/QBN7A5I/HoqbKcs13TSA0RS1hcuMgtti07BcDTEYW3Dw==
+  dependencies:
+    "@tsparticles/engine" "^3.5.0"
+
 "@tsparticles/updater-color@^3.5.0":
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/@tsparticles/updater-color/-/updater-color-3.5.0.tgz#a1bfbfc54e1ca56b71bfbfd773fe54ccd5ce60d9"
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export { default } from '@/pages/discovery-detail/ui/discovery-detail-page';
		export { default } from '@/views/discovery-detail/ui/discovery-detail-page';