프로젝트명Dinn.dev
기간2025.06 ~ 2025.09
참여 인원1명(본인)
소개개인 포트폴리오 사이트입니다. 소개, 이력서, 프로젝트를 확인할 수 있습니다.
기술 스택
- •Next.js, Typescript, Zustand
- •Tailwind CSS, Material UI, Anime.js, Tippy.js, BProgress, Zod
- •Vercel, Supabase
기능 구현
- •랜딩 섹션 소개
- •About me 페이지
- •Projects 페이지
- •리뷰 작성
- •다크 모드 지원
주요 기술
- •Supabase를 활용한 리뷰 작성 기능
- •Bprogress를 이용한 로딩바 구현
- •Anime.js를 사용한 다크모드 Transition 효과
문제점 및 해결 방법
반응협 웹 설계
랜딩 페이지의 컨텐츠는 브라우저의 사이즈에 맞춰 보여지도록 구현하였습니다. 이 과정에서 풀 스크린 컨텐츠의 비율을 유지하며 높이와 너비를 조절하는데 어려움이 있었습니다. 이를 해결하기 위해 CSS의 clamp() 함수를 사용하여 높이와 너비의 최소값, 기본값, 최대값을 설정하였습니다. 이를 통해 다양한 화면 크기에서 컨텐츠가 비율을 유지하며 보여지도록 하였습니다.
UI 리사이즈
Web API를 사용하여 컴포넌트의 사이즈를 지정하는 경우, 리사이즈 이벤트를 탐지하고 있지 않으면 브라우저의 사이즈 변화에 따른 UI 렌더링이 정상적으로 이루어지지 않는 문제가 발생합니다. 이 문제를 해결하기 위해 ResizeObserver를 사용하여 컴포넌트의 크기 변화를 감지하고, 상태를 업데이트하여 UI가 올바르게 렌더링되도록 하였습니다.