[FEAT/#11] chat components

.gitignore

@@ -41,3 +41,7 @@ app-example
 # generated native folders
 /ios
 /android
+
+# claude
+CLAUDE.md
+.claude/

src/entities/chat/index.ts

@@ -0,0 +1,2 @@
+export type { ChatRoomItemProps, Message, MessageItemProps } from "./model/types";
+export { ChatRoomItem, MessageBubble, MessageItem, MessageTime } from "./ui";

src/entities/chat/model/types.ts

@@ -0,0 +1,23 @@
+import type { ImageSource } from "expo-image";
+
+export interface ChatRoomItemProps {
+	profileImage: ImageSource;
+	roomName: string;
+	lastMessage: string;
+	unreadCount?: number;
+}
+
+export interface Message {
+	id: string;
+	text: string;
+	senderId: string;
+	/** "HH:mm" 포맷 */
+	sentAt: string;
+}
+
+export interface MessageItemProps {
+	message: Message;
+	isMine: boolean;
+	/** received 메시지일 때만 필요 */
+	profileImage?: ImageSource;
+}

src/entities/chat/ui/ChatRoomItem.tsx

@@ -0,0 +1,46 @@
+import { Text, View } from "react-native";
+
+import { ProfileAvatar } from "@/shared/ui";
+
+import type { ChatRoomItemProps } from "../model/types";
+
+export function ChatRoomItem({
+	profileImage,
+	roomName,
+	lastMessage,
+	unreadCount = 0,
+}: ChatRoomItemProps) {
+	return (
+		<View className="w-full flex-row items-center justify-between px-[10px] gap-[27px]">
+			{/* Left: profile + texts */}
+			<View className="flex-row shrink items-center gap-[27px]">
+				<ProfileAvatar source={profileImage} size={48} />
+
+				{/* Text area */}
+				<View className="shrink">
+					<Text
+						className="font-bold text-[16px] leading-[22px]  text-content-primary"
+						numberOfLines={1}
+					>
+						{roomName}
+					</Text>
+					<Text
+						className="font-regular text-[13px] leading-[22px] tracking-[-0.41px] text-content-secondary"
+						numberOfLines={1}
+					>
+						{lastMessage}
+					</Text>
+				</View>
+			</View>
+
+			{/* Right: unread count badge */}
+			{unreadCount > 0 && (
+				<View className="rounded-full bg-primary justify-center px-[8px]">
+					<Text className="font-regular text-[12px] leading-[22px] tracking-[-0.41px] text-white">
+						{unreadCount}
+					</Text>
+				</View>
+			)}
+		</View>
+	);
+}

src/entities/chat/ui/MessageBubble.tsx

@@ -0,0 +1,28 @@
+import { Text, View } from "react-native";
+
+interface MessageBubbleProps {
+	text: string;
+	variant: "sent" | "received";
+}
+
+export function MessageBubble({ text, variant }: MessageBubbleProps) {
+	const isSent = variant === "sent";
+
+	return (
+		<View
+			className={[
+				"max-w-[260px] rounded-[10px] px-[10px] py-[10px]",
+				isSent ? "bg-primary" : "bg-neutral",
+			].join(" ")}
+		>
+			<Text
+				className={[
+					"font-light text-[14px]",
+					isSent ? "text-white" : "text-content-primary",
+				].join(" ")}
+			>
+				{text}
+			</Text>
+		</View>
+	);
+}

src/entities/chat/ui/MessageItem.tsx

@@ -0,0 +1,36 @@
+import { View } from "react-native";
+
+import { ProfileAvatar } from "@/shared/ui";
+
+import type { MessageItemProps } from "../model/types";
+import { MessageBubble } from "./MessageBubble";
+import { MessageTime } from "./MessageTime";
+
+export function MessageItem({ message, isMine, profileImage }: MessageItemProps) {
+	const variant = isMine ? "sent" : "received";
+
+	if (isMine) {
+		return (
+			<View className="flex-row justify-end items-end gap-[6px] px-screen-m mb-5">
+				<MessageTime time={message.sentAt} variant={variant} />
+				{/* shrink: 버블이 시간 텍스트를 밀어내지 않도록 압축 허용 */}
+				<View className="shrink items-end">
+					<MessageBubble text={message.text} variant={variant} />
+				</View>
+			</View>
+		);
+	}
+
+	return (
+		<View className="flex-row items-center items-end gap-[10px] px-screen-m mb-5">
+			<ProfileAvatar source={profileImage} size={47} />
+			{/* flex-1: 아바타 이후 남은 공간을 정확히 파악해 버블+시간이 넘치지 않게 함 */}
+			<View className="flex-1 flex-row items-end gap-[6px]">
+				<View className="shrink">
+					<MessageBubble text={message.text} variant={variant} />
+				</View>
+				<MessageTime time={message.sentAt} variant={variant} />
+			</View>
+		</View>
+	);
+}

src/entities/chat/ui/MessageTime.tsx

@@ -0,0 +1,19 @@
+import { Text } from "react-native";
+
+interface MessageTimeProps {
+	time: string;
+	variant: "sent" | "received";
+}
+
+export function MessageTime({ time, variant }: MessageTimeProps) {
+	return (
+		<Text
+			className={[
+				"font-light text-[11px] leading-[16px] text-[#666666]",
+				variant === "sent" ? "text-right" : "text-left",
+			].join(" ")}
+		>
+			{time}
+		</Text>
+	);
+}

src/entities/chat/ui/README.md

@@ -0,0 +1,150 @@
+# entities/chat/ui
+
+채팅 도메인 UI 컴포넌트 모음.
+
+---
+
+## ChatRoomItem
+
+채팅방 목록에서 각 행을 표시하는 컴포넌트.
+
+```tsx
+import { ChatRoomItem } from "@/entities/chat";
+
+<ChatRoomItem
+  profileImage={require("@/shared/assets/images/profile.png")}
+  roomName="떡집할머니는돈목욕"
+  lastMessage="제휴 협력 요청 드리고 싶습니다!"
+  unreadCount={10}
+/>
+```
+
+| Prop | 타입 | 필수 | 설명 |
+|------|------|------|------|
+| `profileImage` | `ImageSource` | ✅ | 프로필 이미지 |
+| `roomName` | `string` | ✅ | 채팅방 이름 |
+| `lastMessage` | `string` | ✅ | 마지막 메시지 |
+| `unreadCount` | `number` | ❌ | 읽지 않은 메시지 수. 0이면 배지 미표시. |
+
+---
+
+## MessageItem
+
+받은 메시지·보낸 메시지를 모두 처리하는 조합 컴포넌트. `isMine` 값에 따라 레이아웃이 달라진다.
+
+```tsx
+import { MessageItem } from "@/entities/chat";
+
+// 받은 메시지
+<MessageItem
+  message={{
+    id: "1",
+    text: "제휴 협력 요청 드리고 싶습니다!",
+    senderId: "other-user-id",
+    sentAt: "17:42",
+    unreadCount: 6,
+  }}
+  isMine={false}
+  profileImage={require("@/shared/assets/images/profile.png")}
+/>
+
+// 보낸 메시지
+<MessageItem
+  message={{
+    id: "2",
+    text: "네, 말씀해 주세요!",
+    senderId: "my-user-id",
+    sentAt: "17:43",
+  }}
+  isMine={true}
+/>
+```
+
+| Prop | 타입 | 필수 | 설명 |
+|------|------|------|------|
+| `message` | `Message` | ✅ | 메시지 데이터 |
+| `isMine` | `boolean` | ✅ | `true`면 오른쪽 정렬(파란 버블), `false`면 왼쪽 정렬(흰 버블) |
+| `profileImage` | `ImageSource` | ❌ | 받은 메시지(`isMine=false`)일 때만 사용 |
+
+### Message 타입
+
+```ts
+interface Message {
+  id: string;
+  text: string;
+  senderId: string;
+  sentAt: string;       // "HH:mm" 포맷
+  unreadCount?: number; // 프로필 우하단 배지 숫자
+}
+```
+
+---
+
+## MessageBubble
+
+말풍선 단독 컴포넌트. `MessageItem` 내부에서 사용되며, 필요 시 단독으로도 사용 가능.
+
+```tsx
+import { MessageBubble } from "@/entities/chat";
+
+<MessageBubble text="안녕하세요!" variant="received" />
+<MessageBubble text="네, 안녕하세요!" variant="sent" />
+```
+
+| Prop | 타입 | 설명 |
+|------|------|------|
+| `text` | `string` | 메시지 텍스트 |
+| `variant` | `"sent" \| "received"` | `sent`=파란 배경, `received`=neutral 배경 |
+
+---
+
+## MessageTime
+
+전송 시간 텍스트 단독 컴포넌트.
+
+```tsx
+import { MessageTime } from "@/entities/chat";
+
+<MessageTime time="17:42" variant="received" />
+<MessageTime time="17:42" variant="sent" />
+```
+
+| Prop | 타입 | 설명 |
+|------|------|------|
+| `time` | `string` | `"HH:mm"` 포맷 문자열 |
+| `variant` | `"sent" \| "received"` | 정렬 방향 결정 |
+
+---
+
+## 채팅방 화면에서의 레이아웃
+
+```tsx
+import { FlatList, KeyboardAvoidingView, Platform } from "react-native";
+import { MessageItem } from "@/entities/chat";
+import { ChatBar } from "@/features/send-message";
+
+function ChatRoomPage() {
+  return (
+    <KeyboardAvoidingView
+      className="flex-1"
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
+    >
+      <FlatList
+        data={messages}
+        keyExtractor={(item) => item.id}
+        renderItem={({ item }) => (
+          <MessageItem
+            message={item}
+            isMine={item.senderId === myUserId}
+            profileImage={item.senderId !== myUserId ? senderProfile : undefined}
+          />
+        )}
+        contentContainerStyle={{ gap: 12, paddingVertical: 16 }}
+        inverted
+      />
+
+      <ChatBar onSend={handleSend} />
+    </KeyboardAvoidingView>
+  );
+}
+```

src/entities/chat/ui/index.ts

@@ -0,0 +1,4 @@
+export { ChatRoomItem } from "./ChatRoomItem";
+export { MessageBubble } from "./MessageBubble";
+export { MessageItem } from "./MessageItem";
+export { MessageTime } from "./MessageTime";

src/features/send-message/index.ts

@@ -0,0 +1 @@
+export { ChatBar } from "./ui";

src/features/send-message/ui/ChatBar.tsx

@@ -0,0 +1,59 @@
+import { Ionicons } from "@expo/vector-icons";
+import { useState } from "react";
+import { TextInput, TouchableOpacity, View } from "react-native";
+
+import { colorTokens } from "@/shared/styles/tokens";
+
+interface ChatBarProps {
+	onSend: (message: string) => void;
+	onAttach?: () => void;
+}
+
+export function ChatBar({
+	onSend,
+	onAttach,
+}: ChatBarProps) {
+	const [text, setText] = useState("");
+
+	const canSend = text.trim().length > 0;
+
+	function handleSend() {
+		if (!canSend) return;
+		onSend(text.trim());
+		setText("");
+	}
+
+	return (
+		<View className="px-screen-m pt-[18px] pb-[21px]">
+			<View className="flex-row items-end rounded-[10px] bg-neutral px-[10px] py-[10px] gap-[10px]">
+				{/* 첨부(+) 버튼 */}
+				<TouchableOpacity onPress={onAttach} activeOpacity={0.7}>
+					<Ionicons name="add" size={22} color={colorTokens.contentSecondary} />
+				</TouchableOpacity>
+
+				{/* 텍스트 입력 */}
+				<TextInput
+					className="flex-1 font-light text-[14px] leading-[22px] text-content-primary"
+					style={{ paddingVertical: 0 }}
+					value={text}
+					onChangeText={setText}
+					multiline
+				/>
+
+				{/* 전송 버튼 */}
+				<TouchableOpacity
+					onPress={handleSend}
+					disabled={!canSend}
+					activeOpacity={0.7}
+					className="py-[2px]"
+				>
+					<Ionicons
+						name="send"
+						size={18}
+						color={canSend ? colorTokens.primary : colorTokens.contentSecondary}
+					/>
+				</TouchableOpacity>
+			</View>
+		</View>
+	);
+}