# 반응형 레이아웃 시스템 구현 계획서

## 📋 프로젝트 개요

### 목표

화면 디자이너는 절대 위치 기반으로 유지하되, 실제 화면 표시는 반응형으로 동작하도록 전환

### 핵심 원칙

- ✅ 화면 디자이너의 절대 위치 기반 드래그앤드롭은 그대로 유지
- ✅ 실제 화면 표시만 반응형으로 전환
- ✅ 데이터 마이그레이션 불필요 (신규 화면부터 적용)
- ✅ 기존 화면은 불러올 때 스마트 기본값 자동 생성

---

## 🎯 Phase 1: 기본 반응형 시스템 구축 (2-3일)

### 1.1 타입 정의 (2시간)

#### 파일: `frontend/types/responsive.ts`

```typescript
/**
 * 브레이크포인트 타입 정의
 */
export type Breakpoint = "desktop" | "tablet" | "mobile";

/**
 * 브레이크포인트별 설정
 */
export interface BreakpointConfig {
  minWidth: number; // 최소 너비 (px)
  maxWidth?: number; // 최대 너비 (px)
  columns: number; // 그리드 컬럼 수
}

/**
 * 기본 브레이크포인트 설정
 */
export const BREAKPOINTS: Record<Breakpoint, BreakpointConfig> = {
  desktop: {
    minWidth: 1200,
    columns: 12,
  },
  tablet: {
    minWidth: 768,
    maxWidth: 1199,
    columns: 8,
  },
  mobile: {
    minWidth: 0,
    maxWidth: 767,
    columns: 4,
  },
};

/**
 * 브레이크포인트별 반응형 설정
 */
export interface ResponsiveBreakpointConfig {
  gridColumns?: number; // 차지할 컬럼 수 (1-12)
  order?: number; // 정렬 순서
  hide?: boolean; // 숨김 여부
}

/**
 * 컴포넌트별 반응형 설정
 */
export interface ResponsiveComponentConfig {
  // 기본값 (디자이너에서 설정한 절대 위치)
  designerPosition: {
    x: number;
    y: number;
    width: number;
    height: number;
  };

  // 반응형 설정 (선택적)
  responsive?: {
    desktop?: ResponsiveBreakpointConfig;
    tablet?: ResponsiveBreakpointConfig;
    mobile?: ResponsiveBreakpointConfig;
  };

  // 스마트 기본값 사용 여부
  useSmartDefaults?: boolean;
}
```

### 1.2 스마트 기본값 생성기 (3시간)

#### 파일: `frontend/lib/utils/responsiveDefaults.ts`

```typescript
import { ComponentData } from "@/types/screen-management";
import { ResponsiveComponentConfig, BREAKPOINTS } from "@/types/responsive";

/**
 * 컴포넌트 크기에 따른 스마트 기본값 생성
 *
 * 로직:
 * - 작은 컴포넌트 (너비 25% 이하): 모바일에서도 같은 너비 유지
 * - 중간 컴포넌트 (너비 25-50%): 모바일에서 전체 너비로 확장
 * - 큰 컴포넌트 (너비 50% 이상): 모든 디바이스에서 전체 너비
 */
export function generateSmartDefaults(
  component: ComponentData,
  screenWidth: number = 1920
): ResponsiveComponentConfig["responsive"] {
  const componentWidthPercent = (component.size.width / screenWidth) * 100;

  // 작은 컴포넌트 (25% 이하)
  if (componentWidthPercent <= 25) {
    return {
      desktop: {
        gridColumns: 3, // 12컬럼 중 3개 (25%)
        order: 1,
        hide: false,
      },
      tablet: {
        gridColumns: 2, // 8컬럼 중 2개 (25%)
        order: 1,
        hide: false,
      },
      mobile: {
        gridColumns: 1, // 4컬럼 중 1개 (25%)
        order: 1,
        hide: false,
      },
    };
  }
  // 중간 컴포넌트 (25-50%)
  else if (componentWidthPercent <= 50) {
    return {
      desktop: {
        gridColumns: 6, // 12컬럼 중 6개 (50%)
        order: 1,
        hide: false,
      },
      tablet: {
        gridColumns: 4, // 8컬럼 중 4개 (50%)
        order: 1,
        hide: false,
      },
      mobile: {
        gridColumns: 4, // 4컬럼 전체 (100%)
        order: 1,
        hide: false,
      },
    };
  }
  // 큰 컴포넌트 (50% 이상)
  else {
    return {
      desktop: {
        gridColumns: 12, // 전체 너비
        order: 1,
        hide: false,
      },
      tablet: {
        gridColumns: 8, // 전체 너비
        order: 1,
        hide: false,
      },
      mobile: {
        gridColumns: 4, // 전체 너비
        order: 1,
        hide: false,
      },
    };
  }
}

/**
 * 컴포넌트에 반응형 설정이 없을 경우 자동 생성
 */
export function ensureResponsiveConfig(
  component: ComponentData,
  screenWidth?: number
): ComponentData {
  if (component.responsiveConfig) {
    return component;
  }

  return {
    ...component,
    responsiveConfig: {
      designerPosition: {
        x: component.position.x,
        y: component.position.y,
        width: component.size.width,
        height: component.size.height,
      },
      useSmartDefaults: true,
      responsive: generateSmartDefaults(component, screenWidth),
    },
  };
}
```

