[RAPID-micro] 캡처 버튼 헤더 → 입력창 첨부파일 좌측으로 이동
This commit is contained in:
@@ -14,9 +14,10 @@ import type { Room } from "@/hooks/useMessenger";
|
|||||||
interface ChatPanelProps {
|
interface ChatPanelProps {
|
||||||
room: Room | null;
|
room: Room | null;
|
||||||
messageInputRef?: React.RefObject<MessageInputHandle | null>;
|
messageInputRef?: React.RefObject<MessageInputHandle | null>;
|
||||||
|
onCaptureClick?: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function ChatPanel({ room, messageInputRef }: ChatPanelProps) {
|
export function ChatPanel({ room, messageInputRef, onCaptureClick }: ChatPanelProps) {
|
||||||
const { user } = useAuth();
|
const { user } = useAuth();
|
||||||
const { selectedRoomId } = useMessengerContext();
|
const { selectedRoomId } = useMessengerContext();
|
||||||
const { data: messages } = useMessages(selectedRoomId);
|
const { data: messages } = useMessages(selectedRoomId);
|
||||||
@@ -180,6 +181,7 @@ export function ChatPanel({ room, messageInputRef }: ChatPanelProps) {
|
|||||||
roomId={room.id}
|
roomId={room.id}
|
||||||
onTypingStart={() => emitTypingStart(room.id)}
|
onTypingStart={() => emitTypingStart(room.id)}
|
||||||
onTypingStop={() => emitTypingStop(room.id)}
|
onTypingStop={() => emitTypingStop(room.id)}
|
||||||
|
onCaptureClick={onCaptureClick}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useState, useRef, useCallback, useEffect, forwardRef, useImperativeHandle, KeyboardEvent, ChangeEvent } from "react";
|
import { useState, useRef, useCallback, useEffect, forwardRef, useImperativeHandle, KeyboardEvent, ChangeEvent } from "react";
|
||||||
import { Paperclip, Send, SmilePlus, X, FileIcon } from "lucide-react";
|
import { Paperclip, Send, SmilePlus, X, FileIcon, Scissors } from "lucide-react";
|
||||||
import { useSendMessage, useUploadFile, useCompanyUsers } from "@/hooks/useMessenger";
|
import { useSendMessage, useUploadFile, useCompanyUsers } from "@/hooks/useMessenger";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
|
|
||||||
@@ -20,10 +20,11 @@ interface MessageInputProps {
|
|||||||
roomId: string;
|
roomId: string;
|
||||||
onTypingStart?: () => void;
|
onTypingStart?: () => void;
|
||||||
onTypingStop?: () => void;
|
onTypingStop?: () => void;
|
||||||
|
onCaptureClick?: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const MessageInput = forwardRef<MessageInputHandle, MessageInputProps>(
|
export const MessageInput = forwardRef<MessageInputHandle, MessageInputProps>(
|
||||||
function MessageInput({ roomId, onTypingStart, onTypingStop }: MessageInputProps, ref) {
|
function MessageInput({ roomId, onTypingStart, onTypingStop, onCaptureClick }: MessageInputProps, ref) {
|
||||||
const [text, setText] = useState("");
|
const [text, setText] = useState("");
|
||||||
const [pendingFiles, setPendingFiles] = useState<PendingFile[]>([]);
|
const [pendingFiles, setPendingFiles] = useState<PendingFile[]>([]);
|
||||||
const [showEmoji, setShowEmoji] = useState(false);
|
const [showEmoji, setShowEmoji] = useState(false);
|
||||||
@@ -233,6 +234,11 @@ function MessageInput({ roomId, onTypingStart, onTypingStop }: MessageInputProps
|
|||||||
|
|
||||||
{/* Input toolbar */}
|
{/* Input toolbar */}
|
||||||
<div className="flex items-center gap-1 p-2">
|
<div className="flex items-center gap-1 p-2">
|
||||||
|
{onCaptureClick && (
|
||||||
|
<button onClick={onCaptureClick} className="p-1.5 hover:bg-muted rounded shrink-0" aria-label="화면 캡처">
|
||||||
|
<Scissors className="h-4 w-4 text-muted-foreground" />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
<button onClick={() => fileRef.current?.click()} className="p-1.5 hover:bg-muted rounded shrink-0">
|
<button onClick={() => fileRef.current?.click()} className="p-1.5 hover:bg-muted rounded shrink-0">
|
||||||
<Paperclip className="h-4 w-4 text-muted-foreground" />
|
<Paperclip className="h-4 w-4 text-muted-foreground" />
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useState, useEffect, useRef, useCallback } from "react";
|
import { useState, useEffect, useRef, useCallback } from "react";
|
||||||
import { X, Settings, Scissors } from "lucide-react";
|
import { X, Settings } from "lucide-react";
|
||||||
import { useMessengerContext } from "@/contexts/MessengerContext";
|
import { useMessengerContext } from "@/contexts/MessengerContext";
|
||||||
import { useRooms, useUnreadCount } from "@/hooks/useMessenger";
|
import { useRooms, useUnreadCount } from "@/hooks/useMessenger";
|
||||||
import { RoomList } from "./RoomList";
|
import { RoomList } from "./RoomList";
|
||||||
@@ -194,13 +194,6 @@ export function MessengerModal() {
|
|||||||
>
|
>
|
||||||
<h2 className="text-sm font-semibold">메신저</h2>
|
<h2 className="text-sm font-semibold">메신저</h2>
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
<button
|
|
||||||
onClick={() => setCapturing(true)}
|
|
||||||
className="p-1 hover:bg-muted rounded"
|
|
||||||
aria-label="화면 캡처"
|
|
||||||
>
|
|
||||||
<Scissors className="h-4 w-4 text-muted-foreground" />
|
|
||||||
</button>
|
|
||||||
<button
|
<button
|
||||||
onClick={() => setShowSettings((p) => !p)}
|
onClick={() => setShowSettings((p) => !p)}
|
||||||
className="p-1 hover:bg-muted rounded"
|
className="p-1 hover:bg-muted rounded"
|
||||||
@@ -221,7 +214,7 @@ export function MessengerModal() {
|
|||||||
{/* Body */}
|
{/* Body */}
|
||||||
<div className="flex flex-1 min-h-0 relative">
|
<div className="flex flex-1 min-h-0 relative">
|
||||||
<RoomList />
|
<RoomList />
|
||||||
<ChatPanel room={selectedRoom} messageInputRef={messageInputRef} />
|
<ChatPanel room={selectedRoom} messageInputRef={messageInputRef} onCaptureClick={() => setCapturing(true)} />
|
||||||
|
|
||||||
{showSettings && (
|
{showSettings && (
|
||||||
<div className="absolute inset-0 bg-background z-10 flex flex-col">
|
<div className="absolute inset-0 bg-background z-10 flex flex-col">
|
||||||
|
|||||||
Reference in New Issue
Block a user