Skip to content

Commit 419cc87

Browse files
get6get6
committed
Enhance ad integration: Replace Script component with native script tag in AdSense, add AdsInTable and AdsRecentPost components, and update PostList and PostTable to include ads in the content flow.
1 parent b44fbc8 commit 419cc87

File tree

7 files changed

+123
-47
lines changed

7 files changed

+123
-47
lines changed

‎app/ads/AdSense.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
1-
import Script from 'next/script'
2-
31
export default function AdSense() {
42
if (process.env.NODE_ENV !== 'production') {
53
return null
64
}
75

86
return (
9-
<Script
7+
<script
108
async
11-
src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1411731962767238`}
9+
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1411731962767238"
1210
crossOrigin="anonymous"
13-
strategy="afterInteractive"
14-
></Script>
11+
></script>
1512
)
1613
}

‎app/ads/AdsInTable.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
'use client'
2+
import { useEffect } from 'react'
3+
4+
export const AdsInTable = () => {
5+
useEffect(() => {
6+
if (process.env.NODE_ENV === 'production') {
7+
;(window.adsbygoogle = window.adsbygoogle || []).push({})
8+
}
9+
}, [])
10+
11+
return (
12+
<ins
13+
className="adsbygoogle"
14+
style={{
15+
display: 'block',
16+
}}
17+
data-ad-client="ca-pub-1411731962767238"
18+
data-ad-slot="2705917050"
19+
data-ad-format="auto"
20+
data-full-width-responsive="true"
21+
></ins>
22+
)
23+
}

‎app/ads/AdsRecentPost.tsx‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,19 @@ export const AdsRecentPost = () => {
99
}, [])
1010

1111
return (
12-
<ins
13-
className="adsbygoogle"
14-
style={{
15-
display: 'block',
16-
}}
17-
data-ad-format="fluid"
18-
data-ad-layout-key="+37+pa+33+c+60"
19-
data-ad-client="ca-pub-1411731962767238"
20-
data-ad-slot="9407374003"
21-
></ins>
12+
<div className="flex h-[140px] w-full items-center justify-center overflow-hidden border border-black bg-white dark:border-white dark:bg-gray-900 lg:h-[205px] lg:w-[520px]">
13+
<ins
14+
className="adsbygoogle"
15+
style={{
16+
display: 'block',
17+
width: '100%',
18+
height: '100%',
19+
}}
20+
data-ad-format="fluid"
21+
data-ad-layout-key="+37+pa+33+c+60"
22+
data-ad-client="ca-pub-1411731962767238"
23+
data-ad-slot="9407374003"
24+
></ins>
25+
</div>
2226
)
2327
}

‎app/lib/definitions.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export interface Ad {
3838
type: 'Ad'
3939
}
4040

41-
export const ad_per_content = 15
41+
export const ad_per_content = 8
4242

4343
// 공통 타입들 추가
4444
export interface SearchParams {

‎app/ui/books/BookTable.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client'
22

3-
import { AdsInBooks } from '@/app/ads/AdsInBooks'
4-
import { Ad } from '@/app/lib/definitions'
3+
import { AdsInTable } from '@/app/ads/AdsInTable'
4+
import { Ad, ad_per_content } from '@/app/lib/definitions'
55
import FormattedDate from '@/app/ui/FormattedDate'
66
import Table, { TableBody, TableHead } from '@/app/ui/Table'
77
import { LinkIcon } from '@heroicons/react/24/solid'
@@ -34,9 +34,7 @@ export default function BookTable({ books, isFinished = false }: Props) {
3434
return result
3535
}
3636

37-
// const booksWithAds = insertAdsIntoBooks(books, ad_per_content)
38-
// const booksWithAds: BookOrAd[] = [...books, { type: 'Ad' }]
39-
const booksWithAds: BookOrAd[] = [...books]
37+
const booksWithAds = insertAdsIntoBooks(books, ad_per_content)
4038

4139
return (
4240
<Table>
@@ -58,7 +56,7 @@ export default function BookTable({ books, isFinished = false }: Props) {
5856
className={`max-h-14 border-b bg-white dark:border-gray-700 dark:bg-gray-800`}
5957
>
6058
<td scope="row" colSpan={heads.length}>
61-
<AdsInBooks />
59+
<AdsInTable />
6260
</td>
6361
</tr>
6462
)

‎app/ui/home/PostList.tsx‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
'use client'
22

3+
import { AdsRecentPost } from '@/app/ads/AdsRecentPost'
4+
import { ad_per_content } from '@/app/lib/definitions'
35
import PrevPost from '@/app/ui/home/PrevPost'
46
import { ExclamationCircleIcon } from '@heroicons/react/24/outline'
57
import { Post } from 'contentlayer/generated'
@@ -10,6 +12,8 @@ interface Props {
1012
posts: Post[]
1113
}
1214

15+
type PostOrAd = Post | { type: 'Ad' }
16+
1317
export default function PostList({ posts }: Props) {
1418
const param = 'query'
1519
const searchParams = useSearchParams()
@@ -40,12 +44,30 @@ export default function PostList({ posts }: Props) {
4044
.map(({ post }) => post)
4145
}, [indexedPosts, posts, query])
4246

47+
const postsWithAds = useMemo((): PostOrAd[] => {
48+
if (query) return allPosts
49+
const result: PostOrAd[] = []
50+
for (let i = 0; i < allPosts.length; i++) {
51+
if (i > 0 && i % ad_per_content === 0) {
52+
result.push({ type: 'Ad' })
53+
}
54+
result.push(allPosts[i])
55+
}
56+
return result
57+
}, [allPosts, query])
58+
4359
return (
4460
<div
4561
className={`flex flex-wrap justify-center gap-8 lg:max-w-full lg:justify-between`}
4662
>
47-
{0 < allPosts.length ? (
48-
allPosts.map((post) => <PrevPost key={post.slug} post={post} />)
63+
{0 < postsWithAds.length ? (
64+
postsWithAds.map((item, index) =>
65+
'type' in item && item.type === 'Ad' ? (
66+
<AdsRecentPost key={`ad-${index}`} />
67+
) : (
68+
<PrevPost key={(item as Post).slug} post={item as Post} />
69+
),
70+
)
4971
) : (
5072
<div className="flex h-[205px] w-full flex-col items-center justify-center gap-2">
5173
<ExclamationCircleIcon className="h-10 w-10" />

‎app/ui/tags/PostTable.tsx‎

Lines changed: 54 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,26 @@
11
'use client'
22

3+
import { AdsInTable } from '@/app/ads/AdsInTable'
4+
import { Ad, ad_per_content } from '@/app/lib/definitions'
35
import FormattedDate from '@/app/ui/FormattedDate'
46
import Table, { TableBody, TableHead } from '@/app/ui/Table'
5-
import { allPosts } from 'contentlayer/generated'
7+
import { Post, allPosts } from 'contentlayer/generated'
68
import Link from 'next/link'
79
import { useRouter, useSearchParams } from 'next/navigation'
810

11+
type PostOrAd = Post | Ad
12+
13+
const insertAdsIntoPosts = (posts: Post[], interval: number): PostOrAd[] => {
14+
const result: PostOrAd[] = []
15+
for (let i = 0; i < posts.length; i++) {
16+
if (i > 0 && i % interval === 0) {
17+
result.push({ type: 'Ad' })
18+
}
19+
result.push(posts[i])
20+
}
21+
return result
22+
}
23+
924
export default function PostTable() {
1025
const { push } = useRouter()
1126
const heads = ['Title', 'Date', 'Categories']
@@ -19,6 +34,8 @@ export default function PostTable() {
1934
: allPosts
2035
).sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
2136

37+
const postsWithAds = insertAdsIntoPosts(posts, ad_per_content)
38+
2239
return (
2340
<Table>
2441
<TableHead>
@@ -31,29 +48,44 @@ export default function PostTable() {
3148
</tr>
3249
</TableHead>
3350
<TableBody>
34-
{posts.map((post) => (
35-
<tr
36-
key={post.slug}
37-
onClick={() => push(post.url)}
38-
className="border-b bg-white hover:cursor-pointer hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-600"
39-
>
40-
<th
41-
scope="row"
42-
className="whitespace-nowrap px-6 py-4 font-medium text-gray-900 dark:text-white"
51+
{postsWithAds.map((item, index) => {
52+
if ('type' in item && item.type === 'Ad') {
53+
return (
54+
<tr
55+
key={`ad-${index}`}
56+
className="max-h-14 border-b bg-white dark:border-gray-700 dark:bg-gray-800"
57+
>
58+
<td colSpan={heads.length}>
59+
<AdsInTable />
60+
</td>
61+
</tr>
62+
)
63+
}
64+
const post = item as Post
65+
return (
66+
<tr
67+
key={post.slug}
68+
onClick={() => push(post.url)}
69+
className="border-b bg-white hover:cursor-pointer hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-600"
4370
>
44-
<Link
45-
href={post.url}
46-
className="hover:text-blue-600 dark:hover:text-blue-400"
71+
<th
72+
scope="row"
73+
className="whitespace-nowrap px-6 py-4 font-medium text-gray-900 dark:text-white"
4774
>
48-
{post.title}
49-
</Link>
50-
</th>
51-
<td className="truncate px-6 py-4">
52-
<FormattedDate date={post.date} />
53-
</td>
54-
<td className="truncate px-6 py-4">{post.tags.join(', ')}</td>
55-
</tr>
56-
))}
75+
<Link
76+
href={post.url}
77+
className="hover:text-blue-600 dark:hover:text-blue-400"
78+
>
79+
{post.title}
80+
</Link>
81+
</th>
82+
<td className="truncate px-6 py-4">
83+
<FormattedDate date={post.date} />
84+
</td>
85+
<td className="truncate px-6 py-4">{post.tags.join(', ')}</td>
86+
</tr>
87+
)
88+
})}
5789
{posts.length === 0 && (
5890
<tr>
5991
<td

0 commit comments

Comments
 (0)