wr: 작업계획

2026-06-23 13:32:25 +09:00
parent d4f1ec095e
commit 4126bc2234
2 changed files with 173 additions and 0 deletions
@@ -0,0 +1,162 @@
+# apps/wr 테마 적용 작업계획
+
+작성일: 2026-06-23
+대상 앱: `D:\iipbs\frontend\apps\wr`
+
+## 1. 분석 요약
+
+- 현재 테마 구조는 이미 `data-theme` 기반으로 잡혀 있다.
+- 실제 테마 키는 `default + black + blue + green + red` 기준으로 운영되고 있다.
+- `apps/wr`는 `src/app/index.tsx`에서 `site-theme-key` 쿠키값을 읽어 `<html data-theme=...>`에 주입한다.
+- `packages/common/components`와 `packages/common/assets`는 CSS 변수와 컴포넌트별 `.css` 파일을 통해 테마를 적용하는 구조다.
+- 반면 `packages/common/business_components`는 다수의 UI가 TSX 내부 Tailwind 클래스에 직접 의존하고 있어 테마 일관성이 약하다.
+- `apps/wr` 내부에서 `@common/business_components`를 참조하는 파일 수가 많아 영향 범위가 크다.
+
+## 2. 확인된 현재 구조
+
+### 2.1 테마 진입점
+
+- `D:\iipbs\frontend\apps\wr\src\app\index.tsx`
+  - `site-theme-key` 쿠키를 읽어 `data-theme`를 설정한다.
+- `D:\iipbs\frontend\packages\common\components\src\ui\header\index.tsx`
+  - 사이트 정보 조회 후 `site-theme-key` 쿠키와 `document.documentElement[data-theme]`를 갱신한다.
+
+### 2.2 공통 테마 자산
+
+- `D:\iipbs\frontend\packages\common\assets\src\styles\base.css`
+  - `:root`, `[data-theme="black"]`, `[data-theme="red"]`, `[data-theme="green"]`에서 CSS 변수를 정의한다.
+- `D:\iipbs\frontend\packages\common\components\src\ui\*.css`
+  - `header.css`, `table.css`, `sidebar.css` 등에서 컴포넌트별 테마 오버라이드를 관리한다.
+- `D:\iipbs\frontend\apps\wr\src\app\styles\components*.css`
+  - 앱 레벨의 blue/green/red/black 보정 CSS가 이미 존재한다.
+
+### 2.3 business_components 현황
+
+- `packages/common/business_components/src/ui` 기준 소스 파일 수: 81
+- 같은 경로 기준 CSS 파일 수: 6
+- 이 중 일반 UI용 CSS는 사실상 `date_picker/date-picker.css` 중심이고, 나머지는 지도 legacy CSS 성격이 강하다.
+- 하드코딩된 `text-gray-*`, `bg-white`, `border-gray-*`, `hover:bg-gray-*`, `dark:*` 패턴이 확인된 파일 수: 28
+
+## 3. 핵심 판단
+
+### 3.1 CSS 전환 가능 여부
+
+- 가능하다.
+- 다만 "모든 Tailwind를 제거"가 아니라 "테마 의존 스타일을 CSS로 추출"하는 방향이 맞다.
+- 즉 배경색, 글자색, 보더색, hover/active 색상, 선택 상태, 강조색은 CSS 변수 기반 클래스로 이동한다.
+- 반대로 `flex`, `grid`, `gap`, `w-*`, `h-*`, `p-*` 같은 구조/간격 유틸리티까지 전부 CSS로 옮기는 것은 효율이 낮다.
+
+### 3.2 왜 이 방향이 맞는가
+
+- 기존 `components`가 이미 같은 패턴을 사용한다.
+- `assets/base.css`의 토큰(`--background`, `--foreground`, `--primary`, `--border`, `--label`, `--container`, `--title` 등)을 재사용할 수 있다.
+- `apps/wr`는 `business_components` 사용 범위가 넓어, 테마 속성만 먼저 추출해도 화면 일관성이 크게 개선된다.
+- 전부 TSX 내부 유틸리티로 유지하면 5개 테마 차이를 한 번에 통제하기 어렵다.
+
+## 4. 우선 전환 대상
+
+### 4.1 1순위: 색상 하드코딩이 직접 보이는 공통 UI
+
+- `packages/common/business_components/src/ui/file-upload/index.tsx`
+  - `text-gray-*`, `outline-slate-500`, `dark:text-gray-400` 사용
+- `packages/common/business_components/src/ui/tab/index.tsx`
+  - `text-blue-600`, `text-gray-500`, `border-gray-200`, `hover:border-gray-300` 사용
+- `packages/common/business_components/src/ui/search_input/index.tsx`
+- `packages/common/business_components/src/ui/search_input_select/index.tsx`
+- `packages/common/business_components/src/ui/select/index.tsx`
+- `packages/common/business_components/src/ui/form_ui/index.tsx`
+- `packages/common/business_components/src/ui/search_icon/index.tsx`
+
+이 영역은 `apps/wr`의 검색조건, 입력폼, 탭, 업로드 UI 전반에 재사용될 가능성이 높아서 우선순위가 높다.
+
+### 4.2 2순위: 테이블/검색/모달 계열
+
+- `packages/common/business_components/src/ui/table/index.tsx`
+- `packages/common/business_components/src/ui/table/HeadMakeColSpan.tsx`
+- `packages/common/business_components/src/ui/search_address/SearchAddressModal.tsx`
+- `packages/common/business_components/src/ui/map/searchBar/SearchInputText.tsx`
+- `packages/common/business_components/src/ui/map/searchBar/searchBar.tsx`
+- `packages/common/business_components/src/ui/map/searchBar/procSearchBar.tsx`
+
+이 영역은 화면 체감도가 높고, 회색/흰색/파란색 하드코딩 비중이 높다.
+
+### 4.3 3순위: 차트 계열
+
+- `packages/common/business_components/src/ui/chart/*.tsx`
+- `packages/common/business_components/src/ui/chart/lib/chart.tsx`
+- `packages/common/business_components/src/ui/chart/lib/card.tsx`
+
+차트는 레이아웃보다 tooltip, legend, card, axis text 색상이 중요하다. 우선 색상과 surface만 토큰화하고, 차트 팔레트는 기존 CSS 변수(`--chart-*`)를 재사용하는 방식이 적절하다.
+
+### 4.4 별도 트랙: 지도 legacy 영역
+
+- `packages/common/business_components/src/ui/map/**`
+- `packages/common/business_components/src/ui/map/lib/css/**`
+
+지도는 legacy JS/CSS, sprite/image, OpenLayers 연동이 섞여 있어 일반 UI와 분리해서 작업하는 것이 안전하다.
+
+## 5. 권장 작업 방식
+
+### 단계 1. 테마 기준 정리
+
+- `components`에서 이미 쓰는 토큰과 클래스 패턴을 기준 문법으로 고정한다.
+- `business_components`에서 새로 쓰는 색상 클래스는 직접 색상값을 쓰지 말고 CSS 변수 기반으로 통일한다.
+- 예시 기준
+  - 텍스트: `text-foreground`, `text-label`, `text-title`
+  - 배경: `bg-background`, `bg-card`, `bg-container`, `bg-form`
+  - 보더: `border-border`
+  - 포커스/선택: `--primary`, `--primary-transparent`
+
+### 단계 2. 컴포넌트별 CSS 파일 추가
+
+- `components`와 동일하게 각 컴포넌트 폴더에 `.css`를 둔다.
+- 예시
+  - `file-upload/file-upload.css`
+  - `tab/tab.css`
+  - `search_input/search-input.css`
+  - `select/select.css`
+  - `search_address/search-address.css`
+- TSX에서는 색상/상태 관련 className을 의미 있는 클래스명으로 치환한다.
+
+예시 방향
+
+- 변경 전: `text-gray-500`, `bg-white`, `hover:bg-gray-50`, `data-[state=active]:text-blue-600`
+- 변경 후: `file-upload__hint`, `tab-trigger`, `search-address__suggestion`, `is-active`
+
+### 단계 3. 테마별 분기 작성
+
+- 기본값은 `:root` 또는 기본 클래스에서 처리한다.
+- 테마 차이가 필요한 경우만 `[data-theme="black"]`, `[data-theme="blue"]`, `[data-theme="green"]`, `[data-theme="red"]` 블록을 추가한다.
+- 동일한 값은 중복 정의하지 않는다.
+
+### 단계 4. apps/wr 화면 검증
+
+- `apps/wr`에서 `business_components` 사용도가 높은 화면부터 확인한다.
+- 우선 검증 화면
+  - 통계 화면
+  - 재이용시설 관리 등록/현황 화면
+  - 자재관리 검색/등록 화면
+  - 지도 검색바/상세팝업/레이어팝업
+
+## 6. 실제 작업 순서
+
+1. `business_components` 내 테마 하드코딩 파일 목록 확정
+2. 공통 토큰 매핑표 작성
+3. 1순위 UI에 CSS 파일 추가 및 TSX class 정리
+4. `apps/wr` 주요 화면에서 5개 테마 수동 점검
+5. 2순위 테이블/검색/모달 영역 확장
+6. 차트 계열 색상 토큰화
+7. 지도 legacy 영역은 별도 보수 계획으로 분리
+
+## 7. 검증 기준
+
+- 같은 화면에서 5개 테마 전환 시 텍스트, 보더, 배경, hover, 선택상태가 모두 읽혀야 한다.
+- black 테마에서 회색/흰색 하드코딩이 남아 흐릿하거나 과도하게 튀는 영역이 없어야 한다.
+- blue/green/red 테마에서 활성 탭, 버튼, 선택상태가 `primary` 계열로 일관되게 바뀌어야 한다.
+- `apps/wr` 기존 기능 동작은 그대로 유지되어야 한다.
+
+## 8. 결론
+
+- `business_components`의 Tailwind 스타일을 `components`와 같은 방식의 CSS 중심 구조로 전환하는 것은 가능하다.
+- 다만 전체 유틸리티를 전부 CSS로 옮기기보다, 테마에 영향을 주는 색상/상태 표현만 우선 추출하는 방식이 가장 현실적이다.
+- 우선순위는 `공통 입력 UI -> 테이블/검색/모달 -> 차트 -> 지도 legacy` 순으로 잡는 것이 좋다.
@@ -0,0 +1,11 @@
+#frontend 5가지 테마(theme) css 적용 작업
+## 대상 dir: D:\iipbs\fr\frontend 
+## branch :iipbs/dm/dev
+## 대상앱 : apps/wr
+## 전제 : 
+  - 주 component는 packages/common/components,  packages/common/assets이다. 5가지 테마가 적용되어 있다.
+  - 부 component인 packages/common/business_components는 주 component가 바뀌면 따라 바뀌어야 한다.
+## 지시 :
+  - business_components에 css로 안되어 있고 tailwind 코드가 삽입된 경우는 components와 같이 css로 넣어 줄 수 있는지 확인 부탁해.
+  - 어떤 방향으로 작업이 진행되어야 할지 프로젝트를 분석해 주고 작업계획_[오늘날짜].md 파일 만들어줘.
+