공통 컴포넌트 리팩토링

[Parkchanyoung0710]

📌 문제 발생

• Modal, Input, Dropdown 등 UI 컴포넌트가 각 기능별 파일에 중복으로 정의되어 있었음
• 상태 관리 로직이 하나의 큰 store에 몰려 있어, 렌더링 최적화와 유지보수가 어려움
• 반응형 레이아웃 및 UX 일관성 부족으로 디바이스별 사용자 경험이 상이함

🔍 원인

• 컴포넌트 중복 및 재사용 미비: 유사한 UI를 매 화면마다 별도 구현 → 수정 시 일관성 유지 어려움
• Zustand 상태 구조 미정리: 모든 상태가 단일 store에 모여 있고, selector/shallow 미사용으로 불필요 렌더링 발생
• UX 분기 미흡: 드롭다운 리스트 등 사용자 수 증가 시 대응 불가, 로딩 시 시각적 단절 발생

⭐ 리팩토링 코드

// components/ui/Modal.tsx
type ModalProps = {
  isOpen: boolean;
  title?: string;
  children: React.ReactNode;
  onClose: () => void;
};
const Modal = ({ isOpen, title, children, onClose }: ModalProps) => {
  if (!isOpen) return null;
  return (
    <div className="modal-overlay">
      <div className="modal-content">
        {title && <h2>{title}</h2>}
        {children}
        <button onClick={onClose}>닫기</button>
      </div>
    </div>
  );
};

✅ 기대 효과

• UI 컴포넌트 재사용성 증가: Modal 등 공통화로 중복 제거, 변경 시 전체 반영 가능
• 상태 구조 최적화: 렌더링 범위 최소화 → 성능 개선 및 버그 가능성 감소
• UX 일관성 및 개선: 반응형 대응 및 Skeleton UI, 드롭다운 필터 등으로 사용자 편의성 향상
• 유지보수성 강화: 아키텍처 단위 분리로 신규 기능 추가 및 디버깅 효율성 향상