### 1.3 브레이크포인트 감지 훅 (1시간)

#### 파일: `frontend/hooks/useBreakpoint.ts`

```typescript
import { useState, useEffect } from "react";
import { Breakpoint, BREAKPOINTS } from "@/types/responsive";

/**
 * 현재 윈도우 크기에 따른 브레이크포인트 반환
 */
export function useBreakpoint(): Breakpoint {
  const [breakpoint, setBreakpoint] = useState<Breakpoint>("desktop");

  useEffect(() => {
    const updateBreakpoint = () => {
      const width = window.innerWidth;

      if (width >= BREAKPOINTS.desktop.minWidth) {
        setBreakpoint("desktop");
      } else if (width >= BREAKPOINTS.tablet.minWidth) {
        setBreakpoint("tablet");
      } else {
        setBreakpoint("mobile");
      }
    };

    // 초기 실행
    updateBreakpoint();

    // 리사이즈 이벤트 리스너 등록
    window.addEventListener("resize", updateBreakpoint);

    return () => window.removeEventListener("resize", updateBreakpoint);
  }, []);

  return breakpoint;
}

/**
 * 현재 브레이크포인트의 컬럼 수 반환
 */
export function useGridColumns(): number {
  const breakpoint = useBreakpoint();
  return BREAKPOINTS[breakpoint].columns;
}
```

### 1.4 반응형 레이아웃 엔진 (6시간)

#### 파일: `frontend/components/screen/ResponsiveLayoutEngine.tsx`

