지도 좌표 기반 날씨 대시보드 개발

• - HTML5 Geolocation으로 획득한 위경도를 기상청 격자 좌표(nx, ny)로 변환하여 단기예보 API 조회
• - 관심 지역(서울 강남구, 부산 해운대구, 제주 제주시) 카드 선택 시 Recoil 전역 상태를 갱신하여 지도·차트 데이터 실시간 연동

Chart.js 기반 데이터 시각화

• - 시간대별 기온·강수확률 라인 차트와 풍속 바 차트 구현
• - Chart.js 커스텀 플러그인을 작성하여 바 차트 상단에 수치를 직접 표시

Atomic Design과 Storybook을 활용한 컴포넌트 관리

Playwright를 활용한 E2E 테스트 도입

Gemini와 MCP(Model Context Protocol)를 프로젝트에 연동

• - 이를 기반으로 Vibe 코딩을 진행하여 컴포넌트 문제점 분석 및 개선 보고서(improvements.txt)를 도출

Next.js App Router

• - Next.js App Router의 폴더구조와 동작 방식에 대한 이해
• - Modal을 Inercepting Router를 활용

Modal을 Inercepting Router를 활용

Atomic Design을 도입하여 개발 편의성을 높임

• - 대부분의 Component 코드 길이를 70줄 이내로 작성

공통 레이아웃 구현

• - 그룹별 레이아웃을 관리하여 개발 편의성을 높임

EC2, NGINX를 사용하여 서버 배포

메인 페이지 및 마이 페이지 개발

• - 위치, 날씨, 시간 데이터를 활용하여 사용자에게 맞춤형 음반 정보 제공

Google Map 활용 페이지 개발

• - 디바운스 패턴을 활용하여 클러스터 렌더링 최적화
• - 50ms마다 안드로이드와 통신하여 사용자의 위치 변화 감지

Bottom Sheet 레이아웃 구현

Android와 Webview 간의 통신

• - Window 전역 함수를 활용한 JS 통신 구현

Native 기능 권한 요청 및 센서 활용

• - GPS 및 카메라 권한 요청 기능 구현
• - 가속도 센서를 이용한 흔들기 이벤트 적용(플플이 AI)

YOLO를 활용한 식단 인식

네이버 OCR API를 활용한 영수증 인식을 통한 사용자 냉장고 등록

로그인/회원가입 페이지

• - 소셜(Google) 로그인 기능 구현
• - 사용자 정보 입력을 통한 필요 영양소 측정

식단 페이지

• - Calendar, Graph 커스텀을 통한 사용자 UX 향상
• - 영양소 데이터 및 식단시간 Recoil 상태 관리를 통한 API 호출 최소화
• - 식단 등록을 통한 채워지는 영양소양을 미리 볼 수 있도록 구현하여 UX향상

로그인/회원가입 페이지

• - 회원가입에 필요한 이메일 인증로직 처리
• - Profile와 같은 Image Form Data 처리
• - 아이디, 비밀번호 찾기 구현

병원 마이페이지

• - 병원, 의사, 리뷰 데이터 일괄처리
• - 리뷰 평점 / 추천 / 의사 별도로 볼 수 있게 로직 구현

회원 마이페이지

• - 회원 AI 자가진단 데이터 및 일반 데이터 사용자가 보기쉽게 UI 구현
• - 회원 정보 수정 기능 구현