# Mobile vs PC Separation Strategy

> **일시**: 2026-02-18 02:00
> **참석자**: Frontend Lead, QA Lead, PM
> **안건/주제**: 모바일 전용 AI Bar 구현 및 PC 버전 영향 차단 방안

---

## 1. 🛡️ Risk Mitigation (PC Side Effects)
*   **User Concern**: "모바일 수정하느라 PC 버전에 영향을 미치진 않겠지?"
*   **Frontend Lead**: 
    *   확실한 분리를 위해 **Responsive Design Pattern**을 엄격하게 적용하겠습니다.
    *   `AISidepanel.tsx`: `hidden md:flex` 클래스를 추가하여 모바일(`md` 미만)에서는 아예 렌더링되지 않거나 숨겨지도록 처리.
    *   `MobileAIBar.tsx`: 새로 생성할 컴포넌트는 `md:hidden`으로 PC에서는 렌더링되지 않도록 처리.
    *   이렇게 하면 코드 레벨에서 로직이 섞일 일이 없습니다. 상태(`isOpen` 등)는 공유하되, UI 렌더링만 viewport 기준 분기 처리합니다.
*   **QA Lead**: 
    *   테스트 시나리오에 "PC에서 브라우저 창을 줄였을 때"와 "모바일에서 가로모드일 때"를 포함시켜 경계값 테스트(Boundary Testing)를 수행하겠습니다.

## 2. 📅 Implementation Sequence

### Step 1: Component Creation (MobileAIBar)
*   `ActionTooltip`이나 `AISidepanel`의 로직을 재사용하되, UI는 **Bottom Sheet** 스타일로 완전히 새로 작성.
*   `framer-motion`을 사용하여 부드러운 슬라이드 업/다운 애니메이션 적용.
*   **핵심**: 기존 `AISidepanel` 코드는 건드리지 않고, 새 파일을 만듦으로써 리스크 최소화.

### Step 2: Context Integration
*   `VoiceCommandProvider`나 Global Layout에서 두 컴포넌트를 모두 배치.
    ```tsx
    <>
      <div className="hidden md:block">
        <AISidepanel /> {/* PC용 */}
      </div>
      <div className="block md:hidden">
        <MobileAIBar /> {/* 모바일용 */}
      </div>
    </>
    ```
*   이렇게 하면 물리적으로 겹칠 일이 없음.

### Step 3: Interaction Check
*   음성 명령("요약해줘") 실행 시, 현재 Viewport에 따라 적절한 UI가 반응하는지 확인.

---

## 3. 📝 Updated Plan
이 내용을 바탕으로 `implementation_plan.md`를 업데이트하여 사용자 승인을 받겠습니다.