[FE] UI/UX 전체 서비스 디자인 통일성 개선

[jiva-z]

개요

• 현재 각 페이지 및 모달의 UI 스타일이 일관되지 않아 사용자 경험이 다소 분산되어 있음
• PredictPage.js와 SessionExtendModal.js의 스타일을 기준으로, 전체 서비스의 UI/UX를 통일성 있게 개선하고자 함

목표

• 주요 페이지, 모달, 버튼, 입력창 등 공통 UI 요소의 디자인을 통일
• modern & soft한 컬러 팔레트, 라운드 처리, 그림자, 그라데이션, 애니메이션 등 적용
• 다크/라이트 테마와 조화롭게 어울리는 컬러 사용
• 반응형(모바일/PC)에서도 일관된 경험 제공

작업 범위

• 공통 레이아웃(헤더, 푸터, 네비게이션 등) 스타일 통일
• 모든 모달(알림, 세션 연장, 안내 등) 스타일을 SessionExtendModal.js 기준으로 통일
• 주요 버튼, 입력창, 셀렉트박스 등 폼 요소를 PredictPage.js 스타일로 통일
• 페이지 배경, 카드, 섹션 등 컨테이너 스타일 통일
• 애니메이션(hover, transition, modal open/close 등) 일관성 적용
• 컬러 팔레트, 폰트, 라운드, 그림자 등 디자인 시스템 정의 및 적용
• 반응형 스타일 점검 및 개선

기대 효과

• 사용자에게 일관되고 세련된 서비스 경험 제공
• 유지보수 및 신규 기능 개발 시 디자인 가이드라인 활용 가능
• 브랜드 아이덴티티 강화

참고

• src/pages/PredictPage.js
• src/components/common/SessionExtendModal.js

---