1. 프로젝트 개요

• FITMATCH(핏매치)
  • 핵심 가치: 사용자 위치 기반 운동 시설 추천 및 통합 예약/결제 시스템 제공
  • 주요 타겟: 효율적인 운동 시설 예약을 원하는 고객, 클래스 및 매출 관리가 필요한 판매자(센터 운영자), 플랫폼 전체를 관제하는 관리자

2. 담당한 작업

• 프론트 초기세팅
• 헤더 ,심플헤더 디자인
• 알림 디자인
• 판매자 UI/UX

3. 기술적 성과

• front-end: Next.js/React/ tsx
  • 캘린더 연동 파이프라인: 승인된 클래스 데이터를 parseSchedule 및 generateWeekScheduleEvents 함수를 거쳐 주간 일정 이벤트로 변환, 판매자가 실시간으로 수업 현황을 파악할 수 있는 ScheduleCalendar를 구축했습니다.
  • ModalProvider : Context API를 활용해 중첩 모달(Nested Modal) 대응이 가능한 스택 구조의 프로바이더를 설계했습니다.

4. 문제점 및 해결 과정

• 증상: 대시보드 진입 시 일정 캘린더가 간헐적으로 비어 보이거나, 데이터 형식 오류로 인해 전체 UI가 화이트아웃되는 현상 발생.
• 원인:
  1. 데이터 폴리모피즘: API의 schedule 필드가 문자열, 객체, null 등 일관되지 않은 포맷으로 반환되어 런타임 에러 유발.
  2. 하이드레이션 타이밍: 서버와 클라이언트 간의 스케줄 계산 시점 차이로 인해 초기 렌더링 시 빈 배열이 주입됨.
• 해결:
  1. 방어적 프로그래밍: ClassItem & { schedule?: string | Record<string, string> | null } 타입 캐스팅 및 parseSchedule 내부에 예외 처리 로직을 추가하여 데이터 형식이 깨져도 안정성을 유지하도록 개선했습니다.
  2. Lifecycle Guard 도입: mounted 상태와 isLoading 플래그를 결합한 조건부 렌더링을 적용, 데이터 계산이 완료된 시점에만 UI를 노출하도록 제어했습니다.

5. 협업 및 피드백

• 느낀 점

  • 초반에 와이어프레임을 보면서 “이 기능이 정확히 뭐고 어디까지 하는지”를 더 오래 이야기했어야 됐다고 느꼈다.
  • 공통컴포넌트로 뭘 만들건지 대화가 부족하다고 느꼈다

• 배운 점

  • 처음에 시간을 조금 써서 방향을 맞추면, 나중에 수정하는 시간이 확 줄어든다.
  • 대화가 없어도 굴러가긴 하지만 대화를 해야 더 좋은 방향으로 간다는 걸 느꼈다

• 피드백

  • 시작 할 때 피그마,요구사항을 팀원들과 다 같이 분석하는 기간을 깊게 가져야 본인의 페이지에 대한 이해도가 높아질거 같다
  • 시작할 때 원하는 쪽의 대화가 없다면 주도해서 말해도 좋을거 같다