@farmzone/fz-template-react 1.0.2 → 1.0.4

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/config/text.ts

@@ -1,27 +1,27 @@
-export const COMMON_MESSAGES = {
-  SAVE_SUCCESS: "정상적으로 저장되었습니다.",
-  UPDATE_SUCCESS: "정상적으로 수정되었습니다.",
-  DELETE_SUCCESS: "정상적으로 삭제되었습니다.",
-};
-
-export const SERVER_ERROR_MESSAGES = {
-  SERVER_ERROR_INVALID: "유효하지 않은 요청입니다. 다시 시도해 주세요.",
-  SERVER_ERROR_NETWORK_TITLE: "서비스 연결 불가.",
-  SERVER_ERROR_NETWORK: "현재 서비스 연결이 원활하지 않습니다.\n잠시 후 다시 시도해 주세요.",
-  SERVER_ERROR_TEMP_TITLE: "일시적인 시스템 오류.",
-  SERVER_ERROR_TEMP: "일시적인 오류가 발생했습니다.\n다시 시도해 주세요.",
-};
-
-export const COMMON_API_MSG_TO_KR: Record<string, string> = {
-  // 인증
-  "Invalid login credential.": "아이디 또는 비밀번호가 잘못 되었습니다.",
-  "Account is disabled.": "계정이 비활성화되어 있습니다. 관리자에게 문의해 주세요.",
-  // 파일 업로드
-  "The upload file is empty.": "업로드할 파일이 비어 있습니다.",
-  "You can upload up to 20 files.": "파일은 최대 20개까지 업로드할 수 있습니다.",
-  "This file type is not allowed.": "허용되지 않은 파일 형식입니다.",
-  "Image files can be uploaded up to 50MB.": "이미지 파일은 최대 50MB까지 업로드할 수 있습니다.",
-  "Document files can be uploaded up to 10MB.": "기타 파일은 최대 10MB까지 업로드할 수 있습니다.",
-  // 사용자
-  "User ID already in use.": "존재하는 아이디입니다.", //
-};
+export const COMMON_MESSAGES = {
+  SAVE_SUCCESS: "정상적으로 저장되었습니다.",
+  UPDATE_SUCCESS: "정상적으로 수정되었습니다.",
+  DELETE_SUCCESS: "정상적으로 삭제되었습니다.",
+};
+
+export const SERVER_ERROR_MESSAGES = {
+  SERVER_ERROR_INVALID: "유효하지 않은 요청입니다. 다시 시도해 주세요.",
+  SERVER_ERROR_NETWORK_TITLE: "서비스 연결 불가.",
+  SERVER_ERROR_NETWORK: "현재 서비스 연결이 원활하지 않습니다.\n잠시 후 다시 시도해 주세요.",
+  SERVER_ERROR_TEMP_TITLE: "일시적인 시스템 오류.",
+  SERVER_ERROR_TEMP: "일시적인 오류가 발생했습니다.\n다시 시도해 주세요.",
+};
+
+export const COMMON_API_MSG_TO_KR: Record<string, string> = {
+  // 인증
+  "Invalid login credential.": "아이디 또는 비밀번호가 잘못 되었습니다.",
+  "Account is disabled.": "계정이 비활성화되어 있습니다. 관리자에게 문의해 주세요.",
+  // 파일 업로드
+  "The upload file is empty.": "업로드할 파일이 비어 있습니다.",
+  "You can upload up to 20 files.": "파일은 최대 20개까지 업로드할 수 있습니다.",
+  "This file type is not allowed.": "허용되지 않은 파일 형식입니다.",
+  "Image files can be uploaded up to 50MB.": "이미지 파일은 최대 50MB까지 업로드할 수 있습니다.",
+  "Document files can be uploaded up to 10MB.": "기타 파일은 최대 10MB까지 업로드할 수 있습니다.",
+  // 사용자
+  "User ID already in use.": "존재하는 아이디입니다.", //
+};

package/template/src/shared/utils/format.ts

@@ -1,11 +1,11 @@
-import dayjs from "dayjs";
-
-export const formatDateTime = (value: string | null | undefined): string => {
-  if (!value) return "-";
-  return dayjs(value).format("YYYY-MM-DD HH:mm");
-};
-
-export const formatDate = (value: string | null | undefined): string => {
-  if (!value) return "-";
-  return dayjs(value).format("YYYY-MM-DD");
-};
+import dayjs from "dayjs";
+
+export const formatDateTime = (value: string | null | undefined): string => {
+  if (!value) return "-";
+  return dayjs(value).format("YYYY-MM-DD HH:mm");
+};
+
+export const formatDate = (value: string | null | undefined): string => {
+  if (!value) return "-";
+  return dayjs(value).format("YYYY-MM-DD");
+};

package/template/src/types/auth.ts

@@ -1,10 +1,10 @@
-export interface LoginResponse {
-  id: string;
-  userId: string;
-  name: string;
-  role: string;
-  accessToken: string;
-  refreshToken: string;
-  accessTokenExpiresAt: string;
-  refreshTokenExpiresAt: string;
-}
+export interface LoginResponse {
+  id: string;
+  userId: string;
+  name: string;
+  role: string;
+  accessToken: string;
+  refreshToken: string;
+  accessTokenExpiresAt: string;
+  refreshTokenExpiresAt: string;
+}

package/template/src/types/comment.ts

@@ -1,33 +1,33 @@
-export interface CommentReply {
-  userId: number;
-}
-
-export interface Comment {
-  id: number;
-  targetType: string;
-  targetId: number;
-  parentCommentId: number | null;
-  userId: number | null;
-  userName: string;
-  content: string;
-  replies?: Array<Comment>;
-  createdAt: string;
-  updatedAt: string | null;
-  deletedAt: string | null;
-  mentionUserIds?: Array<number>;
-}
-
-export interface CommentForm {
-  targetType: string;
-  targetId: number;
-  parentCommentId: number | null;
-  content: string;
-  mentionUserIds?: Array<number>;
-}
-
-export type CommentTargetType = "SAMPLE" | "POST";
-
-export interface CommentEditForm {
-  content: string;
-  mentionUserIds?: Array<number>;
-}
+export interface CommentReply {
+  userId: number;
+}
+
+export interface Comment {
+  id: number;
+  targetType: string;
+  targetId: number;
+  parentCommentId: number | null;
+  userId: number | null;
+  userName: string;
+  content: string;
+  replies?: Array<Comment>;
+  createdAt: string;
+  updatedAt: string | null;
+  deletedAt: string | null;
+  mentionUserIds?: Array<number>;
+}
+
+export interface CommentForm {
+  targetType: string;
+  targetId: number;
+  parentCommentId: number | null;
+  content: string;
+  mentionUserIds?: Array<number>;
+}
+
+export type CommentTargetType = "SAMPLE" | "POST";
+
+export interface CommentEditForm {
+  content: string;
+  mentionUserIds?: Array<number>;
+}