미리보기

Website

GitHub

기존에 기본 프로필 이미지 사용으로 인한 유저 간 구별 어려움을 해결하기 위해, Firebase Storage를 활용한 프로필 이미지 업로드 기능을 개발해 개인화된 사용자 경험을 제공했습니다.

기존에는 사용자가 프로필 이미지를 변경할 때마다 서버에 업로드하여 미리보기를 제공하던 방식을 사용했으나, 이로 인해 비효율적으로 데이터가 저장되는 문제를 해결하기위해 로컬에서 미리보기를 제공하고, 최종적으로 제출 시에
서버에 이미지를 업로드하도록 변경하여 서버 저장공간 사용을 최적화 하였습니다.

텍스트 에디터를 활용하여 다양한 서식 지원으로 메시지 작성 환경을 풍부하게 사용자 경험을 향상했습니다.

미리보기 기능을 통해 롤링페이퍼 작성 흐름을 직관적으로 개선했습니다.

SCSS로 반응형 레이아웃을 설계해 다양한 디바이스에서 일관된 미리보기 화면을 제공했습니다.

롤링페이퍼 제출 전 사용자 확인을 위한 모달 기반 UI를 설계했습니다.

사용자가 실수를 줄이고, 안정적인 메시지 작성/제출 환경을 제공했습니다.

React Context API를 활용해 다크 모드와 테마 적용이 가능한 드롭다운 UI를 개발했습니다.

클릭 외부 감지, 애니메이션 효과를 통해 사용자 경험을 최적화하였습니다.

WebSite

GitHub

Open Graph 태그(og:title, og:description, og:image 등)를 설정했습니다.
공유 시 썸네일과 설명을 통해 공유받은 사용자가 사이트의 핵심 정보를 한눈에 파악하고, 직접 방문할 가능성을 높였습니다.

페이지네이션을 커스텀 훅으로 모듈화하여 코드 재사용성을 증가시켰습니다.

페이지네이션 UI에서 총 페이지가 2페이지 이하일 경우, 렌더링을 하지 않도록 개선하여 불필요한 인터페이스 요소를 줄였습니다. 이 최적화를 통해 필요한 경우에만 페이지네이션이 표시되며, 사용자 경험을 향상시켰습니다

무한스크롤을 커스텀 훅으로 모듈화 하여 코드 재사용성을 증가시켰습니다.
useInfiniteQuery와 Intersection Observer를 결합하여 사용자가 별도의 조작 없이도 자연스럽게 데이터를 불러올 수 있도록 개선했습니다.

cursor 기반 API 요청을 적용하여, 페이지기반 보다 더 효율적으로 데이터 로딩을 할 수있게 개선했습니다.

검색 기능을 추가하여 초대받은 대시보드를 실시간으로 필터링할 수 있도록 개발했습니다.
키워드가 일부라도 포함되면 검색되도록 구현하여 유연한 검색 경험을 제공했습니다.

데이터를 효율적으로 관리하기 위해 TanStack Query를 사용하여 서버 상태를 최적화했습니다.
- useQuery를 활용하여 대시보드, 초대 내역, 멤버 리스트 데이터를 불러오는 기능을 구현했습니다.
- useMutation을 사용하여 대시보드 수정, 멤버 삭제, 초대 취소 등의 변경 사항을 서버에 즉시 반영하도록 했습니다.
- invalidateQueries를 활용하여 데이터 변경 시 최신 데이터를 유지할 수 있도록 캐싱 전략을 최적화했습니다.