이력서로

Perkfolio

여러 체험단 플랫폼에 흩어진 방문 기록과 혜택을 한곳에서 관리하는 개인 블로거용 서비스입니다.

2026.07 – 현재|1인 프로젝트 (기획·개발·배포)|↗ Live Demo↗ GitHub
Perkfolio 대시보드 화면

Tech Stack

ReactTypeScriptViteTailwind CSSReact RouterRechartsSupabaseVitest

주요 기능 및 구현

체험단 방문 기록

배경

포포몬·캐시노트·레뷰 등 여러 체험단 플랫폼을 이용하면서 방문 기록과 리뷰 마감일을 스프레드시트로 따로 관리하다 보니 일정을 놓치는 경우가 많았습니다. 흩어진 기록을 구조화된 데이터로 관리하고 한곳에서 확인할 수 있는 서비스를 목표로 설계했습니다.

주요 기능

  • ·방문일·마감일·플랫폼·체험가 등 체험단 방문 기록을 관리하는 입력 폼
  • ·정렬·필터가 가능한 표 뷰와 마감일을 상태 색상으로 표시하는 월간 캘린더 뷰

기술적 구현

  • ·기록이 쌓일수록 표 뷰의 초기 렌더 비용이 커지지 않도록 IntersectionObserver 기반 무한 스크롤 훅을 직접 구현해, 화면에 보이는 만큼만 순차적으로 불러오도록 처리
  • ·상태·마감일 색상 조건문을 표·캘린더·입력 폼마다 따로 구현하면 화면별로 기준이 어긋나기 쉬워서, 하나의 모듈로 모아 모든 화면이 같은 기준을 참조하도록 정리

체험단 URL 자동 채우기

배경

방문 기록을 남길 때마다 업체명·마감일·예약정보를 직접 입력하는 게 번거로워, 자주 이용하는 체험단 플랫폼의 URL만 붙여넣으면 필요한 정보를 자동으로 채워주는 기능을 추가했습니다.

주요 기능

  • ·체험단 URL(디너의여왕·강남맛집)을 붙여넣으면 업체명·마감일·예약정보를 자동으로 채워주는 가져오기 기능

기술적 구현

  • ·사이트마다 HTML 구조가 달라 파서를 분리 구현
  • ·첫 요청이 실패하면 1회 재시도한 뒤 실패로 처리, 가져오는 동안에는 화면 전체를 막고 취소할 수 있도록 처리

통계 대시보드

배경

체험 기록을 구조화해 관리하기 시작하니 단순히 기록하는 것을 넘어 실제로 얼마나 절감하고 있는지 한눈에 확인할 수 있는 통계가 필요했습니다.

주요 기능

  • ·기간별 요약 통계(총 체험단 수, 순절감액, 평균 절감율)
  • ·카테고리별 분포, 평균 절감액, 월별 순절감액 추이 차트

설계 및 개선

  • ·실제 데이터를 검증하는 과정에서 절감액 계산에 포함되지 않아야 하는 품목형 체험이 함께 집계되는 문제를 발견해, 금액 통계와 카테고리 통계의 계산 기준을 분리하도록 개선
  • ·기록이 길어질수록 월별 추이 차트의 x축 라벨이 겹치는 문제가 있어, 표시 기간을 연초~이번 달로 고정해 라벨 개수를 예측 가능하게 유지

인증 & 마이페이지

배경

체험단 서비스 이용자는 네이버 계정을 사용하는 경우가 많아, 별도의 회원가입 없이 기존 계정으로 로그인할 수 있도록 진입 장벽을 낮추고자 했습니다.

주요 기능

  • ·이메일/비밀번호 회원가입·로그인, 비밀번호 찾기 및 재설정
  • ·네이버 OAuth 기반 소셜 로그인
  • ·블로그 링크 연동/해제, 문의 등록·답변 확인, 계정 삭제를 관리하는 마이페이지

기술적 구현

  • ·Supabase에서 기본 지원하지 않는 네이버 OAuth를 위해 Edge Function 기반 브릿지 구조를 설계·구현
  • ·CORS preflight 처리와 이메일 대소문자 정규화를 적용해 브라우저 환경이나 이메일 표기 차이로 로그인에 실패하지 않도록 개선