@farmzone/fz-template-react 0.0.1 → 1.0.1

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

@@ -0,0 +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>
+  );
+}

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

@@ -0,0 +1,70 @@
+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;
+}
+
+/** 예시용 파일 카드 UI — FilePreviewViewer와 분리, 사용처에서 자유롭게 커스터마이징 */
+export default function FilePreviewCard(props: FilePreviewCardProps) {
+  const { src, fileName, fileSize, onClick, className } = props;
+
+  const fileType = 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-40 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-40 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>
+  );
+}

package/template/src/shared/config/text.ts

@@ -0,0 +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.": "존재하는 아이디입니다.", //
+};

package/template/src/shared/config/type.ts

@@ -0,0 +1,40 @@
+import type { ReactNode } from "react";
+
+export interface DefaultParamsType {
+  page: number;
+  size: number;
+  keywordType: string;
+  keyword: string;
+  sortBy: string;
+  sortOrder: string;
+}
+
+export interface SelectOptionType {
+  label: string | ReactNode;
+  value: string | boolean;
+}
+
+export interface optionType {
+  label: string;
+  value: string;
+}
+
+export type UploadListType = "farm" | "cattle" | "slaughter" | "parentage" | "semen" | "pig";
+
+export interface OptionalParamsType {
+  // date
+  startDate?: string;
+  endDate?: string;
+  // log
+  role?: string;
+  pageOption?: string;
+}
+
+export interface TotalParamsType extends OptionalParamsType, DefaultParamsType {}
+
+export interface ExcelUploadResponseDataType {
+  id: number;
+  status: "PROCESSED" | "ERROR";
+  errorMessage: string | null;
+  [key: string]: string | number | null | unknown;
+}

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

@@ -0,0 +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");
+};

package/template/src/types/auth.ts

@@ -0,0 +1,10 @@
+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

@@ -0,0 +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>;
+}

package/template/src/types/common.ts

@@ -0,0 +1,19 @@
+export interface PageResponse<T> {
+  content: Array<T>;
+  totalElements: number;
+  totalPages: number;
+  page: number;
+  size: number;
+}
+
+export interface FileResponse {
+  id: number;
+  fileName: string;
+  filePath: string;
+  fileType: string;
+  fileSize: number;
+  serviceCode: string;
+  refId: number;
+  createdAt: string;
+  path?: string;
+}

package/template/src/types/dashboard.ts

@@ -0,0 +1,53 @@
+export interface DashboardSummary {
+  totalUsers: number;
+  todayJoinedUsers: number;
+  recentActiveUsers: number;
+  withdrawalRate: number;
+}
+
+export interface DashboardTrend {
+  labels: string[];
+  joinedCounts: number[];
+  withdrawnCounts: number[];
+}
+
+export interface DashboardGender {
+  maleRate: number;
+  femaleRate: number;
+  unknownRate: number;
+}
+
+export interface DashboardAgeGroup {
+  label: string;
+  count: number;
+  rate: number;
+}
+
+export interface DashboardDemographics {
+  gender: DashboardGender;
+  ageGroups: DashboardAgeGroup[];
+}
+
+export interface DashboardRecentUser {
+  id: number;
+  userId: string;
+  name: string;
+  gender: string;
+  age: number;
+  createdAt: string;
+  role: string;
+  active: boolean;
+}
+
+export interface DashboardDailyActiveUsers {
+  labels: string[];
+  counts: number[];
+}
+
+export interface UserDashboardResponse {
+  summary: DashboardSummary;
+  trend: DashboardTrend;
+  demographics: DashboardDemographics;
+  recentUsers: DashboardRecentUser[];
+  dailyActiveUsers: DashboardDailyActiveUsers;
+}

package/template/src/types/index.ts

