async function runBatch() {
  console.log(`[배치] 시작: ${new Date().toLocaleString('ko-KR')}`);

  // 1. API에서 전체 인원 가져오기
  const apiUsers = await fetchAllUsers();
  console.log(`[배치] API 응답: ${apiUsers.length}명`);

  // 2. DB 현재 상태 가져오기
  const dbUsers = await prisma.user.findMany();
  const dbMap = new Map(dbUsers.map(u => [u.usId, u]));
  const apiMap = new Map(apiUsers.map(u => [u.usId, u]));

  const historyRecords = [];

  // 3. 입사 감지 (API에 있고 DB에 없음)
  for (const [usId, apiUser] of apiMap) {
    if (!dbMap.has(usId)) {
      historyRecords.push({
        usId,
        changeType: 'JOIN',
        fieldName: null,
        oldValue: null,
        newValue: apiUser.usName,
      });
    }
  }

  // 4. 퇴사 감지 (DB에 있고 API에 없음)
  for (const [usId, dbUser] of dbMap) {
    if (!apiMap.has(usId)) {
      historyRecords.push({
        usId,
        changeType: 'LEAVE',
        fieldName: null,
        oldValue: dbUser.usName,
        newValue: null,
      });
    }
  }

  // 5. 변동 감지 (둘 다 있는데 값이 다름)
  const TRACKED_FIELDS = ['deptName', 'usRollName', 'usPosName'];

  for (const [usId, apiUser] of apiMap) {
    const dbUser = dbMap.get(usId);
    if (!dbUser) continue;

    for (const field of TRACKED_FIELDS) {
      const oldVal = dbUser[field] ?? null;
      const newVal = apiUser[field] ?? null;
      if (oldVal !== newVal) {
        historyRecords.push({
          usId,
          changeType: field === 'deptName' ? 'DEPT_CHANGE' : 'ROLE_CHANGE',
          fieldName: field,
          oldValue: oldVal,
          newValue: newVal,
        });
      }
    }
  }

  // 6. 이력 적재
  if (historyRecords.length > 0) {
    await prisma.userHistory.createMany({ data: historyRecords });
  }

  // 7. 현재 상태 upsert
  for (const user of apiUsers) {
    await prisma.user.upsert({
      where: { usId: user.usId },
      update: { ...user, updatedAt: new Date() },
      create: user,
    });
  }

  // 8. 퇴사자 DB에서 제거 (선택)
  const leaveIds = [...dbMap.keys()].filter(id => !apiMap.has(id));
  if (leaveIds.length > 0) {
    await prisma.user.deleteMany({ where: { usId: { in: leaveIds } } });
  }

  console.log(
    `[배치] 완료 — 입사 ${historyRecords.filter(h => h.changeType === 'JOIN').length}, ` +
    `퇴사 ${historyRecords.filter(h => h.changeType === 'LEAVE').length}, ` +
    `변동 ${historyRecords.filter(h => !['JOIN','LEAVE'].includes(h.changeType)).length}`
  );
}

// 매일 오전 1시 실행 (TZ=Asia/Seoul 필수)
cron.schedule('0 1 * * *', () => {
  runBatch().catch(err => console.error('[배치] 오류:', err));
});

docker exec insa-server node -e "require('./src/batch').runBatch().catch(console.error)"

npm install ag-grid-community ag-grid-react

import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

function UserGrid() {
  const columnDefs = [
    { field: 'usName',     headerName: '이름',   width: 100 },
    { field: 'deptName',   headerName: '부서',   flex: 1 },
    { field: 'usRollName', headerName: '직책',   width: 100 },
    { field: 'usPosName',  headerName: '직위',   width: 100 },
    { field: 'usMail1',    headerName: '이메일', flex: 1 },
  ];

  return (
    <div className="ag-theme-alpine" style={{ height: 600 }}>
      <AgGridReact
        rowData={users}
        columnDefs={columnDefs}
        pagination={true}
        paginationPageSize={50}
      />
    </div>
  );
}

AG Grid: As of v33, the grid uses a new Theming API by default.
CSS file imports (ag-theme-alpine.css etc.) are not compatible...

<AgGridReact
  theme="legacy"        // ← 이거 추가
  rowData={users}
  columnDefs={columnDefs}
  pagination={true}
  paginationPageSize={50}
/>

const [filters, setFilters] = useState({ dept: '', name: '', role: '' });

const filtered = useMemo(() => {
  return users.filter(u =>
    (!filters.dept || u.deptName?.includes(filters.dept)) &&
    (!filters.name || u.usName?.includes(filters.name)) &&
    (!filters.role || u.usRollName?.includes(filters.role))
  );
}, [users, filters]);

npm install @tanstack/react-query

// api.js
export const fetchUsers = (params) =>
  fetch(`/api/users?${new URLSearchParams(params)}`).then(r => r.json());

