Skip to content

[Feat/service/#66] 웹 성능 최적화 #67

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gudusol merged 7 commits into from
Apr 6, 2025
Merged

[Feat/service/#66] 웹 성능 최적화 #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
cbdf6ba
fix(service): React #418 error 해결
gudusol Apr 6, 2025
46755ea
fix(service): LCP Image priority 추가
gudusol Apr 6, 2025
25bd5bb
feat(service): preconnect link태그 추가
gudusol Apr 6, 2025
614a72d
feat(service): GA 스크립트 로딩 최적화
gudusol Apr 6, 2025
cc606cf
feat(service): meta태그 웹접근성 개선
gudusol Apr 6, 2025
e6d9aa9
feat(service): svg 아이콘 대체 텍스트 적용
gudusol Apr 6, 2025
a06a677
feat(service): 홈 캐러셀 CLS 개선
gudusol Apr 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 26 additions & 7 deletions apps/service/src/app/(home)/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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');
Expand All @@ -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}>
Expand Down
21 changes: 17 additions & 4 deletions apps/service/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -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({
Expand All @@ -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={<></>}>
Expand All @@ -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>
);
Expand Down
4 changes: 2 additions & 2 deletions apps/service/src/components/home/HomeHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]'>
Expand All @@ -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>
Expand Down
1 change: 1 addition & 0 deletions apps/service/src/components/home/ProblemCard/ProblemCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down