Notion Blog

평소에 공부한 내용이나 디버깅 관련된 내용들을 노션을 통해서 정리하는 것을 선호해 Notion API 와 Next.js 를 통해 블로그를 제작하였습니다.

노션 포스팅 데이터베이스에 변경 사항이 발생하는 경우 재배포를 진행해야 하는 번거로움으로 인해 ISR 를 적용하여 배포를 진행하였습니다.

목차

• 폴더 구조
• 사용 기술
• 관련 포스팅
• 디자인 시안

폴더 구조

접기/펼치기

├── components
│   ├── Analytics.tsx
│   ├── Search
│   │   ├── hooks
│   │   │   └── useSearch.ts
│   │   ├── index.test.tsx
│   │   ├── index.tsx
│   │   └── styles.ts
│   ├── Theme
│   │   ├── index.tsx
│   │   └── styles.ts
│   ├── common
│   │   ├── Button
│   │   │   ├── index.test.tsx
│   │   │   ├── index.tsx
│   │   │   └── styles.ts
│   │   ├── Icon
│   │   │   ├── index.tsx
│   │   │   └── styles.ts
│   │   ├── Image.tsx
│   │   ├── Loading
│   │   │   ├── index.test.tsx
│   │   │   ├── index.tsx
│   │   │   └── styles.ts
│   │   ├── Profile
│   │   │   ├── index.tsx
│   │   │   └── styles.ts
│   │   ├── Seo.test.tsx
│   │   └── Seo.tsx
│   ├── layout
│   │   ├── Footer
│   │   │   ├── index.test.tsx
│   │   │   ├── index.tsx
│   │   │   └── styles.ts
│   │   ├── Header
│   │   │   ├── hooks
│   │   │   │   └── useStickyHeader.ts
│   │   │   ├── index.test.tsx
│   │   │   ├── index.tsx
│   │   │   └── styles.ts
│   │   ├── MainTitleSection
│   │   │   ├── index.test.tsx
│   │   │   ├── index.tsx
│   │   │   └── styles.ts
│   │   ├── Navigation
│   │   │   ├── index.tsx
│   │   │   ├── interface.ts
│   │   │   └── styles.ts
│   │   ├── NotFound
│   │   │   ├── index.tsx
│   │   │   └── styles.ts
│   │   ├── PageLayout
│   │   │   ├── index.tsx
│   │   │   ├── interface.ts
│   │   │   └── styles.ts
│   │   ├── PostListContent
│   │   │   ├── index.tsx
│   │   │   ├── interface.ts
│   │   │   └── styles.ts
│   │   ├── TagList
│   │   │   ├── index.test.tsx
│   │   │   └── index.tsx
│   │   └── TagPageTitleSection
│   │       ├── index.tsx
│   │       └── styles.ts
│   └── notion
│       ├── NotionPage
│       │   ├── components.tsx
│       │   ├── index.tsx
│       │   └── interface.ts
│       ├── NotionPageItem
│       │   ├── Skeleton.tsx
│       │   ├── index.test.tsx
│       │   ├── index.tsx
│       │   └── styles.ts
│       ├── NotionPageList
│       │   ├── Skeleton.tsx
│       │   ├── index.test.tsx
│       │   ├── index.tsx
│       │   └── styles.ts
│       ├── NotionPageSeries
│       │   ├── index.test.tsx
│       │   ├── index.tsx
│       │   ├── interface.ts
│       │   └── styles.ts
│       ├── NotionTagItem
│       │   ├── index.test.tsx
│       │   ├── index.tsx
│       │   ├── interface.ts
│       │   └── styles.ts
│       ├── NotionTagList
│       │   ├── index.test.tsx
│       │   └── index.tsx
│       └── NotionTagSideList
│           ├── index.test.tsx
│           ├── index.tsx
│           ├── interface.ts
│           └── styles.ts
├── config.ts
├── e2e
│   ├── common
│   │   ├── common.spec.ts
│   │   ├── post-item.spec.ts
│   │   └── side-tag-list.spec.ts
│   ├── main-page.spec.ts
│   ├── post-detail-page.spec.ts
│   ├── posts-page.spec.ts
│   ├── tag-posts-page.spec.ts
│   └── tags-page.spec.ts
├── hooks
│   ├── __test__
│   │   ├── useDebounce.test.tsx
│   │   ├── useRefCurrent.test.tsx
│   │   └── useThrottle.test.tsx
│   ├── useDebounce.ts
│   ├── useRefCurrent.ts
│   ├── useTheme.ts
│   └── useThrottle.ts
├── jest.config.ts
├── jest.setup.ts
├── lib
│   ├── gtag.ts
│   └── notion
│       ├── __test__
│       │   └── getDatabaseInfo.test.ts
│       ├── config.ts
│       ├── getDatabaseInfo.ts
│       ├── page
│       │   ├── getPageItem.ts
│       │   ├── getPageProperty.ts
│       │   ├── getPageSeries
│       │   │   ├── PageSeries.ts
│       │   │   ├── __test__
│       │   │   │   ├── PageSeries.test.ts
│       │   │   │   └── index.test.ts
│       │   │   └── index.ts
│       │   ├── getPathPage.test.ts
│       │   └── getPathPage.ts
│       ├── pages
│       │   ├── __test__
│       │   │   ├── getPageItems.test.ts
│       │   │   └── getPathPages.test.ts
│       │   ├── getPageItems.ts
│       │   └── getPathPages.ts
│       ├── search
│       │   └── getSearchResult.ts
│       ├── tags
│       │   ├── __test__
│       │   │   ├── getPathTagPages.test.ts
│       │   │   ├── getTagItems.test.ts
│       │   │   └── getTagWithPostCnt.test.ts
│       │   ├── getPathTagPages.ts
│       │   ├── getTagItems.ts
│       │   └── getTagsWithPostCnt.ts
│       └── utils
│           ├── mapImageUrl.ts
│           └── previewImages.ts
├── pages
│   ├── 404.tsx
│   ├── [pageId]
│   │   └── index.tsx
│   ├── _app.tsx
│   ├── _document.tsx
│   ├── api
│   │   ├── revalidate
│   │   │   ├── __test__
│   │   │   │   ├── revalidate.test.tsx
│   │   │   │   ├── revalidatePages.test.ts
│   │   │   │   ├── revalidatePosts.test.ts
│   │   │   │   └── revalidateTagPages.test.ts
│   │   │   ├── index.ts
│   │   │   ├── revalidatePages.ts
│   │   │   ├── revalidatePosts.ts
│   │   │   └── revalidateTagPages.ts
│   │   └── search.ts
│   ├── index.tsx
│   ├── pages
│   │   └── [pageNum].tsx
│   ├── server-sitemap.xml
│   │   └── index.tsx
│   └── tags
│       ├── [tagName]
│       │   └── pages
│       │       └── [pageNum].tsx
│       └── index.tsx
├── public
├── shared
│   ├── enums
│   │   └── SwrFallbackKeys.ts
│   ├── types
│   │   ├── NavPageOptions.ts
│   │   ├── NavPageOptionsFallback.ts
│   │   ├── PostSeries.ts
│   │   ├── PostSeriesFallback.ts
│   │   ├── TagsWithCnt.ts
│   │   └── TagsWithCntFallback.ts
│   └── variable.ts
├── sitemap.config.js
├── styles
│   ├── device.ts
│   ├── global.ts
│   ├── mixin.ts
│   ├── notion.ts
│   ├── reset.ts
│   ├── theme.ts
│   └── variable.ts
├── types
│   ├── notion.d.ts
│   └── style.d.ts
├── utils
│   ├── __test__
│   │   ├── convertPascalCase.test.ts
│   │   ├── convertUuidToPostId.test.ts
│   │   ├── formatDate.test.ts
│   │   ├── getPaginationItems.test.ts
│   │   ├── getPaginationLength.test.ts
│   │   └── parseDatabaseItems.test.ts
│   ├── convertBlankToHyphen.ts
│   ├── convertHyphenToBlank.ts
│   ├── convertPascalCase.ts
│   ├── convertUuidToPostId.ts
│   ├── formatDate.ts
│   ├── getPaginationItems.ts
│   ├── getPaginationLength.ts
│   ├── normalizeTitleKo.ts
│   └── parseDatabaseItems.ts

사용 기술

• next.js
• styled components
• notion API
• react-notion-x
• swr

관련 포스팅

• 포스트 시리즈 기능 구현 (feat. Notion API)
• Vercel 환경 Github Actions 적용
• [회고] Github Actions 를 통한 CI/CD 파이프라인 구축 (feat. Vercel)
• [회고] Playwright 를 통한 E2E 테스트
• [회고] Jest, React Testing Library 테스트
• [회고] 1년 이상 묵은 블로그 리팩토링
• SWR 를 통한 데이터 fetching
• Intersection Observer 를 활용한 Infinite Scroll Pagination 구현 (feat. Notion API)
• Next.js On-Demand Revalidation 관련 이슈 (feat. Vercel)
• Next.js - ISR
• Next.js 구글 애널리틱스 4 적용
• Next.js 다크 모드 구현 (feat. data attribute)
• Next.js 다크 모드 구현 (feat. Styled components)
• position fixed 가 동작하지 않는 이슈 (feat. backdrop-filter)

디자인 시안

Figma 에서 확인 가능합니다.