@@ -0,0 +1,16 @@
+export type { PageResponse, FileResponse } from "./common";
+export type { LoginResponse } from "./auth";
+export type { SampleCategory, Sample, GetSamplesParams, SampleForm } from "./sample";
+export type { NoticeCategory, Post, GetPostsParams, PostForm } from "./post";
+export type { CommentReply, Comment, CommentForm, CommentTargetType, CommentEditForm } from "./comment";
+export type { UserRole, User, GetUsersParams, UserForm, UserEditForm } from "./user";
+export type { ActionLog, GetLogsParams } from "./log";
+export type {
+  UserDashboardResponse,
+  DashboardSummary,
+  DashboardTrend,
+  DashboardDemographics,
+  DashboardAgeGroup,
+  DashboardRecentUser,
+  DashboardDailyActiveUsers,
+} from "./dashboard";

package/template/src/types/log.ts

@@ -0,0 +1,21 @@
+export interface ActionLog {
+  id: number;
+  userId: string;
+  userName: string;
+  action: string;
+  target: string;
+  detail: string;
+  createdAt: string;
+}
+
+export interface GetLogsParams {
+  page: number;
+  size: number;
+  userRole?: string;
+  action?: string;
+  pageOption?: string;
+  keywordType?: string;
+  keyword?: string;
+  startDate?: string;
+  endDate?: string;
+}

package/template/src/types/post.ts

@@ -0,0 +1,32 @@
+import type { FileResponse } from "./common";
+
+export type NoticeCategory = "NOTICE";
+
+export interface Post {
+  id: number;
+  title: string;
+  content: string;
+  noticeCategory: NoticeCategory;
+  files?: Array<FileResponse>;
+  createdAt: string;
+  updatedAt: string;
+  writer: string; // User login id
+  visible: boolean;
+}
+
+export interface GetPostsParams {
+  page: number;
+  size: number;
+  title?: string;
+  noticeCategory?: string;
+  sortKey?: string;
+  sortOrder?: "asc" | "desc";
+}
+
+export interface PostForm {
+  title: string;
+  content: string;
+  noticeCategory: NoticeCategory;
+  visible: boolean;
+  writer: string;
+}

package/template/src/types/sample.ts

@@ -0,0 +1,28 @@
+export type SampleCategory = "BASIC" | "ADVANCED";
+
+export interface Sample {
+  id: number;
+  name: string;
+  description: string;
+  category: SampleCategory;
+  priority: number;
+  active: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface GetSamplesParams {
+  page: number;
+  size: number;
+  name?: string;
+  category?: string;
+  sortKey?: string;
+  sortOrder?: "asc" | "desc";
+}
+
+export interface SampleForm {
+  name: string;
+  description: string;
+  category: SampleCategory;
+  active: boolean;
+}

package/template/src/types/user.ts

@@ -0,0 +1,51 @@
+import type { FileResponse } from "./common";
+
+export type UserRole = "ADMIN" | "USER";
+
+export interface User {
+  id: number;
+  userId: string;
+  name: string;
+  role: UserRole;
+  active: boolean;
+  gender?: string;
+  birthday?: string;
+  phone?: string;
+  deletedAt?: string | null;
+  createdAt: string;
+  updatedAt?: string;
+  lastLoginAt: string | null;
+  files?: Array<FileResponse>;
+}
+
+export interface GetUsersParams {
+  page: number;
+  size: number;
+  role?: string;
+  keywordType?: string;
+  keyword?: string;
+  dateType?: string;
+  startDate?: string;
+  endDate?: string;
+}
+
+export interface UserForm {
+  userId: string;
+  password: string;
+  name: string;
+  role: UserRole;
+  gender?: string;
+  birthday?: string;
+  phone?: string;
+}
+
+export interface UserEditForm {
+  name: string;
+  role: UserRole;
+  active: boolean;
+  gender?: string;
+  birthday?: string;
+  phone?: string;
+  password?: string;
+  deleteFileIds?: Array<number>;
+}

package/template/src/vite-env.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_APP_API_HOST: string;
+  readonly VITE_APP_API_VERSION: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}