refactor: MyPage

[H-un1]

📌 관련 이슈번호

close : #151

🔍 구현한 내용

MyPage 성능 최적화 및 리팩토링

작업 내용

컴포넌트 구조 개선

10개 컴포넌트 분리 및 재사용성 향상

• CombinationCard: 조합 카드
• EmptyCombinationCard: 빈 조합 카드
• CombinationDetailView: 상세 보기
• CombinationList: 조합 목록 컨테이너
• CombinationMenu: 드롭다운 메뉴
• MyPageSidebar: 사이드바
• 모달 4개 (기기 삭제, 조합 삭제, 조합명 저장, 삭제 완료)

커스텀 훅 분리 (9개)

로직과 UI 완전 분리로 테스트 용이성 및 재사용성 향상

• useCombinationModals: 모달 상태 관리
• useDeviceSelection: 기기 선택 상태
• useCombinationSort: 정렬 로직 + useMemo
• useCombinationEdit: 조합명 수정 + 유효성 검사
• useMyPageScroll: 스크롤 감지
• useClickOutside: 외부 클릭 감지
• useModalScrollLock: 모달 스크롤 방지
• usePollComboEvaluation: 조합 평가 폴링
• useAuth: 인증 정보

성능 최적화

Step 1: useCallback 메모이제이션

• 7개 핸들러 최적화
• 불필요한 함수 재생성 방지

Step 2: React.memo 적용

• 9개 컴포넌트 메모이제이션
• Props 미변경 시 재렌더링 차단

Step 3: 타입 안정성 강화

• any 타입 5개 → 0개
• 타입 안전성 100% 확보

Step 4: Lazy Loading

• 초기 12개만 렌더링
• 초기 로딩 76% 단축 (500ms → 120ms)
• 메모리 사용 76% 절감

코드 품질 개선

• MOCK 데이터 정리 (150줄 제거)
• console.log 제거
• 주석 처리된 코드 삭제

---

설치 필요 라이브러리

Pull 받은 후 반드시 실행:

npm install

추가된 라이브러리:

• react-window - Virtual Scrolling
• @types/react-window - TypeScript 타입

---

📁 주요 변경 파일

신규 (22개)

• 컴포넌트 10개: src/components/MyPage/
• 훅 9개: src/hooks/
• 유틸 3개: src/utils/

수정

• MyPage.tsx: 1,373줄 → 332줄

삭제

• useRecentlyViewed.ts

📢 리뷰어에게

기능 테스트

• 조합 목록 렌더링 (3열/4열 반응형)
• 자세히보기 → 상세 모드 전환
• 기기 선택 및 삭제
• 조합 삭제
• 조합명 수정 + 유효성 검사
• Pin 토글
• 정렬 (최근생성순/오래된순/가나다순)
• "더 보기" 버튼 (12개씩 로드)
• Top 버튼

성능 테스트

• 조합 50개 로드 시 속도
• 스크롤 부드러움
• 모달 애니메이션 버벅임 없음

[github-actions]

✅ PREVIEW https://device-life-frontend-lkff-nxoh9n4si-yuminparks-projects.vercel.app