미리보기

소개

SaaS template인 vercel의 saas-starter의 다음과 같은 문제점을 해결하여 오픈소스로 공개했습니다.

• 한국에서 지원되지 않는 Stripe Payments → StepPay로 한국 결제 & 정기결제 지원

  • 초기에 PortOne으로 마이그레이션 시도 후, 코드베이스 복잡성을 고려해 Stripe와 구조가 유사한 StepPay로 최종 결정

  • 사용자가 코드베이스를 쉽게 이해하고 확장할 수 있도록 설계

• Oauth 없음 → Google, Naver Oauth 로그인 추가 & 기존 로그인과 Auth.js로 통합

• 다국어 지원 X → 한/영 지원 & 번역 엑셀 파일을 파싱하여 json으로 변환하는 스크립트 추가

• 다크모드 X → 다크모드 추가

주요 문제 해결 & 구현

• PortOne 결제 시스템 구현 - 블로그

  • Next.js serverless API로 빌링키 발급 및 정기결제 프로세스 구축

  • 결제 후 Webhook API를 처리하는 동안 이전 버전의 DB 반영 문제

  • 결제 요청 즉시 구독 상태 업데이트(낙관적 업데이트) 후 webhook 검증 도입으로 사용자 대기 시간 최소화

• Multi Language 번역 Excel 파일 json으로 자동 변환 도입 - Github

  • i18n 도입으로 언어 번역 시 json 변환 시간 오래 걸리는 문제

  • Excel파일을 파싱하여 자동으로 json 파일로 변환하는 스크립트 도입으로 번역 후 json 변환시간 50% 이상 단축

기술

• Frontend

  • Next.js (15), TypeScript, tailwind, shadcn/ui,

• DB

  • Drizzle, Supabase

• Payment

  • StepPay

소스

Github / Example (id: test@test.com, pw: admin123)

소개

노션 페이지를 블로그 포스트로 만들어주는 블로그 플랫폼

작성한 블로그들을 해당 서비스에 업로드 하고 있습니다.

주요 문제 해결 & 구현

• 노션 페이지 검증 속도 개선 - 블로그

  • 블로그 포스트로 변환한 노션 페이지 ID만 저장되어 하위 페이지가 저장되지 않는 문제

  • 단일 노션 페이지만 저장하고 Bottom-Up 검증 방식 도입으로 업로드 시간 91.7% 개선 (19.86s → 1.64s)

  • 페이지 접근 시 재귀적으로 상위 페이지 확인하는 알고리즘으로 DB 저장 공간 효율화

• 노션 API 호출 최적화 - 블로그

  • 블로그 포스트 미리보기 Section에서 노션 페이지 간 이동 시 불필요한 API호출 문제

  • React Query staleTime 및 cacheTime 설정으로 API 호출 50% 감소

  • 중복 API 요청 제거로 페이지 이동 시 응답시간 60% 단축 (460ms → 185ms)

• Context API 성능 개선 - 블로그

  • Context의 불필요한 구독 패턴 제거로 렌더링 성능 14.3% 개선 (47.7ms → 40.9ms)

• 사용자 경험 향상 - 블로그

  • Fetcher Component에 loading/error 상태 통합 관리 & API 호출 선언적으로 접근

  • Error Boundary로 에러 발생 컴포넌트만 격리하여 재시도 UI 제공

기술

• Frontend

  • Next.js (14), TypeScript, React-Query, Material UI, react-notion-x, next-auth

• DB

  • Mysql, EC2

소스

Github / NextBlog.me

소개

친구들과 함께 여행을 가고자 할 때 쉽고 간단하게 여행 일정을 맞출 수 있게 도와주는 서비스

인원

PM 1명/프론트 3명/백엔드 4명/디자인 2명

주요 업무

• 프론트 팀 리드

  • 주간 미팅 진행 및 개발 일정, 우선순위 설정으로 프로젝트 일정 관리

  • 회의록, 컴포넌트 사용 방법 등 소통을 위한 문서화

• 복잡한 UI 상태 관리를 zustand를 활용하여 추상화한 모달 시스템 개발 - Modal PR

• 합성 컴포넌트 패턴, 확장 규칙 설계 등을 이용하여 UI 컴포넌트(버튼, 카드, 헤더, 모달, 스켈레톤) 구현

• Kakao Map API, 모빌리티 API를 이용하여 여행 경로 시각화

• 코스, 친구, 마이페이지 개발

주요 문제 해결

• 다중 페이지 상태 관리 개선 & 응집도, 추상화 개선 - 발표자료 / 블로그1, 블로그2

  • toss useFunnel 오픈소스를 참고하여 필요한 부분만 팀에서 사용하기 위한 Custom useFunnel(useFunnel)로 도입

  • 제네릭 타입을 활용한 타입 안정성 강화 및 자동완성 지원

  • 상태 관리 (useState) 보일러 플레이트 문제를 해결하기 위해 useFunnel 내 상태관리 도입으로 DX개선 후 해당 내용 발표

기술

• Frontend

  • React, TypeScript, Zustand, styled-components, React-Query, Axios

• 배포

  • Github Actions, Vercel

소스

Github / Figma

• 오픈소스SW를 활용한 개발 결과물 NextBlog를 i-OSS 플랫폼에 공유하고, 라이선스 준수 및 코드 품질을 인정받았습니다.

• 카페 프리퀀시 NFT를 작은 카페에도 도입할 수 있는 Dapp을 개발하였습니다.

• 팀원은 총 5명으로 스마트 컨트랙트, 프론트엔드 개발을 맡아 진행했습니다.

• 인하대학교 직할, 창업지원단 소속 창업동아리 인하벤처클럽에서 부회장으로 활동했습니다.

• 1년간 7명의 운영진과 함께 약 100명 규모의 동아리를 기획하고 운영하며 팀원들과의 협업하는 과정을 배울 수 있었습니다.

• 1년동안 크라우드 펀딩, 총 80명 규모의 대학 연합 아이디어톤 Connect(얌얌톤), 스타트업 총회를 주도적으로 기획하고 운영하였습니다.