미리보기

정부 사업, 타사 협업 프로젝트, 그리고 자사 솔루션 개발 등 다양한 프로젝트에서
웹 프론트엔드 업무를 전반적으로 담당함

"수자원 공사 영상 교육 플랫폼"

• 풀스택 개발 : FastAPI + postgresql 기반으로 RestAPI 구현

• youtube url로 영상 업로드 시 자동 썸네일 적용을 위해 youtube-api를 활용하여 구현

기술 스택 : TypeScript / Next.js / Tailwindcss / Axios / React-hook-form / Zustand / Shandcn
/ Python / FastAPI / Postgresql

"해양 안전 보건 관리 시스템"

• 긴급 상황 발생 좌표를 마커로 표시하기 위해 google-maps-api를 활용하여 구현

• 긴급 알림 시스템에 필요한 실시간 통신을 위해 socket.io를 활용하여 구현

• 선박 내 승선원의 위치 및 비콘 위치를 표시하기 위해 Canvas API를 활용하여 구현

기술 스택 : TypeScript / Next.js / Tailwindcss / socket.io / google-maps-api / Axios
/ React-hook-form / Zustand / chart.js

"개인 혹은 단체의 데이터를 프로젝트화하여 거래할 수 있는 플랫폼"

• Nextjs기반 NextAuth 라이브러리를 활용하여 구글, 네이버, 카카오 소셜로그인 구현

• Tosspayments API를 활용하여 결제 시스템을 테스트 환경까지 구현

• 폼 제출 편의성을 위해 React-hook-form 라이브러리로 폼 제출 관리

• Zustand 상태관리 라이브러리를 활용하여 공통 모달 컴포넌트 구현

• 간단한 텍스트 에디터 구현을 위해 React-quill 활용

기술 스택 : TypeScript / Next.js / Tailwindcss / NextAuth.js / Tanstack-query / Axios
/ React-quill / React-hook-form / Zustand

"국립산림과학원 아카이빙 검색 시스템"

• T3Q 백엔드팀과 협업

• T3Q search API를 활용하여 검색 시스템 구현

기술 스택 : JavaScript / Next.js / Tailwindcss / MUI / Axios

"의료진의 작업 효율성을 개선하기 위한 AI 정밀 의료 서비스"

• 프로젝트 초기 기획 및 UX 시나리오 작성

• T3Q 백엔드팀과 협업

• SheetJS를 활용하여 Excel파일 다중 업로드 구현

• ag-grid 라이브러리를 활용하여 데이터 테이블 구현

기술 스택 : TypeScript / Next.js / Tailwindcss / MUI / Axios / Ag-grid / chart.js / CKEditor