Next.js와 Notion API를 활용한 동적 포트폴리오 웹사이트

📅 프로젝트 기간

2024-09-07 ~

🛠 기술 스택

🎯 프로젝트 목적

React 기반의 Next.js 프레임워크를 사용하여 현대적이고 반응형인 개인 포트폴리오 웹사이트를 구축하고, github Action을 통해 CICD Pipeline을 통해 Vercel에 배포 자동화를 실현합니다.

---

🚀 환경 구축

1. 유튜브 포트폴리오 구축 강의 참고

• 개발하는 정대리 YouTube 강의

2. 프로젝트 설정

• Notion에서 갤러리 형식으로 포트폴리오 데이터베이스 구축
• VSCode에서 새로운 Next.js 프로젝트 생성:

  npx create-next-app@latest

• Notion API 개발자 페이지에서 새로운 통합 생성 및 Next.js와 연동

3. 주요 설정 변경사항

• 라우터: page/ 대신 app/ 라우터 사용 (기능 확장성 고려)
• 언어: JavaScript 대신 TypeScript 사용 (유지보수 및 확장성 강화)

---

💡 프로젝트 기능

1. 다크 모드

• 사용자 경험 향상 및 배터리 절약을 위한 다크 모드 구현
• Header에 다크 모드 토글 버튼 추가

// header.tsx
import DarkModeToggleButton from "../ui/dark-mode-toggle-button";

export default function Header() {
  return (
    <header>
      {/* ... */}
      <div>
        <DarkModeToggleButton />
      </div>
    </header>
  );
}

2. 스티키 헤더 (Sticky Header)

• 스크롤 시 헤더가 화면 상단에 고정되어 따라오도록 구현
• 사용자 경험 향상 및 디자인 강화

// header.tsx
import { useState, useEffect } from "react";

export default function Header() {
  const [isSticky, setIsSticky] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setIsSticky(window.scrollY > 0);
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <header className={`
      ${isSticky ? 'fixed top-0 left-0 right-0 shadow-md bg-white dark:bg-gray-800' : 'absolute top-0 left-0 right-0 bg-transparent'}
      transition-all duration-300 ease-in-out z-50
    `}>
      {/* ... */}
    </header>
  );
}

3. 스무스 스크롤 내비게이션

• 헤더의 네비게이션 링크 클릭 시 해당 섹션으로 부드럽게 스크롤
• 시각적 강화 및 직관적인 탐색 경험 제공

// header.tsx
export default function Header() {
  const scrollToSection = (sectionId: string) => (e: React.MouseEvent<HTMLAnchorElement>) => {
    e.preventDefault();
    document.getElementById(sectionId)?.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <header>
      <nav>
        <a href="#aboutMe" onClick={scrollToSection('aboutMe')}>ABOUT ME</a>
        <a href="#techStack" onClick={scrollToSection('techStack')}>TECH STACK</a>
        <a href="#projects" onClick={scrollToSection('projects')}>MY PROJECTS</a>
        <a href="#contacts" onClick={scrollToSection('contacts')}>CONTACTS</a>
      </nav>
    </header>
  );
}

default.mp4

---

📚 참고 자료

• https://tailwindcss.com/docs/
• https://gsap.com/docs/v3/Plugins/ScrollTrigger/
• https://www.hostinger.com/tutorials/web-developer-portfolio#1_Charles_Bruyerre
• https://nextjs.org/docs
• https://react-icons.github.io/react-icons/icons/ai/
• https://github.com/mattboldt/typed.js

---

🏁 시작하기

개발 서버 실행:

npm run dev
# 또는
yarn dev
# 또는
pnpm dev
# 또는
bun dev

브라우저에서 http://localhost:3000을 열어 결과를 확인하세요.

app/page.tsx 파일을 수정하여 페이지 편집을 시작할 수 있습니다. 파일을 수정하면 페이지가 자동으로 업데이트됩니다.