add organization management and refine source repository view

2026-07-07 11:56:29 +09:00
parent cb185abfe3
commit 1de085790d
12 changed files with 1566 additions and 485 deletions
@@ -0,0 +1,338 @@
+import { MoreHorizontal, Plus } from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
+import { DataTableCard, type DataTableColumn, type DataTableFilter } from '../../components/data-table';
+import { useToast } from '../../components/toast';
+import { Button, Modal } from '../../components/ui';
+import { PageTitle } from '../../layout/AppLayout';
+import { formatDateTime } from '../../lib/date-format';
+import {
+  createOrganization,
+  deleteOrganization,
+  loadOrganizations,
+  updateOrganization,
+  type Organization,
+  type OrganizationType
+} from './operations-api';
+import { LoadingModal, StatusBadge, useMinimumLoading } from './operation-utils';
+
+const organizationTypes: Array<{ value: OrganizationType; label: string }> = [
+  { value: 'SCHOOL', label: '학교' },
+  { value: 'COMPANY', label: '회사' },
+  { value: 'GOVERNMENT', label: '공공기관' },
+  { value: 'LAB', label: '연구소' },
+  { value: 'OTHER', label: '기타' }
+];
+
+const emptyForm = {
+  name: '',
+  type: 'SCHOOL' as OrganizationType,
+  domain: ''
+};
+
+function organizationTypeLabel(type: OrganizationType) {
+  return organizationTypes.find((item) => item.value === type)?.label ?? type;
+}
+
+export function OrganizationsPage() {
+  const { toast } = useToast();
+  const [organizations, setOrganizations] = useState<Organization[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [failed, setFailed] = useState(false);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editing, setEditing] = useState<Organization | null>(null);
+  const [deleteTarget, setDeleteTarget] = useState<Organization | null>(null);
+  const [menuOrganization, setMenuOrganization] = useState<{ id: string; x: number; y: number } | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [form, setForm] = useState(emptyForm);
+  const loadingVisible = useMinimumLoading(loading);
+
+  const refresh = () => {
+    setLoading(true);
+    loadOrganizations()
+      .then((items) => {
+        setOrganizations(items);
+        setFailed(false);
+      })
+      .catch((error: Error) => {
+        setOrganizations([]);
+        setFailed(true);
+        toast({ type: 'error', title: '조직 조회 실패', message: error.message });
+      })
+      .finally(() => setLoading(false));
+  };
+
+  useEffect(() => {
+    refresh();
+  }, []);
+
+  useEffect(() => {
+    if (!menuOrganization) return;
+
+    const close = () => setMenuOrganization(null);
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setMenuOrganization(null);
+    };
+
+    window.addEventListener('click', close);
+    window.addEventListener('keydown', closeOnEscape);
+    return () => {
+      window.removeEventListener('click', close);
+      window.removeEventListener('keydown', closeOnEscape);
+    };
+  }, [menuOrganization]);
+
+  const rows = useMemo(
+    () => organizations.map((organization, index) => ({ ...organization, no: organizations.length - index })),
+    [organizations]
+  );
+
+  const columns = useMemo<Array<DataTableColumn<Organization>>>(
+    () => [
+      { key: 'no', header: 'No.', className: 'w-20 px-5 py-3 font-medium', cell: (row) => <span className="font-semibold">{row.no}</span> },
+      {
+        key: 'name',
+        header: '조직명',
+        className: 'px-5 py-3 font-medium',
+        cell: (row) => (
+          <div className="min-w-0">
+            <p className="truncate font-semibold">{row.name}</p>
+            <p className="mt-1 truncate text-xs text-muted-foreground">{row.id}</p>
+          </div>
+        )
+      },
+      { key: 'type', header: '유형', className: 'w-32 px-5 py-3', cell: (row) => <StatusBadge status={organizationTypeLabel(row.type)} tone="blue" /> },
+      { key: 'domain', header: '도메인', className: 'w-56 px-5 py-3', cell: (row) => <span className="font-mono text-xs text-muted-foreground">{row.domain || '-'}</span> },
+      { key: 'createdAt', header: '등록일', className: 'w-40 px-5 py-3', cell: (row) => <span className="whitespace-nowrap text-muted-foreground">{formatDateTime(row.createdAt)}</span> },
+      {
+        key: 'actions',
+        header: '',
+        className: 'w-20 px-5 py-3 text-right font-medium',
+        cell: (row) => (
+          <div className="relative flex justify-end">
+            <Button
+              variant="ghost"
+              className="size-8 px-0"
+              title="메뉴"
+              aria-label="메뉴"
+              onClick={(event) => {
+                event.stopPropagation();
+                const rect = event.currentTarget.getBoundingClientRect();
+                setMenuOrganization((prev) => (prev?.id === row.id ? null : { id: row.id, x: rect.right, y: rect.bottom + 6 }));
+              }}
+            >
+              <MoreHorizontal className="size-4" />
+            </Button>
+          </div>
+        )
+      }
+    ],
+    [menuOrganization?.id]
+  );
+
+  const filters = useMemo<Array<DataTableFilter<Organization>>>(
+    () => [
+      {
+        key: 'type',
+        label: '유형',
+        options: organizationTypes.map((type) => ({ label: type.label, value: type.value })),
+        getValue: (row) => row.type
+      }
+    ],
+    []
+  );
+
+  const closeModal = () => {
+    setModalOpen(false);
+    setEditing(null);
+    setForm(emptyForm);
+    setSaving(false);
+  };
+
+  const openCreateModal = () => {
+    setEditing(null);
+    setForm(emptyForm);
+    setModalOpen(true);
+  };
+
+  const openEditModal = (organization: Organization) => {
+    setEditing(organization);
+    setForm({
+      name: organization.name,
+      type: organization.type,
+      domain: organization.domain ?? ''
+    });
+    setModalOpen(true);
+  };
+
+  const submit = () => {
+    if (!form.name.trim()) return;
+
+    setSaving(true);
+    const payload = {
+      name: form.name.trim(),
+      type: form.type,
+      domain: form.domain.trim() || null
+    };
+    const request = editing
+      ? updateOrganization(editing.id, payload)
+      : createOrganization(payload);
+
+    request
+      .then(({ organization }) => {
+        setOrganizations((prev) => editing
+          ? prev.map((item) => item.id === organization.id ? organization : item)
+          : [organization, ...prev]);
+        toast({
+          type: 'success',
+          title: editing ? '조직 수정 완료' : '조직 등록 완료',
+          message: `${organization.name} 조직이 ${editing ? '수정' : '등록'}되었습니다.`
+        });
+        closeModal();
+      })
+      .catch((error: Error) => {
+        setSaving(false);
+        toast({ type: 'error', title: editing ? '조직 수정 실패' : '조직 등록 실패', message: error.message });
+      });
+  };
+
+  const confirmDelete = () => {
+    if (!deleteTarget) return;
+
+    setSaving(true);
+    deleteOrganization(deleteTarget.id)
+      .then(() => {
+        setOrganizations((prev) => prev.filter((organization) => organization.id !== deleteTarget.id));
+        toast({ type: 'success', title: '조직 삭제 완료', message: `${deleteTarget.name} 조직이 삭제되었습니다.` });
+        setDeleteTarget(null);
+      })
+      .catch((error: Error) => {
+        toast({ type: 'error', title: '조직 삭제 실패', message: error.message });
+      })
+      .finally(() => setSaving(false));
+  };
+
+  return (
+    <>
+      <PageTitle
+        eyebrow="운영"
+        title="조직 관리"
+        description="가입 사용자에게 연결할 회사, 학교, 기관, 연구소 정보를 관리합니다."
+        actions={
+          <Button className="h-8 px-3 text-[13px]" onClick={openCreateModal}>
+            <Plus className="size-4" />
+            조직 등록
+          </Button>
+        }
+      />
+      {failed ? (
+        <div className="mb-4 rounded-md border border-rose-500/30 bg-rose-500/10 px-4 py-3 text-sm text-rose-200">
+          조직 데이터를 불러오지 못했습니다.
+        </div>
+      ) : null}
+      <DataTableCard
+        title="목록"
+        rows={rows}
+        columns={columns}
+        filters={filters}
+        searchPlaceholder="조직명, 도메인 검색"
+        getSearchText={(row) => `${row.name} ${row.type} ${organizationTypeLabel(row.type)} ${row.domain ?? ''}`}
+        getRowKey={(row) => row.id}
+        pageSize={10}
+        minWidth={980}
+        loading={loading}
+        emptyMessage="표시할 조직 데이터가 없습니다."
+      />
+      {menuOrganization ? (() => {
+        const row = rows.find((item) => item.id === menuOrganization.id);
+        if (!row) return null;
+
+        return (
+          <div onClick={(event) => event.stopPropagation()} className="fixed z-[70] min-w-32 overflow-hidden rounded-md border border-border bg-card py-1 text-left shadow-xl" style={{ left: menuOrganization.x, top: menuOrganization.y, transform: 'translateX(-100%)' }}>
+            <button
+              type="button"
+              className="block w-full px-3 py-2 text-left text-xs text-foreground hover:bg-muted"
+              onClick={() => {
+                setMenuOrganization(null);
+                openEditModal(row);
+              }}
+            >
+              수정
+            </button>
+            <button
+              type="button"
+              className="block w-full px-3 py-2 text-left text-xs text-rose-300 hover:bg-muted hover:text-rose-200"
+              onClick={() => {
+                setMenuOrganization(null);
+                setDeleteTarget(row);
+              }}
+            >
+              삭제
+            </button>
+          </div>
+        );
+      })() : null}
+      <Modal
+        open={modalOpen}
+        title={editing ? '조직 수정' : '조직 등록'}
+        onClose={closeModal}
+        footer={
+          <>
+            <Button variant="outline" onClick={closeModal} disabled={saving}>취소</Button>
+            <Button onClick={submit} disabled={!form.name.trim() || saving}>{saving ? '저장 중' : editing ? '수정' : '등록'}</Button>
+          </>
+        }
+      >
+        <div className="space-y-4">
+          <label className="block">
+            <span className="text-xs font-medium text-muted-foreground">조직명</span>
+            <input
+              className="mt-2 h-9 w-full rounded-md border border-input bg-background px-3 text-sm text-foreground outline-none placeholder:text-muted-foreground focus:ring-2 focus:ring-ring"
+              value={form.name}
+              onChange={(event) => setForm((prev) => ({ ...prev, name: event.target.value }))}
+              placeholder="예: 영남대학교"
+            />
+          </label>
+          <label className="block">
+            <span className="text-xs font-medium text-muted-foreground">유형</span>
+            <select
+              className="mt-2 h-9 w-full rounded-md border border-input bg-background px-3 text-sm text-foreground outline-none focus:ring-2 focus:ring-ring"
+              value={form.type}
+              onChange={(event) => setForm((prev) => ({ ...prev, type: event.target.value }))}
+            >
+              {organizationTypes.map((type) => (
+                <option key={type.value} value={type.value}>{type.label}</option>
+              ))}
+            </select>
+          </label>
+          <label className="block">
+            <span className="text-xs font-medium text-muted-foreground">도메인</span>
+            <input
+              className="mt-2 h-9 w-full rounded-md border border-input bg-background px-3 font-mono text-sm text-foreground outline-none placeholder:text-muted-foreground focus:ring-2 focus:ring-ring"
+              value={form.domain}
+              onChange={(event) => setForm((prev) => ({ ...prev, domain: event.target.value }))}
+              placeholder="yu.ac.kr"
+            />
+          </label>
+        </div>
+      </Modal>
+      <Modal
+        open={Boolean(deleteTarget)}
+        title="조직 삭제"
+        onClose={() => {
+          if (!saving) setDeleteTarget(null);
+        }}
+        footer={
+          <>
+            <Button variant="outline" onClick={() => setDeleteTarget(null)} disabled={saving}>취소</Button>
+            <Button onClick={confirmDelete} disabled={saving}>{saving ? '삭제 중' : '삭제'}</Button>
+          </>
+        }
+      >
+        <p className="text-sm text-muted-foreground">
+          {deleteTarget?.name ?? '-'} 조직을 삭제하시겠습니까? 삭제된 조직은 목록과 선택 항목에서 숨겨집니다.
+        </p>
+      </Modal>
+      <LoadingModal open={loadingVisible} />
+    </>
+  );
+}