마이페이지 프로필 카드 리펙토링 및 기능 개선

[hyeone22]

마이페이지 프로필 카드 리팩토링 및 기능 개선

디렉토리 구조 설명

1. 컴포넌트 계층 구조

   • MyPage 컴포넌트를 기능별로 세분화
     • container - 상태와 로직을 관리하는 ProfileContainer
     • edit - 프로필 수정 관련 UI
     • form - 폼 관리 컴포넌트
     • info - 프로필 정보 표시 관련 컴포넌트들(Card, Detail, Profile)
     • menu - 메뉴 관련 컴포넌트들

2. 커스텀 훅 분리

   • profile 폴더 아래 목적별로 분리
     • useProfileForm - 폼 상태 관리
     • useProfileImage - 이미지 처리
     • useProfileSubmit - 제출 로직

3. API 액션 분리

   • 서버 통신 로직을 별도 액션으로 분리
     • logout: 로그아웃 처리
     • put-updateProfile - 프로필 업데이트 API

문제 상황

1. 컴포넌트 구조 문제

   • 하나의 거대한 MyPageCard 컴포넌트가 모든 책임 담당
   • 상태 관리, UI 렌더링, 이벤트 핸들링이 한 곳에 집중
   • Props Drilling으로 인한 컴포넌트 간 결합도 증가
   • 컴포넌트 재사용 불가능

2. 상태 관리 문제

   • 이미지 수정/취소 시 상태 불일치 발생
   • 폼 데이터와 UI 상태가 혼재
   • 비효율적인 상태 업데이트 로직

3. 사용자 경험 문제

   • 주소 검색 모달의 스크롤 처리 미흡
   • 이미지 수정 시 사용자 피드백 부족

원인 분석

1. 구조적 원인

   • Container/Presentational 패턴 미적용으로 인한 관심사 분리 실패
   • 컴포넌트 합성(Composition) 패턴 미사용으로 Props Drilling 발생
   • 재사용 가능한 로직이 컴포넌트에 강하게 결합

2. 기술적 원인

   • 상태 관리 전략 부재
   • 이미지 처리 로직과 폼 상태 관리가 결합
   • 타입 안전성 미흡

해결 방법

1. 컴포넌트 구조 개선

   • Container/Presentational 패턴 적용
     • ProfileContainer: 상태 관리 및 비즈니스 로직 담당
     • UserProfile, ProfileCard 등 - UI 표현 담당
   • Composition 패턴으로 Props Drilling 해결
     • 하위 컴포넌트들을 독립적으로 구성
     • children prop을 활용한 유연한 컴포넌트 조합
   • 각 컴포넌트의 책임 명확화

2. 커스텀 훅 추출

   • useProfileForm - 폼 상태 관리 전담
   • useProfileImage - 이미지 처리 로직 분리
   • useProfileSubmit - API 통신 로직 캡슐화

3. 상태 관리 개선

   • 폼 데이터와 UI 상태 분리
   • 이미지 상태 관리 로직 개선
   • 타입 안전성 강화

개선 효과

1. 구조적 개선

   • 컴포넌트 책임 명확화
   • 코드 재사용성 향상
   • 유지보수성 개선
   • 테스트 용이성 증가

2. 기능적 개선

   • 안정적인 상태 관리
   • 일관된 사용자 경험
   • 향상된 에러 처리
   • 모달 UX 개선

3. 개발 생산성

   • 독립적인 컴포넌트 개발 가능
   • 테스트 용이성 향상
   • 코드 가독성 개선
   • 기능 확장 용이

디자인 패턴

1. 아키텍처 패턴
   • Container/Presentational Pattern - 로직과 UI 분리
   • Composition Pattern - 컴포넌트 합성으로 유연성 확보
   • Custom Hook Pattern - 로직 재사용성 향상

향후 개선 계획

1. 성능 최적화

   • React.memo를 통한 불필요한 리렌더링 방지
   • 이미지 최적화
   • Code Splitting 적용

2. 접근성 개선

   • 키보드 네비게이션
   • ARIA 속성 추가
   • 스크린 리더 지원