feat: React 18 프론트엔드 추가 및 프로젝트 구조 정리

- wtm-frontend → wtm-frontend-vue 이름 변경
- wtm-frontend-react 추가 (React 18 + PrimeReact + Zustand)
  - 동일한 모듈 구조 및 API 연동 (Vue 버전과 기능 동일)
  - Vue:5173 / React:5174 포트 분리
- 개발자 가이드에 React 프론트엔드 안내 추가
- .gitignore: Claude/OMC, 문서 생성 스크립트, package-lock 제외
- 불필요 파일 git 추적 제거 (.omc, generate_*.py, regenerate_*.py)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

wtm-frontend-vue/src/assets/styles/_form-grid.scss

@@ -0,0 +1,49 @@
+@use 'variables' as *;
+
+.form-grid {
+  display: grid;
+  gap: $space-md;
+  grid-template-columns: repeat(12, 1fr);
+
+  @media (max-width: $bp-mobile) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.col-1 { grid-column: span 1; }
+.col-2 { grid-column: span 2; }
+.col-3 { grid-column: span 3; }
+.col-4 { grid-column: span 4; }
+.col-6 { grid-column: span 6; }
+.col-8 { grid-column: span 8; }
+.col-12 { grid-column: span 12; }
+
+@media (max-width: $bp-mobile) {
+  [class^='col-'] {
+    grid-column: span 1 !important;
+  }
+}
+
+.form-field {
+  display: flex;
+  flex-direction: column;
+  gap: $space-xs;
+
+  &__label {
+    font-size: $font-size-sm;
+    font-weight: 600;
+    color: $color-text;
+    &--required::after {
+      content: ' *';
+      color: $color-danger;
+    }
+  }
+  &__error {
+    font-size: $font-size-xs;
+    color: $color-danger;
+  }
+  &__hint {
+    font-size: $font-size-xs;
+    color: $color-text-muted;
+  }
+}

wtm-frontend-vue/src/assets/styles/_overrides.scss

@@ -0,0 +1 @@
+// PrimeVue theme overrides

wtm-frontend-vue/src/assets/styles/_variables.scss

@@ -0,0 +1,53 @@
+// Breakpoints
+$bp-mobile: 576px;
+$bp-tablet: 768px;
+$bp-desktop: 992px;
+$bp-wide: 1200px;
+$bp-ultra: 1400px;
+
+// Layout
+$sidebar-width: 260px;
+$sidebar-collapsed-width: 64px;
+$topbar-height: 56px;
+$page-padding-x: 1.5rem;
+$page-padding-y: 1.25rem;
+
+// Spacing (8px base)
+$space-xs: 0.25rem;
+$space-sm: 0.5rem;
+$space-md: 1rem;
+$space-lg: 1.5rem;
+$space-xl: 2rem;
+$space-2xl: 3rem;
+
+// Typography
+$font-size-xs: 0.75rem;
+$font-size-sm: 0.875rem;
+$font-size-base: 1rem;
+$font-size-lg: 1.125rem;
+$font-size-xl: 1.25rem;
+$font-size-2xl: 1.5rem;
+
+// Border Radius
+$radius-sm: 6px;
+$radius-md: 8px;
+$radius-lg: 12px;
+
+// Z-Index
+$z-sidebar: 100;
+$z-topbar: 110;
+$z-overlay: 200;
+$z-dialog: 300;
+$z-toast: 400;
+
+// Semantic Colors (PrimeVue tokens)
+$color-surface: var(--p-surface-0);
+$color-surface-card: var(--p-surface-0);
+$color-surface-hover: var(--p-surface-100);
+$color-border: var(--p-surface-200);
+$color-text: var(--p-text-color);
+$color-text-muted: var(--p-text-muted-color);
+$color-primary: var(--p-primary-color);
+$color-danger: var(--p-red-500);
+$color-success: var(--p-green-500);
+$color-warning: var(--p-yellow-500);

wtm-frontend-vue/src/assets/styles/main.scss

@@ -0,0 +1,39 @@
+@use 'variables' as v;
+@use 'form-grid';
+@use 'overrides';
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+}
+
+body {
+  margin: 0;
+  font-family: var(--p-font-family);
+  color: var(--p-text-color);
+  background: var(--p-surface-ground);
+}
+
+.text-center { text-align: center; }
+.text-right { text-align: right; }
+.text-muted { color: var(--p-text-muted-color); }
+.text-sm { font-size: v.$font-size-sm; }
+.text-xs { font-size: v.$font-size-xs; }
+
+.card {
+  background: var(--p-surface-0);
+  border: 1px solid var(--p-surface-200);
+  border-radius: v.$radius-md;
+  padding: v.$space-lg;
+
+  @media (max-width: v.$bp-mobile) {
+    padding: v.$space-md;
+    border-radius: v.$radius-sm;
+  }
+}