Chore: style theme 설정 및 mui icon 설치

[tkyoun0421]

개요

Material-UI 기반 UI 시스템 구축 및 Hero 섹션 컴포넌트 구현으로 프로젝트 메인 페이지의 기본 레이아웃을 완성했습니다.

변경 사항

• 새로운 기능 추가
• 버그 수정
• 리팩토링
• 문서 수정

구현 내용

• Material-UI 디자인 시스템 통합 (@mui/material, @mui/icons-material, @emotion 패키지 추가)
• Pretendard 폰트 기반 반응형 타이포그래피 시스템 구축
• 일관된 컬러 팔레트 및 테마 정의 (Primary: #2563eb, 배경: #f8fafc 등)
• Hero 섹션 컴포넌트 구현 (프로젝트 찾기/등록 CTA 버튼 포함)
• Global CSS Reset 및 기본 스타일링 설정

개발 후기 및 개선사항

이번 작업에서 배운 점

• Material-UI의 테마 시스템을 활용한 디자인 토큰 관리 방법
• Styled Components와 MUI Theme을 결합한 반응형 스타일링 구현

어려웠던 점 / 에로사항

• Material-UI Typography variant와 HTML 시맨틱 태그 간의 중첩 문제 (h2 안에 h2가 들어가는 이슈)
• rem 기반 반응형 타이포그래피 시스템 구축 시 적절한 비율 설정

다음에 개선하고 싶은 점

• 컴포넌트별 접근성(a11y) 개선 및 키보드 네비게이션 최적화
• 애니메이션 효과 추가로 사용자 경험 향상

팀원들과 공유하고 싶은 팁

• rem 단위 사용 시 html { font-size: 62.5% } 설정으로 1rem = 10px 계산 편의성 확보
• design 토큰 사용을 다해서 일단은 임시 theme 변수를 지정했습니다

[czmcm5]

리드미 정말 꼼꼼해요 배우고 갑니당👍

[namee-h]

저도 배우고 갑니당 !! 👏🏻