1. 반응형 UI 설계 능력

역량 구체적 구현
전체 페이지 반응형 메인 홈, Voting, My Wallet, Profile, Security 등 25개 페이지 반응형 구현
브레이크포인트 설계 Mobile/Tablet/Desktop 3단계 미디어 쿼리 체계화
레이아웃 전환 디바이스별 최적화된 레이아웃 분기 처리 (Grid → Flex 전환)
모달 반응형 Language, Security, Coming Soon 모달 디바이스별 대응

2. 컴포넌트 설계 능력

역량 구체적 구현
재사용 컴포넌트 공용 컴포넌트 활용 (레이아웃, 테이블, 로딩 등)
스타일 컴포넌트화 이미지 중복 스타일을 공통 컴포넌트로 추출 (리팩토링)
폴더 구조 이해 기능별 폴더 분리 (page, component, service, store, modal)
모달 시스템 Zustand + Portal 기반 모달 중앙 관리 패턴 활용

3. 네비게이션 시스템 구현

역량 구체적 구현
Header Drawer 모바일용 햄버거 메뉴 Drawer 컴포넌트 구현
Footer Navigation 푸터 네비게이션 링크 추가 및 라우팅 연결
라우트 보호 ProtectedRoute 패턴으로 미인증 사용자 접근 차단
페이지 이동 플로우 로그인/회원가입 완료 후 리다이렉트 처리

4. 빌드 환경 설정

역량 구체적 구현
SVGR Plugin 설정 Vite에 SVGR 플러그인 추가, SVG를 React 컴포넌트로 활용
경로 별칭 설정 @/ 경로 alias 설정으로 import 경로 간소화
개발 환경 최적화 Vite HMR 기반 빠른 개발 환경 구성

5. 코드 품질 관리

역량 구체적 구현
리팩토링 중복 스타일 컴포넌트화, 불필요한 파일 삭제
React 최적화 반복문 key prop 추가로 렌더링 성능 개선
코드 일관성 import 순서 정리, ESLint/Prettier 준수
버그 수정 로고, 오타, 모달 권한 이슈 등 QA 대응

6. UI/UX 구현 능력

역량 구체적 구현
Voting 시스템 UI 투표 목록, 상세, Upcoming 페이지 전체 UI 구현
지갑 시스템 UI 입출금, 거래 이력, 잔액 표시 화면 구현
인증 화면 로그인, 회원가입, 가입완료 페이지 UI 구현
스타일 라이브러리 styled-components 기반 CSS-in-JS 활용