[앱인토스] 바꿔먹자(RecommendMenu)

[ 바꿔먹자(Recommend Menu) ]

비슷한 맛 더 가벼운 한 끼를 위한 메뉴 브레이크

반경 3km 이내 대체 메뉴 식당도 지도로 표시해줌

 

스크린샷 / 데모

https://minion.toss.im/5n8ZcmFe

 

https://youtube.com/shorts/--23nDUGCM8?feature=share

 

 

기술 스택

• React 18 + TypeScript
• Vite
• Tailwind CSS 3.4
• Framer Motion
• 카카오맵 API

 

왜 만들었나

우리의 의지는 항상 맛있는 음식 앞에서 무너집니다.

열심히 운동을 해도, 그동안 참아왔던 먹고싶었던 칼로리 높은 음식에 주저앉게 되죠.

그래서 생각해봤습니다!!

비슷한 메뉴에 칼로리가 낮은 다른 대안은 없을까? 

그렇게 이 앱이 탄생하게 되었어요

 

배운 점
  - CSS 변수 기반 다크모드 테마 시스템 설계 및 전체 컴포넌트 마이그레이션
  - Sentry 에러 트래킹 연동과 localStorage 폴백 로그 구조 설계
  - React useEffect 내 setTimeout/마커 인스턴스 등 메모리 누수 방지 패턴 습득
  - 카카오맵 SDK 동적 로딩 시 Promise 콜백 큐의 에러 전파 처리
  - useMemo + Math.random의 StrictMode 이중 렌더링 문제와 useRef 대안 패턴
  - WCAG 접근성 기준(aria-modal, aria-live, user-scalable) 적용 경험

 

어려웠던 점

   - Tailwind CSS 하드코딩 컬러를 CSS 변수 기반으로 전환하는 과정에서 버튼 배경색 등이 누락되는 문제가 반복 발생. 
  - 카카오맵 SDK 무료 쿼터(지도 30만/일, 검색 10만/일) 초과 시 폴백 처리 방식에 대해 임베디드 지도 유지 vs 웹 링크 전환 사이에서 설계   
  - MapLoadingOverlay와 MapBottomSheet backdrop 투명도 이슈를 혼동하며 잘못된 컴포넌트를 수정하는 시행착오 발생

  링크
  
   - GitHub: https://github.com/miracle380301/toss-recommend-menu
   - 서비스: 토스 앱인토스 (심사 예정)

 
 다음 계획

  - 토스 앱인토스 심사 제출 -> 통과(2026.02.12)
  - Sentry DSN 이메일 알림 규칙 설정 
  - 사용자 피드백 반영 및 UI 개선
  - 광고 SDK 연동 (AdSlot 실제 광고 교체) -> 완료