# InsuRo 로그인 — 인앱 브라우저 감지 + 외부 브라우저 유도

## 작업 레벨: Lv.1

## 프로젝트
- InsuRo: `/home/jay/projects/InsuRo`

## 문제
카카오톡/네이버앱 등 인앱 브라우저(WebView)에서 Google 로그인 시도 시:
`403 오류: disallowed_useragent` — Google이 보안 정책으로 차단.
사용자가 왜 안 되는지 모르고 막혀있음.

## 수정 사항

### 1. 인앱 브라우저(WebView) 감지 유틸
`src/utils/detectInAppBrowser.ts` (신규):

```typescript
export function isInAppBrowser(): boolean {
  const ua = navigator.userAgent || navigator.vendor || "";
  // 카카오톡, 네이버, 인스타그램, 페이스북, 라인, 트위터 등
  const inAppPatterns = [
    /KAKAOTALK/i,
    /NAVER/i,
    /Instagram/i,
    /FBAN|FBAV/i,  // Facebook
    /Line\//i,
    /Twitter/i,
    /wv\)/i,       // Android WebView
    /WebView/i,
  ];
  return inAppPatterns.some(p => p.test(ua));
}
```

### 2. 로그인 페이지에서 인앱 브라우저 감지 시 안내 표시
`src/pages/Login.tsx`:

인앱 브라우저 감지 시 Google 로그인 버튼 대신 안내 UI 표시:

```tsx
if (isInAppBrowser()) {
  return (
    <div className="text-center space-y-4">
      <h2>외부 브라우저에서 열어주세요</h2>
      <p>현재 앱 내 브라우저에서는 Google 로그인이 지원되지 않습니다.</p>
      <p>Chrome 또는 Safari에서 열어주세요.</p>
      
      {/* Android: intent:// 스킴으로 Chrome 열기 */}
      {/* iOS: Safari로 열기 */}
      <Button onClick={() => {
        const url = window.location.href;
        // Android Chrome intent
        if (/android/i.test(navigator.userAgent)) {
          window.location.href = `intent://${url.replace(/https?:\/\//, '')}#Intent;scheme=https;package=com.android.chrome;end`;
        } else {
          // iOS 등: 클립보드 복사 안내
          navigator.clipboard.writeText(url);
          alert("주소가 복사되었습니다. Safari 또는 Chrome에서 붙여넣기 해주세요.");
        }
      }}>
        외부 브라우저로 열기
      </Button>
      
      {/* URL 복사 버튼 */}
      <Button variant="outline" onClick={() => {
        navigator.clipboard.writeText("https://insuro.biz");
        toast.success("주소가 복사되었습니다!");
      }}>
        주소 복사하기
      </Button>
    </div>
  );
}
```

### 3. 안내 디자인
- 상단: 경고 아이콘 (AlertTriangle)
- 제목: "외부 브라우저에서 열어주세요"
- 설명: "현재 앱 내 브라우저(카카오톡, 네이버 등)에서는 보안 정책으로 Google 로그인이 제한됩니다."
- 버튼 1: "Chrome으로 열기" (Android) / "Safari로 열기" (iOS)
- 버튼 2: "주소 복사하기" (폴백)
- 하단: insuro.biz 주소 표시

## affected_files
- `src/utils/detectInAppBrowser.ts` (신규 — 인앱 브라우저 감지)
- `src/pages/Login.tsx` (수정 — 인앱 브라우저 감지 시 안내 UI)

## 검증 시나리오
1. Chrome/Safari에서 접속 → 기존 로그인 화면 정상 표시
2. 인앱 브라우저(카카오톡 등)에서 접속 → "외부 브라우저로 열기" 안내 표시
3. "Chrome으로 열기" 클릭 (Android) → Chrome 브라우저에서 insuro.biz 열림
4. "주소 복사하기" 클릭 → 클립보드에 URL 복사 + 토스트
5. npm run build 성공