@farmzone/fz-template-react 1.0.6 → 1.0.7

package/template/src/shared/components/CommentInput.tsx

@@ -1,243 +1,243 @@
-import { useCallback, useRef, useState } from "react";
-import { useQuery } from "@tanstack/react-query";
-
-import { apiInstance } from "@/app/api/api";
-import { USER_QUERY_KEY } from "@/app/api/queryKey";
-import { usePostComment } from "@/app/api/queries";
-import type { PageResponse, User } from "@/types";
-import { Button } from "@farmzone/fz-react-ui";
-
-interface CommentInputProps {
-  // create mode
-  targetType?: string;
-  targetId?: number;
-  parentCommentId?: number | null;
-  // edit mode — when onSave is provided, calls it instead of POST API
-  initialContent?: string;
-  initialMentionUserIds?: Array<number>;
-  onSave?: (content: string, mentionUserIds: Array<number>) => Promise<void>;
-  isSaving?: boolean;
-  saveLabel?: string;
-  onCancel?: () => void;
-  // common
-  placeholder?: string;
-  onSuccess?: () => void;
-}
-
-interface ActiveMention {
-  query: string;
-  atIndex: number;
-}
-
-// Find the @mention word the cursor is currently inside
-function resolveMention(text: string, cursor: number): ActiveMention | null {
-  let i = cursor - 1;
-  while (i >= 0 && !/\s/.test(text[i])) i--;
-  const wordStart = i + 1;
-  if (wordStart >= cursor || text[wordStart] !== "@") return null;
-  return { query: text.slice(wordStart + 1, cursor), atIndex: wordStart };
-}
-
-export default function CommentInput({
-  targetType,
-  targetId,
-  parentCommentId,
-  initialContent = "",
-  initialMentionUserIds = [],
-  onSave,
-  isSaving = false,
-  saveLabel,
-  onCancel,
-  placeholder,
-  onSuccess,
-}: CommentInputProps) {
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-  const [content, setContent] = useState(initialContent);
-  const [mentionUserIds, setMentionUserIds] = useState<Array<number>>(initialMentionUserIds);
-  const [activeMention, setActiveMention] = useState<ActiveMention | null>(null);
-  const [highlightedIdx, setHighlightedIdx] = useState(0);
-
-  // Fetch users matching the current @query
-  const { data } = useQuery({
-    queryKey: [USER_QUERY_KEY, "mention", activeMention?.query],
-    queryFn: () =>
-      apiInstance
-        .get<PageResponse<User>>("/users", {
-          params: {
-            page: 0,
-            size: 8,
-            ...(activeMention?.query ? { keyword: activeMention.query, keywordType: "name" } : {}),
-          },
-        })
-        .then((r) => r.data),
-    enabled: activeMention !== null,
-    staleTime: 30_000,
-  });
-
-  const mentionUsers = data?.content ?? [];
-  const { mutateAsync: postComment, isPending } = usePostComment();
-
-  const syncMention = useCallback((text: string, cursor: number) => {
-    const next = resolveMention(text, cursor);
-    setActiveMention(next);
-    if (next) setHighlightedIdx(0);
-  }, []);
-
-  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const { value, selectionStart } = e.target;
-    setContent(value);
-    syncMention(value, selectionStart ?? value.length);
-  };
-
-  // Also update on cursor position change (arrow keys, mouse click inside textarea)
-  const handleSelect = (e: React.SyntheticEvent<HTMLTextAreaElement>) => {
-    const { value, selectionStart } = e.currentTarget;
-    syncMention(value, selectionStart ?? value.length);
-  };
-
-  const selectUser = useCallback(
-    (user: User) => {
-      if (!activeMention) return;
-      const cursor = textareaRef.current?.selectionStart ?? content.length;
-      const insertText = `@${user.name} `;
-      const newContent = content.slice(0, activeMention.atIndex) + insertText + content.slice(cursor);
-
-      setContent(newContent);
-      setMentionUserIds((ids) => (ids.includes(user.id) ? ids : [...ids, user.id]));
-      setActiveMention(null);
-
-      requestAnimationFrame(() => {
-        if (!textareaRef.current) return;
-        const newPos = activeMention.atIndex + insertText.length;
-        textareaRef.current.focus();
-        textareaRef.current.setSelectionRange(newPos, newPos);
-      });
-    },
-    [activeMention, content],
-  );
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (!activeMention || mentionUsers.length === 0) return;
-
-    if (e.key === "ArrowDown") {
-      e.preventDefault();
-      setHighlightedIdx((i) => (i + 1) % mentionUsers.length);
-    } else if (e.key === "ArrowUp") {
-      e.preventDefault();
-      setHighlightedIdx((i) => (i - 1 + mentionUsers.length) % mentionUsers.length);
-    } else if (e.key === "Enter") {
-      e.preventDefault();
-      selectUser(mentionUsers[highlightedIdx]);
-    } else if (e.key === "Escape") {
-      e.preventDefault();
-      setActiveMention(null);
-    }
-  };
-
-  const handleSubmit = async () => {
-    const trimmed = content.trim();
-    if (!trimmed) return;
-    if (onSave) {
-      await onSave(trimmed, mentionUserIds);
-    } else {
-      await postComment({
-        targetType: targetType!,
-        targetId: targetId!,
-        parentCommentId: parentCommentId ?? null,
-        content: trimmed,
-        mentionUserIds: mentionUserIds.length > 0 ? mentionUserIds : undefined,
-      });
-      setContent("");
-      setMentionUserIds([]);
-    }
-    onSuccess?.();
-  };
-
-  const isPopoverOpen = activeMention !== null && mentionUsers.length > 0;
-
-  return (
-    <div className="relative">
-      {/* @멘션 팝오버 */}
-      {isPopoverOpen && (
-        <div className="absolute bottom-full left-0 mb-1.5 w-64 bg-white border border-gray-200 rounded-lg shadow-xl z-50 overflow-hidden">
-          <div className="px-3 py-1.5 border-b border-gray-100 bg-gray-50">
-            <span className="text-[10px] font-semibold text-gray-400 tracking-wide uppercase">
-              사용자 멘션
-            </span>
-          </div>
-
-          <ul className="max-h-52 overflow-y-auto">
-            {mentionUsers.map((user, idx) => (
-              <li key={user.id}>
-                <button
-                  type="button"
-                  className={`w-full flex items-center gap-2.5 px-3 py-2 text-sm transition-colors ${
-                    idx === highlightedIdx ? "bg-blue-50" : "hover:bg-gray-50"
-                  }`}
-                  onMouseDown={(e) => e.preventDefault()} // textarea 포커스 유지
-                  onClick={() => selectUser(user)}
-                  onMouseEnter={() => setHighlightedIdx(idx)}
-                >
-                  <div className="w-7 h-7 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 text-xs font-bold shrink-0">
-                    {user.name.slice(0, 1)}
-                  </div>
-                  <div className="min-w-0 text-left">
-                    <div
-                      className={`font-medium truncate leading-snug ${
-                        idx === highlightedIdx ? "text-blue-700" : "text-gray-800"
-                      }`}
-                    >
-                      {user.name}
-                    </div>
-                    <div className="text-[11px] text-gray-400 truncate leading-snug">{user.userId}</div>
-                  </div>
-                </button>
-              </li>
-            ))}
-          </ul>
-
-          <div className="px-3 py-1.5 border-t border-gray-100 bg-gray-50">
-            <p className="text-[10px] text-gray-400">↑↓ 이동 · Enter 선택 · Esc 닫기</p>
-          </div>
-        </div>
-      )}
-
-      {/* 입력 영역 */}
-      <div className="border border-gray-200 rounded-lg overflow-hidden focus-within:border-[var(--color-main)] transition-colors">
-        <textarea
-          ref={textareaRef}
-          value={content}
-          onChange={handleChange}
-          onSelect={handleSelect}
-          onKeyDown={handleKeyDown}
-          placeholder={placeholder ?? "댓글을 입력하세요. @를 입력하면 사용자를 멘션할 수 있습니다."}
-          rows={3}
-          className="w-full px-3 py-2.5 text-sm resize-none focus:outline-none bg-white"
-        />
-        <div className="flex items-center justify-between px-3 py-2 border-t border-gray-100 bg-gray-50">
-          <span className="text-[11px] text-gray-400">
-            {mentionUserIds.length > 0
-              ? `${mentionUserIds.length}명 멘션됨`
-              : "@를 입력해 사용자를 멘션하세요"}
-          </span>
-          <div className="flex items-center gap-2">
-            {onCancel && (
-              <Button type="button" variant="outline" size="sm" onClick={onCancel}>
-                취소
-              </Button>
-            )}
-            <Button
-              type="button"
-              variant="save"
-              size="sm"
-              onClick={() => void handleSubmit()}
-              disabled={!content.trim() || isPending || isSaving}
-            >
-              {isPending || isSaving ? `${saveLabel ?? "등록"} 중...` : (saveLabel ?? "등록")}
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
+import { useCallback, useRef, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+
+import { apiInstance } from "@/app/api/api";
+import { USER_QUERY_KEY } from "@/app/api/queryKey";
+import { usePostComment } from "@/app/api/queries";
+import type { PageResponse, User } from "@/types";
+import { Button } from "@farmzone/fz-react-ui";
+
+interface CommentInputProps {
+  // create mode
+  targetType?: string;
+  targetId?: number;
+  parentCommentId?: number | null;
+  // edit mode — when onSave is provided, calls it instead of POST API
+  initialContent?: string;
+  initialMentionUserIds?: Array<number>;
+  onSave?: (content: string, mentionUserIds: Array<number>) => Promise<void>;
+  isSaving?: boolean;
+  saveLabel?: string;
+  onCancel?: () => void;
+  // common
+  placeholder?: string;
+  onSuccess?: () => void;
+}
+
+interface ActiveMention {
+  query: string;
+  atIndex: number;
+}
+
+// Find the @mention word the cursor is currently inside
+function resolveMention(text: string, cursor: number): ActiveMention | null {
+  let i = cursor - 1;
+  while (i >= 0 && !/\s/.test(text[i])) i--;
+  const wordStart = i + 1;
+  if (wordStart >= cursor || text[wordStart] !== "@") return null;
+  return { query: text.slice(wordStart + 1, cursor), atIndex: wordStart };
+}
+
+export default function CommentInput({
+  targetType,
+  targetId,
+  parentCommentId,
+  initialContent = "",
+  initialMentionUserIds = [],
+  onSave,
+  isSaving = false,
+  saveLabel,
+  onCancel,
+  placeholder,
+  onSuccess,
+}: CommentInputProps) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const [content, setContent] = useState(initialContent);
+  const [mentionUserIds, setMentionUserIds] = useState<Array<number>>(initialMentionUserIds);
+  const [activeMention, setActiveMention] = useState<ActiveMention | null>(null);
+  const [highlightedIdx, setHighlightedIdx] = useState(0);
+
+  // Fetch users matching the current @query
+  const { data } = useQuery({
+    queryKey: [USER_QUERY_KEY, "mention", activeMention?.query],
+    queryFn: () =>
+      apiInstance
+        .get<PageResponse<User>>("/users", {
+          params: {
+            page: 0,
+            size: 8,
+            ...(activeMention?.query ? { keyword: activeMention.query, keywordType: "name" } : {}),
+          },
+        })
+        .then((r) => r.data),
+    enabled: activeMention !== null,
+    staleTime: 30_000,
+  });
+
+  const mentionUsers = data?.content ?? [];
+  const { mutateAsync: postComment, isPending } = usePostComment();
+
+  const syncMention = useCallback((text: string, cursor: number) => {
+    const next = resolveMention(text, cursor);
+    setActiveMention(next);
+    if (next) setHighlightedIdx(0);
+  }, []);
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const { value, selectionStart } = e.target;
+    setContent(value);
+    syncMention(value, selectionStart ?? value.length);
+  };
+
+  // Also update on cursor position change (arrow keys, mouse click inside textarea)
+  const handleSelect = (e: React.SyntheticEvent<HTMLTextAreaElement>) => {
+    const { value, selectionStart } = e.currentTarget;
+    syncMention(value, selectionStart ?? value.length);
+  };
+
+  const selectUser = useCallback(
+    (user: User) => {
+      if (!activeMention) return;
+      const cursor = textareaRef.current?.selectionStart ?? content.length;
+      const insertText = `@${user.name} `;
+      const newContent = content.slice(0, activeMention.atIndex) + insertText + content.slice(cursor);
+
+      setContent(newContent);
+      setMentionUserIds((ids) => (ids.includes(user.id) ? ids : [...ids, user.id]));
+      setActiveMention(null);
+
+      requestAnimationFrame(() => {
+        if (!textareaRef.current) return;
+        const newPos = activeMention.atIndex + insertText.length;
+        textareaRef.current.focus();
+        textareaRef.current.setSelectionRange(newPos, newPos);
+      });
+    },
+    [activeMention, content],
+  );
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (!activeMention || mentionUsers.length === 0) return;
+
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setHighlightedIdx((i) => (i + 1) % mentionUsers.length);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setHighlightedIdx((i) => (i - 1 + mentionUsers.length) % mentionUsers.length);
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      selectUser(mentionUsers[highlightedIdx]);
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      setActiveMention(null);
+    }
+  };
+
+  const handleSubmit = async () => {
+    const trimmed = content.trim();
+    if (!trimmed) return;
+    if (onSave) {
+      await onSave(trimmed, mentionUserIds);
+    } else {
+      await postComment({
+        targetType: targetType!,
+        targetId: targetId!,
+        parentCommentId: parentCommentId ?? null,
+        content: trimmed,
+        mentionUserIds: mentionUserIds.length > 0 ? mentionUserIds : undefined,
+      });
+      setContent("");
+      setMentionUserIds([]);
+    }
+    onSuccess?.();
+  };
+
+  const isPopoverOpen = activeMention !== null && mentionUsers.length > 0;
+
+  return (
+    <div className="relative">
+      {/* @멘션 팝오버 */}
+      {isPopoverOpen && (
+        <div className="absolute bottom-full left-0 mb-1.5 w-64 bg-white border border-gray-200 rounded-lg shadow-xl z-50 overflow-hidden">
+          <div className="px-3 py-1.5 border-b border-gray-100 bg-gray-50">
+            <span className="text-[10px] font-semibold text-gray-400 tracking-wide uppercase">
+              사용자 멘션
+            </span>
+          </div>
+
+          <ul className="max-h-52 overflow-y-auto">
+            {mentionUsers.map((user, idx) => (
+              <li key={user.id}>
+                <button
+                  type="button"
+                  className={`w-full flex items-center gap-2.5 px-3 py-2 text-sm transition-colors ${
+                    idx === highlightedIdx ? "bg-blue-50" : "hover:bg-gray-50"
+                  }`}
+                  onMouseDown={(e) => e.preventDefault()} // textarea 포커스 유지
+                  onClick={() => selectUser(user)}
+                  onMouseEnter={() => setHighlightedIdx(idx)}
+                >
+                  <div className="w-7 h-7 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 text-xs font-bold shrink-0">
+                    {user.name.slice(0, 1)}
+                  </div>
+                  <div className="min-w-0 text-left">
+                    <div
+                      className={`font-medium truncate leading-snug ${
+                        idx === highlightedIdx ? "text-blue-700" : "text-gray-800"
+                      }`}
+                    >
+                      {user.name}
+                    </div>
+                    <div className="text-[11px] text-gray-400 truncate leading-snug">{user.userId}</div>
+                  </div>
+                </button>
+              </li>
+            ))}
+          </ul>
+
+          <div className="px-3 py-1.5 border-t border-gray-100 bg-gray-50">
+            <p className="text-[10px] text-gray-400">↑↓ 이동 · Enter 선택 · Esc 닫기</p>
+          </div>
+        </div>
+      )}
+
+      {/* 입력 영역 */}
+      <div className="border border-gray-200 rounded-lg overflow-hidden focus-within:border-[var(--color-main)] transition-colors">
+        <textarea
+          ref={textareaRef}
+          value={content}
+          onChange={handleChange}
+          onSelect={handleSelect}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder ?? "댓글을 입력하세요. @를 입력하면 사용자를 멘션할 수 있습니다."}
+          rows={3}
+          className="w-full px-3 py-2.5 text-sm resize-none focus:outline-none bg-white"
+        />
+        <div className="flex items-center justify-between px-3 py-2 border-t border-gray-100 bg-gray-50">
+          <span className="text-[11px] text-gray-400">
+            {mentionUserIds.length > 0
+              ? `${mentionUserIds.length}명 멘션됨`
+              : "@를 입력해 사용자를 멘션하세요"}
+          </span>
+          <div className="flex items-center gap-2">
+            {onCancel && (
+              <Button type="button" variant="outline" size="sm" onClick={onCancel}>
+                취소
+              </Button>
+            )}
+            <Button
+              type="button"
+              variant="save"
+              size="sm"
+              onClick={() => void handleSubmit()}
+              disabled={!content.trim() || isPending || isSaving}
+            >
+              {isPending || isSaving ? `${saveLabel ?? "등록"} 중...` : (saveLabel ?? "등록")}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/src/shared/components/FilePreviewCard.tsx