```typescript
import React, { useMemo } from "react";
import { ComponentData } from "@/types/screen-management";
import { Breakpoint, BREAKPOINTS } from "@/types/responsive";
import {
  generateSmartDefaults,
  ensureResponsiveConfig,
} from "@/lib/utils/responsiveDefaults";
import { DynamicComponentRenderer } from "@/lib/registry/DynamicComponentRenderer";

interface ResponsiveLayoutEngineProps {
  components: ComponentData[];
  breakpoint: Breakpoint;
  containerWidth: number;
  screenWidth?: number;
}

/**
 * 반응형 레이아웃 엔진
 *
 * 절대 위치로 배치된 컴포넌트들을 반응형 그리드로 변환
 *
 * 변환 로직:
 * 1. Y 위치 기준으로 행(row)으로 그룹화
 * 2. 각 행 내에서 X 위치 기준으로 정렬
 * 3. 반응형 설정 적용 (order, gridColumns, hide)
 * 4. CSS Grid로 렌더링
 */
export const ResponsiveLayoutEngine: React.FC<ResponsiveLayoutEngineProps> = ({
  components,
  breakpoint,
  containerWidth,
  screenWidth = 1920,
}) => {
  // 1단계: 컴포넌트들을 Y 위치 기준으로 행(row)으로 그룹화
  const rows = useMemo(() => {
    const sortedComponents = [...components].sort(
      (a, b) => a.position.y - b.position.y
    );

    const rows: ComponentData[][] = [];
    let currentRow: ComponentData[] = [];
    let currentRowY = 0;
    const ROW_THRESHOLD = 50; // 같은 행으로 간주할 Y 오차 범위 (px)

    sortedComponents.forEach((comp) => {
      if (currentRow.length === 0) {
        currentRow.push(comp);
        currentRowY = comp.position.y;
      } else if (Math.abs(comp.position.y - currentRowY) < ROW_THRESHOLD) {
        currentRow.push(comp);
      } else {
        rows.push(currentRow);
        currentRow = [comp];
        currentRowY = comp.position.y;
      }
    });

    if (currentRow.length > 0) {
      rows.push(currentRow);
    }

    return rows;
  }, [components]);

  // 2단계: 각 행 내에서 X 위치 기준으로 정렬
  const sortedRows = useMemo(() => {
    return rows.map((row) =>
      [...row].sort((a, b) => a.position.x - b.position.x)
    );
  }, [rows]);

  // 3단계: 반응형 설정 적용
  const responsiveComponents = useMemo(() => {
    return sortedRows.flatMap((row) =>
      row.map((comp) => {
        // 반응형 설정이 없으면 자동 생성
        const compWithConfig = ensureResponsiveConfig(comp, screenWidth);

        // 현재 브레이크포인트의 설정 가져오기
        const config = compWithConfig.responsiveConfig!.useSmartDefaults
          ? generateSmartDefaults(comp, screenWidth)[breakpoint]
          : compWithConfig.responsiveConfig!.responsive?.[breakpoint];

        return {
          ...compWithConfig,
          responsiveDisplay:
            config || generateSmartDefaults(comp, screenWidth)[breakpoint],
        };
      })
    );
  }, [sortedRows, breakpoint, screenWidth]);

  // 4단계: 필터링 및 정렬
  const visibleComponents = useMemo(() => {
    return responsiveComponents
      .filter((comp) => !comp.responsiveDisplay?.hide)
      .sort(
        (a, b) =>
          (a.responsiveDisplay?.order || 0) - (b.responsiveDisplay?.order || 0)
      );
  }, [responsiveComponents]);

  const gridColumns = BREAKPOINTS[breakpoint].columns;

  return (
    <div
      className="responsive-grid w-full"
      style={{
        display: "grid",
        gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,
        gap: "16px",
        padding: "16px",
      }}
    >
      {visibleComponents.map((comp) => (
        <div
          key={comp.id}
          className="responsive-grid-item"
          style={{
            gridColumn: `span ${
              comp.responsiveDisplay?.gridColumns || gridColumns
            }`,
          }}
        >
          <DynamicComponentRenderer component={comp} isPreview={true} />
        </div>
      ))}
    </div>
  );
};
```

### 1.5 화면 표시 페이지 수정 (4시간)

#### 파일: `frontend/app/(main)/screens/[screenId]/page.tsx`

