Skip to content

[Perf] LCP 개선을 위한 Font/Icon/CardTag 컴포넌트 렌더링 최적화 (2.3s → 1.0s) #396

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
Chiman2937 merged 4 commits into from
Mar 24, 2026
Merged

[Perf] LCP 개선을 위한 Font/Icon/CardTag 컴포넌트 렌더링 최적화 (2.3s → 1.0s) #396

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e2c4832
fix: pretendard font CDN Dynamic Subset 방식으로 전환
Chiman2937 Mar 24, 2026
dcff104
fix: card-tag가 useLayoutEffect에 의해 display갯수가 정해지던 방식에서 css overflow …
Chiman2937 Mar 24, 2026
919f2df
fix: svg sprite 방식에서 SVGR 방식으로 변경
Chiman2937 Mar 24, 2026
99a82a8
fix: storybook의 next font local 세팅 구문 삭제
Chiman2937 Mar 24, 2026
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
14 changes: 0 additions & 14 deletions .storybook/preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,6 @@ import '@/styles/globals.css';
import type { Preview } from '@storybook/nextjs';

import { Providers } from '../src/app/providers';
import { pretendard } from '../src/lib/fonts';

(() => {
console.log('body className added');
const addFontClass = () => {
document.body.classList.add(pretendard.className);
};

if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', addFontClass, { once: true });
} else {
addFontClass();
}
})();

