Merge branch 'pre-production' into production

gudusol · gudusol · commit 186dfe3a74ba · 2025-04-06T23:31:56.000+09:00
diff --git a/apps/service/src/app/(home)/page.tsx b/apps/service/src/app/(home)/page.tsx
@@ -1,6 +1,7 @@
 'use client';
 import { useRouter } from 'next/navigation';
 import dayjs from 'dayjs';
+import { useEffect, useState } from 'react';
 
 import { Button } from '@components';
 import { IcCalendar } from '@svg';
@@ -17,16 +18,24 @@ import {
 
 const Page = () => {
   const router = useRouter();
-  const { data } = useGetHomeFeed();
+  const { data, isLoading } = useGetHomeFeed();
   const homeFeedData = data?.data;
 
   const dailyProgresses = homeFeedData?.dailyProgresses;
   const problemSets = homeFeedData?.problemSets;
 
-  const startDate = dayjs(dailyProgresses?.[0]?.date).format('MM/DD');
-  const endDate = dayjs(dailyProgresses?.[dailyProgresses.length - 1]?.date).format('DD');
-  const progress: DailyProgress[] =
-    dailyProgresses?.map((progress) => progress.progressStatus ?? 'NOT_STARTED') ?? [];
+  const [dateRange, setDateRange] = useState({ startDate: '', endDate: '' });
+  const [progress, setProgress] = useState<DailyProgress[]>([]);
+
+  useEffect(() => {
+    if (dailyProgresses?.length) {
+      setDateRange({
+        startDate: dayjs(dailyProgresses[0]?.date).format('MM/DD'),
+        endDate: dayjs(dailyProgresses[dailyProgresses.length - 1]?.date).format('DD'),
+      });
+      setProgress(dailyProgresses.map((progress) => progress.progressStatus ?? 'NOT_STARTED'));
+    }
+  }, [dailyProgresses]);
 
   const handleClickAllProblem = () => {
     trackEvent('home_all_problem_button_click');
@@ -43,11 +52,21 @@ const Page = () => {
         {false && <NoticeButton count={1} />}
         <div className='flex w-full items-center gap-[1.2rem] pt-[1.6rem]'>
           <GuideButton />
-          <WeekProgress startDate={startDate} endDate={endDate} progress={progress} />
+          <WeekProgress
+            startDate={dateRange.startDate}
+            endDate={dateRange.endDate}
+            progress={progress}
+          />
         </div>
       </main>
       <div className='mt-[2.4rem]'>
-        <ProblemSwiper problemSets={problemSets ?? []} />
+        {isLoading ? (
+          <div className='h-[456px] w-full' />
+        ) : problemSets ? (
+          <ProblemSwiper problemSets={problemSets} />
+        ) : (
+          <></>
+        )}
       </div>
       <footer className='bg-background mt-[2.4rem] px-[2rem] pb-[3.3rem]'>
         <Button variant='light' onClick={handleClickAllProblem}>
diff --git a/apps/service/src/app/layout.tsx b/apps/service/src/app/layout.tsx
@@ -1,6 +1,6 @@
 import { Suspense } from 'react';
 import type { Metadata, Viewport } from 'next';
-import { GoogleAnalytics } from '@next/third-parties/google';
+import Script from 'next/script';
 
 import Providers from './providers';
 
@@ -40,8 +40,6 @@ export const metadata: Metadata = {
 export const viewport: Viewport = {
   width: 'device-width',
   initialScale: 1,
-  maximumScale: 1,
-  userScalable: false,
 };
 
 export default function RootLayout({
@@ -53,6 +51,10 @@ export default function RootLayout({
 }>) {
   return (
     <html lang='ko'>
+      <head>
+        <link rel='preconnect' href='https://www.google-analytics.com' crossOrigin='anonymous' />
+        <link rel='preconnect' href='https://prod.math-pointer.com' crossOrigin='anonymous' />
+      </head>
       <body className={`antialiased`}>
         <Providers>
           <Suspense fallback={<></>}>
@@ -61,7 +63,18 @@ export default function RootLayout({
           </Suspense>
           <div id='modal'></div>
         </Providers>
-        <GoogleAnalytics gaId='G-7C9ETDHB0G' />
+        <Script
+          src={`https://www.googletagmanager.com/gtag/js?id=G-7C9ETDHB0G`}
+          strategy='lazyOnload'
+        />
+        <Script id='google-analytics' strategy='lazyOnload'>
+          {`
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', 'G-7C9ETDHB0G');
+          `}
+        </Script>
       </body>
     </html>
   );
diff --git a/apps/service/src/components/home/HomeHeader.tsx b/apps/service/src/components/home/HomeHeader.tsx
@@ -17,7 +17,7 @@ const HomeHeader = () => {
   return (
     <header className='bg-background fixed inset-0 z-40 mx-auto flex h-[6rem] max-w-[768px] items-center justify-between px-[2rem]'>
       <Link href='/'>
-        <LogoHeader width={106} height={24} />
+        <LogoHeader width={106} height={24} title='로고' titleId='logo-icon' />
       </Link>
       <div className='flex items-center gap-[0.8rem]'>
         {/* <div className='font-medium-12 text-main bg-sub2 flex h-[2.2rem] items-center justify-center rounded-[0.4rem] px-[0.8rem]'>
@@ -31,7 +31,7 @@ const HomeHeader = () => {
           )}
         </div>
         <Link href='/my-page'>
-          <IcSetting width={24} height={24} />
+          <IcSetting width={24} height={24} title='설정' titleId='setting-icon' />
         </Link>
       </div>
     </header>
diff --git a/apps/service/src/components/home/ProblemCard/ProblemCard.tsx b/apps/service/src/components/home/ProblemCard/ProblemCard.tsx
@@ -37,6 +37,7 @@ const ProblemCard = ({ publishId, dateString, title, image, solvedCount }: Props
           className='w-full object-contain object-top'
           width={264}
           height={157}
+          priority
         />
 
         <div