```typescript
// 기존 import 유지
import { ResponsiveLayoutEngine } from "@/components/screen/ResponsiveLayoutEngine";
import { useBreakpoint } from "@/hooks/useBreakpoint";

export default function ScreenViewPage({
  params,
}: {
  params: { screenId: string };
}) {
  const [layout, setLayout] = useState<LayoutData | null>(null);
  const breakpoint = useBreakpoint();

  // 반응형 모드 토글 (사용자 설정 또는 화면 설정에 따라)
  const [useResponsive, setUseResponsive] = useState(true);

  // 기존 로직 유지...

  if (!layout) {
    return <div>로딩 중...</div>;
  }

  const screenWidth = layout.screenResolution?.width || 1920;
  const screenHeight = layout.screenResolution?.height || 1080;

  return (
    <div className="h-full w-full bg-white">
      {useResponsive ? (
        // 반응형 모드
        <ResponsiveLayoutEngine
          components={layout.components || []}
          breakpoint={breakpoint}
          containerWidth={window.innerWidth}
          screenWidth={screenWidth}
        />
      ) : (
        // 기존 스케일 모드 (하위 호환성)
        <div className="overflow-auto" style={{ padding: "16px 0" }}>
          <div
            style={{
              width: `${screenWidth * scale}px`,
              minHeight: `${screenHeight * scale}px`,
              marginLeft: "16px",
              marginRight: "16px",
            }}
          >
            <div
              className="relative bg-white"
              style={{
                width: `${screenWidth}px`,
                minHeight: `${screenHeight}px`,
                transform: `scale(${scale})`,
                transformOrigin: "top left",
              }}
            >
              {layout.components?.map((component) => (
                <div
                  key={component.id}
                  style={{
                    position: "absolute",
                    left: `${component.position.x}px`,
                    top: `${component.position.y}px`,
                    width:
                      component.style?.width || `${component.size.width}px`,
                    minHeight:
                      component.style?.height || `${component.size.height}px`,
                    zIndex: component.position.z || 1,
                  }}
                >
                  <DynamicComponentRenderer
                    component={component}
                    isPreview={true}
                  />
                </div>
              ))}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
```

---

## 🎨 Phase 2: 디자이너 통합 (1-2일)

### 2.1 반응형 설정 패널 (5시간)

#### 파일: `frontend/components/screen/panels/ResponsiveConfigPanel.tsx`

```typescript
import React, { useState } from "react";
import { ComponentData } from "@/types/screen-management";
import {
  Breakpoint,
  BREAKPOINTS,
  ResponsiveComponentConfig,
} from "@/types/responsive";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Checkbox } from "@/components/ui/checkbox";

interface ResponsiveConfigPanelProps {
  component: ComponentData;
  onUpdate: (config: ResponsiveComponentConfig) => void;
}

export const ResponsiveConfigPanel: React.FC<ResponsiveConfigPanelProps> = ({
  component,
  onUpdate,
}) => {
  const [activeTab, setActiveTab] = useState<Breakpoint>("desktop");

  const config = component.responsiveConfig || {
    designerPosition: {
      x: component.position.x,
      y: component.position.y,
      width: component.size.width,
      height: component.size.height,
    },
    useSmartDefaults: true,
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle>반응형 설정</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        {/* 스마트 기본값 토글 */}
        <div className="flex items-center space-x-2">
          <Checkbox
            id="smartDefaults"
            checked={config.useSmartDefaults}
            onCheckedChange={(checked) => {
              onUpdate({
                ...config,
                useSmartDefaults: checked as boolean,
              });
            }}
          />
          <Label htmlFor="smartDefaults">스마트 기본값 사용 (권장)</Label>
        </div>

        {/* 수동 설정 */}
        {!config.useSmartDefaults && (
          <Tabs
            value={activeTab}
            onValueChange={(v) => setActiveTab(v as Breakpoint)}
          >
            <TabsList className="grid w-full grid-cols-3">
              <TabsTrigger value="desktop">데스크톱</TabsTrigger>
              <TabsTrigger value="tablet">태블릿</TabsTrigger>
              <TabsTrigger value="mobile">모바일</TabsTrigger>
            </TabsList>

            <TabsContent value={activeTab} className="space-y-4">
              {/* 그리드 컬럼 수 */}
              <div className="space-y-2">
                <Label>너비 (그리드 컬럼)</Label>
                <Select
                  value={config.responsive?.[
                    activeTab
                  ]?.gridColumns?.toString()}
                  onValueChange={(v) => {
                    onUpdate({
                      ...config,
                      responsive: {
                        ...config.responsive,
                        [activeTab]: {
                          ...config.responsive?.[activeTab],
                          gridColumns: parseInt(v),
                        },
                      },
                    });
                  }}
                >
                  <SelectTrigger className="w-full">
                    <SelectValue placeholder="컬럼 수 선택" />
                  </SelectTrigger>
                  <SelectContent>
                    {[...Array(BREAKPOINTS[activeTab].columns)].map((_, i) => {
                      const cols = i + 1;
                      const percent = (
                        (cols / BREAKPOINTS[activeTab].columns) *
                        100
                      ).toFixed(0);
                      return (
                        <SelectItem key={cols} value={cols.toString()}>
                          {cols} / {BREAKPOINTS[activeTab].columns} ({percent}%)
                        </SelectItem>
                      );
                    })}
                  </SelectContent>
                </Select>
              </div>

              {/* 표시 순서 */}
              <div className="space-y-2">
                <Label>표시 순서</Label>
                <Input
                  type="number"
                  min="1"
                  value={config.responsive?.[activeTab]?.order || 1}
                  onChange={(e) => {
                    onUpdate({
                      ...config,
                      responsive: {
                        ...config.responsive,
                        [activeTab]: {
                          ...config.responsive?.[activeTab],
                          order: parseInt(e.target.value),
                        },
                      },
                    });
                  }}
                />
              </div>

              {/* 숨김 */}
              <div className="flex items-center space-x-2">
                <Checkbox
                  id={`hide-${activeTab}`}
                  checked={config.responsive?.[activeTab]?.hide || false}
                  onCheckedChange={(checked) => {
                    onUpdate({
                      ...config,
                      responsive: {
                        ...config.responsive,
                        [activeTab]: {
                          ...config.responsive?.[activeTab],
                          hide: checked as boolean,
                        },
                      },
                    });
                  }}
                />
                <Label htmlFor={`hide-${activeTab}`}>
                  {activeTab === "desktop"
                    ? "데스크톱"
                    : activeTab === "tablet"
                    ? "태블릿"
                    : "모바일"}
                  에서 숨김
                </Label>
              </div>
            </TabsContent>
          </Tabs>
        )}
      </CardContent>
    </Card>
  );
};
```

