**야미 Yammi(학식 예약 플랫폼)**
대학 식당과 연동된 모바일 주문 및 결제 앱, WebView 기반 리뉴얼 프로젝트 참여
기술스택: Axios, Jotai, Next.js, React, React Hook Form, SWR
결제 및 보안 비밀번호 키패드 입력 페이지 개발
• 결제 및 보안 설정을 위한 커스텀 키패드 컴포넌트를 제작하여 입력 오류율 감소 및 인증 평균 시간 단축
• 사용자 흐름에 따라 비밀번호 등록/검증/재설정 플로우를 분기 처리하여 직관적인 UX 제공
결제 페이지 개발
• PG/간편결제(카드, 네이버페이, PAYCO 등), 사내 결제 수단(야미페이, 후불결제), 할인 수단(쿠폰, 선불카드, 포인트)을 모듈화된 컴포넌트 구조로 통합 설계
• React Hook Form + Jotai 기반 상태 분리 구조로 폼 상태와 전역 결제 상태를 안정적으로 관리
• 다양한 결제 조합에 따른 실시간 금액 계산 및 UI 반영으로 사용자 혼란을 최소화하고 결제 성공률을 향상
주문 현황 페이지 개발
• 주문 내역을 Infinite Scroll 방식으로 비동기 조회하여 긴 목록에서도 자연스러운 탐색 UX 제공
• sessionStorage 기반 스크롤 위치 복원 기능을 구현하여 페이지 간 이동 시 사용자 흐름 유지
주문 상세 페이지 개발
• Axios + SWR을 활용해 5초 간격 자동 갱신 로직 구현으로 실시간 주문 상태 조회 UX 제공
• QR 코드 출력 및 조건부 블러 처리로 수령 시점에 맞는 UI 제어
• 수령 시점에 따라 QR 코드 자동 출력 및 블러 처리로 사용자 혼선 방지
장바구니 페이지 개발
• 상품 수량 변경, 삭제, 옵션 확인 등 복합 상호작용을 고려한 UX 중심 장바구니 UI 구성
• SWR 기반 장바구니 목록 비동기 조회 및 mutate 처리로 실시간 UI 반영
• 사용자 행위에 즉각 반응하는 인터페이스로 주문 전환율 및 만족도 향상에 기여
메뉴/식권/상품 목록 페이지 개발
• 매장별 코너, 카테고리, 상품(메뉴/식권/일반상품) 탐색을 위한 리스트 UI 구성
• Jotai + localStorage를 활용한 사용자 선택 상태 유지
• Infinite Scroll 도입으로 페이지 전환 없이 자연스러운 상품 탐색 UX 제공
• 상품 할인, 사용 조건(학생 전용/교직원 전용), 공지 배너 등 조건부 UI 처리 및 Skeleton UI 적용으로 초기 로딩 경험 개선
리뷰 페이지 개발
• 이미지가 많은 환경에서도 성능 저하 없이 렌더링 가능한 무한 스크롤 + lazy loading 구조 구현
야미페이 페이지 개발
• 오픈뱅킹 API 연동을 통한 실계좌 기반 충전 계좌 등록 기능 개발
• 연결된 계좌 중 하나를 선택해 직접 잔액을 충전하는 기능 구현
• 숫자 입력, 전체 삭제, 한 글자 삭제 기능이 포함된 금액 입력 컴포넌트 제작으로 입력 편의성 및 UX 향상
홈 페이지 개발
• 광고 배너 슬라이더 컴포넌트 구현 및 Next.js Image 컴포넌트의 priority 속성 활용으로 LCP 약 10% 개선
다국어 지원
• 커스텀 useTranslation 훅을 통해 다국어 지원 구조 구축
• 사용자 언어 설정에 따른 UI 텍스트 자동 렌더링 및 번역 키 관리 최적화
और देखें