const preview: Preview = {
parameters: {
Expand Down
3 changes: 1 addition & 2 deletions src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { Suspense } from 'react';
import { LayoutWrapper } from '@/components/layout';
import { initMocks } from '@/mock';

import { pretendard } from '../lib/fonts';
import { Providers } from './providers';

export const metadata: Metadata = {
Expand All @@ -29,7 +28,7 @@ export default async function RootLayout({

return (
<html lang='ko'>
<body className={`${pretendard.className} ${pretendard.variable} antialiased`}>
<body className='antialiased'>
<Suspense fallback={null}>
<Providers hasRefreshToken={hasRefreshToken}>
<div id='root'>
Expand Down
265 changes: 47 additions & 218 deletions src/components/icon/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,230 +1,59 @@
// This file is auto-generated. Do not edit manually.
import { type ComponentProps } from 'react';

import type { IconMetadata } from 'flexisvg';
import { iconComponentMap } from './registry';

export type DynamicIconId =
| 'arrow-down'
| 'arrow-up'
| 'bell-read'
| 'calendar-1'
| 'calendar-2'
| 'check'
| 'chevron-left-1'
| 'chevron-left-2'
| 'chevron-right-1'
| 'clock'
| 'edit-bar'
| 'edit'
| 'heart'
| 'home'
| 'kebab'
| 'map-pin-1'
| 'map-pin-2'
| 'message'
| 'plus'
| 'search'
| 'send'
| 'small-x-1'
| 'small-x-2'
| 'symbol'
| 'tag'
| 'user-1'
| 'user-2'
| 'users-1'
| 'users-2'
| 'x-1'
| 'x-2';
export type ResizableIconId =
| 'bell-unread'
| 'congratulate'
| 'empty'
| 'google-login'
| 'kick'
| 'not-found'
| 'plus-circle'
| 'visibility-false'
| 'visibility-true'
| 'wego-logo';
export const iconMetadataMap = [
{ id: 'arrow-down', variant: 'dynamic' },
{ id: 'arrow-up', variant: 'dynamic' },
{ id: 'bell-read', variant: 'dynamic' },
{ id: 'calendar-1', variant: 'dynamic' },
{ id: 'calendar-2', variant: 'dynamic' },
{ id: 'check', variant: 'dynamic' },
{ id: 'chevron-left-1', variant: 'dynamic' },
{ id: 'chevron-left-2', variant: 'dynamic' },
{ id: 'chevron-right-1', variant: 'dynamic' },
{ id: 'clock', variant: 'dynamic' },
{ id: 'edit-bar', variant: 'dynamic' },
{ id: 'edit', variant: 'dynamic' },
{ id: 'heart', variant: 'dynamic' },
{ id: 'home', variant: 'dynamic' },
{ id: 'kebab', variant: 'dynamic' },
{ id: 'map-pin-1', variant: 'dynamic' },
{ id: 'map-pin-2', variant: 'dynamic' },
{ id: 'message', variant: 'dynamic' },
{ id: 'plus', variant: 'dynamic' },
{ id: 'search', variant: 'dynamic' },
{ id: 'send', variant: 'dynamic' },
{ id: 'small-x-1', variant: 'dynamic' },
{ id: 'small-x-2', variant: 'dynamic' },
{ id: 'symbol', variant: 'dynamic' },
{ id: 'tag', variant: 'dynamic' },
{ id: 'user-1', variant: 'dynamic' },
{ id: 'user-2', variant: 'dynamic' },
{ id: 'users-1', variant: 'dynamic' },
{ id: 'users-2', variant: 'dynamic' },
{ id: 'x-1', variant: 'dynamic' },
{ id: 'x-2', variant: 'dynamic' },
{ id: 'bell-unread', variant: 'resizable' },
{ id: 'congratulate', variant: 'resizable' },
{ id: 'empty', variant: 'resizable' },
{ id: 'google-login', variant: 'resizable' },
{ id: 'kick', variant: 'resizable' },
{ id: 'not-found', variant: 'resizable' },
{ id: 'plus-circle', variant: 'resizable' },
{ id: 'visibility-false', variant: 'resizable' },
{ id: 'visibility-true', variant: 'resizable' },
{ id: 'wego-logo', variant: 'resizable' },
] as const;

export type IconId = DynamicIconId | ResizableIconId;
export type IconId = (typeof iconMetadataMap)[number]['id'];

type IconProps = ComponentProps<'svg'> & {
id: IconId;
size?: number;
};

export const Icon = ({ id, size = 24, ...props }: IconProps) => {
return (
<svg width={size} height={size} {...props}>
<use href={`/icons/sprite.svg#${id}`} />
</svg>
);
const IconComponent = iconComponentMap[id];
return <IconComponent width={size} height={size} {...props} />;
};

export const iconMetadataMap: IconMetadata[] = [
{
id: 'arrow-down',
variant: 'dynamic',
},
{
id: 'arrow-up',
variant: 'dynamic',
},
{
id: 'bell-read',
variant: 'dynamic',
},
{
id: 'calendar-1',
variant: 'dynamic',
},
{
id: 'calendar-2',
variant: 'dynamic',
},
{
id: 'check',
variant: 'dynamic',
},
{
id: 'chevron-left-1',
variant: 'dynamic',
},
{
id: 'chevron-left-2',
variant: 'dynamic',
},
{
id: 'chevron-right-1',
variant: 'dynamic',
},
{
id: 'clock',
variant: 'dynamic',
},
{
id: 'edit-bar',
variant: 'dynamic',
},
{
id: 'edit',
variant: 'dynamic',
},
{
id: 'heart',
variant: 'dynamic',
},
{
id: 'home',
variant: 'dynamic',
},
{
id: 'kebab',
variant: 'dynamic',
},
{
id: 'map-pin-1',
variant: 'dynamic',
},
{
id: 'map-pin-2',
variant: 'dynamic',
},
{
id: 'message',
variant: 'dynamic',
},
{
id: 'plus',
variant: 'dynamic',
},
{
id: 'search',
variant: 'dynamic',
},
{
id: 'send',
variant: 'dynamic',
},
{
id: 'small-x-1',
variant: 'dynamic',
},
{
id: 'small-x-2',
variant: 'dynamic',
},
{
id: 'symbol',
variant: 'dynamic',
},
{
id: 'tag',
variant: 'dynamic',
},
{
id: 'user-1',
variant: 'dynamic',
},
{
id: 'user-2',
variant: 'dynamic',
},
{
id: 'users-1',
variant: 'dynamic',
},
{
id: 'users-2',
variant: 'dynamic',
},
{
id: 'x-1',
variant: 'dynamic',
},
{
id: 'x-2',
variant: 'dynamic',
},
{
id: 'bell-unread',
variant: 'resizable',
},
{
id: 'congratulate',
variant: 'resizable',
},
{
id: 'empty',
variant: 'resizable',
},
{
id: 'google-login',
variant: 'resizable',
},
{
id: 'kick',
variant: 'resizable',
},
{
id: 'not-found',
variant: 'resizable',
},
{
id: 'plus-circle',
variant: 'resizable',
},
{
id: 'visibility-false',
variant: 'resizable',
},
{
id: 'visibility-true',
variant: 'resizable',
},
{
id: 'wego-logo',
variant: 'resizable',
},
];
Loading
Loading