Skip to content

Commit 4da2457

Browse files
YAPPgitYAPPgit
committed
env: 전역 타입 파일 추가
1 parent d585712 commit 4da2457

File tree

17 files changed

+101
-59
lines changed

17 files changed

+101
-59
lines changed

‎additional.d.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
interface Window {
2+
gtag: (param1: string, param2: string, param3: object) => void;
3+
}

‎components/Carousel/index.tsx

+7-1
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,13 @@ function Carousel({ data }: CarouselProps) {
5656
{data.map(({ title, link, image }: any, index: number) => (
5757
<Link href={link} key={index}>
5858
<ProjectCard className="project-card">
59-
<Image src={image} layout="fill" loading="eager" />
59+
<Image
60+
src={image}
61+
alt="Project Card Image"
62+
layout="fill"
63+
placeholder="blur"
64+
blurDataURL={image}
65+
/>
6066
<ProjectBlurCard>{title}</ProjectBlurCard>
6167
</ProjectCard>
6268
</Link>

‎components/GoogleAnalytics.tsx

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import Script from 'next/script';
2+
3+
import siteMetadata from 'database/sitemap';
4+
5+
export const GoogleAnalyticsScript = () => {
6+
return (
7+
<>
8+
<Script
9+
async
10+
src={`https://www.googletagmanager.com/gtag/js?id=${siteMetadata.analytics.google}`}
11+
></Script>
12+
<Script
13+
dangerouslySetInnerHTML={{
14+
__html: `
15+
window.dataLayer = window.dataLayer || [];
16+
function gtag(){dataLayer.push(arguments);}
17+
gtag('js', new Date());
18+
gtag('config', '${siteMetadata.analytics.google}', {
19+
page_path: window.location.pathname,
20+
});
21+
`,
22+
}}
23+
/>
24+
</>
25+
);
26+
};

‎components/LayoutWrapper.tsx

+1-28
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,8 @@
11
import React, { ReactNode, useEffect, useRef } from 'react';
22
import { Header, Footer, FloatingButton } from 'components';
3-
import { Router, useRouter } from 'next/router';
3+
import { useRouter } from 'next/router';
44
import { IntroSection } from 'pages-components/home';
55
import PATH from 'constants/path';
6-
import siteMetadata from 'database/sitemap';
7-
8-
declare global {
9-
interface Window {
10-
gtag: (param1: string, param2: string, param3: object) => void;
11-
}
12-
}
136

147
interface LayoutWrapperProps {
158
children: ReactNode;
@@ -29,26 +22,6 @@ function LayoutWrapper({ children }: LayoutWrapperProps) {
2922
});
3023
}, [asPath]);
3124

32-
// Google Analytics
33-
useEffect(() => {
34-
const handleRouteChangeComplete = () => {
35-
if (typeof window === 'object') {
36-
const { title } = window.document;
37-
const { href, pathname } = window.location;
38-
39-
window.gtag('config', `${siteMetadata.analytics.google}`, {
40-
page_title: title,
41-
page_location: href,
42-
page_path: pathname,
43-
});
44-
}
45-
};
46-
47-
Router.events.on('routeChangeComplete', handleRouteChangeComplete);
48-
return () =>
49-
Router.events.off('routeChangeComplete', handleRouteChangeComplete);
50-
}, []);
51-
5225
return (
5326
<div ref={scrollRef}>
5427
{asPath === PATH.Home && <IntroSection />}

‎components/NewsCard/index.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,12 @@ function NewsCard({ data, className }: NewsCardProps): ReactElement {
2525
<StyledNewsCard className={className} onClick={handleClickCard}>
2626
<ImageWrapper>
2727
<div className="image-scale-wrapper">
28-
<Image src={image} layout="fill" />
28+
<Image
29+
src={image}
30+
layout="fill"
31+
placeholder="blur"
32+
blurDataURL={image}
33+
/>
2934
</div>
3035
</ImageWrapper>
3136
<ContentWrapper

‎components/SEO.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@ const SEO = () => {
55
return (
66
<Head>
77
{/* Default SEO */}
8-
<title>YAPP</title>
8+
<title>{siteMetadata.title}</title>
99
<link rel="icon" href="/assets/images/favicon.png" />
10-
<meta content="width=device-width, initial-scale=1" name="viewport" />
1110
<meta name="description" content={siteMetadata.description} />
1211
<meta name="keywords" content={siteMetadata.keywords} />
1312
<meta name="author" content={siteMetadata.author} />
1413
<meta name="reply-to" content={siteMetadata.email} />
14+
<link rel="canonical" href={siteMetadata.siteUrl} />
1515

1616
{/* 로봇 방문 허용 */}
1717
<meta name="robots" content="follow, index" />

‎database/home.ts

+5-2
Original file line numberDiff line numberDiff line change
@@ -91,9 +91,12 @@ export const NEWS_DATA = [
9191
/** Sponsor 이미지 경로 */
9292
export const SPONSOR_DATA = [
9393
{
94-
image: '/assets/images/sponsor1.png',
94+
image: '/assets/images/sponsor1.png', // 오늘의 집
9595
},
9696
{
97-
image: '/assets/images/sponsor2.png',
97+
image: '/assets/images/sponsor2.png', // readyme
98+
},
99+
{
100+
image: '/assets/images/sponsor3.png', // 이지스퍼블리싱
98101
},
99102
];

‎database/sitemap.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const siteMetadata = {
77
email: '[email protected]',
88
description: '작은 아이디어로 세상을 크게 변화시키는 IT동아리, YAPP',
99
keywords:
10-
'YAPP, yapp, 동아리, 연합 동아리, IT 동아리, 개발 동아리, 대학교 동아리, 개발 동아리, 개발, 대외활동, 외부활동, 프론트엔드, 백엔드, 디자이너, PM',
10+
'YAPP, yapp, 동아리, 연합 동아리, IT 동아리, 개발 동아리, 대학교 동아리, 대학생 연합 동아리, 대외활동, 외부활동, 사이드 프로젝트, 개발, 개발자, 프론트엔드, 백엔드, 디자이너, PM',
1111
type: 'website',
1212
siteUrl: 'https://yapp.co.kr',
1313
siteRepo: 'https://https://github.com/YAPP-admin',

‎pages-components/home/SponsorSection/index.tsx

+12-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,14 @@ function SponsorSection(): ReactElement {
1818
<SponsorList>
1919
{SPONSOR_DATA.map(({ image }, index) => (
2020
<Sponsor key={index}>
21-
<Image src={image} layout="fill" />
21+
<Image
22+
src={image}
23+
alt="sponsor image"
24+
layout="fill"
25+
objectFit="contain"
26+
placeholder="blur"
27+
blurDataURL={image}
28+
/>
2229
</Sponsor>
2330
))}
2431
</SponsorList>
@@ -74,6 +81,10 @@ const Sponsor = styled.li`
7481
display: inline-block;
7582
width: 280px;
7683
height: 80px;
84+
85+
${media.mobile} {
86+
margin: 10px 0;
87+
}
7788
`;
7889

7990
const StyledButton = styled(Button)`

‎pages/404.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Image from 'next/image';
44
import media from 'styles/media';
55
import { useRouter } from 'next/router';
66
import { Button } from 'components';
7+
import Illust_404 from 'public/assets/images/illust_404.png';
78

89
function Custom404(): ReactElement {
910
const Router = useRouter();
@@ -17,7 +18,7 @@ function Custom404(): ReactElement {
1718
</div>
1819
</TextContainer>
1920
<ImageContainer>
20-
<Image src={'/assets/images/illust_404.png'} layout="fill"></Image>
21+
<Image src={Illust_404} layout="fill" objectFit="contain"></Image>
2122
</ImageContainer>
2223
</ContentContainer>
2324
<StyledButton

‎pages/_app.tsx

+22-1
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,35 @@
11
import type { AppProps } from 'next/app';
2+
import { useEffect } from 'react';
3+
import { useRouter } from 'next/router';
4+
import Head from 'next/head';
25
import { ThemeProvider } from 'styled-components';
3-
import theme from 'styles/theme';
46
import { SEO, LayoutWrapper } from 'components';
57
import GlobalStyle from 'styles/global-styles';
8+
import theme from 'styles/theme';
9+
import * as ga from 'utils/gtag';
610

711
function App({ Component, pageProps }: AppProps) {
12+
const router = useRouter();
13+
14+
// 페이지 별 GA 적용
15+
useEffect(() => {
16+
const handleRouteChange = (url: string) => {
17+
ga.pageview(url);
18+
};
19+
router.events.on('routeChangeComplete', handleRouteChange);
20+
21+
return () => {
22+
router.events.off('routeChangeComplete', handleRouteChange);
23+
};
24+
}, [router.events]);
25+
826
return (
927
<>
1028
<GlobalStyle />
1129
<ThemeProvider theme={theme}>
30+
<Head>
31+
<meta content="width=device-width, initial-scale=1" name="viewport" />
32+
</Head>
1233
<SEO />
1334
<LayoutWrapper>
1435
<Component {...pageProps} />

‎pages/_document.tsx

+6-20
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ import Document, {
66
DocumentContext,
77
} from 'next/document';
88
import { ServerStyleSheet } from 'styled-components';
9-
import siteMetadata from 'database/sitemap';
9+
import { GoogleAnalyticsScript } from 'components/GoogleAnalytics';
10+
1011
export default class MyDocument extends Document {
1112
// Styled-components
1213
static async getInitialProps(ctx: DocumentContext) {
@@ -35,37 +36,22 @@ export default class MyDocument extends Document {
3536
}
3637
}
3738

38-
// Google Analytics
39-
addGoogleAnalyticsScript() {
40-
return {
41-
__html: `
42-
window.dataLayer = window.dataLayer || [];
43-
function gtag(){dataLayer.push(arguments);}
44-
gtag('js', new Date());
45-
46-
gtag('config', '${siteMetadata.analytics.google}');
47-
`,
48-
};
49-
}
50-
5139
render() {
5240
return (
5341
<Html>
5442
<Head>
43+
{/* 폰트 */}
5544
<link
5645
rel="stylesheet"
5746
type="text/css"
58-
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"
47+
href="h
48+
ttps://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"
5949
/>
50+
<GoogleAnalyticsScript />
6051
</Head>
6152
<body>
6253
<Main />
6354
<NextScript />
64-
<script
65-
async
66-
src={`https://www.googletagmanager.com/gtag/js?id=${siteMetadata.analytics.google}`}
67-
></script>
68-
<script dangerouslySetInnerHTML={this.addGoogleAnalyticsScript()} />
6955
</body>
7056
</Html>
7157
);

‎public/assets/images/sponsor1.png

7.22 KB
Loading

‎public/assets/images/sponsor2.png

6.62 KB
Loading

‎public/assets/images/sponsor3.png

6.81 KB
Loading

‎tsconfig.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,6 @@
1616
"jsx": "preserve",
1717
"incremental": true
1818
},
19-
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
19+
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "additional.d.ts"],
2020
"exclude": ["node_modules"]
2121
}

‎utils/gtag.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import siteMetadata from 'database/sitemap';
2+
3+
export const pageview = (url: string) => {
4+
window.gtag('config', siteMetadata.analytics.google, {
5+
page_path: url,
6+
});
7+
};

0 commit comments

Comments
 (0)