Migrate project to next 16 and update pkgs (#33)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Release Notes

* **New Features**
* Added OAuth authentication callback support for GitHub login
integration
  * Introduced async parameter handling for improved routing

* **Bug Fixes**
  * Improved session synchronization and dark mode initialization
  * Enhanced GitHub OAuth redirect URL handling

* **Performance & Infrastructure**
  * Updated core dependencies including Next.js 16 and Node 20 support
  * Modernized ESLint configuration and added turbopack support

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: hyochan

.eslintignore

@@ -33,10 +33,10 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          # update the Node version to meet your needs
-          node-version: 18
+          # Next.js 16 requires Node >= 20.9
+          node-version: '20'
 
       - uses: oven-sh/setup-bun@v1
         with:
@@ -49,10 +49,10 @@ jobs:
         run: bun install
 
       - name: Check lint
-        run: bun lint
+        run: bun run lint
 
       - name: Test
-        run: bun run test --coverage
+        run: bun run test --run --coverage
 
       - name: Upload coverage to Codecov
         uses: codecov/codecov-action@v2

.eslintrc.js

@@ -61,7 +61,7 @@ const Button: FC<ButtonProps> = ({
         >
           <>
             {startElement
-              ? cloneElement(startElement, {
+              ? cloneElement(startElement as ReactElement<any>, {
                   style: {
                     position: 'absolute',
                     left: 0,

.github/workflows/ci.yml

@@ -17,14 +17,14 @@ function Dropdown<T extends {domain: string; icon: ReactElement}>({
   setSelected,
   data = [],
 }: DropdownProps<T>): ReactElement {
-  const dropdownRef = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null!);
   const [isOpened, setIsOpened] = useState(false);
 
   const handleClickOutside = (): void => {
     setIsOpened(false);
   };
 
-  useOnClickOutside(dropdownRef, handleClickOutside);
+  useOnClickOutside<HTMLDivElement>(dropdownRef, handleClickOutside);
 
   const onClick: MouseEventHandler<HTMLButtonElement> | undefined = (
     e,

app/[lang]/(common)/Button.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type {ReactElement} from 'react';
 import React from 'react';
 import Image from 'next/image';
 import clsx from 'clsx';
@@ -16,7 +17,7 @@ export default function GreatFrontEnd({
   className,
   href,
   title,
-}: GreatFrontEndProps): JSX.Element {
+}: GreatFrontEndProps): ReactElement {
   return (
     <a
       href={href}

app/[lang]/(common)/Dropdown.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import type {Dispatch, ReactElement, SetStateAction} from 'react';
-import {useEffect, useState} from 'react';
+import {useEffect, useMemo, useState} from 'react';
+import type {Session} from '@supabase/supabase-js';
 import HamburgerMenu from 'react-hamburger-menu';
 import clsx from 'clsx';
 import {Inter} from 'next/font/google';
@@ -232,9 +233,9 @@ function MobileNavMenus(
 
 export default function Header(props: Props): ReactElement {
   const {t, lang} = props;
-  const supabase = getSupabaseBrowserClient();
+  const supabase = useMemo(() => getSupabaseBrowserClient(), []);
 
-  const [isDark, setIsDark] = useState(false);
+  const [isDark, setIsDark] = useState(() => isDarkMode());
   const {login, changeLogin} = useAuthContext();
 
   const navLinks: NavLink[] = !!login
@@ -260,20 +261,44 @@ export default function Header(props: Props): ReactElement {
       ];
 
   useEffect(() => {
+    const applySession = (session: Session | null): void => {
+      const username = session?.user.user_metadata?.user_name || '';
+
+      changeLogin(username);
+    };
+
+    const syncSession = async (): Promise<void> => {
+      const {
+        data: {session},
+      } = await supabase.auth.getSession();
+
+      applySession(session);
+    };
+
+    void syncSession();
+
     const {
       data: {subscription},
     } = supabase.auth.onAuthStateChange((evt, session) => {
-      const isLoggedIn = !!session?.access_token && evt === 'SIGNED_IN';
-      changeLogin(isLoggedIn && session.user.user_metadata.user_name);
+      if (evt === 'SIGNED_OUT') {
+        changeLogin('');
+
+        return;
+      }
+
+      if (
+        evt === 'INITIAL_SESSION' ||
+        evt === 'SIGNED_IN' ||
+        evt === 'TOKEN_REFRESHED'
+      ) {
+        applySession(session);
+      }
     });
 
     return () => {
       subscription.unsubscribe();
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => setIsDark(isDarkMode()), []);
+  }, [changeLogin, supabase]);
 
   return (
     <header

app/[lang]/(common)/GreatFrontEnd.tsx

@@ -1,8 +1,7 @@
 'use client';
 
 import type {CSSProperties, ReactElement} from 'react';
-import {cloneElement, useState} from 'react';
-import TextTransition, {presets} from 'react-text-transition';
+import {cloneElement, useEffect, useRef, useState} from 'react';
 import {track} from '@amplitude/analytics-browser';
 import clsx from 'clsx';
 
@@ -47,51 +46,37 @@ type StatName = (typeof statTypes)[number]['name'];
 const PluginStatsInfo = ({
   statsInfo,
   selectedStatName,
+  isTransitioning,
 }: {
   statsInfo: StatsInfo;
   selectedStatName: StatName;
+  isTransitioning: boolean;
 }): React.ReactElement => {
+  const {name, description} = statsInfo[selectedStatName];
+
   return (
     <div
       className={clsx(
         'ml-[8px] py-[24px] max-w-[600px] w-full',
         'flex-1 flex flex-col relative',
       )}
     >
-      <TextTransition
-        springConfig={presets.gentle}
-        direction="down"
-        className="body1 font-bold mb-3 text-left"
+      <div
+        className={clsx(
+          'body1 font-bold mb-3 text-left transition-opacity duration-300',
+          isTransitioning ? 'opacity-0' : 'opacity-100'
+        )}
       >
-        {selectedStatName === 'fire'
-          ? statsInfo.fire.name
-          : selectedStatName === 'earth'
-          ? statsInfo.earth.name
-          : selectedStatName === 'gold'
-          ? statsInfo.gold.name
-          : selectedStatName === 'water'
-          ? statsInfo.water.name
-          : selectedStatName === 'people'
-          ? statsInfo.people.name
-          : statsInfo.tree.name}
-      </TextTransition>
-      <TextTransition
-        className="body3 leading-[160%] text-left"
-        springConfig={presets.wobbly}
-        direction="down"
+        {name}
+      </div>
+      <div
+        className={clsx(
+          'body3 leading-[160%] text-left transition-opacity duration-500',
+          isTransitioning ? 'opacity-0' : 'opacity-100'
+        )}
       >
-        {selectedStatName === 'fire'
-          ? statsInfo.fire.description
-          : selectedStatName === 'earth'
-          ? statsInfo.earth.description
-          : selectedStatName === 'gold'
-          ? statsInfo.gold.description
-          : selectedStatName === 'water'
-          ? statsInfo.water.description
-          : selectedStatName === 'people'
-          ? statsInfo.people.description
-          : statsInfo.tree.description}
-      </TextTransition>
+        {description}
+      </div>
     </div>
   );
 };
@@ -106,12 +91,28 @@ const StatsSymbols = ({
   statsInfo: StatsInfo;
 }): ReactElement => {
   const [selectedStatName, setSelectedStatName] = useState<StatName>('tree');
+  const [isTransitioning, setIsTransitioning] = useState(false);
+  const transitionTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const pressStat = (type: StatName): void => {
+    if (transitionTimer.current) {
+      clearTimeout(transitionTimer.current);
+    }
+
+    setIsTransitioning(true);
+    transitionTimer.current = setTimeout(() => setIsTransitioning(false), 50);
     setSelectedStatName(type);
     track('Press Stat Info', {type});
   };
 
+  useEffect(() => {
+    return () => {
+      if (transitionTimer.current) {
+        clearTimeout(transitionTimer.current);
+      }
+    };
+  }, []);
+
   return (
     <div className={`flex flex-col  ${className}`} style={style}>
       <div className={clsx('max-w-[220px]', 'flex flex-row')}>
@@ -138,6 +139,7 @@ const StatsSymbols = ({
       <PluginStatsInfo
         selectedStatName={selectedStatName}
         statsInfo={statsInfo}
+        isTransitioning={isTransitioning}
       />
     </div>
   );

app/[lang]/(common)/Header/index.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type {ReactElement} from 'react';
 import {CopyToClipboard} from 'react-copy-to-clipboard';
 import {useSnackbar} from 'react-simple-snackbar';
 import {track} from '@amplitude/analytics-browser';
@@ -26,7 +27,7 @@ export default function StatsUrlCard({
   login,
   svgStatsURL,
   svgTrophiesURL,
-}: Props): JSX.Element {
+}: Props): ReactElement {
   const router = useRouter();
   const [openSnackbar] = useSnackbar();
   const {login: authLogin} = useAuthContext();

app/[lang]/(home)/Hero/StatsSymbol.tsx

@@ -47,10 +47,11 @@ export default function SectionFooter({t}: Props): ReactElement {
           {t.enjoyStats}
         </p>
         <a
-          href="https://github.com/hyochan"
-          target="_blank"
-          rel="noopener noreferrer"
           className="cursor-pointer"
+          href="https://github.com/hyochan/github-stats"
+          aria-label="github-stats scouter"
+          target="_blank"
+          rel="noreferrer"
         >
           <SvgScouter className="w-screen px-12 max-w-3xl" />
         </a>