아이와 부모가 함께 만드는 똑똑한 금융 습관, 용돈의 숲 🌳 - FRONTEND

📝 소개

"용돈의 숲"은 아이와 부모가 함께 만드는 스마트한 금융 습관 형성 앱입니다.
퀘스트 기반 용돈 지급, 자녀 맞춤 소비 제한, AI 소비 리포트를 통해 디지털 금융 소외 계층인 어린이에게 올바른 소비 습관을 길러줍니다.

• 대상 사용자: 초등학생 자녀를 둔 학부모
• 핵심 목적: 어린이의 자율성과 건전한 소비 습관 형성 + 부모의 안심 관리
• 기대효과 :
  • 자녀의 건전한 금융 습관 형성
  • 부모와 자녀 간의 금융 커뮤니케이션 활성화
  • 소비 통제 기능을 통한 안전한 결제 환경
  • 게임 요소를 활용한 자발적 참여 유도
  • 금융 소외 계층 아동에게 금융 리터러시 향상 기회 제공

💝 팀원 소개

항목	김수민	김해민	손아현	주세원
이미지
역할	Backend	Backend, AI	Frontend, 디자인	Backend

💻 기술 스택

Back-End	Front-End	배포	협업 툴 / AI
		-

📱 핵심 기능 소개

🎥 시연 영상

아래 영상을 통해 "용돈의 숲"의 주요 기능과 사용자 흐름을 확인해보세요!

🔗 유튜브에서 보기

🤔 기술적 이슈와 해결 과정 (프론트엔드)

1. Socket 연결 문제
   • 페이지가 새로고침 될 때마다 소켓이 재연결되어 기존 연결이 끊어지는 이슈가 발생함.
   • 해결: SocketProvider를 통해 Context 기반 전역 소켓 인스턴스 관리 구조로 리팩토링.
   • 주요 조치:
     • 전역 변수로 소켓 인스턴스를 유지 (globalSocket)
     • 최대 재연결 시도 횟수 제한
     • 연결 상태 이벤트 처리 (connect, disconnect, connect_error)

const connectSocket = () => {
  globalSocket = io(process.env.NEXT_PUBLIC_SOCKET_BASE_URL || "", {
    query: { token },
    transports: ["websocket"],
    reconnection: true,
    reconnectionAttempts: MAX_RECONNECT_ATTEMPTS,
    reconnectionDelay: 1000,
  });

  globalSocket.on("connect", () => {
    console.log("✅ Socket connected:", globalSocket?.id);
  });

  globalSocket.on("connect_error", (err: Error) => {
    console.error("⚠️ Socket connection error:", err);
  });
};

2. 모달의 DOM 위치 문제
   • AlertModal 구현 시, 일반적인 컴포넌트 렌더링 방식으로는 z-index와 DOM 트리 구조 때문에 다른 레이아웃 요소 위에 자연스럽게 띄우기 어려웠음.
   • 해결: createPortal을 이용해 모달을 document.body에 직접 렌더링하도록 구현. 추가로 ESC 키로 닫기, 바깥 영역 클릭 시 닫기 등의 UX 개선도 반영됨.

return createPortal(
  <div onClick={handleBackdropClick}>
    <div>
      <TextButton onClick={() => { onConfirm(); onClose(); }}>
        {confirmText}
      </TextButton>
    </div>
  </div>,
  document.body
);