포트폴리오에 기념일 테마 자동 변경 기능 추가!
Next.js 기반 포트폴리오에 기념일(Valentine, Christmas 등)에 따라 테마를 자동 변경하는 기능 추가
CSS와 JavaScript를 활용하여 마우스 클릭 시 불꽃 효과(Spark Effect)를 구현하고, Next.js 환경에 적용
Date 객체를 사용하여 기념일별 테마를 동적으로 관리하고, CSS 변수를 통해 색상 및 커서 이미지 변경
.ico 이미지를 사용하여 커스텀 마우스 커서(Custom Cursor)를 구현하고, 호버(Hover) 효과 적용
Next.js 환경에서의 동적 테마 구현
본문에서는 Next.js 환경에서 기념일(Holiday)에 따라 동적으로 테마를 변경하는 방법을 소개한다. 핵심은 Date 객체(Date Object)를 사용하여 특정 날짜를 감지하고, 해당 날짜에 CSS 변수(CSS Variables) 값을 변경하는 것이다.
ThemeScheduler.tsx: 날짜 비교 로직(Date Comparison Logic)을 통해 현재 날짜가 기념일 범위에 속하는지 확인
CSS 변수 활용: :root 선택자(Root Selector) 내에 테마 관련 CSS 변수를 정의하고, ThemeScheduler에서 해당 변수 값을 동적으로 변경
장점: 유지보수성(Maintainability) 및 확장성(Extensibility) 향상 - 새로운 기념일 추가 시 ThemeScheduler.tsx 파일만 수정
결과적으로, Next.js의 서버 사이드 렌더링(Server-Side Rendering) 환경에서도 동적인 테마 변경이 가능하다.
CSS와 JavaScript를 활용한 불꽃 효과 구현
글에서는 CSS와 JavaScript를 사용하여 마우스 클릭 시 불꽃 효과(Spark Effect)를 구현하는 방법을 설명한다. Prahalad의 코드를 참고하여 Next.js 포트폴리오에 적용했다.
ClickBurst.tsx: useEffect 훅(useEffect Hook)을 사용하여 클릭 이벤트(Click Event)를 감지하고, 클릭 위치에 불꽃 효과 생성
CSS 애니메이션(CSS Animation): @keyframes 규칙(Keyframes Rule)을 사용하여 불꽃의 움직임과 사라지는 효과 구현
CSS 스타일(CSS Style): position, transform, animation 속성을 활용하여 불꽃의 위치, 크기, 회전, 애니메이션 제어
이러한 CSS 애니메이션은 사용자 경험(User Experience)을 향상시키고, Next.js 환경에서도 부드럽게 동작한다.
커스텀 마우스 커서(Custom Cursor) 구현
본문에서는 CSS를 사용하여 커스텀 마우스 커서를 구현하는 방법을 설명한다. 특히, .ico 이미지 파일을 사용하여 다양한 커서 이미지를 적용했다.
--custom-cursor 변수: url() 함수를 사용하여 .ico 이미지 파일 경로 지정
cursor 속성: cursor: var(--custom-cursor)를 통해 커서 모양 변경
호버(Hover) 효과: :hover 선택자를 사용하여 특정 요소에 마우스 커서가 올라갔을 때 커서 이미지 변경
결과적으로, 사용자 인터페이스(User Interface)의 시각적 요소를 개선하고, 포트폴리오의 개성을 더할 수 있다.
Next.js 환경에서의 CSS 변수 활용
글에서는 Next.js 환경에서 CSS 변수를 활용하여 동적인 스타일(Dynamic Style) 관리하는 방법을 소개한다.
:root 선택자: 전역 CSS 변수(Global CSS Variables) 정의 - 테마 색상, 커서 이미지 등
CSS 변수 사용: var() 함수를 사용하여 CSS 속성에 변수 값 적용
ThemeScheduler.tsx: CSS 변수 값을 동적으로 변경하여 테마 변경
이러한 CSS 변수 활용은 스타일 일관성(Style Consistency) 유지에 기여하고, 테마 변경을 용이하게 한다.
