Description

견적서 작성 및 문의를 위한 자사 웹 페이지 개발

Work

• 실시간 견적 알림 구현 : Slack Webhook API를 활용하여 클라이언트의 견적 요청을 실시간으로 팀 채널에 전달하는 시스템을 구축. 응답 시간 단축 및 고객 서비스 품질 향상에 기여. 견적 요청부터 대응까지의 프로세스를 자동화하여 업무 효율성 50% 개선
• 스팸 방지를 위한 검증 로직 구현 : Google reCAPTCHA v3를 도입하여 자동화된 봇 트래픽을 효과적으로 차단하고 견적 폼의 신뢰성을 확보. 위험 점수 기반의 검증 로직을 구현하여 스팸 요청 90% 감소 달성
• 견적서 작성 시스템 구현 : 수기로 작성하던 견적서를 웹 기반 자동 계산 시스템으로 전환. 실시간 금액 계산 로직을 구현하고, PDF 다운로드 기능을 통합하여 견적서 작성 시간을 75% 단축

Tech Stack

Next.js 15, TypeScript, Tanstack Query, React-hook-form, zod, shadcn/ui

Description

보험 청구 웹앱 서비스

Work

• 폼 관리 시스템 구축 : Formik과 Yup을 활용하여 복잡한 보험 청구 폼의 상태 관리 및 유효성 검증 로직을 체계화하여 사용자 경험 개선
• 폼 데이터 지속성 시스템 구축 : useFormPersist 커스텀 훅을 개발하여 localStorage 기반의 폼 데이터 자동 저장 기능을 구현했으며, 이를 여러 보험 청구 폼에서 재사용하여 개발 생산성 향상 및 일관된 사용자 경험 제공

Tech Stack

React, TypeScript, Tanstack Query, Formik, Yup

Description

지게차, 물류장비, 배터리, 안전 솔루션등 한국 공항에서 관리하는 렌탈을 위한 웹 서비스

Work

• 레거시 코드 리팩토링 : 중복된 UI 로직을 공통 컴포넌트로 추출하고 디자인 시스템을 구축하여 개발 생산성 30% 향상. Input, Button, Modal 등 40개 이상의 공통 컴포넌트 라이브러리 구축 및 문서화
• 토스페이먼츠 결제 시스템 구현 : 토스페이먼츠 SDK를 활용하여 카드 결제, 가상계좌 발급, 결제 취소 등 결제 프로세스 구현. 결제 상태 관리 및 에러 핸들링으로 안정적인 결제 시스템 구축

Tech Stack

Next.js 14, TypeScript, Tanstack Query, React-hook-form, zod

Description

건강 기능 식품 이커머스 플랫폼

Work

• 레거시 코드 리팩토링 : 기존 레거시 코드를 리팩토링하여 코드 가독성 향상 및 재사용성 향상
• 성능 최적화 : TanStack Query를 도입하여 불필요한 API 호출을 50% 감소하고 컴포넌트 분리로 페이지 로딩 속도 개선
• 아키택처 개선 : DDD 원칙을 적용한 폴더 구조 재설계로 개발 생산성 향상

Tech Stack

React, TanStack Query, SCSS/Sass

Description

실제 인물 이미지를 AI 인플루언서 이미지로 변환하는 B2B 서비스

Work

• 초기 페이지 로딩 속도 개선 : 초기 화면에 고해상도 이미지로 인해 로드 시간이 느려지는 문제를 해결하기 위해, next/image 컴포넌트를 사용하여 AVIF와 WebP 형식으로 이미지를 최적화하고, lazy loading과 priority 속성을 적용하여 🔗 초기 페이지 로드 시간을 약 4초에서 0.97초로 개선하였습니다.
• 시간이 오래걸리는 AI 이미지 생성 시 사용자 경험 개선 : 로딩 화면이 오래 지속되는 문제로 인한 사용자 경험 저하를 해결하기 위해 API 호출 로직을 수정하여 실시간으로 이미지를 생성하고 사용자에게 지속적으로 업데이트를 제공함으로써 🔗 사용자 경험을 개선하였습니다.
• 사용자를 위한 데이트 시각화 차트 개발 : 인플루언서의 팔로워 수 등락을 시각적으로 표현하기 위해 ApexCharts.js 라이브러리를 도입하여 🔗 데이터 시각화를 위한 차트를 개발하였습니다. 이를 통해 사용자들이 데이터를 더 쉽게 이해하고 분석할 수 있게 하였습니다.
• 링크 공유 시 필터링 조건 유지 기능 구현 : 기존 상태 관리 방식을 개선하여 🔗 쿼리 파라미터를 활용한 URL 필터링 기능을 구현하고, 재사용 가능한 useQueryParams 커스텀 훅을 개발하여 팀 간 협업과 코드 유지보수성을 향상시켰습니다.
• 크레딧 및 멤버십 결제 기능 구현 : 포트원 모듈을 사용하여 🔗 구매 정책을 위한 결제 기능 구현하였습니다. 이를 통해 안전하고 편리한 결제 시스템을 구축하였습니다.

Tech Stack

Next.js 13, TypeScript, Tailwind CSS, TanStack Query, Recoil

Description

포스팅 커머스 플랫폼

Work

• 이미지 업로드 모듈 개선 : 이미지 업로드 모듈의 편의성을 개선하였습니다. 사용자가 여러 장의 이미지를 등록한 후 수정할 때, 순서를 원하는 대로 지정할 수 있도록 이미지에 인덱스 기능을 추가하고, 체크박스 선택 여부에 따라 순서를 자유롭게 조정할 수 있게 하여 사용자 경험 개선 하였습니다.
• 인턴 멘토링 및 팀 협업 경험 : 멘토로서 인턴 두 명과 함께 프로젝트를 수행하며 효과적인 팀 협업을 경험했습니다. 모르는 부분에 대해 적극적으로 공유하고, 코드 리뷰를 통해 코드를 개선하고 향상시켰습니다.

Tech Stack

Next.js 12, TypeScript, Tailwind CSS

Description

포스팅 커머스 플랫폼

Work

• 웹 퍼블리싱 및 페이지 구현 : 프로젝트 전반의 웹 퍼블리싱을 담당하여, 디자인 시안에 맞춰 모든 페이지를 구현하였습니다.
• 업무용 API 개발 : 회원 정보 수정, 이벤트 관리, 상품 등록 등을 위한 업무용 API를 개발하여 내부 운영 효율성을 높였습니다.
• 관리자 리스트 화면 개발 및 데이터 관리 : 회원 목록, 포스팅 검수, 이벤트 관리 등의 업무에 필요한 리스트 화면을 개발하여 관리자들이 쉽게 데이터를 관리하고 모니터링할 수 있도록 하였습니다.
• 데이터 시각화 차트 도입을 통한 UI/UX 개선 및 데이터 분석 지원 : 일자별 매출, 회원 수 등락, 등급별 유저 현황 등을 기존 수치로만 보여주던 부분에서 시각화 차트 도입하여 한눈에 파악할 수 있도록 UI/UX 개선하였습니다. 이를 통해 관리자들이 데이터를 더 쉽게 이해하고, 빠르게 의사 결정을 할 수 있도록 지원하였습니다.

Tech Stack

Spring Boot, Thymeleaf, jQuery, JPA, Mybatis, Bootstrap