시골약사
c7b08005e9
✨ 주요 기능: - 사이니지 태블릿 시스템 (SignageTabletScreen) - 통합 관제실 인터페이스 (NewControlScreen) - 슬라이드 관리 시스템 (SlideManager) - 의료진 호출 시스템 (실시간 Socket.IO 연동) - 타이머 시스템 (실시간 동기화) 🛠️ 기술 스택: - Vite 7.0.6 + React 19 + TypeScript - Tailwind CSS 4.0 (공식 @tailwindcss/vite 플러그인) - Radix UI 컴포넌트 라이브러리 - Socket.IO 클라이언트 - @hello-pangea/dnd (드래그앤드롭) 🔧 주요 구성: - 풀스크린 터치 인터페이스 - 반응형 UI/UX 디자인 - 실시간 서버 통신 - 터치 이벤트 최적화 - CSS 변수 기반 테마 시스템 🎯 개발 환경: - 포트: 5070 - 허용 호스트: ysl.0bin.in - 리버스 프록시 지원 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
101 lines
2.5 KiB
Markdown
101 lines
2.5 KiB
Markdown
# Front 프로젝트 CSS 수정 작업 로그
|
|
|
|
## 🎯 수정 목표
|
|
TCS 프로젝트처럼 버튼과 텍스트 색상이 제대로 표시되도록 CSS 시스템 구축
|
|
|
|
## 📝 수정 내역
|
|
|
|
### 1. **globals.css 파일 복사** ✅
|
|
```bash
|
|
cp /opt/ysl/tcs/styles/globals.css /opt/ysl/front/src/globals.css
|
|
```
|
|
- TCS의 433줄 완전한 CSS 변수 시스템 복사
|
|
- 라이트/다크 모드 색상 변수 포함
|
|
- 커스텀 버튼, 배지, 애니메이션 스타일 포함
|
|
|
|
### 2. **index.css 수정** ✅
|
|
```css
|
|
/* 변경 전 */
|
|
@import "tailwindcss";
|
|
:root {
|
|
color: rgba(255, 255, 255, 0.87); /* 흰색 텍스트 강제 */
|
|
background-color: #242424;
|
|
}
|
|
|
|
/* 변경 후 */
|
|
@import "tailwindcss";
|
|
@import "./globals.css"; /* globals.css import 추가 */
|
|
|
|
/* Vite 기본 스타일 제거 (충돌 방지) */
|
|
/* 풀스크린 설정만 유지 */
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
```
|
|
|
|
### 3. **tailwind.config.js 생성** ✅
|
|
- TCS와 동일한 Tailwind 설정 파일 추가
|
|
- CSS 변수 기반 색상 시스템 매핑
|
|
- 커스텀 애니메이션 정의
|
|
|
|
### 4. **tailwindcss-animate 플러그인 설치** ✅
|
|
```bash
|
|
npm install -D tailwindcss-animate
|
|
```
|
|
|
|
### 5. **globals.css 수정** ✅
|
|
- `@tailwind` 지시문 제거 (Tailwind 4.0은 @import 사용)
|
|
|
|
---
|
|
|
|
## 🎨 추가된 주요 기능
|
|
|
|
### CSS 변수 시스템
|
|
```css
|
|
:root {
|
|
--primary: 240 5.9% 10%;
|
|
--primary-foreground: 0 0% 98%;
|
|
--destructive: 0 84.2% 60.2%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
/* 40개 이상의 색상 변수 */
|
|
}
|
|
```
|
|
|
|
### 버튼 스타일
|
|
- `.btn-destructive` - 빨간색 버튼
|
|
- `.btn-dark` - 검은색 버튼
|
|
- `.btn-default` - 기본 버튼
|
|
- `.btn-outline` - 테두리 버튼
|
|
|
|
### 다크 모드
|
|
```css
|
|
.dark {
|
|
/* 완전한 다크 모드 색상 세트 */
|
|
}
|
|
```
|
|
|
|
### 터치 최적화
|
|
- 태블릿 터치 영역 확장
|
|
- 터치 피드백 애니메이션
|
|
- 우클릭/텍스트 선택 방지
|
|
|
|
---
|
|
|
|
## ✅ 결과
|
|
|
|
이제 Front 프로젝트에서:
|
|
1. **버튼 색상 정상 표시** - primary, destructive 등 모든 버튼 variant 작동
|
|
2. **텍스트 색상 정상** - foreground 색상 적용
|
|
3. **다크 모드 지원** - `.dark` 클래스로 전환 가능
|
|
4. **애니메이션** - accordion, pulse 등 커스텀 애니메이션
|
|
5. **터치 최적화** - 태블릿 환경 최적화
|
|
|
|
## 🔍 확인 방법
|
|
|
|
브라우저 새로고침 후:
|
|
- "사이니지 태블릿으로 접속" 버튼 → 검은색 배경 + 흰색 텍스트
|
|
- "통합 관제실로 접속" 버튼 → 검은색 배경 + 흰색 텍스트
|
|
- 전체적인 UI가 TCS와 동일한 스타일로 표시 |