### 2.2 속성 패널 통합 (1시간)

#### 파일: `frontend/components/screen/panels/UnifiedPropertiesPanel.tsx` 수정

```typescript
// 기존 import에 추가
import { ResponsiveConfigPanel } from './ResponsiveConfigPanel';

// 컴포넌트 내부에 추가
return (
  <div className="space-y-4">
    {/* 기존 패널들 */}
    <PropertiesPanel ... />
    <StyleEditor ... />

    {/* 반응형 설정 패널 추가 */}
    <ResponsiveConfigPanel
      component={selectedComponent}
      onUpdate={(config) => {
        onUpdateComponent({
          ...selectedComponent,
          responsiveConfig: config
        });
      }}
    />

    {/* 기존 세부 설정 패널 */}
    <DetailSettingsPanel ... />
  </div>
);
```

### 2.3 미리보기 모드 (3시간)

#### 파일: `frontend/components/screen/ScreenDesigner.tsx` 수정

```typescript
// 추가 import
import { Breakpoint } from '@/types/responsive';
import { ResponsiveLayoutEngine } from './ResponsiveLayoutEngine';
import { useBreakpoint } from '@/hooks/useBreakpoint';
import { Button } from '@/components/ui/button';

export const ScreenDesigner: React.FC = () => {
  // 미리보기 모드: 'design' | 'desktop' | 'tablet' | 'mobile'
  const [previewMode, setPreviewMode] = useState<'design' | Breakpoint>('design');
  const currentBreakpoint = useBreakpoint();

  // ... 기존 로직 ...

  return (
    <div className="h-full flex flex-col">
      {/* 상단 툴바 */}
      <div className="flex gap-2 p-2 border-b bg-white">
        <Button
          variant={previewMode === 'design' ? 'default' : 'outline'}
          size="sm"
          onClick={() => setPreviewMode('design')}
        >
          디자인 모드
        </Button>
        <Button
          variant={previewMode === 'desktop' ? 'default' : 'outline'}
          size="sm"
          onClick={() => setPreviewMode('desktop')}
        >
          데스크톱 미리보기
        </Button>
        <Button
          variant={previewMode === 'tablet' ? 'default' : 'outline'}
          size="sm"
          onClick={() => setPreviewMode('tablet')}
        >
          태블릿 미리보기
        </Button>
        <Button
          variant={previewMode === 'mobile' ? 'default' : 'outline'}
          size="sm"
          onClick={() => setPreviewMode('mobile')}
        >
          모바일 미리보기
        </Button>
      </div>

      {/* 캔버스 영역 */}
      <div className="flex-1 overflow-auto">
        {previewMode === 'design' ? (
          // 기존 절대 위치 기반 디자이너
          <Canvas ... />
        ) : (
          // 반응형 미리보기
          <div
            className="mx-auto border border-gray-300"
            style={{
              width: previewMode === 'desktop' ? '100%' :
                     previewMode === 'tablet' ? '768px' :
                     '375px',
              minHeight: '100%'
            }}
          >
            <ResponsiveLayoutEngine
              components={components}
              breakpoint={previewMode}
              containerWidth={
                previewMode === 'desktop' ? window.innerWidth :
                previewMode === 'tablet' ? 768 :
                375
              }
              screenWidth={selectedScreen?.screenResolution?.width || 1920}
            />
          </div>
        )}
      </div>
    </div>
  );
};
```

