# 대시보드 횡단조직 레이아웃 — 명시적 4열 배치

## 배경
현재 횡단조직 섹션이 CSS Grid auto-flow로 카드를 배치하는데, 제이회장님이 각 열에 정확히 어떤 카드를 배치할지 지정함.
보안팀 높이를 Max로 잡고, 나머지 열은 그 높이 안에서 균등 분할.

## 수정 대상
`/home/jay/workspace/dashboard/components/App.js` — 횡단조직 섹션 (약 464-622행)

## 현재 구조 (변경 전)
```jsx
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-2 sm:gap-3">
  {/* 보안팀 (md:row-span-2) */}
  {securityTeam card IIFE}
  {/* 횡단조직 — activeCenters.flatMap() */}
  {activeCenters.flatMap(center => { ... genius team injected ... })}
</div>
```
문제: auto-flow라 카드 위치를 정밀 제어 불가.

## 요청된 레이아웃 (4열)
- **Col1**: 보안팀 (풀 높이 = Max, 다른 열의 높이 기준)
- **Col2**: QC센터 + DevOps센터 + 회고분석센터 (3등분)
- **Col3**: Gemini센터 + Codex센터 (2등분)
- **Col4**: 천재적사고팀 + 전략센터 (2등분)

## 구현 방법

### 1. 그리드 컨테이너는 유지하되, 각 열을 flex-col 래퍼로 감싸기
```jsx
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-2 sm:gap-3">
  {/* Col1: 보안팀 */}
  <div className="flex flex-col">
    {보안팀 카드 — 기존 IIFE 그대로, md:row-span-2 제거}
  </div>

  {/* Col2: QC + DevOps + 회고분석 (3등분) */}
  <div className="flex flex-col gap-2">
    {qcCenter && <CenterCard ... className="flex-1" />}
    {devopsCenter && <CenterCard ... className="flex-1" />}
    {retroCenter && <CenterCard ... className="flex-1" />}
  </div>

  {/* Col3: Gemini + Codex (2등분) */}
  <div className="flex flex-col gap-2">
    {geminiCenter && <CenterCard ... className="flex-1" />}
    {codexCenter && <CenterCard ... className="flex-1" />}
  </div>

  {/* Col4: 천재적사고팀 + 전략센터 (2등분) */}
  <div className="flex flex-col gap-2">
    {geniusTeam card (flex-1)}
    {strategyCenter && <CenterCard ... className="flex-1" />}
  </div>
</div>
```

### 2. 센터 변수 사전 조회 (line ~157 부근에 추가)
기존 `activeCenters` 배열 외에, 개별 센터를 미리 찾아두기:
```javascript
const qcCenter = centers.find(c => c.center_id === 'qc-center' && c.status === 'active' && c.lead);
const devopsCenter = centers.find(c => c.center_id === 'devops-center' && c.status === 'active' && c.lead);
const retroCenter = centers.find(c => c.center_id === 'retrospective-center' && c.status === 'active' && c.lead);
const geminiCenter = centers.find(c => c.center_id === 'gemini-center' && c.status === 'active' && c.lead);
const codexCenter = centers.find(c => c.center_id === 'codex-center' && c.status === 'active' && c.lead);
const strategyCenter = centers.find(c => c.center_id === 'product-strategy-center' && c.status === 'active' && c.lead);
```

### 3. activeCenters.flatMap 루프 제거
더 이상 flatMap으로 자동 배치하지 않음. 각 열에 명시적으로 렌더링.

### 4. 보안팀 카드에서 `md:row-span-2` 제거
478행: `md:row-span-2` 클래스 삭제. 이제 Col1 래퍼가 높이를 잡음.

### 5. 천재적사고팀 카드
기존 genius team JSX (571-618행)를 Col4의 첫 번째 자식으로 이동.
`flex-1` 추가하여 높이 균등분할.

### 6. CenterCard에 flex-1 전달
CenterCard 컴포넌트가 className prop을 받아서 루트 div에 적용하는지 확인.
만약 안 된다면, CenterCard를 `<div className="flex-1">` 래퍼로 감싸기:
```jsx
<div className="flex-1">
  <CenterCard center={qcCenter} memberStatus={memberStatus} crossFunctional={crossFunctional} />
</div>
```
이 래퍼 방식이 더 안전함 (CenterCard 내부 수정 불필요).

### 7. CenterCard 컴포넌트 확인
CenterCard 내부의 루트 div에 `h-full`이 없으면 추가 필요:
```
className="... h-full"
```
그래야 flex-1 래퍼 안에서 높이를 꽉 채움.

## 핵심 주의사항
- **보안팀 카드 내부 JSX는 건드리지 않기** — 래퍼만 변경
- **CenterCard 컴포넌트 위치**: 같은 파일이 아닐 수 있음. 임포트 확인 필요. `grep -rn "CenterCard" dashboard/components/` 로 찾기
- **centerOrder와 activeCenters 변수**: flatMap을 제거하므로 이 변수들이 다른 곳에서도 쓰이는지 확인. 안 쓰이면 정리해도 됨. 쓰이면 유지.
- **반응형**: `md:grid-cols-4`에서만 4열. `sm:grid-cols-2`에서는 2열로 폴백 — 이 경우에도 각 열 래퍼가 올바르게 표시되는지 확인
- **flex-1 + h-full 조합**: Col 래퍼도 h-full 필요할 수 있음. Grid의 `align-items: stretch`(기본)가 적용되면 자동으로 됨.

## 검증
1. 대시보드 빌드 (npm run build 또는 해당 빌드 명령)
2. 4열 배치가 의도대로 되는지 스크린샷 확인 불가 → 코드 리뷰로 확인
3. 보안팀과 다른 열의 높이가 맞는지 CSS 로직 검증

## 레이아웃 검증 체크리스트
- [ ] Col1에 보안팀만 있는가?
- [ ] Col2에 QC, DevOps, 회고분석 3개가 있는가?
- [ ] Col3에 Gemini, Codex 2개가 있는가?
- [ ] Col4에 천재적사고팀, 전략센터 2개가 있는가?
- [ ] 각 열의 카드가 균등 높이인가? (flex-1)
- [ ] 보안팀 md:row-span-2가 제거되었는가?