Feat/45 mobile responsive

[SangHyun01]

Feat: 모바일 반응형 레이아웃 구현 (햄버거 메뉴 및 콘텐츠 오버플로우 해결)

주요 변경 사항

1. RootLayout 2단계 분리 (서버/클라이언트)

• Next.js의 핵심 규칙(RootLayout은 서버 컴포넌트여야 함)과 반응형 UI의 요구사항(Hooks는 클라이언트 컴포넌트여야 함)을 모두 충족시키기 위해 레이아웃을 2개 파일로 분리했습니다.
• app/layout.tsx (서버): , 태그, metadata, next/font를 이용한 폰트 최적화, 전역 TooltipProvider, Toaster를 담당합니다.
• app/client-layout.tsx (신규): "use client";를 사용하며, usePathname, useIsMobile 훅과 SidebarProvider 등 모든 '인터랙티브 UI' 로직을 담당합니다.

2. 모바일 사이드바 (Sheet) 구현

• 모바일 화면(lg 미만)에서 사이드바를 '햄버거 버튼'과 Sheet(서랍) 컴포넌트로 대체했습니다.

3. 콘텐츠 오버플로우 (잘림) 문제 해결

• 화면이 좁아질 때 flex 컨테이너가 줄어들지 않아 채팅창의 코드 블록(pre)이 잘리던 문제를 해결했습니다.
• app/layout-client.tsx: 태그에 min-w-0 클래스를 추가했습니다.
• MessageBubble.tsx: flex-1을 가진 div에 min-w-0 클래스를 추가했습니다.

4. 헤더 버튼 반응형 적용 (태블릿 대응)

• 화면이 lg (1024px) 미만으로 좁아질 때(태블릿 크기), 그래프 뷰 헤더의 버튼 3개('관계 수정' 등)가 줄바꿈되어 깨지는 문제를 해결했습니다.
• focus-view-header.tsx: lg:hidden 클래스를 적용하여 태블릿 크기에서는 3개의 버튼을 숨겼습니다.
• 대신, DropdownMenu 컴포넌트를 사용한 '더보기(...)' 메뉴 아이콘으로 대체하여, 좁은 화면에서도 모든 수정 기능에 접근할 수 있도록 UI를 개선했습니다.