---

## 💾 Phase 3: 저장/불러오기 (1일)

### 3.1 타입 업데이트 (2시간)

#### 파일: `frontend/types/screen-management.ts` 수정

```typescript
import { ResponsiveComponentConfig } from "./responsive";

export interface ComponentData {
  // ... 기존 필드들 ...

  // 반응형 설정 추가
  responsiveConfig?: ResponsiveComponentConfig;
}
```

### 3.2 저장 로직 (2시간)

#### 파일: `frontend/components/screen/ScreenDesigner.tsx` 수정

```typescript
// 저장 함수 수정
const handleSave = async () => {
  try {
    const layoutData: LayoutData = {
      screenResolution: {
        width: 1920,
        height: 1080,
      },
      components: components.map((comp) => ({
        ...comp,
        // 반응형 설정이 없으면 자동 생성
        responsiveConfig: comp.responsiveConfig || {
          designerPosition: {
            x: comp.position.x,
            y: comp.position.y,
            width: comp.size.width,
            height: comp.size.height,
          },
          useSmartDefaults: true,
        },
      })),
    };

    await screenApi.updateLayout(selectedScreen.id, layoutData);
    // ... 기존 로직 ...
  } catch (error) {
    console.error("저장 실패:", error);
  }
};
```

### 3.3 불러오기 로직 (2시간)

#### 파일: `frontend/components/screen/ScreenDesigner.tsx` 수정

```typescript
import { ensureResponsiveConfig } from "@/lib/utils/responsiveDefaults";

// 화면 불러오기
useEffect(() => {
  const loadScreen = async () => {
    if (!selectedScreenId) return;

    const screen = await screenApi.getScreenById(selectedScreenId);
    const layout = await screenApi.getLayout(selectedScreenId);

    // 반응형 설정이 없는 컴포넌트에 자동 생성
    const componentsWithResponsive = layout.components.map((comp) =>
      ensureResponsiveConfig(comp, layout.screenResolution?.width)
    );

    setSelectedScreen(screen);
    setComponents(componentsWithResponsive);
  };

  loadScreen();
}, [selectedScreenId]);
```

---

## 🧪 Phase 4: 테스트 및 최적화 (1일)

### 4.1 기능 테스트 체크리스트 (3시간)

- [ ] 브레이크포인트 전환 테스트
  - [ ] 윈도우 크기 변경 시 자동 전환
  - [ ] desktop → tablet → mobile 순차 테스트
- [ ] 스마트 기본값 생성 테스트
  - [ ] 작은 컴포넌트 (25% 이하)
  - [ ] 중간 컴포넌트 (25-50%)
  - [ ] 큰 컴포넌트 (50% 이상)
- [ ] 수동 설정 적용 테스트
  - [ ] 그리드 컬럼 변경
  - [ ] 표시 순서 변경
  - [ ] 디바이스별 숨김
