마이페이지(이용내역, 문의하기, 장소수정) Title,description 컴포넌트화

[hyeone22]

마이페이지(이용내역, 문의하기, 장소수정) Title,description 컴포넌트화

문제 상황

1. 페이지 타이틀과 설명이 각 페이지마다 중복되어 있음
2. 스타일링이 일관되지 않고 산재되어 있음
3. 모달 내부의 컴포넌트들이 너무 많은 책임을 가지고 있음
4. 스크롤 관련 로직이 여러 곳에서 중복됨

원인 분석

1. 공통 컴포넌트화가 되어있지 않아 코드 중복 발생
2. 디자인 시스템이 체계적으로 정립되지 않음
3. 컴포넌트의 책임과 역할이 명확하게 분리되지 않음
4. 유틸리티 함수나 커스텀 훅으로 분리되지 않은 로직들이 존재

해결 방법

1. PageTitle 컴포넌트 분리

   • 제목과 설명을 포함한 공통 컴포넌트 생성
   • 일관된 스타일링 적용
   • 페이지별 설명 텍스트 중앙 관리

2. 모달 컴포넌트 책임 분리

   • ModalPortal: 모달 렌더링 담당
   • ProfileModal: 모달 UI와 닫기 로직 담당
   • 각 컨텐츠 컴포넌트: 실제 내용 표시 담당

컴포넌트 분리 근거

1. PageTitle

   • 높은 재사용성
   • 일관된 UI/UX 제공
   • 유지보수 용이성

2. Modal 관련 컴포넌트

   • 단일 책임 원칙 준수
   • 컴포넌트 간 결합도 감소
   • 유지보수성 향상

개선 효과

1. 코드 중복 제거
2. 일관된 사용자 경험 제공
3. 유지보수성 향상
4. 컴포넌트 재사용성 증가
5. 코드 가독성 향상