@@ -1,71 +1,71 @@
-import { FileText } from "lucide-react";
-
-import { cn, getPreviewFileType, useStableImageSrc } from "@farmzone/fz-react-ui";
-
-interface FilePreviewCardProps {
-  src: string;
-  fileName: string;
-  fileSize?: string;
-  onClick?: () => void;
-  className?: string;
-  fileType?: "image" | "pdf" | "unsupported";
-}
-
-/** 예시용 파일 카드 UI — FilePreviewViewer와 분리, 사용처에서 자유롭게 커스터마이징 */
-export default function FilePreviewCard(props: FilePreviewCardProps) {
-  const { src, fileName, fileSize, onClick, className, fileType: fileTypeProp } = props;
-
-  const fileType = fileTypeProp ?? getPreviewFileType(src);
-  const isImage = fileType === "image";
-  const imageSrc = useStableImageSrc(isImage ? src : undefined);
-
-  const shortName = fileName.length > 12 ? `${fileName.slice(0, 10)}...` : fileName;
-
-  if (isImage) {
-    return (
-      <button
-        type="button"
-        onClick={onClick}
-        className={cn(
-          "group flex flex-col w-full h-30 rounded-lg border border-gray-200 overflow-hidden bg-white hover:border-gray-300 hover:shadow-md transition-all duration-200 text-left cursor-pointer",
-          className,
-        )}
-      >
-        <div className="flex-1 min-h-0 bg-gray-50 overflow-hidden">
-          <img
-            src={imageSrc}
-            alt={fileName}
-            className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
-          />
-        </div>
-        <div className="flex items-center justify-between gap-2 border-t border-gray-200 px-3 py-2 text-xs">
-          <span className="truncate text-gray-800">{fileName}</span>
-          {fileSize ? <span className="shrink-0 text-gray-400">{fileSize}</span> : null}
-        </div>
-      </button>
-    );
-  }
-
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className={cn(
-        "group flex flex-col w-full h-30 rounded-lg border border-gray-200 overflow-hidden bg-white hover:border-gray-300 hover:shadow-md transition-all duration-200 text-left cursor-pointer",
-        className,
-      )}
-    >
-      <div className="flex flex-1 flex-col items-center justify-center gap-2 px-3 min-h-0 bg-gray-50">
-        <FileText
-          className="size-10 text-gray-400 shrink-0 transition-transform duration-200 group-hover:scale-110 group-hover:text-gray-500"
-          strokeWidth={1.5}
-        />
-        <span className="text-sm text-gray-700 truncate max-w-full text-center">{shortName}</span>
-      </div>
-      <div className="flex items-center justify-between gap-2 border-t border-gray-200 px-3 py-2 text-xs">
-        <span className="truncate text-gray-800">{fileName}</span>
-        {fileSize ? <span className="shrink-0 text-gray-400">{fileSize}</span> : null}
-      </div>
-    </button>
-  );
-}
+import { FileText } from "lucide-react";
+
+import { cn, getPreviewFileType, useStableImageSrc } from "@farmzone/fz-react-ui";
+
+interface FilePreviewCardProps {
+  src: string;
+  fileName: string;
+  fileSize?: string;
+  onClick?: () => void;
+  className?: string;
+  fileType?: "image" | "pdf" | "unsupported";
+}
+
+/** 예시용 파일 카드 UI — FilePreviewViewer와 분리, 사용처에서 자유롭게 커스터마이징 */
+export default function FilePreviewCard(props: FilePreviewCardProps) {
+  const { src, fileName, fileSize, onClick, className, fileType: fileTypeProp } = props;
+
+  const fileType = fileTypeProp ?? getPreviewFileType(src);
+  const isImage = fileType === "image";
+  const imageSrc = useStableImageSrc(isImage ? src : undefined);
+
+  const shortName = fileName.length > 12 ? `${fileName.slice(0, 10)}...` : fileName;
+
+  if (isImage) {
+    return (
+      <button
+        type="button"
+        onClick={onClick}
+        className={cn(
+          "group flex flex-col w-full h-30 rounded-lg border border-gray-200 overflow-hidden bg-white hover:border-gray-300 hover:shadow-md transition-all duration-200 text-left cursor-pointer",
+          className,
+        )}
+      >
+        <div className="flex-1 min-h-0 bg-gray-50 overflow-hidden">
+          <img
+            src={imageSrc}
+            alt={fileName}
+            className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
+          />
+        </div>
+        <div className="flex items-center justify-between gap-2 border-t border-gray-200 px-3 py-2 text-xs">
+          <span className="truncate text-gray-800">{fileName}</span>
+          {fileSize ? <span className="shrink-0 text-gray-400">{fileSize}</span> : null}
+        </div>
+      </button>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        "group flex flex-col w-full h-30 rounded-lg border border-gray-200 overflow-hidden bg-white hover:border-gray-300 hover:shadow-md transition-all duration-200 text-left cursor-pointer",
+        className,
+      )}
+    >
+      <div className="flex flex-1 flex-col items-center justify-center gap-2 px-3 min-h-0 bg-gray-50">
+        <FileText
+          className="size-10 text-gray-400 shrink-0 transition-transform duration-200 group-hover:scale-110 group-hover:text-gray-500"
+          strokeWidth={1.5}
+        />
+        <span className="text-sm text-gray-700 truncate max-w-full text-center">{shortName}</span>
+      </div>
+      <div className="flex items-center justify-between gap-2 border-t border-gray-200 px-3 py-2 text-xs">
+        <span className="truncate text-gray-800">{fileName}</span>
+        {fileSize ? <span className="shrink-0 text-gray-400">{fileSize}</span> : null}
+      </div>
+    </button>
+  );
+}