Skills
기술 스택
React
Next.js
TypeScript
Tailwind CSS
Emotion
Vanilla-extract
Zustand
@Tanstack/react-query
React-hook-form
Zod
Framer Motion
Radix-ui
Storybook
Vitest
Vite
Turborepo
React
Next.js
TypeScript
Tailwind CSS
Emotion
Vanilla-extract
Zustand
@Tanstack/react-query
React-hook-form
Zod
Framer Motion
Radix-ui
Storybook
Vitest
Vite
Turborepo
React
Next.js
TypeScript
Tailwind CSS
Emotion
Vanilla-extract
Zustand
@Tanstack/react-query
React-hook-form
Zod
Framer Motion
Radix-ui
Storybook
Vitest
Vite
Turborepo
React
Next.js
TypeScript
Tailwind CSS
Emotion
Vanilla-extract
Zustand
@Tanstack/react-query
React-hook-form
Zod
Framer Motion
Radix-ui
Storybook
Vitest
Vite
Turborepo
Node.js
Express.js
Nest.js
PostgreSQL
Prisma
Docker
Nginx
AWS
GitHub Actions
Node.js
Express.js
Nest.js
PostgreSQL
Prisma
Docker
Nginx
AWS
GitHub Actions
Node.js
Express.js
Nest.js
PostgreSQL
Prisma
Docker
Nginx
AWS
GitHub Actions
Node.js
Express.js
Nest.js
PostgreSQL
Prisma
Docker
Nginx
AWS
GitHub Actions
0
회사 프로젝트
0
사이드 프로젝트
0
년 경력
Career
경력
스마일드래곤
웹 프론트엔드 개발자마케팅24
2023.12 — 2024.06온라인 마케팅 상품을 판매하고 제공하는 웹 서비스
Next.jsTypeScriptTurborepoEmotionReact QueryZustandReact Hook Form
- ›Server Driven UI 도입 — 상품 추가·수정 시간 60분 → 30분 단축, 1년 6개월간 신규 상품 150여개 추가
- ›SSR + React Query Hydration 적용으로 FCP, LCP 50% 개선
- ›FSD 아키텍처 및 Custom Hook 패턴으로 상품 도메인 결함 발생률 40% 감소
- ›MAU 10,000명 · WAU 2,600명 · 참여율 80% 달성
- ›메이저 릴리즈 5회 — 상품·주문 주요 도메인 담당
디자인 시스템 SDS
2024.03 — 2024.06사내 프로젝트에 디자인 시스템을 빠르게 적용하기 위한 확장 라이브러리
TypeScriptEmotionRadix UITurborepoVite
- ›디자인 시스템 구성 기간 1달 → 1주로 단축
- ›개별 컴포넌트 개발 기간 1일 → 10분으로 단축
- ›테마 기반 확장 시스템으로 디자인 수정 3시간 → 30분으로 단축
- ›MUI 참고한 createTheme · themeComponent 구조로 서비스별 커스터마이징 지원
- ›HTML 네이티브 기능 활용 및 react-hook-form 연계를 위한 비제어 컴포넌트 설계
뷰업
2024.07 — 재직중뷰업 서비스 및 어드민 개발
Next.jsTypeScriptTurborepoReact QueryZustandSDS
- ›서비스·어드민 프론트엔드 신규 개발
- ›사내 디자인 시스템 SDS 적용으로 초기 UI 구성 기간 단축
- ›어드민 데이터 테이블·폼 등 핵심 도메인 컴포넌트 설계 및 구현
주식회사 라온스토리
프론트엔드 개발자한국서부발전 계좌등록시스템
2022.08 — 2023.03온라인으로 계좌거래이체약정서를 발급 및 관리하는 웹 어플리케이션
ReactTypeScriptStyled ComponentsReact QueryRecoilReact Hook Form
- ›계좌이체거래약정서 전자서명 기능 구현
- ›개인정보 마스킹 처리 기능 구현
- ›Recoil + React Query 도입으로 서버·클라이언트 상태 관리 구조 개선
- ›프로젝트 초기 디자인 시스템 구성
한국서부발전 평가방시스템
2022.07 — 2023.06한국서부발전 내부 평가 업무를 온라인으로 처리하는 웹 시스템
ReactTypeScriptStyled ComponentsRecoil
- ›평가 항목 등록·조회·수정 등 핵심 CRUD 기능 개발
- ›재사용 가능한 폼 컴포넌트 구조 설계로 유지보수성 개선
- ›기존 기능 버그 수정 및 신규 요구사항 반영 유지보수
Work
사이드 프로젝트
Sample Project
A sample project to demonstrate the portfolio structure.
Next.jsTypeScriptTailwind CSS