[FE_refactor] 글로벌 스타일/컴포넌트 CSS 통합 및 디자인 패턴 정리

[seahkeem]

현재 상황

프로젝트에서 스타일링 도구가 혼재됨

• @mui/material + @emotion/styled
• tailwind + @tailwindcss/vite
• 일부 컴포넌트는 styled-components 사용

문제:

1. 컴포넌트마다 CSS 작성 패턴이 다르고, 글로벌 스타일이 통합되어 있지 않음
2. 유지보수/재사용성 저하, 디자인 통일성 문제 발생
3. 스타일링 도구 중복 사용으로 번들 크기 증가 가능성

목표

• 글로벌 CSS 정의 및 공통 컴포넌트 스타일 패턴 확립
• 스타일링 도구 1개로 통합 (Tailwind 또는 Emotion/MUI 선택)
• 기존 컴포넌트 리팩토링 가이드 마련

작업 범위

• 디자인 시스템 기준 global CSS 정의
• 기존 컴포넌트 스타일링 통합/리팩토링
• 공통 컴포넌트 패턴 문서화
• 빌드/런타임 영향 검증

후속 작업

• 컴포넌트별 스타일링 점검
• 통합 후 lint/빌드 테스트
• 팀 전파용 스타일 가이드 작성