// UserGrid.jsx
const { data: users = [], isLoading, isError } = useQuery({
  queryKey: ['users', filters],
  queryFn: () => fetchUsers(filters),
  staleTime: 1000 * 60 * 5,  // 5분간 캐시 유지
});

if (isLoading) return <div>로딩 중...</div>;
if (isError)   return <div>데이터를 불러올 수 없습니다.</div>;

const queryClient = useQueryClient();

const updateMutation = useMutation({
  mutationFn: ({ usId, data }) =>
    fetch(`/api/users/${usId}`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    }).then(r => r.json()),

  onSuccess: () => {
    // 수정 후 목록 자동 갱신
    queryClient.invalidateQueries({ queryKey: ['users'] });
  },
});

function downloadCsv(rows, filename) {
  const headers = ['이름', '부서', '직책', '직위', '이메일', '휴대폰', '내선번호'];
  const fields  = ['usName', 'deptName', 'usRollName', 'usPosName', 'usMail1', 'usCellno', 'usTelno'];

  const csv = [
    headers.join(','),
    ...rows.map(row =>
      fields.map(f => `"${(row[f] ?? '').replace(/"/g, '""')}"`).join(',')
    ),
  ].join('\n');

  const blob = new Blob(['\uFEFF' + csv], { type: 'text/csv;charset=utf-8' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}

// 서버: INSERT SQL 생성 API
app.post('/api/users/sql/insert', async (req, res) => {
  const { dept, name, role } = req.body;

  const users = await prisma.user.findMany({
    where: {
      deptName:   dept ? { contains: dept } : undefined,
      usName:     name ? { contains: name } : undefined,
      usRollName: role ? { contains: role } : undefined,
    },
  });

  const values = users.map(u =>
    `  ('${u.usId}', '${u.usName}', ${nullable(u.deptId)}, ${nullable(u.deptName)}, ` +
    `${nullable(u.usRollName)}, ${nullable(u.usPosName)}, ${nullable(u.usMail1)}, ` +
    `${nullable(u.usCellno)}, ${nullable(u.usTelno)})`
  ).join(',\n');

  const sql = `INSERT INTO users (us_id, us_name, dept_id, dept_name, us_roll_name, us_pos_name, us_mail1, us_cellno, us_telno)\nVALUES\n${values}\nON CONFLICT (us_id) DO UPDATE SET\n  us_name = EXCLUDED.us_name,\n  dept_name = EXCLUDED.dept_name,\n  us_roll_name = EXCLUDED.us_roll_name;`;

  res.json({ sql });
});

const nullable = v => v ? `'${v.replace(/'/g, "''")}'` : 'NULL';

// 클라이언트: 클립보드 복사
const { data } = useMutation({
  mutationFn: () => fetch('/api/users/sql/insert', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(filters),
  }).then(r => r.json()),
  onSuccess: ({ sql }) => {
    navigator.clipboard.writeText(sql);
    alert('SQL이 클립보드에 복사됐습니다.');
  },
});

/* App.css */
:root {
  --bg: #ffffff;
  --surface: #f8f9fa;
  --text: #1a1a1a;
  --border: #e0e0e0;
}

[data-theme="dark"] {
  --bg: #1a1a1a;
  --surface: #242424;
  --text: #e0e0e0;
  --border: #3a3a3a;
}

body {
  background: var(--bg);
  color: var(--text);
}

// App.jsx
const [theme, setTheme] = useState(
  () => localStorage.getItem('theme') || 'light'
);

useEffect(() => {
  document.documentElement.setAttribute('data-theme', theme);
  localStorage.setItem('theme', theme);
}, [theme]);

const toggleTheme = () =>
  setTheme(t => t === 'light' ? 'dark' : 'light');

const CHANGE_TYPES = {
  JOIN: 'JOIN',           // 신규 입사 (DB에 없던 usId 등장)
  LEAVE: 'LEAVE',         // 퇴사 (API 응답에서 usId 사라짐)
  DEPT_CHANGE: 'DEPT_CHANGE',   // 부서 이동
  ROLE_CHANGE: 'ROLE_CHANGE',   // 직책/직위 변경
};

<!-- Docker Java -->
<dependency>
    <groupId>com.github.docker-java</groupId>
    <artifactId>docker-java</artifactId>
    <version>3.3.6</version>
</dependency>
<dependency>
    <groupId>com.github.docker-java</groupId>
    <artifactId>docker-java-transport-zerodep</artifactId>
    <version>3.3.6</version>
</dependency>

Connect to unix://localhost:2375 failed

@Configuration
public class DockerConfig {

    @Value("${docker.host:unix:///var/run/docker.sock}")
    private String dockerHost;

    @Bean
    public DockerClient dockerClient() {
        DockerClientConfig config = DefaultDockerClientConfig.createDefaultConfigBuilder()
                .withDockerHost(dockerHost)
                .build();

        DockerHttpClient httpClient = new ZerodepDockerHttpClient.Builder()
                .dockerHost(config.getDockerHost())
                .sslConfig(config.getSSLConfig())
                .build();

        return DockerClientImpl.getInstance(config, httpClient);
    }
}

docker.host=unix:///var/run/docker.sock

public List<ContainerSummaryDto> listContainers(boolean all) {
    return dockerClient.listContainersCmd()
            .withShowAll(all)
            .exec()
            .stream()
            .map(this::toDto)
            .toList();
}

public Flux<String> streamLogs(String containerId, int tail) {
    return Flux.create(sink -> {
        dockerClient.logContainerCmd(containerId)
                .withStdOut(true)
                .withStdErr(true)
                .withFollowStream(true)
                .withTail(tail)
                .withTimestamps(true)
                .exec(new ResultCallback.Adapter<>() {
                    @Override
                    public void onNext(Frame frame) {
                        sink.next(new String(frame.getPayload()).stripTrailing());
                    }

                    @Override
                    public void onError(Throwable throwable) {
                        sink.error(throwable);
                    }

                    @Override
                    public void onComplete() {
                        sink.complete();
                    }
                });
    });
}

@GetMapping(value = "/{id}/logs", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public Flux<ServerSentEvent<String>> streamLogs(@PathVariable String id,
                                                 @RequestParam(defaultValue = "100") int tail) {
    return containerService.streamLogs(id, tail)
            .map(line -> ServerSentEvent.<String>builder().data(line).build());
}

src/
  api.js               # API 호출 함수
  App.js               # 루트 컴포넌트 (목록 + 폴링)
  App.css              # 전체 스타일 (다크 테마)
  components/
    ContainerCard.js   # 카드 UI + 액션 버튼
    LogViewer.js       # SSE 실시간 로그 모달

const POLL_INTERVAL = 5000;

export default function App() {
  const [containers, setContainers] = useState([]);
  const [logTarget, setLogTarget] = useState(null);

  const load = useCallback(async () => {
    const data = await fetchContainers();
    setContainers(data);
  }, []);

  useEffect(() => {
    load();
    const timer = setInterval(load, POLL_INTERVAL);
    return () => clearInterval(timer);
  }, [load]);
  // ...
}

const STATE_META = {
  running: { label: 'Running', color: '#22c55e' },
  exited:  { label: 'Exited',  color: '#ef4444' },
  paused:  { label: 'Paused',  color: '#f59e0b' },
  created: { label: 'Created', color: '#6b7280' },
  dead:    { label: 'Dead',    color: '#991b1b' },
};

useEffect(() => {
  const es = new EventSource(getLogUrl(containerId));

  es.onopen = () => setConnected(true);

  es.onmessage = (e) => {
    setLines((prev) => {
      const next = [...prev, e.data];
      // 메모리 관리: 최대 2000줄 유지
      return next.length > 2000 ? next.slice(-2000) : next;
    });
  };

  es.onerror = () => {
    setConnected(false);
    setError('Connection lost.');
    es.close();
  };

  return () => es.close(); // 모달 닫으면 SSE 연결 종료
}, [containerId]);

FROM eclipse-temurin:17-jdk AS builder
WORKDIR /app
COPY .mvn/ .mvn/
COPY mvnw pom.xml ./
RUN ./mvnw dependency:go-offline -q
COPY src/ src/
RUN ./mvnw package -DskipTests -q

FROM eclipse-temurin:17-jre
WORKDIR /app
COPY --from=builder /app/target/*.jar app.jar
ENTRYPOINT ["java", "-jar", "app.jar"]

FROM node:20-alpine AS build
WORKDIR /app
COPY package.json package-lock.json* ./
RUN npm ci --silent
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

server {
    listen 80;
    root /usr/share/nginx/html;
    index index.html;

    location /api/ {
        proxy_pass http://100.109.108.36:28080;
        proxy_http_version 1.1;
        proxy_set_header Connection '';
        proxy_buffering off;       # SSE 필수 설정
        proxy_cache off;
        chunked_transfer_encoding on;
    }

    location / {
        try_files $uri $uri/ /index.html;  # SPA 라우팅
    }
}

# 로컬에서 이미지 빌드
docker build -t dashboard-front ./frontend
docker build -t dashboard-back ./backend

# tar로 저장
docker save dashboard-front | gzip > dashboard-front.tar.gz
docker save dashboard-back | gzip > dashboard-back.tar.gz

# 서버로 전송
scp dashboard-front.tar.gz dashboard-back.tar.gz user@홈서버IP:~/dashboard/

# 서버에서 로드 & 실행
ssh user@홈서버IP
cd ~/dashboard
docker load < dashboard-front.tar.gz
docker load < dashboard-back.tar.gz
docker compose up -d

services:
  dashboard-back:
    image: dashboard-back
    container_name: dashboard-back
    ports:
      - "28080:8080"
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
    restart: unless-stopped

  dashboard-front:
    image: dashboard-front
    container_name: dashboard-front
    ports:
      - "23000:80"
    restart: unless-stopped