<aside>
🎯
프로필
<aside>
🌐
포트폴리오
</aside>
<aside>
🏷️
화면을 구조적으로 설계하고 재사용 가능한 UI를 구현하는 과정에 큰 몰입과 즐거움을 느끼는 프론트엔드 개발자입니다.
React, Next.js, Vue3, TypeScript 기반의 컴포넌트 설계와 UI 구조화에 강점을 가지고 있습니다.
DB 이관 솔루션, 교육 플랫폼, 이커머스 등 다양한 프로젝트에서 웹 표준·접근성과 유지보수성 높은 코드를 지향해 왔습니다.
사용자와 비즈니스 모두에 가치를 전달하는 프론트엔드 개발자로 꾸준히 성장하고자 합니다.
</aside>
<aside>
🏢
경력
더라운지 × 하나카드 IN-APP 개발 I 2026.01.12 ~ 2026.03.11(2개월)
하나카드 인앱 웹뷰 - 카드 멤버십 기반 라운지 · 다이닝 이용권 서비스
- 44개 공통 UI 컴포넌트 설계 · 개발 및 Design System 구축
- Button · TextInput · Modal · BottomSheet · ListRow · Carousel 등 조합형 컴포넌트 구조 설계
- Tailwind CSS 커스텀 디자인 토큰 기반 Variant · Style · Size · State 체계 적용
- 회원가입 · 회원탈퇴 플로우 설계 및 구현
- Zod 3단계 유효성 검사(onChange · onBlur · cross-field), 이메일 중복 체크 · 약관 동의 연동
- Zustand 멀티페이지 폼 상태 관리, 2단계 탈퇴 분리(연동 해제 / 계정 삭제) 및 API 연동
- 카드 등록 · 내 카드 · 이용권 UI 개발
- 카드 등록 플로우(입력 폼 · 목록 · 검색 결과), 내 카드 리스트 · Empty State 구현
- 이용권 목록 · 상세 · 사용내역, BottomSheet 기반 이용권 받기/보기 연동
- 고객센터 · 회원정보 · 알림 UI 개발 및 API 연동
- 1:1 문의 폼(상태 관리 · 타입 검증), 문의내역 Infinite Scroll 적용
- 회원정보 조회 · CS 문의 API 연동 완료
- 공항 라운지 · 다이닝 사용처 UI 구현
- 디자인 시스템 가이드 기반 반복 리팩토링
- Loading 애니메이션, BottomSheet 연동, Modal · ListRow · Button interaction state 등 디자인 시스템 가이드 기반 지속 개선
🛠 사용 기술
Next.js 15 React 19 TypeScript
Tailwind CSS 4 Zustand React Query 5
React Hook Form Zod Framer Motion
에티버스 I 2025.09 ~ 2026.01
데이터 이관 과정의 실시간 상태를 시각화·관리하는 웹 솔루션
- Vue3 기반 프로젝트 초기 구조 설계
- 서비스 아키텍처 구성, 모듈 구조 정의, 개발 환경 세팅(Vite·TS)
- Pinia를 활용한 WebSocket 중앙 상태 관리 구축
- 실시간 데이터 스트림 처리 구조 설계 및 공통 Store 구현
- DB 마이그레이션 솔루션 메인 UI 기능 개발
- 핵심 화면 로직·데이터 연동, 사용자 인터페이스 구성
- HTTP API 및 WebSocket 연동 로직 구현
- Axios 기반 API 모듈화 및 WebSocket 이벤트 처리 구조 개발
- 백엔드 개발자와의 실시간 협업 경험
- API 명세 협업, 소켓 이벤트 구조 논의, 개발 프로세스 전체 참여
- UI 컴포넌트 구조화·모듈화 작업 수행
- 재사용 가능한 컴포넌트 설계(레이아웃, 입력 요소, 상태 뷰 등)
🛠 사용 기술
Vue 3 TypeScript Vite
Pinia Vue Router
Axios SCSS
이씨에프(ecf) I 2024.01 ~ 2025.03
유토퍼스(ebse) I 2020.12 ~ 2023.06
</aside>