55. 모바일 채팅 인터페이스 Design a mobile messaging/chat interface: **Screen Layout**: - Header: recipient info, back button - Message list: scrollable, full height - Input bar: fixed bottom **Header**: - Back arrow - Avatar (40px) - Name + status (online/offline/typing) - Actions: call, video, menu **Message List**: - Grouped by date (Today, Yesterday) - Reverse scroll (newest at bottom) - Pull to load older messages **Message Bubble**: - Sent: right-aligned, brand color - Received: left-aligned, gray-100 - Border-radius: 18px - Max-width: 70% of screen - Padding: 10px 14px **Message Types**: - Text: variable height - Image: thumbnail with tap to expand - Voice: waveform + duration + play - Link: preview card - Reply: quoted message above **Bubble Details**: - Timestamp: below bubble or on tap - Read receipts: checkmarks or "Seen" - Delivery status: sent, delivered, read **Sent Message States**: - Sending: opacity, clock icon - Sent: single check - Delivered: double check - Read: blue double check **Input Bar**: - Attachment button (left) - Text input: expandable - Emoji button - Send button (right, hidden when empty) - Voice record button (when empty) **Typing Indicator**: - "User is typing..." - Animated dots in bubble **Long Press Actions**: - Copy, Reply, Forward, Delete - React with emoji Tech: React Native + react-native-gifted-chat + Reanimated