feat: 공지사항 UI 디자인 시안 1차 반영 완료

[kth0910]

Design System & UI Retouch

Summary

• 디자인 시스템 구축 및 전체 UI 개선 작업을 진행했습니다. Atomic Design Token을 적용하여 일관된 디자인 언어를 구축하고, 사용자 경험을 개선했습니다.

Main Changes

1. 디자인 시스템 구축

• Design Token 시스템 도입
• lib/design-tokens.ts, lib/design-tokens.css 추가
• Atomic Design Token 체계 구축
• 색상, 타이포그래피, 간격 등의 토큰 정의
• DESIGN_SYSTEM.md 문서화
• Storybook 설정
• Storybook 7.x 설정 및 구성
• 주요 컴포넌트 스토리 작성 (Button, Card, Typography 등)
• Design Token 문서화 스토리 추가
• Surge를 통한 Storybook 자동 배포 설정

2. UI 컴포넌트 개선

• 공지사항 페이지
• 디자인 토큰 적용으로 일관된 스타일링
• 필터링 박스 개선 ("공지 삭제" 필터 제거, "임시 저장" 텍스트 수정)
• 모달 UI 개선 (생성/수정/미리보기 모달)
• 반응형 디자인 강화
• 사이드바
• 디자인 토큰 적용
• 메뉴 구조 간소화 (대시보드, 납부관리 제거)
• 공지사항 메뉴만 유지
• 학생 관리
• 학생 CRUD 기능 구현
• 학생 목록 테이블 UI 개선
• 학생 폼 모달 추가
• 체크박스 제거 및 심플한 디자인 적용

3. 로그인 시스템

• 로그인 페이지 추가
• /login 라우트 생성
• 간단한 로그인 버튼 UI
• 로그인 전용 레이아웃 구성

4. 반응형 디자인

• FHD(1920x1080) 환경 최적화
• QHD 환경 지원
• 폰트 사이즈 및 레이아웃 조정
• TailwindCSS 전역 적용