← 목록으로
오늘
안녕하세요! 오늘 회의 시간 괜찮으신가요?
오전 10:30
네, 좋습니다! 오후 2시는 어떠세요?
오전 10:32
✓✓
네, 확인했습니다. 정말 좋은 자료네요! 👍
오전 10:40
✓✓
그럼 오후 2시에 화상 회의실에서 만나요!
오전 10:41
✓
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