+
{isLoading ? (
) : filteredAlerts.length > 0 ? (
filteredAlerts.map((alert) => (
@@ -207,12 +163,10 @@ const Alerts = () => {
/>
))
) : (
-
-
- {hasSearchQuery && alerts.length > 0
- ? "검색 결과가 없습니다."
- : "공지사항이 없습니다."}
-
+
+ {hasSearchQuery && alerts.length > 0
+ ? "검색 결과가 없습니다."
+ : "공지사항이 없습니다."}
)}
diff --git a/src/components/Tabs/Alerts/MyAlertsView.tsx b/src/components/Tabs/Alerts/MyAlertsView.tsx
deleted file mode 100644
index 2ee3fe61..00000000
--- a/src/components/Tabs/Alerts/MyAlertsView.tsx
+++ /dev/null
@@ -1,284 +0,0 @@
-import { useState, useEffect, useCallback, useMemo } from "react";
-import {
- getSubscriptions,
- getMySubscriptions,
- getMyAlerts,
- subscribeDepartment,
- unsubscribeDepartment,
-} from "@/apis";
-import type { Department, Subscription, GeneralAlert } from "@/types/api";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import {
- Popover,
- PopoverContent,
- PopoverTrigger,
-} from "@/components/ui/popover";
-import {
- Command,
- CommandEmpty,
- CommandGroup,
- CommandInput,
- CommandItem,
- CommandList,
-} from "@/components/ui/command";
-import { X, Bell, Loader2, Search } from "lucide-react";
-import { toast } from "sonner";
-import AlertItem from "./AlertItem";
-import { captureErrorLog } from '@/utils/logger';
-import { matchesAlertQuery } from "./alertSearchUtils";
-import { sendAlertsSubscriptionChange } from '@/utils/analytics';
-
-interface MyAlertsViewProps {
- searchQuery: string;
-}
-
-const MyAlertsView = ({ searchQuery }: MyAlertsViewProps) => {
- const [departments, setDepartments] = useState
([]);
- const [mySubscriptions, setMySubscriptions] = useState([]);
- const [myAlerts, setMyAlerts] = useState([]);
- const [isLoading, setIsLoading] = useState(true);
- const [isSubscribing, setIsSubscribing] = useState(false);
- const [isDepartmentsLoaded, setIsDepartmentsLoaded] = useState(false);
- const [isLoadingDepartments, setIsLoadingDepartments] = useState(false);
- const [open, setOpen] = useState(false);
-
- // 전체 학과 목록 로드 (드롭다운 열 때만)
- const loadDepartments = useCallback(async () => {
- if (isDepartmentsLoaded || isLoadingDepartments) return;
-
- setIsLoadingDepartments(true);
- try {
- const result = await getSubscriptions();
- if (result.success && Array.isArray(result.data)) {
- setDepartments(result.data);
- setIsDepartmentsLoaded(true);
- }
- } finally {
- setIsLoadingDepartments(false);
- }
- }, [isDepartmentsLoaded, isLoadingDepartments]);
-
- // 내 구독 + 내 공지 로드
- const loadMyData = useCallback(async () => {
- setIsLoading(true);
- try {
- const [subscriptionsResult, alertsResult] = await Promise.all([
- getMySubscriptions(),
- getMyAlerts(),
- ]);
-
- if (subscriptionsResult.success && Array.isArray(subscriptionsResult.data)) {
- setMySubscriptions(subscriptionsResult.data);
- }
-
- if (alertsResult.success && Array.isArray(alertsResult.data)) {
- setMyAlerts(alertsResult.data);
- }
- } catch (error) {
- captureErrorLog("Failed to load my data:", error);
- toast.error("데이터를 불러오는데 실패했습니다.");
- } finally {
- setIsLoading(false);
- }
- }, []);
-
- // Popover 열릴 때 학과 목록 로드
- const handleOpenChange = (isOpen: boolean) => {
- setOpen(isOpen);
- if (isOpen) {
- loadDepartments();
- }
- };
-
- // 초기 로드 (내 구독 + 내 공지만)
- useEffect(() => {
- loadMyData();
- }, [loadMyData]);
-
- // 학과 구독
- const handleSubscribe = async (departmentId: number) => {
- // 이미 구독 중인지 확인
- if (mySubscriptions.some((sub) => sub.department.id === departmentId)) {
- toast.info("이미 구독 중인 학과입니다.");
- return;
- }
-
- setIsSubscribing(true);
- try {
- const result = await subscribeDepartment(departmentId);
- if (result.success) {
- const departmentName = departments.find(
- (department) => department.id === departmentId,
- )?.name;
- if (departmentName) {
- sendAlertsSubscriptionChange(departmentName, 'subscribe');
- }
- toast.success("학과 구독 완료!");
- await loadMyData(); // 목록 새로고침
- } else {
- toast.error(result.error?.message || "구독에 실패했습니다.");
- }
- } catch (error) {
- captureErrorLog("Subscribe error:", error);
- toast.error("구독 중 오류가 발생했습니다.");
- } finally {
- setIsSubscribing(false);
- }
- };
-
- // 구독 취소
- const handleUnsubscribe = async (departmentId: number) => {
- try {
- const result = await unsubscribeDepartment(departmentId);
- if (result.success) {
- const departmentName = mySubscriptions.find(
- (subscription) => subscription.department.id === departmentId,
- )?.department.name;
- if (departmentName) {
- sendAlertsSubscriptionChange(departmentName, 'unsubscribe');
- }
- toast.success("구독 취소 완료");
- await loadMyData(); // 목록 새로고침
- } else {
- toast.error(result.error?.message || "구독 취소에 실패했습니다.");
- }
- } catch (error) {
- captureErrorLog("Unsubscribe error:", error);
- toast.error("구독 취소 중 오류가 발생했습니다.");
- }
- };
-
- // 구독 가능한 학과만 필터링 (이미 구독 중인 학과 제외)
- const availableDepartments = departments.filter(
- (dept) => !mySubscriptions.some((sub) => sub.department.id === dept.id)
- );
-
- // 공지사항 시간순 정렬 (최신순)
- const sortedAlerts = useMemo(() => {
- return [...myAlerts].sort((a, b) => {
- const dateA = new Date(a.publishedAt).getTime();
- const dateB = new Date(b.publishedAt).getTime();
- return dateB - dateA;
- });
- }, [myAlerts]);
-
- const filteredAlerts = useMemo(
- () => sortedAlerts.filter((alert) => matchesAlertQuery(alert, searchQuery)),
- [searchQuery, sortedAlerts]
- );
-
- return (
-
- {/* 학과 구독 섹션 */}
-
-
-
- 학과 구독
-
-
- {/* 학과 검색 Combobox */}
-
-
-
-
-
-
-
-
- {isLoadingDepartments ? (
-
-
-
- ) : (
- <>
- 검색 결과가 없습니다
-
- {availableDepartments.map((dept) => (
- {
- handleSubscribe(dept.id);
- setOpen(false);
- }}
- >
- {dept.name}
-
- ))}
-
-
- )}
-
-
-
-
-
- {/* 구독 중인 학과 뱃지 */}
- {mySubscriptions.length > 0 && (
-
- {mySubscriptions.map((sub) => (
- handleUnsubscribe(sub.department.id)}
- >
- {sub.department.name}
-
-
- ))}
-
- )}
-
-
- {/* 구분선 */}
-
-
- {/* 내 공지사항 목록 */}
-
- {isLoading ? (
-
-
-
- ) : filteredAlerts.length > 0 ? (
-
- {filteredAlerts.map((alert) => (
-
- ))}
-
- ) : mySubscriptions.length === 0 ? (
-
-
구독한 학과가 없습니다.
-
위에서 학과를 선택해 구독해보세요!
-
- ) : sortedAlerts.length === 0 ? (
-
- ) : (
-
- )}
-
-
+
+
+ {publication.authorNickname}
+
+
+
+
+ {publication.likeCount}
+
+
+
+ {publication.cloneCount}
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
+
+
+
+ {([
+ ["latest", "최신순"],
+ ["likes", "좋아요순"],
+ ["clones", "복제순"],
+ ] as const).map(([value, label]) => (
+
+ ))}
+
+
+
+ {communityUnavailable && publications.length === 0 && (
+
+ 커뮤니티에 연결할 수 없어 함께 제공되는 기본 템플릿을 표시합니다.
+
+ )}
+
+ {loading ? (
+
+
+
+ ) : publications.length > 0 ? (
+
+ {publications.map((publication) => {
+ const preview = previews[publication.templateId];
+ return preview ? (
+
void handleClone(publication)}
+ onLike={() => void handleLike(publication)}
+ />
+ ) : null;
+ })}
+
+ ) : !communityUnavailable ? (
+
+ {query ? "검색 결과가 없습니다." : "아직 게시된 템플릿이 없습니다."}
+
+ ) : null}
+
+ {hasMore && (
+
+
+
+ )}
+
+ {communityUnavailable && publications.length === 0 && (
+
+
+
+
+ )}
+
);
};
diff --git a/src/pages/TemplateListPage.tsx b/src/pages/TemplateListPage.tsx
index 81e7ad29..959ee194 100644
--- a/src/pages/TemplateListPage.tsx
+++ b/src/pages/TemplateListPage.tsx
@@ -2,11 +2,13 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useNavigate } from 'react-router';
import {
AlertTriangle,
+ Cloud,
+ CloudOff,
DatabaseBackup,
FileText,
- FileUp,
LayoutTemplate,
Plus,
+ RefreshCw,
Sparkles,
} from 'lucide-react';
import { TemplateCard } from '@/components/Editor/TemplatePreview/TemplateCard';
@@ -25,21 +27,13 @@ import {
createTemplateBackup,
countQuarantinedRecords,
deleteLocalTemplate,
- importSharedTemplate,
isTemplateBackupValidationError,
- getLocalTemplate,
listQuarantinedRecords,
listLocalTemplates,
MAX_TEMPLATE_BACKUP_BYTES,
+ PublishedTemplateDeleteError,
restoreTemplateBackup,
-} from '@/utils/templateStorage';
-import {
- createTemplateShareUrl,
- downloadTemplatePayload,
- isTemplateShareValidationError,
- MAX_SHARE_FILE_BYTES,
- validateTemplateSharePayload,
-} from '@/utils/templateShare';
+} from '@/storage/templates/repository';
import { createBundledDefaultTemplate } from '@/utils/defaultTemplate';
import {
resolveLatestBulletin,
@@ -50,12 +44,34 @@ import { downloadJson } from '@/utils/download';
import { captureErrorLog, warnLog } from '@/utils/logger';
import { UserFacingError } from '@/errors/userFacingError';
import { recordBreadcrumb } from '@/monitoring';
+import {
+ isPublicationOutdated,
+ publishLocalTemplate,
+ refreshPublicationMetadata,
+ unpublishLocalTemplate,
+} from '@/apis/supabase/community';
+import { SupabaseConfigurationError } from '@/apis/supabase/client';
+import {
+ getTemplateAccountStates,
+} from '@/storage/account/syncRepository';
+import type { AccountSyncStatus } from '@/types/account';
+import { syncAccount } from '@/utils/accountSync';
+import { getAccountSyncFeedback } from '@/utils/accountSyncResult';
+import { isExpectedNetworkFailure } from '@/utils/networkFailure';
+import { isLoggedIn, startGoogleLogin } from '@/utils/oauth';
import {
sendTemplateApply,
sendTemplateCreateStart,
sendTemplateDelete,
} from '@/utils/analytics';
+interface TemplateListItem extends TemplateSummary {
+ syncId?: string;
+ accountSyncStatus: AccountSyncStatus;
+ published: boolean;
+ publicationOutdated: boolean;
+}
+
function toSummary(template: Template): TemplateSummary {
return {
templateId: template.templateId,
@@ -73,12 +89,24 @@ function toSummary(template: Template): TemplateSummary {
function reportTemplateOperationFailure(message: string, error: unknown) {
if (
isTemplateBackupValidationError(error) ||
- isTemplateShareValidationError(error)
+ error instanceof UserFacingError ||
+ error instanceof PublishedTemplateDeleteError ||
+ error instanceof SupabaseConfigurationError ||
+ isExpectedNetworkFailure(error)
) {
recordBreadcrumb(
- 'template.validation',
+ 'template.operation',
message,
- { validation_code: error.code },
+ {
+ reason:
+ error instanceof UserFacingError
+ ? error.code
+ : error instanceof SupabaseConfigurationError
+ ? 'not_configured'
+ : isExpectedNetworkFailure(error)
+ ? 'network'
+ : 'local_state',
+ },
'warning',
);
warnLog(message, error);
@@ -95,11 +123,12 @@ export const TemplateListPage = () => {
const [defaultTemplate, setDefaultTemplate] = useState(
createBundledDefaultTemplate,
);
- const [templates, setTemplates] = useState
([]);
+ const [templates, setTemplates] = useState([]);
const [loading, setLoading] = useState(true);
const [activeTab, setActiveTab] = useState<'owned' | 'cloned'>('owned');
const [actionLoading, setActionLoading] = useState(null);
- const importInputRef = useRef(null);
+ const [syncing, setSyncing] = useState(false);
+ const [accountConnected, setAccountConnected] = useState(false);
const restoreInputRef = useRef(null);
const loadRequestIdRef = useRef(0);
const [quarantinedCount, setQuarantinedCount] = useState(0);
@@ -119,11 +148,46 @@ export const TemplateListPage = () => {
try {
const storedTemplates = await listLocalTemplates();
const nextQuarantinedCount = await countQuarantinedRecords();
+ let connected = false;
+ try {
+ connected = await isLoggedIn();
+ if (connected) {
+ await refreshPublicationMetadata();
+ }
+ } catch (error) {
+ reportTemplateOperationFailure(
+ 'Failed to refresh publication metadata',
+ error,
+ );
+ }
+ const accountStates = await getTemplateAccountStates(
+ storedTemplates.map((stored) => stored.template.id),
+ );
+ const nextTemplates = await Promise.all(
+ storedTemplates.map(async (stored): Promise => {
+ const syncId = stored.template.id;
+ const accountState = accountStates.get(syncId) ?? {
+ status: 'local' as const,
+ isPublished: false,
+ };
+ return {
+ ...toSummary(stored.template),
+ syncId,
+ accountSyncStatus: accountState.status,
+ published: accountState.isPublished,
+ publicationOutdated:
+ accountState.isPublished &&
+ (await isPublicationOutdated(
+ stored,
+ accountState.publishedContentHash,
+ )),
+ };
+ }),
+ );
if (requestId !== loadRequestIdRef.current) return;
- setTemplates(
- storedTemplates.map((stored) => toSummary(stored.template)),
- );
+ setTemplates(nextTemplates);
+ setAccountConnected(connected);
// Reading is what moves an unreadable record into quarantine, so the
// count is refreshed here rather than on mount.
setQuarantinedCount(nextQuarantinedCount);
@@ -156,7 +220,15 @@ export const TemplateListPage = () => {
}, [loadTemplates]);
const ownedTemplates = useMemo(
- () => [toSummary(defaultTemplate), ...templates.filter((template) => !template.cloned)],
+ (): TemplateListItem[] => [
+ {
+ ...toSummary(defaultTemplate),
+ accountSyncStatus: 'local',
+ published: false,
+ publicationOutdated: false,
+ },
+ ...templates.filter((template) => !template.cloned),
+ ],
[defaultTemplate, templates],
);
const clonedTemplates = useMemo(
@@ -203,7 +275,14 @@ export const TemplateListPage = () => {
});
};
- const handleDeleteTemplate = async (template: TemplateSummary) => {
+ const handleDeleteTemplate = async (template: TemplateListItem) => {
+ if (template.published) {
+ toast({
+ title: '게시 중인 템플릿',
+ description: '게시를 내린 뒤 삭제해 주세요.',
+ });
+ return;
+ }
if (!confirm(`“${template.name}” 템플릿을 삭제하시겠습니까?`)) return;
try {
if (
@@ -233,45 +312,73 @@ export const TemplateListPage = () => {
title: '삭제 완료',
description: '이 기기의 저장소에서 삭제했습니다.',
});
+ window.dispatchEvent(new Event('linku:templates-changed'));
} catch (error) {
- captureErrorLog('Failed to delete local template', error);
+ reportTemplateOperationFailure('Failed to delete local template', error);
toast({
title: '삭제 실패',
- description: '이 기기의 저장소에서 템플릿을 삭제하지 못했습니다.',
+ description:
+ error instanceof Error
+ ? error.message
+ : '이 기기의 저장소에서 템플릿을 삭제하지 못했습니다.',
variant: 'destructive',
});
}
};
- const handleShareTemplate = async (templateId: number) => {
- setActionLoading(templateId);
+ const ensureAccount = async (): Promise => {
+ if (await isLoggedIn()) return true;
+ const result = await startGoogleLogin();
+ if (!result.success) {
+ toast({ title: 'Google 로그인 필요', description: result.error });
+ return false;
+ }
+ setAccountConnected(true);
+ return true;
+ };
+
+ const handleSync = async () => {
+ setSyncing(true);
try {
- const stored =
- templateId === UNSAVED_TEMPLATE_ID
- ? { template: defaultTemplate }
- : await getLocalTemplate(templateId);
- if (!stored) throw new Error('이 기기에서 템플릿을 찾을 수 없습니다.');
+ if (!(await ensureAccount())) return;
+ const result = await syncAccount();
+ const feedback = getAccountSyncFeedback(result);
+ toast({
+ title: feedback.title,
+ description: feedback.description,
+ variant: feedback.destructive ? 'destructive' : 'default',
+ });
+ await loadTemplates();
+ } catch (error) {
+ reportTemplateOperationFailure('Failed to sync templates', error);
+ toast({
+ title: '동기화 실패',
+ description:
+ error instanceof Error ? error.message : '잠시 후 다시 시도해 주세요.',
+ variant: 'destructive',
+ });
+ } finally {
+ setSyncing(false);
+ }
+ };
- const share = await createTemplateShareUrl(stored.template);
- if (share.mode === 'url') {
- await navigator.clipboard.writeText(share.url);
- toast({
- title: '공유 링크 복사 완료',
- description: '템플릿 데이터는 링크의 fragment에만 들어 있습니다.',
- });
- } else {
- downloadTemplatePayload(share.payload);
- toast({
- title: '공유 파일 저장 완료',
- description: '링크에 담기 큰 템플릿이라 파일로 저장했습니다.',
- });
- }
+ const handlePublish = async (template: TemplateListItem) => {
+ if (!template.syncId) return;
+ setActionLoading(template.templateId);
+ try {
+ if (!(await ensureAccount())) return;
+ await publishLocalTemplate(template.syncId);
+ await loadTemplates();
+ toast({
+ title: template.published ? '게시물 업데이트 완료' : '템플릿 게시 완료',
+ description: '커뮤니티에 현재 저장본을 공개했습니다.',
+ });
} catch (error) {
- captureErrorLog('Failed to share template', error);
+ reportTemplateOperationFailure('Failed to publish template', error);
toast({
- title: '공유 실패',
+ title: '게시 실패',
description:
- error instanceof Error ? error.message : '공유 데이터를 만들지 못했습니다.',
+ error instanceof Error ? error.message : '잠시 후 다시 시도해 주세요.',
variant: 'destructive',
});
} finally {
@@ -279,48 +386,25 @@ export const TemplateListPage = () => {
}
};
- const handleImportFile = async (file: File | undefined) => {
- if (!file) return;
+ const handleUnpublish = async (template: TemplateListItem) => {
+ if (!template.syncId || !confirm(`“${template.name}” 게시를 내리시겠습니까?`)) {
+ return;
+ }
+ setActionLoading(template.templateId);
try {
- let value: unknown;
- try {
- if (file.size > MAX_SHARE_FILE_BYTES) {
- throw new Error('템플릿 가져오기 파일은 256KB 이하여야 합니다.');
- }
- value = JSON.parse(await file.text()) as unknown;
- validateTemplateSharePayload(value);
- } catch (error) {
- toast({
- title: '가져오기 실패',
- description:
- error instanceof Error ? error.message : '템플릿 파일을 읽지 못했습니다.',
- variant: 'destructive',
- });
- return;
- }
-
- try {
- const imported = await importSharedTemplate(value);
- await loadTemplates();
- setActiveTab('cloned');
- toast({
- title: '템플릿 가져오기 완료',
- description: `“${imported.template.name}”을 이 기기에 저장했습니다.`,
- });
- } catch (error) {
- reportTemplateOperationFailure(
- 'Failed to store an imported template',
- error,
- );
- toast({
- title: '가져오기 실패',
- description:
- error instanceof Error ? error.message : '템플릿을 저장하지 못했습니다.',
- variant: 'destructive',
- });
- }
+ await unpublishLocalTemplate(template.syncId);
+ await loadTemplates();
+ toast({ title: '게시를 내렸습니다' });
+ } catch (error) {
+ reportTemplateOperationFailure('Failed to unpublish template', error);
+ toast({
+ title: '게시 내리기 실패',
+ description:
+ error instanceof Error ? error.message : '잠시 후 다시 시도해 주세요.',
+ variant: 'destructive',
+ });
} finally {
- if (importInputRef.current) importInputRef.current.value = '';
+ setActionLoading(null);
}
};
@@ -368,6 +452,7 @@ export const TemplateListPage = () => {
parsedBackup,
);
await loadTemplates();
+ window.dispatchEvent(new Event('linku:templates-changed'));
const hasRestoreWarnings =
result.skipped > 0 || result.failedAssets > 0;
toast({
@@ -429,56 +514,116 @@ export const TemplateListPage = () => {
return (
- {visibleTemplates.map((template) => (
-
navigate(`/editor/${template.templateId}`)
- }
- isSelected={
- selectedTemplateId === null
- ? template.templateId === UNSAVED_TEMPLATE_ID
- : selectedTemplateId === template.templateId
- }
- onApply={(event) => {
- event.stopPropagation();
- void handleApplyTemplate(template);
- }}
- onDelete={(event) => {
- event.stopPropagation();
- void handleDeleteTemplate(template);
- }}
- onShare={(event) => {
- event.stopPropagation();
- void handleShareTemplate(template.templateId);
- }}
- showDelete={template.templateId !== UNSAVED_TEMPLATE_ID}
- isActionLoading={actionLoading === template.templateId}
- />
- ))}
+ {visibleTemplates.map((template) => {
+ const isStored = template.templateId !== UNSAVED_TEMPLATE_ID;
+ const isBusy = actionLoading === template.templateId;
+ const syncLabel = {
+ error: '동기화 지연',
+ local: accountConnected ? '동기화 전' : '이 기기에 저장',
+ pending: '동기화 대기',
+ synced: '동기화됨',
+ }[template.accountSyncStatus];
+
+ return (
+
+ navigate(`/editor/${template.templateId}`)
+ : undefined
+ }
+ isSelected={
+ selectedTemplateId === null
+ ? !isStored
+ : selectedTemplateId === template.templateId
+ }
+ onApply={(event) => {
+ event.stopPropagation();
+ void handleApplyTemplate(template);
+ }}
+ onDelete={(event) => {
+ event.stopPropagation();
+ void handleDeleteTemplate(template);
+ }}
+ showDelete={isStored}
+ isActionLoading={isBusy}
+ />
+
+ {isStored && (
+
+
+ {template.accountSyncStatus === 'synced' ? (
+
+ ) : (
+
+ )}
+ {syncLabel}
+ {template.published && (
+
+ {template.publicationOutdated ? '업데이트 필요' : '게시됨'}
+
+ )}
+
+
+
+ {(!template.published || template.publicationOutdated) && (
+
+ )}
+ {template.published && (
+
+ )}
+
+
-
+
내 템플릿
- 로그인이나 서버 연결 없이 이 기기에 바로 저장합니다.
+ 먼저 이 기기에 저장하고, 로그인하면 여러 기기와 동기화합니다.
-
-