1. 프로젝트 개요

• 서비스 설명: 고객과 이사 기사를 연결하는 중개 플랫폼
• 핵심 기능:
  • 고객이 이사 일정/위치를 등록
  • 기사들이 견적(가격) 제안
  • 고객이 원하는 제안 선택
  • 서비스 종료 후 리뷰 등록

2. 담당한 작업

🖥️ Frontend (Next.js, TypeScript, React, MUI)

• Middleware
  • 사용자 권한에 따른 접근 제어
  • 토큰 유효성 검사 및 자동 로그아웃
  • locale(ko, en, zh) 기반 자동 URL prefix 적용
• Axios 인터셉터
  • 응답에서 토큰 만료 감지 시 자동 갱신
  • 실패 요청 큐 저장 → 토큰 갱신 후 재요청 처리
• i18next 다국어 처리
  • i18next-parser로 문자열 추출 → JSON 파일 관리
  • key 기반 언어별 번역 매핑
• MUI Theme 설정
  • 전역 텍스트 스타일 지정
  • 컬러 모드(다크/라이트) 설정
  • Button 기본 스타일 수정
• UI/기능 개발
  • 로그인 / 회원가입 페이지
  • 유저 찜 목록, 리뷰 목록
  • 전역 레이아웃 구성
  • 일부 공통 컴포넌트 작업
• SSE (Server-Sent Events)
  • 로그인 시에만 연결, 로그아웃 시 연결 해제
  • 토큰 만료 시 → 갱신 후 재연결
  • 재연결 시 delay 증가 방식(backoff)으로 서버 부하 방지
• Storybook
  • 초기 세팅 및 UI 컴포넌트 테스트 환경 구축

🧩 Backend (NestJS)

• 알림 API 개발
  • SSE 연결 및 알림 전송 처리
  • Event Listener + Dispatcher 패턴으로 확장성 있게 설계
  • 알림 자동 생성 (CRON 기반)
  • 읽음 처리 API: 단일(id) / 복수(ids) 모두 처리 가능
• Back-end
  • 알림부분 api
    • SSE연결 로직
    • create후 data를 SSE로 해당하는 user에게 전송
    • 일부 api 호출에는 Event Listener를 사용 하여 알림 생성로직을 실행하여 알림을 보냄
    • 일부 알림은 cron 지정한 시간에 data를 검색하여 알림 생성
    • 읽음 처리 API는 Prams를 id와 ids를 나누어 단일과 복수를 처리 할 수 있도록 설정

3. 문제점 및 해결 과정

• 토큰 만료 시 여러 API 실패
  • Axios 요청 큐 + 토큰 갱신 후 재요청 처리
• SSE 연결 실패 및 반복 시 서버 부하
  • Exponential Backoff로 재연결 처리