Merge pull request #30 from simonyiszk/27-hydration-error-fix

27 hydration error fix

src/app/page.tsx

@@ -1,9 +1,9 @@
+import dynamic from 'next/dynamic';
 import Image from 'next/image';
 
 import { metadata } from '@/app/layout';
 import { ImageCarouselSection } from '@/components/image-carousel/image-carousel-section';
 import { SponsorSection } from '@/components/sponsors/sponsor-section';
-import { CountdownTile } from '@/components/tiles/countdown-tile';
 import { GiveawayTile } from '@/components/tiles/giveaway-tile';
 import { NewsletterTile } from '@/components/tiles/newsletter-tile';
 import { PromoVideoTile } from '@/components/tiles/promo-video-tile';
@@ -15,6 +15,8 @@ import konfLogo from '../../public/img/konf.svg';
 import redPlanet from '../../public/img/red-planet.png';
 import whitePlanet from '../../public/img/white-planet.png';
 
+const CountdownTile = dynamic(() => import('@/components/tiles/countdown-tile/countdown-tile'), { ssr: false });
+
 export default async function Landing() {
   const data = await getIndexData();
   return (

src/components/tiles/countdown-tile/countdown-element.tsx

@@ -0,0 +1,13 @@
+type CountdownElementProps = {
+  value: any;
+  label: string;
+};
+
+export function CountDownElement({ value, label }: CountdownElementProps) {
+  return (
+    <div className='flex flex-col items-center'>
+      <p className='text-6xl font-bold'>{value}</p>
+      <p className='text-xl sm:text-2xl'>{label}</p>
+    </div>
+  );
+}

src/components/tiles/countdown-tile.tsx → src/components/tiles/countdown-tile/countdown-tile.tsx

@@ -3,29 +3,19 @@
 import { intervalToDuration } from 'date-fns';
 import { useEffect, useState } from 'react';
 
-import { Tile } from './tile';
+import { CountDownElement } from '@/components/tiles/countdown-tile/countdown-element';
 
-type CountdownElementProps = {
-  value: any;
-  label: string;
-};
-function CountDownElement({ value, label }: CountdownElementProps) {
-  return (
-    <div className='flex flex-col items-center'>
-      <p className='text-6xl font-bold'>{value}</p>
-      <p className='text-xl sm:text-2xl'>{label}</p>
-    </div>
-  );
-}
+import { Tile } from '../tile';
 
-export function CountdownTile() {
+export default function CountdownTile() {
   const target = new Date(1710846000000); // 2024. 03. 19. 12:00
   const [duration, setDuration] = useState(intervalToDuration({ start: new Date(), end: target }));
   const update = () => {
     if (target.getTime() > Date.now()) setDuration(intervalToDuration({ start: new Date(), end: target }));
   };
   useEffect(() => {
-    setTimeout(() => setInterval(update, 1000), 2000);
+    const interval = setInterval(update, 1000);
+    return () => clearInterval(interval);
   }, []);
   return (
     <Tile className='sm:col-span-3'>