- [ ] 미리보기 모드 테스트
  - [ ] 디자인 모드 ↔ 미리보기 모드 전환
  - [ ] 각 브레이크포인트 미리보기
- [ ] 저장/불러오기 테스트
  - [ ] 반응형 설정 저장
  - [ ] 기존 화면 불러오기 시 자동 변환

### 4.2 성능 최적화 (3시간)

#### 레이아웃 계산 메모이제이션

```typescript
// ResponsiveLayoutEngine.tsx
const memoizedLayout = useMemo(() => {
  // 레이아웃 계산 로직
}, [components, breakpoint, screenWidth]);
```

#### ResizeObserver 최적화

```typescript
// useBreakpoint.ts
// debounce 적용
const debouncedResize = debounce(updateBreakpoint, 150);
window.addEventListener("resize", debouncedResize);
```

#### 불필요한 리렌더링 방지

```typescript
// React.memo 적용
export const ResponsiveLayoutEngine = React.memo<ResponsiveLayoutEngineProps>(({...}) => {
  // ...
});
```

### 4.3 UI/UX 개선 (2시간)

- [ ] 반응형 설정 패널 툴팁 추가
- [ ] 미리보기 모드 전환 애니메이션
- [ ] 로딩 상태 표시
- [ ] 에러 처리 및 사용자 피드백

---

## 📅 최종 타임라인

| Phase   | 작업 내용             | 소요 시간 | 누적 시간    |
| ------- | --------------------- | --------- | ------------ |
| Phase 1 | 타입 정의 및 유틸리티 | 6시간     | 6시간        |
| Phase 1 | 반응형 레이아웃 엔진  | 6시간     | 12시간       |
| Phase 1 | 화면 표시 페이지 수정 | 4시간     | 16시간 (2일) |
| Phase 2 | 반응형 설정 패널      | 5시간     | 21시간       |
| Phase 2 | 디자이너 통합         | 4시간     | 25시간 (3일) |
| Phase 3 | 저장/불러오기         | 6시간     | 31시간 (4일) |
| Phase 4 | 테스트 및 최적화      | 8시간     | 39시간 (5일) |

**총 예상 시간: 39시간 (약 5일)**

---

## 🎯 구현 우선순위

### 1단계: 핵심 기능 (필수)

1. ✅ 타입 정의
2. ✅ 스마트 기본값 생성기
3. ✅ 브레이크포인트 훅
4. ✅ 반응형 레이아웃 엔진
5. ✅ 화면 표시 페이지 수정

### 2단계: 디자이너 UI (중요)

6. ✅ 반응형 설정 패널
7. ✅ 속성 패널 통합
8. ✅ 미리보기 모드

### 3단계: 데이터 처리 (중요)

9. ✅ 타입 업데이트
10. ✅ 저장/불러오기 로직

### 4단계: 완성도 (선택)

11. 테스트
12. 최적화
13. UI/UX 개선

---

## ✅ 완료 체크리스트

### Phase 1: 기본 시스템

- [ ] `frontend/types/responsive.ts` 생성
- [ ] `frontend/lib/utils/responsiveDefaults.ts` 생성
- [ ] `frontend/hooks/useBreakpoint.ts` 생성
- [ ] `frontend/components/screen/ResponsiveLayoutEngine.tsx` 생성
- [ ] `frontend/app/(main)/screens/[screenId]/page.tsx` 수정

### Phase 2: 디자이너 통합

- [ ] `frontend/components/screen/panels/ResponsiveConfigPanel.tsx` 생성
- [ ] `frontend/components/screen/panels/UnifiedPropertiesPanel.tsx` 수정
- [ ] `frontend/components/screen/ScreenDesigner.tsx` 수정

### Phase 3: 데이터 처리

- [ ] `frontend/types/screen-management.ts` 수정
- [ ] 저장 로직 수정
- [ ] 불러오기 로직 수정

### Phase 4: 테스트

- [ ] 기능 테스트 완료
- [ ] 성능 최적화 완료
- [ ] UI/UX 개선 완료

---

## 🚀 시작 준비 완료

이제 Phase 1부터 순차적으로 구현을 시작합니다.