refactor: 서버 뷰 모드 상태 보존 및 CSS 구조 모듈화(방안 B) 적용 #23

New Issue

Taehoon · 2026-06-19T15:05:03+09:00

Taehoon commented

2026-06-19 15:05:03 +09:00

작업 개요

사용자 경험(UX) 개선 및 CSS 코드 관리 편의성 제고를 위해 다음 두 가지 주요 작업을 수행했습니다.

서버 탭 뷰 전환 시 최근 보던 모드(목록/위치) 상태 복원
방안 B에 따른 CSS 파일 컴포넌트별 직접 Import 구조 전환 (Co-location)

주요 개선 사항

1. 서버 탭 뷰 모드 상태 복원 및 정규화

문제 현상: 서버 탭에서 위치/목록 뷰를 전환한 뒤 다른 탭(PC 등)으로 이동했다가 복귀하면 무조건 목록보기로 강제 재설정되는 현상 및 뷰 모드와 체크박스 상태 불일치 에러가 있었습니다.
개선 내용:
- src/main.ts에서 타 탭 이동 시 state.viewMode 상태를 강제 변환하지 않고 유지한 채, 렌더링 시점에만 effectiveViewMode를 적용하도록 수정했습니다.
- 비형식적인 (state as any).currentViewMode 전역 변수를 제거하고 state.viewMode 정식 멤버 속성으로 일원화했습니다.
- src/views/List/ListFactory.ts 및 src/views/LocationView.ts 내 뷰 토글 핸들러가 실제 체크박스 체크 값(chkBox.checked)을 그대로 따르도록 정비하여 상태 정합성을 맞추었습니다.

2. CSS 모듈화 및 컴포넌트/뷰 직접 Import 구조 전환 (방안 B)

문제 현상: 모든 CSS 파일을 HTML에서 개별 <link> 태그로 로드하여 결합도가 높았고, 컴포넌트와 관련 CSS가 분리되어 있어 관리 편의성이 떨어졌습니다.
개선 내용:
- HTML의 CSS 로딩 링크들을 삭제하고 각 컴포넌트/뷰 진입 TS 파일에서 스타일을 직접 import하도록 연동했습니다. (Vite 번들링 및 최적화 기능 활성화)
- 스타일 파일을 각 컴포넌트/뷰 폴더 바로 옆으로 배치하여 결합도와 응집도를 강화했습니다.
  - 가이드: src/styles/guide.css ➜ src/components/guide.css (연동: src/components/Guide.ts)
  - 모달: src/styles/modal.css ➜ src/components/Modal/modal.css (연동: src/components/Modal/BaseModal.ts)
  - 대시보드: src/styles/dashboard.css ➜ src/views/Dashboard/dashboard.css (연동: src/views/DashboardView.ts)
  - 테이블: src/styles/table.css ➜ src/views/List/table.css (연동: src/views/List/ListFactory.ts)
  - 맵 에디터: src/styles/map-editor.css ➜ src/views/map-editor.css (연동: src/map-editor-main.ts)
- 디자인 시스템 및 리셋 스타일(common.css)과 기본 로그인 스타일(login.css)은 전역 성격을 가지므로 기존 폴더 구조를 유지하고, 메인 엔트리인 src/main.ts 상단에서 로드하도록 정립하였습니다.

결과 검증

npm run build를 성공적으로 완료하여 코드 컴파일 및 CSS 모듈 번들링에 이상이 없음을 확인했습니다.

### 작업 개요 사용자 경험(UX) 개선 및 CSS 코드 관리 편의성 제고를 위해 다음 두 가지 주요 작업을 수행했습니다. 1. **서버 탭 뷰 전환 시 최근 보던 모드(목록/위치) 상태 복원** 2. **방안 B에 따른 CSS 파일 컴포넌트별 직접 Import 구조 전환 (Co-location)** ### 주요 개선 사항 #### 1. 서버 탭 뷰 모드 상태 복원 및 정규화 - **문제 현상**: 서버 탭에서 위치/목록 뷰를 전환한 뒤 다른 탭(PC 등)으로 이동했다가 복귀하면 무조건 목록보기로 강제 재설정되는 현상 및 뷰 모드와 체크박스 상태 불일치 에러가 있었습니다. - **개선 내용**: - `src/main.ts`에서 타 탭 이동 시 `state.viewMode` 상태를 강제 변환하지 않고 유지한 채, 렌더링 시점에만 `effectiveViewMode`를 적용하도록 수정했습니다. - 비형식적인 `(state as any).currentViewMode` 전역 변수를 제거하고 `state.viewMode` 정식 멤버 속성으로 일원화했습니다. - `src/views/List/ListFactory.ts` 및 `src/views/LocationView.ts` 내 뷰 토글 핸들러가 실제 체크박스 체크 값(`chkBox.checked`)을 그대로 따르도록 정비하여 상태 정합성을 맞추었습니다. #### 2. CSS 모듈화 및 컴포넌트/뷰 직접 Import 구조 전환 (방안 B) - **문제 현상**: 모든 CSS 파일을 HTML에서 개별 `<link>` 태그로 로드하여 결합도가 높았고, 컴포넌트와 관련 CSS가 분리되어 있어 관리 편의성이 떨어졌습니다. - **개선 내용**: - HTML의 CSS 로딩 링크들을 삭제하고 각 컴포넌트/뷰 진입 TS 파일에서 스타일을 직접 `import`하도록 연동했습니다. (Vite 번들링 및 최적화 기능 활성화) - 스타일 파일을 각 컴포넌트/뷰 폴더 바로 옆으로 배치하여 결합도와 응집도를 강화했습니다. - **가이드**: `src/styles/guide.css` ➜ `src/components/guide.css` (연동: `src/components/Guide.ts`) - **모달**: `src/styles/modal.css` ➜ `src/components/Modal/modal.css` (연동: `src/components/Modal/BaseModal.ts`) - **대시보드**: `src/styles/dashboard.css` ➜ `src/views/Dashboard/dashboard.css` (연동: `src/views/DashboardView.ts`) - **테이블**: `src/styles/table.css` ➜ `src/views/List/table.css` (연동: `src/views/List/ListFactory.ts`) - **맵 에디터**: `src/styles/map-editor.css` ➜ `src/views/map-editor.css` (연동: `src/map-editor-main.ts`) - 디자인 시스템 및 리셋 스타일(`common.css`)과 기본 로그인 스타일(`login.css`)은 전역 성격을 가지므로 기존 폴더 구조를 유지하고, 메인 엔트리인 `src/main.ts` 상단에서 로드하도록 정립하였습니다. ### 결과 검증 - `npm run build`를 성공적으로 완료하여 코드 컴파일 및 CSS 모듈 번들링에 이상이 없음을 확인했습니다.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Taehoon/ITAM#23