chore: test deploy snapshot
This commit is contained in:
File diff suppressed because one or more lines are too long
@@ -14,6 +14,7 @@ import { registerPlanRoutes } from './routes/plan.js';
|
||||
import { registerPhotoPrismRoutes } from './routes/photoprism.js';
|
||||
import { registerReaderRoutes } from './routes/reader.js';
|
||||
import { registerResourceManagerRoutes } from './routes/resource-manager.js';
|
||||
import { registerPlayAppRoutes } from './routes/play-app.js';
|
||||
import { registerRuntimeRoutes } from './routes/runtime.js';
|
||||
import { registerServerCommandRoutes } from './routes/server-command.js';
|
||||
import { registerSchemaRoutes } from './routes/schema.js';
|
||||
@@ -92,6 +93,7 @@ export function createApp() {
|
||||
app.register(registerNotificationRoutes);
|
||||
app.register(registerPlanRoutes);
|
||||
app.register(registerPhotoPrismRoutes);
|
||||
app.register(registerPlayAppRoutes);
|
||||
app.register(registerReaderRoutes);
|
||||
app.register(registerResourceManagerRoutes);
|
||||
app.register(registerRuntimeRoutes);
|
||||
|
||||
560
etc/servers/work-server/src/routes/play-app.ts
Normal file
560
etc/servers/work-server/src/routes/play-app.ts
Normal file
@@ -0,0 +1,560 @@
|
||||
import type { FastifyInstance } from 'fastify';
|
||||
import { z } from 'zod';
|
||||
import { db } from '../db/client.js';
|
||||
|
||||
type PlayAppEnvironment = 'preview' | 'test' | 'prod';
|
||||
|
||||
type PlayAppSeedEntry = {
|
||||
id: string;
|
||||
name: string;
|
||||
accentClassName: string;
|
||||
statusLabel: string;
|
||||
isReady: boolean;
|
||||
iconName: string;
|
||||
usagePriority?: number;
|
||||
supportedEnvironments: PlayAppEnvironment[];
|
||||
searchKeywords?: string[];
|
||||
searchDescription?: string;
|
||||
};
|
||||
|
||||
const PLAY_APP_TABLE = 'play_apps';
|
||||
const DEFAULT_ENTRIES: PlayAppSeedEntry[] = [
|
||||
{
|
||||
id: 'baseball-ticket-bay',
|
||||
name: '야구-티켓베이',
|
||||
accentClassName: 'apps-library__card--baseball-ticket-bay',
|
||||
statusLabel: '알림',
|
||||
isReady: true,
|
||||
iconName: 'BellOutlined',
|
||||
usagePriority: 100,
|
||||
supportedEnvironments: ['preview', 'test'],
|
||||
searchKeywords: ['야구', '티켓베이', 'ticketbay', '야구 티켓', '웹푸시', '알림'],
|
||||
searchDescription: '팀, 구역, 통로, 가격 조건으로 야구 티켓 알림 조건을 저장하고 테스트 푸시를 보냅니다.',
|
||||
},
|
||||
{
|
||||
id: 'e-reader',
|
||||
name: 'E-Reader',
|
||||
accentClassName: 'apps-library__card--reader',
|
||||
statusLabel: '읽기',
|
||||
isReady: true,
|
||||
iconName: 'BookOutlined',
|
||||
usagePriority: 80,
|
||||
supportedEnvironments: ['preview', 'test'],
|
||||
searchKeywords: ['e-reader', 'reader', 'ebook', 'article', 'web article', '기사', '전자책', '리더'],
|
||||
searchDescription: 'Apps 보관함에서 인터넷 기사와 웹 콘텐츠를 전자책처럼 넘겨 읽습니다.',
|
||||
},
|
||||
{
|
||||
id: 'photoprism',
|
||||
name: 'PhotoPrism',
|
||||
accentClassName: 'apps-library__card--photoprism',
|
||||
statusLabel: '연결',
|
||||
isReady: true,
|
||||
iconName: 'FileImageOutlined',
|
||||
usagePriority: 70,
|
||||
supportedEnvironments: ['preview', 'test'],
|
||||
searchKeywords: ['photoprism', 'photo', 'album', 'gallery', '사진 앨범'],
|
||||
searchDescription: 'Apps 보관함에서 PhotoPrism 앨범과 사진을 단독 앱 형태로 엽니다.',
|
||||
},
|
||||
{
|
||||
id: 'photo-puzzle',
|
||||
name: '사진 퍼즐',
|
||||
accentClassName: 'apps-library__card--puzzle',
|
||||
statusLabel: '실행',
|
||||
isReady: true,
|
||||
iconName: 'PictureOutlined',
|
||||
usagePriority: 60,
|
||||
supportedEnvironments: ['preview', 'test'],
|
||||
searchKeywords: ['photo puzzle', '퍼즐', '사진', '슬라이드 퍼즐'],
|
||||
searchDescription: 'Apps 보관함에서 사진 퍼즐 게임을 바로 실행합니다.',
|
||||
},
|
||||
{
|
||||
id: 'the-quest',
|
||||
name: 'The Quest',
|
||||
accentClassName: 'apps-library__card--the-quest',
|
||||
statusLabel: '신규',
|
||||
isReady: true,
|
||||
iconName: 'ThunderboltOutlined',
|
||||
usagePriority: 50,
|
||||
supportedEnvironments: ['preview', 'test'],
|
||||
searchKeywords: ['the quest', 'rpg', 'mobile rpg', 'phaser', 'quest', 'rpg game', '모바일 rpg'],
|
||||
searchDescription: 'Apps 보관함에서 한국형 모바일 RPG 데모 The Quest를 실행합니다.',
|
||||
},
|
||||
{
|
||||
id: 'template1',
|
||||
name: 'Template1',
|
||||
accentClassName: 'apps-library__card--template1',
|
||||
statusLabel: '템플릿',
|
||||
isReady: true,
|
||||
iconName: 'AppstoreAddOutlined',
|
||||
usagePriority: 45,
|
||||
supportedEnvironments: ['preview', 'test'],
|
||||
searchKeywords: ['template1', 'template', '앱 템플릿', '레이아웃', '기본 UI', 'layout'],
|
||||
searchDescription: '다른 앱 개발 시 공통 레이아웃을 빠르게 적용하기 위한 템플릿 화면입니다.',
|
||||
},
|
||||
{
|
||||
id: 'tetris',
|
||||
name: 'Tetris',
|
||||
accentClassName: 'apps-library__card--tetris',
|
||||
statusLabel: '실행',
|
||||
isReady: true,
|
||||
iconName: 'FundProjectionScreenOutlined',
|
||||
usagePriority: 40,
|
||||
supportedEnvironments: ['preview', 'test'],
|
||||
searchKeywords: ['테트리스', 'block', 'arcade', '블록 게임'],
|
||||
searchDescription: 'Apps 보관함에서 테트리스 게임을 바로 실행합니다.',
|
||||
},
|
||||
{
|
||||
id: 'beat-lab',
|
||||
name: 'Beat Lab',
|
||||
accentClassName: 'apps-library__card--beat',
|
||||
statusLabel: '준비',
|
||||
isReady: false,
|
||||
iconName: 'SoundOutlined',
|
||||
usagePriority: 35,
|
||||
supportedEnvironments: ['preview'],
|
||||
searchDescription: '향후 추가 예정인 Beat Lab 앱',
|
||||
},
|
||||
{
|
||||
id: 'sticker-booth',
|
||||
name: 'Sticker Booth',
|
||||
accentClassName: 'apps-library__card--sticker',
|
||||
statusLabel: '준비',
|
||||
isReady: false,
|
||||
iconName: 'StarOutlined',
|
||||
usagePriority: 30,
|
||||
supportedEnvironments: ['preview'],
|
||||
searchDescription: '향후 추가 예정인 Sticker Booth 앱',
|
||||
},
|
||||
{
|
||||
id: 'launch-note',
|
||||
name: 'Launch Note',
|
||||
accentClassName: 'apps-library__card--launch',
|
||||
statusLabel: '예정',
|
||||
isReady: false,
|
||||
iconName: 'RocketOutlined',
|
||||
usagePriority: 20,
|
||||
supportedEnvironments: ['preview'],
|
||||
searchDescription: '향후 추가 예정인 Launch Note 앱',
|
||||
},
|
||||
{
|
||||
id: 'arcade-pack',
|
||||
name: 'Arcade Pack',
|
||||
accentClassName: 'apps-library__card--arcade',
|
||||
statusLabel: '예정',
|
||||
isReady: false,
|
||||
iconName: 'FireOutlined',
|
||||
usagePriority: 10,
|
||||
supportedEnvironments: ['preview'],
|
||||
searchDescription: '향후 추가 예정인 Arcade Pack 앱',
|
||||
},
|
||||
{
|
||||
id: 'app-vault',
|
||||
name: 'App Vault',
|
||||
accentClassName: 'apps-library__card--vault',
|
||||
statusLabel: '테마',
|
||||
isReady: false,
|
||||
iconName: 'AppstoreOutlined',
|
||||
usagePriority: 0,
|
||||
supportedEnvironments: ['preview'],
|
||||
searchDescription: '향후 추가 예정인 App Vault 앱',
|
||||
},
|
||||
] ;
|
||||
|
||||
const listQuerySchema = z.object({
|
||||
environment: z.enum(['preview', 'test', 'prod']).optional(),
|
||||
});
|
||||
|
||||
const playAppIdSchema = z.string().trim().min(1).max(100);
|
||||
|
||||
const supportedEnvironmentSchema = z.enum(['preview', 'test', 'prod']);
|
||||
|
||||
const iconNameSchema = z.enum([
|
||||
'AppstoreOutlined',
|
||||
'AppstoreAddOutlined',
|
||||
'BellOutlined',
|
||||
'BookOutlined',
|
||||
'FireOutlined',
|
||||
'FundProjectionScreenOutlined',
|
||||
'FileImageOutlined',
|
||||
'PictureOutlined',
|
||||
'RocketOutlined',
|
||||
'SoundOutlined',
|
||||
'StarOutlined',
|
||||
'ThunderboltOutlined',
|
||||
]);
|
||||
|
||||
const playAppCreatePayloadSchema = z.object({
|
||||
id: playAppIdSchema,
|
||||
name: z.string().trim().min(1).max(120),
|
||||
accentClassName: z.string().trim().min(1).max(80),
|
||||
statusLabel: z.string().trim().min(1).max(80),
|
||||
isReady: z.boolean().default(false),
|
||||
iconName: iconNameSchema,
|
||||
usagePriority: z.number().int().min(0).max(1_000_000).optional(),
|
||||
supportedEnvironments: z.array(supportedEnvironmentSchema).min(1).default(['preview']),
|
||||
searchKeywords: z
|
||||
.array(z.string().trim().min(1).max(80))
|
||||
.default([])
|
||||
.transform((keywords) => Array.from(new Set(keywords.map((keyword) => keyword.trim()).filter((keyword) => keyword.length > 0)))),
|
||||
searchDescription: z.string().trim().max(4000).default(''),
|
||||
});
|
||||
|
||||
const playAppUpdatePayloadSchema = z
|
||||
.object({
|
||||
id: playAppIdSchema.optional(),
|
||||
name: z.string().trim().min(1).max(120).optional(),
|
||||
accentClassName: z.string().trim().min(1).max(80).optional(),
|
||||
statusLabel: z.string().trim().min(1).max(80).optional(),
|
||||
isReady: z.boolean().optional(),
|
||||
iconName: iconNameSchema.optional(),
|
||||
usagePriority: z.number().int().min(0).max(1_000_000).nullable().optional(),
|
||||
supportedEnvironments: z.array(supportedEnvironmentSchema).optional(),
|
||||
searchKeywords: z
|
||||
.array(z.string().trim().min(1).max(80))
|
||||
.transform((keywords) => Array.from(new Set(keywords.map((keyword) => keyword.trim()).filter((keyword) => keyword.length > 0))))
|
||||
.optional(),
|
||||
searchDescription: z.string().trim().max(4000).optional(),
|
||||
})
|
||||
.refine((payload) => Object.keys(payload).length > 0, {
|
||||
message: '수정할 항목이 없습니다.',
|
||||
});
|
||||
|
||||
const playAppIdParamsSchema = z.object({
|
||||
id: playAppIdSchema,
|
||||
});
|
||||
|
||||
type SupportedEnvironment = Array<PlayAppEnvironment>;
|
||||
type PlayAppRegistryRecord = {
|
||||
id: string;
|
||||
name: string;
|
||||
accent_class_name: string;
|
||||
status_label: string;
|
||||
is_ready: boolean;
|
||||
icon_name: string;
|
||||
usage_priority: number | null;
|
||||
supported_environments: string | null;
|
||||
search_keywords: string | null;
|
||||
search_description: string | null;
|
||||
};
|
||||
|
||||
type PlayAppRow = {
|
||||
id: string;
|
||||
name: string;
|
||||
accentClassName: string;
|
||||
statusLabel: string;
|
||||
isReady: boolean;
|
||||
iconName: string;
|
||||
usagePriority?: number;
|
||||
supportedEnvironments: SupportedEnvironment;
|
||||
searchKeywords: string[];
|
||||
searchDescription: string;
|
||||
};
|
||||
|
||||
type PlayAppCreateInput = z.infer<typeof playAppCreatePayloadSchema>;
|
||||
type PlayAppUpdateInput = z.infer<typeof playAppUpdatePayloadSchema>;
|
||||
|
||||
function normalizeSupportedEnvironments(value: string | null): SupportedEnvironment {
|
||||
if (!value) {
|
||||
return ['preview'];
|
||||
}
|
||||
|
||||
const trimmed = value.trim();
|
||||
if (!trimmed) {
|
||||
return ['preview'];
|
||||
}
|
||||
|
||||
if (trimmed.startsWith('[') && trimmed.endsWith(']')) {
|
||||
try {
|
||||
const parsed = JSON.parse(trimmed);
|
||||
if (Array.isArray(parsed)) {
|
||||
return parsed
|
||||
.map((item) => String(item).trim())
|
||||
.filter((item): item is PlayAppEnvironment => item === 'preview' || item === 'test' || item === 'prod');
|
||||
}
|
||||
} catch {
|
||||
// fall through to comma parser below.
|
||||
}
|
||||
}
|
||||
|
||||
return value
|
||||
.trim()
|
||||
.split(',')
|
||||
.map((item) => item.trim().toLowerCase())
|
||||
.filter((item): item is PlayAppEnvironment => item === 'preview' || item === 'test' || item === 'prod');
|
||||
}
|
||||
|
||||
function parseJsonArrayList(value: string | null): string[] {
|
||||
if (!value) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const trimmed = value.trim();
|
||||
if (!trimmed) {
|
||||
return [];
|
||||
}
|
||||
|
||||
if (trimmed.startsWith('[') && trimmed.endsWith(']')) {
|
||||
try {
|
||||
const parsed = JSON.parse(trimmed);
|
||||
if (Array.isArray(parsed)) {
|
||||
return parsed
|
||||
.map((item) => (typeof item === 'string' ? item.trim() : ''))
|
||||
.filter((item) => item.length > 0);
|
||||
}
|
||||
} catch {
|
||||
// fallthrough to legacy parser below.
|
||||
}
|
||||
}
|
||||
|
||||
return trimmed
|
||||
.split(',')
|
||||
.map((item) => item.trim())
|
||||
.filter((item) => item.length > 0);
|
||||
}
|
||||
|
||||
function toResponseItem(row: PlayAppRegistryRecord): PlayAppRow {
|
||||
return {
|
||||
id: row.id,
|
||||
name: row.name,
|
||||
accentClassName: row.accent_class_name,
|
||||
statusLabel: row.status_label,
|
||||
isReady: !!row.is_ready,
|
||||
iconName: row.icon_name,
|
||||
usagePriority: row.usage_priority ?? undefined,
|
||||
supportedEnvironments: normalizeSupportedEnvironments(row.supported_environments),
|
||||
searchKeywords: parseJsonArrayList(row.search_keywords),
|
||||
searchDescription: row.search_description ?? '',
|
||||
};
|
||||
}
|
||||
|
||||
function encodeJsonList(values: readonly string[] | null | undefined) {
|
||||
if (!values || values.length === 0) {
|
||||
return '[]';
|
||||
}
|
||||
|
||||
return JSON.stringify(Array.from(new Set(values.map((value) => value.trim()).filter(Boolean))));
|
||||
}
|
||||
|
||||
function toDbRowPayload(input: PlayAppCreateInput | Omit<PlayAppUpdateInput, 'id'>) {
|
||||
const payload: Record<string, unknown> = {
|
||||
id: 'id' in input ? input.id?.trim() : undefined,
|
||||
name: input.name?.trim(),
|
||||
accent_class_name: input.accentClassName?.trim(),
|
||||
status_label: input.statusLabel?.trim(),
|
||||
is_ready: input.isReady,
|
||||
icon_name: input.iconName,
|
||||
usage_priority: input.usagePriority ?? null,
|
||||
supported_environments: input.supportedEnvironments ? encodeJsonList(input.supportedEnvironments) : undefined,
|
||||
search_keywords: input.searchKeywords ? encodeJsonList(input.searchKeywords) : undefined,
|
||||
search_description: input.searchDescription ? input.searchDescription.trim() : undefined,
|
||||
};
|
||||
|
||||
Object.entries(payload).forEach(([key, value]) => {
|
||||
if (value === undefined) {
|
||||
delete payload[key];
|
||||
}
|
||||
});
|
||||
|
||||
if ('is_ready' in payload && payload.is_ready === undefined) {
|
||||
payload.is_ready = false;
|
||||
}
|
||||
|
||||
return payload;
|
||||
}
|
||||
|
||||
function isDbUpdateResultEmpty(result: unknown) {
|
||||
if (Array.isArray(result)) {
|
||||
return result.length === 0;
|
||||
}
|
||||
|
||||
return typeof result === 'number' ? result === 0 : false;
|
||||
}
|
||||
|
||||
function parsePlayAppErrorWithCode(error: unknown, fallbackMessage: string) {
|
||||
if (error instanceof Error) {
|
||||
const code = (error as { code?: string }).code;
|
||||
if (code === 'ER_DUP_ENTRY' || code === '23505') {
|
||||
const duplicateError = error as Error & { statusCode?: number; details?: string };
|
||||
duplicateError.statusCode = 409;
|
||||
duplicateError.message = '이미 등록된 앱 ID입니다.';
|
||||
return duplicateError;
|
||||
}
|
||||
}
|
||||
|
||||
if (error instanceof Error) {
|
||||
const duplicateError = error as Error & { statusCode?: number; details?: string };
|
||||
duplicateError.message = fallbackMessage;
|
||||
return duplicateError;
|
||||
}
|
||||
|
||||
const next = new Error(fallbackMessage) as Error & { statusCode?: number };
|
||||
next.statusCode = 500;
|
||||
return next;
|
||||
}
|
||||
|
||||
async function ensurePlayAppTable() {
|
||||
const exists = await db.schema.hasTable(PLAY_APP_TABLE);
|
||||
if (!exists) {
|
||||
await db.schema.createTable(PLAY_APP_TABLE, (table) => {
|
||||
table.string('id', 100).primary();
|
||||
table.string('name', 120).notNullable();
|
||||
table.string('accent_class_name', 80).notNullable();
|
||||
table.string('status_label', 80).notNullable();
|
||||
table.boolean('is_ready').notNullable().defaultTo(false);
|
||||
table.string('icon_name', 80).notNullable();
|
||||
table.integer('usage_priority').nullable();
|
||||
table.text('supported_environments').nullable();
|
||||
table.text('search_keywords').nullable();
|
||||
table.text('search_description').nullable();
|
||||
table.index('is_ready', 'play_apps_is_ready_idx');
|
||||
});
|
||||
}
|
||||
|
||||
const existingRows = await db(PLAY_APP_TABLE).select('id');
|
||||
const existingIds = new Set(existingRows.map((row) => row.id));
|
||||
|
||||
const rowsToInsert = DEFAULT_ENTRIES.filter((entry) => !existingIds.has(entry.id)).map((entry) => ({
|
||||
id: entry.id,
|
||||
name: entry.name,
|
||||
accent_class_name: entry.accentClassName,
|
||||
status_label: entry.statusLabel,
|
||||
is_ready: entry.isReady,
|
||||
icon_name: entry.iconName,
|
||||
usage_priority: entry.usagePriority,
|
||||
supported_environments: encodeJsonList(entry.supportedEnvironments),
|
||||
search_keywords: encodeJsonList(entry.searchKeywords ?? []),
|
||||
search_description: entry.searchDescription ?? '',
|
||||
}));
|
||||
|
||||
if (rowsToInsert.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
await db(PLAY_APP_TABLE).insert(rowsToInsert);
|
||||
}
|
||||
|
||||
async function listPlayAppEntries(environment?: PlayAppEnvironment | null) {
|
||||
await ensurePlayAppTable();
|
||||
|
||||
const rows = (await db(PLAY_APP_TABLE)
|
||||
.select<PlayAppRegistryRecord[]>('*')
|
||||
.orderBy('usage_priority', 'desc')
|
||||
.orderBy('id', 'asc')) as PlayAppRegistryRecord[];
|
||||
|
||||
const normalizedRows = rows.map(toResponseItem);
|
||||
const filteredRows = environment ? normalizedRows.filter((row) => row.supportedEnvironments.includes(environment)) : normalizedRows;
|
||||
|
||||
return filteredRows;
|
||||
}
|
||||
|
||||
async function createPlayAppEntry(body: unknown) {
|
||||
await ensurePlayAppTable();
|
||||
|
||||
const payload = playAppCreatePayloadSchema.parse(body);
|
||||
const dbPayload = toDbRowPayload(payload);
|
||||
|
||||
try {
|
||||
await db(PLAY_APP_TABLE).insert(dbPayload);
|
||||
} catch (error) {
|
||||
throw parsePlayAppErrorWithCode(error, `앱 등록에 실패했습니다: ${payload.id}`);
|
||||
}
|
||||
|
||||
const insertedRow = await db(PLAY_APP_TABLE)
|
||||
.where({ id: payload.id })
|
||||
.first<PlayAppRegistryRecord>();
|
||||
|
||||
if (!insertedRow) {
|
||||
const notFoundError = new Error('등록된 앱을 조회하지 못했습니다.') as Error & { statusCode?: number };
|
||||
notFoundError.statusCode = 500;
|
||||
throw notFoundError;
|
||||
}
|
||||
|
||||
return {
|
||||
ok: true,
|
||||
item: toResponseItem(insertedRow),
|
||||
};
|
||||
}
|
||||
|
||||
async function updatePlayAppEntry(params: unknown, body: unknown) {
|
||||
await ensurePlayAppTable();
|
||||
|
||||
const { id } = playAppIdParamsSchema.parse(params);
|
||||
const payload = playAppUpdatePayloadSchema.parse(body);
|
||||
|
||||
if (payload.id && payload.id !== id) {
|
||||
const invalidError = new Error('요청 경로 ID와 본문 ID가 일치하지 않습니다.') as Error & { statusCode?: number };
|
||||
invalidError.statusCode = 409;
|
||||
throw invalidError;
|
||||
}
|
||||
|
||||
const dbPayload = toDbRowPayload(payload);
|
||||
const updated = await db(PLAY_APP_TABLE).where({ id }).update(dbPayload as Record<string, unknown>);
|
||||
|
||||
if (isDbUpdateResultEmpty(updated)) {
|
||||
const notFoundError = new Error(`수정할 앱을 찾을 수 없습니다: ${id}`) as Error & { statusCode?: number };
|
||||
notFoundError.statusCode = 404;
|
||||
throw notFoundError;
|
||||
}
|
||||
|
||||
const updatedRow = await db(PLAY_APP_TABLE).where({ id }).first<PlayAppRegistryRecord>();
|
||||
if (!updatedRow) {
|
||||
const notFoundError = new Error(`수정한 앱을 조회할 수 없습니다: ${id}`) as Error & { statusCode?: number };
|
||||
notFoundError.statusCode = 404;
|
||||
throw notFoundError;
|
||||
}
|
||||
|
||||
return {
|
||||
ok: true,
|
||||
item: toResponseItem(updatedRow),
|
||||
};
|
||||
}
|
||||
|
||||
async function deletePlayAppEntry(params: unknown) {
|
||||
await ensurePlayAppTable();
|
||||
|
||||
const { id } = playAppIdParamsSchema.parse(params);
|
||||
const deleted = await db(PLAY_APP_TABLE).where({ id }).delete('*');
|
||||
if (isDbUpdateResultEmpty(deleted)) {
|
||||
const notFoundError = new Error(`삭제할 앱을 찾을 수 없습니다: ${id}`) as Error & { statusCode?: number };
|
||||
notFoundError.statusCode = 404;
|
||||
throw notFoundError;
|
||||
}
|
||||
|
||||
if (Array.isArray(deleted) && deleted[0]) {
|
||||
return {
|
||||
ok: true,
|
||||
deletedId: id,
|
||||
item: toResponseItem(deleted[0] as PlayAppRegistryRecord),
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
ok: true,
|
||||
deletedId: id,
|
||||
};
|
||||
}
|
||||
|
||||
export async function registerPlayAppRoutes(app: FastifyInstance) {
|
||||
app.get('/api/play-apps', async (request) => {
|
||||
const query = listQuerySchema.parse(request.query);
|
||||
|
||||
const items = await listPlayAppEntries(query.environment);
|
||||
|
||||
return {
|
||||
ok: true,
|
||||
items,
|
||||
};
|
||||
});
|
||||
|
||||
app.post('/api/play-apps', async (request) => {
|
||||
return createPlayAppEntry(request.body);
|
||||
});
|
||||
|
||||
app.put('/api/play-apps/:id', async (request) => {
|
||||
return updatePlayAppEntry(request.params, request.body);
|
||||
});
|
||||
|
||||
app.delete('/api/play-apps/:id', async (request) => {
|
||||
return deletePlayAppEntry(request.params);
|
||||
});
|
||||
}
|
||||
@@ -7,6 +7,7 @@ import { PhotoPuzzleAppView } from '../../views/play/apps/photo-puzzle/PhotoPuzz
|
||||
import { PhotoPrismAppView } from '../../views/play/apps/photoprism/PhotoPrismAppView';
|
||||
import { TheQuestAppView } from '../../views/play/apps/the-quest/TheQuestAppView';
|
||||
import { TetrisAppView } from '../../views/play/apps/tetris/TetrisAppView';
|
||||
import { Template1PlayAppView } from '../../views/play/apps/template1/Template1PlayAppView';
|
||||
|
||||
type PlayAppOverlayProps = {
|
||||
appId: string;
|
||||
@@ -41,6 +42,10 @@ function renderPlayApp(appId: string, onClose: () => void) {
|
||||
return <TheQuestAppView onBack={onClose} launchContext="embedded" />;
|
||||
}
|
||||
|
||||
if (appId === 'template1') {
|
||||
return <Template1PlayAppView onBack={onClose} launchContext="embedded" />;
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import {
|
||||
CopyOutlined,
|
||||
CodeOutlined,
|
||||
CheckCircleOutlined,
|
||||
CloseOutlined,
|
||||
@@ -21,7 +22,6 @@ import { StepperUI } from '../../../components/stepper';
|
||||
import { InlineImage } from '../../../components/common/InlineImage';
|
||||
import { MarkdownPreviewContent } from '../../../components/markdownPreview/MarkdownPreviewContent';
|
||||
import { FullscreenPreviewModal, ZoomablePreviewSurface } from '../../../components/previewer';
|
||||
import { renderEditorBlock } from '../../../components/previewer/renderers';
|
||||
import { ChatPreviewBody } from './ChatPreviewBody';
|
||||
import { isMarkdownContentType, isMarkdownResourceUrl, normalizeChatResourceUrl } from './chatResourceUrl';
|
||||
import { sharePreviewLink } from './chatUtils';
|
||||
@@ -507,7 +507,7 @@ function canShowHtmlPreviewActions(preview: PromptPreview | null | undefined) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (preview.type === 'html') {
|
||||
if (preview.type === 'editable' || preview.type === 'markdown' || preview.type === 'html') {
|
||||
return true;
|
||||
}
|
||||
|
||||
@@ -516,7 +516,10 @@ function canShowHtmlPreviewActions(preview: PromptPreview | null | undefined) {
|
||||
}
|
||||
|
||||
if (preview.content?.trim()) {
|
||||
return /<(?:!doctype\s+html|html|head|body|main|section|article|div)\b/i.test(preview.content);
|
||||
return (
|
||||
/<(?:!doctype\s+html|html|head|body|main|section|article|div)\b/i.test(preview.content) ||
|
||||
isMarkdownPromptPreview(preview)
|
||||
);
|
||||
}
|
||||
|
||||
return Boolean(preview.url && isHtmlLikeUrl(preview.url));
|
||||
@@ -651,7 +654,7 @@ function usePromptPreviewContent(preview: PromptPreview | null | undefined) {
|
||||
setLoadError('');
|
||||
|
||||
const shouldFetchTextPreview =
|
||||
previewType === 'markdown' || previewType === 'html';
|
||||
previewType === 'markdown' || previewType === 'html' || previewType === 'editable';
|
||||
const shouldInspectResourcePreview =
|
||||
previewType === 'resource' && normalizedPreviewUrl && canRenderFramePreview(normalizedPreviewUrl);
|
||||
|
||||
@@ -732,15 +735,37 @@ export function PromptPreviewSurface({
|
||||
preview,
|
||||
compact = false,
|
||||
htmlMode = 'preview',
|
||||
sourceContent,
|
||||
onSourceContentChange,
|
||||
}: {
|
||||
preview: PromptPreview;
|
||||
compact?: boolean;
|
||||
htmlMode?: 'preview' | 'source';
|
||||
sourceContent?: string;
|
||||
onSourceContentChange?: (content: string) => void;
|
||||
}) {
|
||||
const { remoteContent, remoteContentType, isLoading, loadError } = usePromptPreviewContent(preview);
|
||||
const normalizedPreviewUrl = resolvePromptPreviewUrl(preview.url);
|
||||
const shouldRenderAsHtml = shouldRenderAsHtmlDocument(preview, remoteContentType, remoteContent);
|
||||
const htmlDocument = shouldRenderAsHtml ? buildHtmlFrameDocument(remoteContent || '', normalizedPreviewUrl || preview.url) : null;
|
||||
const defaultSourceContent = remoteContent ?? preview.content ?? '';
|
||||
const sourceValue = sourceContent ?? defaultSourceContent;
|
||||
const markdownValue = remoteContent ?? '표시할 markdown preview가 없습니다.';
|
||||
const [editableSourceContent, setEditableSourceContent] = useState(defaultSourceContent);
|
||||
|
||||
useEffect(() => {
|
||||
if (!onSourceContentChange || htmlMode !== 'source') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (sourceContent === undefined || sourceContent.length === 0) {
|
||||
onSourceContentChange(defaultSourceContent);
|
||||
}
|
||||
}, [defaultSourceContent, htmlMode, onSourceContentChange, sourceContent]);
|
||||
|
||||
useEffect(() => {
|
||||
setEditableSourceContent(defaultSourceContent);
|
||||
}, [defaultSourceContent]);
|
||||
|
||||
if (preview.type === 'image' && normalizedPreviewUrl) {
|
||||
const imageNode = (
|
||||
@@ -776,9 +801,41 @@ export function PromptPreviewSurface({
|
||||
}
|
||||
|
||||
if (preview.type === 'markdown') {
|
||||
if (htmlMode === 'source') {
|
||||
return (
|
||||
<div className="app-chat-prompt-card__preview-source">
|
||||
<Input.TextArea
|
||||
value={sourceValue}
|
||||
onChange={(event) => onSourceContentChange?.(event.currentTarget.value)}
|
||||
autoSize={false}
|
||||
className="app-chat-prompt-card__preview-source-editor"
|
||||
placeholder="표시할 markdown 소스가 없습니다."
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="app-chat-prompt-card__preview-markdown">
|
||||
<MarkdownPreviewContent content={remoteContent || '표시할 markdown preview가 없습니다.'} maxBlocks={compact ? 5 : undefined} />
|
||||
<MarkdownPreviewContent content={markdownValue} maxBlocks={compact ? 5 : undefined} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (preview.type === 'editable') {
|
||||
return (
|
||||
<div className="app-chat-prompt-card__preview-source">
|
||||
<Input.TextArea
|
||||
value={editableSourceContent}
|
||||
onChange={(event) => {
|
||||
const nextValue = event.currentTarget.value;
|
||||
setEditableSourceContent(nextValue);
|
||||
onSourceContentChange?.(nextValue);
|
||||
}}
|
||||
autoSize={false}
|
||||
className="app-chat-prompt-card__preview-source-editor"
|
||||
placeholder="편집 가능한 소스 블록입니다."
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -804,8 +861,14 @@ export function PromptPreviewSurface({
|
||||
|
||||
if (htmlMode === 'source') {
|
||||
return (
|
||||
<div className="app-chat-prompt-card__preview-code">
|
||||
{renderEditorBlock(htmlContent || '표시할 HTML 코드가 없습니다.', 'html', 'code')}
|
||||
<div className="app-chat-prompt-card__preview-source">
|
||||
<Input.TextArea
|
||||
value={sourceValue}
|
||||
onChange={(event) => onSourceContentChange?.(event.currentTarget.value)}
|
||||
autoSize={false}
|
||||
className="app-chat-prompt-card__preview-source-editor"
|
||||
placeholder="표시할 HTML 소스가 없습니다."
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1200,6 +1263,7 @@ export function ChatPromptCard({
|
||||
const [submittedFreeText, setSubmittedFreeText] = useState('');
|
||||
const [expandedOptionValue, setExpandedOptionValue] = useState<string | null>(null);
|
||||
const [expandedHtmlMode, setExpandedHtmlMode] = useState<'preview' | 'source'>('preview');
|
||||
const [expandedPreviewSource, setExpandedPreviewSource] = useState('');
|
||||
const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
|
||||
const [attachments, setAttachments] = useState<ChatComposerAttachment[]>([]);
|
||||
const [isUploadingAttachment, setIsUploadingAttachment] = useState(false);
|
||||
@@ -1242,6 +1306,7 @@ export function ChatPromptCard({
|
||||
|
||||
useEffect(() => {
|
||||
setExpandedHtmlMode('preview');
|
||||
setExpandedPreviewSource(expandedOption?.preview?.content ?? '');
|
||||
}, [expandedOptionValue]);
|
||||
const activeStep = steps[Math.min(activeStepIndex, Math.max(steps.length - 1, 0))] ?? steps[0];
|
||||
const activeSelection = activeStep ? stepSelections[activeStep.key] : undefined;
|
||||
@@ -1274,6 +1339,7 @@ export function ChatPromptCard({
|
||||
const progressPayload = buildPromptSelectionPayloadWithAttachments(target, stepSelections, attachments);
|
||||
const expandAllOptionPreviews = shouldExpandAllPromptPreviews(activeStep, activeSelection, isLocked);
|
||||
const expandedOptionPreviewUrl = expandedOption?.preview ? resolvePromptPreviewUrl(expandedOption.preview.url) : '';
|
||||
const isExpandedEditablePreview = expandedOption?.preview?.type === 'editable';
|
||||
const onSelectionChangeRef = useRef(onSelectionChange);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -1364,6 +1430,19 @@ export function ChatPromptCard({
|
||||
});
|
||||
};
|
||||
|
||||
const handleCopyExpandedEditablePreview = async () => {
|
||||
if (!expandedOption?.preview || !isExpandedEditablePreview) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await navigator.clipboard.writeText(expandedPreviewSource);
|
||||
message.success('편집 내용을 복사했습니다.');
|
||||
} catch {
|
||||
message.error('편집 내용을 복사할 수 없습니다.');
|
||||
}
|
||||
};
|
||||
|
||||
const uploadAttachments = async (files: File[]) => {
|
||||
if (!allowAttachments || !onUploadAttachment || isLocked || isSubmitting || isUploadingAttachment || files.length === 0) {
|
||||
return;
|
||||
@@ -1914,7 +1993,7 @@ export function ChatPromptCard({
|
||||
<FullscreenPreviewModal
|
||||
open={Boolean(expandedOption?.preview)}
|
||||
onClose={() => setExpandedOptionValue(null)}
|
||||
title={expandedOption?.preview?.title?.trim() || expandedOption?.label || 'preview'}
|
||||
title={expandedOption?.preview?.title?.trim() || expandedOption?.label || 'preview'}
|
||||
actions={
|
||||
canShowHtmlPreviewActions(expandedOption?.preview) ? (
|
||||
<>
|
||||
@@ -1925,20 +2004,32 @@ export function ChatPromptCard({
|
||||
icon={<ShareAltOutlined />}
|
||||
onClick={handleShareExpandedPreview}
|
||||
/>
|
||||
<Button
|
||||
type="text"
|
||||
className="fullscreen-preview-modal__icon-button"
|
||||
aria-label="HTML 실행 미리보기"
|
||||
icon={<EyeOutlined />}
|
||||
onClick={() => setExpandedHtmlMode('preview')}
|
||||
/>
|
||||
<Button
|
||||
type="text"
|
||||
className="fullscreen-preview-modal__icon-button"
|
||||
aria-label="HTML 코드 보기"
|
||||
icon={<CodeOutlined />}
|
||||
onClick={() => setExpandedHtmlMode('source')}
|
||||
/>
|
||||
{isExpandedEditablePreview ? (
|
||||
<Button
|
||||
type="text"
|
||||
className="fullscreen-preview-modal__icon-button"
|
||||
aria-label="편집 내용 복사"
|
||||
icon={<CopyOutlined />}
|
||||
onClick={handleCopyExpandedEditablePreview}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<Button
|
||||
type="text"
|
||||
className="fullscreen-preview-modal__icon-button"
|
||||
aria-label="미리보기 화면"
|
||||
icon={<EyeOutlined />}
|
||||
onClick={() => setExpandedHtmlMode('preview')}
|
||||
/>
|
||||
<Button
|
||||
type="text"
|
||||
className="fullscreen-preview-modal__icon-button"
|
||||
aria-label="소스 보기"
|
||||
icon={<CodeOutlined />}
|
||||
onClick={() => setExpandedHtmlMode('source')}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<Button
|
||||
@@ -1955,7 +2046,14 @@ export function ChatPromptCard({
|
||||
}`}
|
||||
>
|
||||
<div className="app-chat-prompt-card__preview-modal-surface">
|
||||
{expandedOption?.preview ? <PromptPreviewSurface preview={expandedOption.preview} htmlMode={expandedHtmlMode} /> : null}
|
||||
{expandedOption?.preview ? (
|
||||
<PromptPreviewSurface
|
||||
preview={expandedOption.preview}
|
||||
htmlMode={expandedHtmlMode}
|
||||
sourceContent={expandedPreviewSource}
|
||||
onSourceContentChange={setExpandedPreviewSource}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
</FullscreenPreviewModal>
|
||||
</>
|
||||
|
||||
@@ -256,6 +256,47 @@ type PromptPreview = NonNullable<
|
||||
type PromptOption = Extract<ChatMessagePart, { type: 'prompt' }>['options'][number];
|
||||
type PromptStep = NonNullable<Extract<ChatMessagePart, { type: 'prompt' }>['steps']>[number];
|
||||
|
||||
function normalizePromptPreviewType(typeValue: string | null | undefined, url: string, content: string) {
|
||||
const normalizedType = normalizeOptionalText(typeValue).toLowerCase();
|
||||
|
||||
if (normalizedType === 'image' || normalizedType === 'markdown' || normalizedType === 'html' || normalizedType === 'resource') {
|
||||
return normalizedType;
|
||||
}
|
||||
|
||||
if (normalizedType === 'md' || normalizedType === 'text' || normalizedType === 'txt' || normalizedType === 'plain') {
|
||||
return 'markdown';
|
||||
}
|
||||
|
||||
if (normalizedType === 'htm') {
|
||||
return 'html';
|
||||
}
|
||||
|
||||
const normalizedContent = normalizeOptionalText(content).trim();
|
||||
const normalizedUrl = normalizeOptionalText(url).toLowerCase();
|
||||
|
||||
if (normalizedUrl.endsWith('.md') || normalizedUrl.endsWith('.markdown')) {
|
||||
return 'markdown';
|
||||
}
|
||||
|
||||
if (normalizedUrl.endsWith('.html') || normalizedUrl.endsWith('.htm')) {
|
||||
return 'html';
|
||||
}
|
||||
|
||||
if (!normalizedContent) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (/<(?:!doctype\s+html|html|head|body|main|section|article|div)\b/i.test(normalizedContent)) {
|
||||
return 'html';
|
||||
}
|
||||
|
||||
if (/^#{1,6}\s|^\s*[-*+]\s+|^\s*\d+\.\s+|^\s*>\s+|\[[^\]]+\]\([^)]+\)/m.test(normalizedContent)) {
|
||||
return 'markdown';
|
||||
}
|
||||
|
||||
return 'resource';
|
||||
}
|
||||
|
||||
function normalizePromptPreview(
|
||||
preview: {
|
||||
type?: string | null;
|
||||
@@ -269,9 +310,9 @@ function normalizePromptPreview(
|
||||
return null;
|
||||
}
|
||||
|
||||
const type = preview.type === 'image' || preview.type === 'markdown' || preview.type === 'html' || preview.type === 'resource'
|
||||
? preview.type
|
||||
: null;
|
||||
const normalizedUrl = normalizeOptionalText(preview.url);
|
||||
const normalizedContent = normalizeOptionalText(preview.content);
|
||||
const type = normalizePromptPreviewType(preview.type, normalizedUrl, normalizedContent);
|
||||
|
||||
if (!type) {
|
||||
return null;
|
||||
@@ -279,8 +320,8 @@ function normalizePromptPreview(
|
||||
|
||||
return {
|
||||
type,
|
||||
url: normalizeOptionalText(preview.url),
|
||||
content: normalizeOptionalText(preview.content),
|
||||
url: normalizedUrl,
|
||||
content: normalizedContent,
|
||||
alt: normalizeOptionalText(preview.alt),
|
||||
title: normalizeOptionalText(preview.title),
|
||||
};
|
||||
|
||||
@@ -43,6 +43,68 @@ function normalizeText(value: unknown) {
|
||||
return String(value ?? '').trim();
|
||||
}
|
||||
|
||||
function normalizePromptPreviewType(typeValue: unknown, url: string, content: string, editableMode = false) {
|
||||
const normalizedType = normalizeText(typeValue).toLowerCase();
|
||||
|
||||
if (
|
||||
normalizedType === 'image' ||
|
||||
normalizedType === 'md' ||
|
||||
normalizedType === 'markdown' ||
|
||||
normalizedType === 'html' ||
|
||||
normalizedType === 'resource' ||
|
||||
normalizedType === 'editable' ||
|
||||
normalizedType === 'editor' ||
|
||||
normalizedType === 'code'
|
||||
) {
|
||||
if (normalizedType === 'editable' || normalizedType === 'editor' || normalizedType === 'code') {
|
||||
return 'editable';
|
||||
}
|
||||
|
||||
return normalizedType;
|
||||
}
|
||||
|
||||
if (normalizedType === 'text' || normalizedType === 'plain' || normalizedType === 'txt') {
|
||||
return editableMode ? 'editable' : 'markdown';
|
||||
}
|
||||
|
||||
if (normalizedType === 'htm') {
|
||||
return 'html';
|
||||
}
|
||||
|
||||
if (editableMode && (url || content)) {
|
||||
return 'editable';
|
||||
}
|
||||
|
||||
if (editableMode) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const normalizedContent = String(content ?? '').trim();
|
||||
const normalizedUrl = normalizeUrl(url).toLowerCase();
|
||||
|
||||
if (normalizedUrl.endsWith('.md') || normalizedUrl.endsWith('.markdown')) {
|
||||
return 'markdown';
|
||||
}
|
||||
|
||||
if (normalizedUrl.endsWith('.html') || normalizedUrl.endsWith('.htm')) {
|
||||
return 'html';
|
||||
}
|
||||
|
||||
if (!normalizedContent) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (/<(?:!doctype\s+html|html|head|body|main|section|article|div)\b/i.test(normalizedContent)) {
|
||||
return 'html';
|
||||
}
|
||||
|
||||
if (/^#{1,6}\s|^\s*[-*+]\s+|^\s*\d+\.\s+|^\s*>\s+|\[[^\]]+\]\([^)]+\)/m.test(normalizedContent)) {
|
||||
return 'markdown';
|
||||
}
|
||||
|
||||
return 'resource';
|
||||
}
|
||||
|
||||
function unwrapMarkdownLinkTarget(value: string) {
|
||||
const normalized = normalizeText(value);
|
||||
|
||||
@@ -308,24 +370,26 @@ function normalizePromptPreview(value: unknown): PromptPreview | null {
|
||||
}
|
||||
|
||||
const record = value as Record<string, unknown>;
|
||||
const type =
|
||||
record.type === 'image' || record.type === 'markdown' || record.type === 'html' || record.type === 'resource'
|
||||
? record.type
|
||||
: null;
|
||||
const url = normalizeUrl(normalizeText(record.url));
|
||||
const content = String(record.content ?? '').trim() || null;
|
||||
const alt = normalizeText(record.alt) || null;
|
||||
const title = normalizeText(record.title) || null;
|
||||
const editable = record.editable === true;
|
||||
const type = normalizePromptPreviewType(record.type, url, content || '', editable);
|
||||
|
||||
if (!type) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (type === 'image' || type === 'resource') {
|
||||
if (type === 'image' || (type === 'resource' && !editable)) {
|
||||
if (!url) {
|
||||
return null;
|
||||
}
|
||||
} else if (!content && !url) {
|
||||
} else if (type !== 'editable' && !content && !url) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (type === 'editable' && !content && !url) {
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -335,6 +399,7 @@ function normalizePromptPreview(value: unknown): PromptPreview | null {
|
||||
content,
|
||||
alt,
|
||||
title,
|
||||
editable: editable || type === 'editable' ? true : null,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -2605,6 +2605,37 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.app-chat-prompt-card__preview-source {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.app-chat-prompt-card__preview-source-editor {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
min-height: 140px;
|
||||
padding: 12px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.28);
|
||||
border-radius: 0;
|
||||
background: #0f172a;
|
||||
color: #e2e8f0;
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
||||
box-shadow: none;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.app-chat-prompt-card__preview-source-editor:hover,
|
||||
.app-chat-prompt-card__preview-source-editor:focus,
|
||||
.app-chat-prompt-card__preview-source-editor:focus-visible {
|
||||
border-color: rgba(13, 148, 136, 0.58);
|
||||
box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.16);
|
||||
}
|
||||
|
||||
.app-chat-prompt-card__preview-code .previewer-ui__editor,
|
||||
.app-chat-prompt-card__preview-code .previewer-ui__editor-body {
|
||||
height: 100%;
|
||||
|
||||
@@ -10,11 +10,12 @@ export type ChatComposerAttachment = {
|
||||
};
|
||||
|
||||
export type ChatStructuredPreview = {
|
||||
type: 'image' | 'markdown' | 'html' | 'resource';
|
||||
type: 'image' | 'markdown' | 'html' | 'resource' | 'editable';
|
||||
url?: string | null;
|
||||
content?: string | null;
|
||||
alt?: string | null;
|
||||
title?: string | null;
|
||||
editable?: boolean | null;
|
||||
};
|
||||
|
||||
export type ChatPromptContextRef = {
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { AppstoreOutlined, CheckOutlined, CloseOutlined, CommentOutlined, CopyOutlined, DeleteOutlined, DownOutlined, EditOutlined, EyeInvisibleOutlined, EyeOutlined, FileTextOutlined, FilterOutlined, FullscreenOutlined, LeftOutlined, MinusOutlined, PlusOutlined, ReloadOutlined, RightOutlined, SearchOutlined, SendOutlined, SettingOutlined, ThunderboltOutlined, UpOutlined } from '@ant-design/icons';
|
||||
import * as AntdIcons from '@ant-design/icons';
|
||||
import { AppstoreOutlined, CheckOutlined, CommentOutlined, CopyOutlined, DeleteOutlined, DownOutlined, EditOutlined, EyeInvisibleOutlined, EyeOutlined, FileTextOutlined, FilterOutlined, FullscreenOutlined, LeftOutlined, MinusOutlined, PlusOutlined, ReloadOutlined, RightOutlined, SearchOutlined, SendOutlined, SettingOutlined, ThunderboltOutlined, UpOutlined } from '@ant-design/icons';
|
||||
import { Alert, App, Button, Checkbox, Drawer, Dropdown, Input, Modal, Select, Spin, Tabs, Tag, Typography, type MenuProps } from 'antd';
|
||||
import type { TextAreaRef } from 'antd/es/input/TextArea';
|
||||
import { Suspense, lazy, startTransition, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type ClipboardEvent, type CSSProperties, type FocusEvent, type KeyboardEvent, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type ReactNode } from 'react';
|
||||
@@ -19,6 +20,7 @@ import { PhotoPuzzleAppView } from '../../../views/play/apps/photo-puzzle/PhotoP
|
||||
import { PhotoPrismAppView } from '../../../views/play/apps/photoprism/PhotoPrismAppView';
|
||||
import { TetrisAppView } from '../../../views/play/apps/tetris/TetrisAppView';
|
||||
import { TheQuestAppView } from '../../../views/play/apps/the-quest/TheQuestAppView';
|
||||
import { Template1PlayAppView } from '../../../views/play/apps/template1/Template1PlayAppView';
|
||||
import { SharedResourceManagementPage } from '../SharedResourceManagementPage';
|
||||
import { SharedAppSettingsPage } from '../SharedAppSettingsPage';
|
||||
import { TokenSettingManagementPage } from '../TokenSettingManagementPage';
|
||||
@@ -96,6 +98,8 @@ import './ChatSharePage.css';
|
||||
|
||||
const { Paragraph, Text, Title } = Typography;
|
||||
|
||||
const ShareCloseIcon = AntdIcons.CloseOutlined || AntdIcons.CloseCircleOutlined || (() => <span aria-hidden="true">×</span>);
|
||||
|
||||
const CHAT_API_RESOURCE_ROUTE_PREFIX = '/api/chat/resources/';
|
||||
const CHAT_PUBLIC_ROUTE_PREFIX = '/.codex_chat/';
|
||||
const CHAT_PUBLIC_DOT_CODEX_PREFIX = '/public/.codex_chat/';
|
||||
@@ -114,11 +118,11 @@ const SHARE_ROOM_SNAPSHOT_SESSION_CACHE_LIMIT = 6;
|
||||
const SHARE_ROOM_SWITCH_CACHE_REQUEST_LIMIT = 12;
|
||||
const SHARE_ROOM_SWITCH_CACHE_MESSAGE_LIMIT = 32;
|
||||
const SHARE_IMMEDIATE_SEND_TOGGLE_HOLD_MS = 1000;
|
||||
const SHARE_EDGE_NAVIGATION_HOTZONE_PX = 28;
|
||||
const SHARE_APPS_EDGE_MIDDLE_BAND_RATIO = 0.2;
|
||||
const SHARE_EDGE_NAVIGATION_HOTZONE_PX = 38;
|
||||
const SHARE_EDGE_GESTURE_MIN_HORIZONTAL_PX = 16;
|
||||
const SHARE_EDGE_GESTURE_OPEN_APPS_PX = 96;
|
||||
const SHARE_EDGE_GESTURE_MAX_VERTICAL_DRIFT_PX = 64;
|
||||
const SHARE_EDGE_GESTURE_OPEN_APPS_PX = 100;
|
||||
const SHARE_EDGE_APPS_GESTURE_HOTZONE_PX = 110;
|
||||
const SHARE_MINIMIZED_ACTION_TAP_TOLERANCE_PX = 8;
|
||||
const SHARE_HISTORY_PAGE_SIZE = 40;
|
||||
const SHARE_ACCESS_PIN_PROMPT_TTL_OPTIONS = [
|
||||
{ value: 'always', label: '매번 묻기', minutes: 0 },
|
||||
@@ -191,6 +195,16 @@ type ShareMinimizedProgramItem = {
|
||||
y: number;
|
||||
};
|
||||
};
|
||||
type ShareMinimizedProgramAction = 'restore' | 'close';
|
||||
type ShareMinimizedProgramActionTracking = {
|
||||
key: string;
|
||||
pointerId: number;
|
||||
startX: number;
|
||||
startY: number;
|
||||
action: ShareMinimizedProgramAction;
|
||||
captureTarget: HTMLElement;
|
||||
cancelled: boolean;
|
||||
};
|
||||
type ShareAppEnvironment = PlayAppEnvironment;
|
||||
type ShareSearchResult = {
|
||||
key: string;
|
||||
@@ -214,11 +228,13 @@ type ShareEdgeGestureTracking =
|
||||
| {
|
||||
startX: number;
|
||||
startY: number;
|
||||
startTime: number;
|
||||
direction: 'back';
|
||||
}
|
||||
| {
|
||||
startX: number;
|
||||
startY: number;
|
||||
startTime: number;
|
||||
direction: 'apps';
|
||||
opened: boolean;
|
||||
};
|
||||
@@ -1512,6 +1528,8 @@ function resolveSharePlayAppInstallThemeColor(appId: string) {
|
||||
return '#d97706';
|
||||
case 'the-quest':
|
||||
return '#7c3aed';
|
||||
case 'template1':
|
||||
return '#2f8dff';
|
||||
case 'tetris':
|
||||
return '#0f172a';
|
||||
default:
|
||||
@@ -1618,6 +1636,10 @@ function renderEmbeddedSharePlayApp(appId: string | undefined, onBack: () => voi
|
||||
return <TheQuestAppView onBack={onBack} launchContext="embedded" />;
|
||||
}
|
||||
|
||||
if (appId === 'template1') {
|
||||
return <Template1PlayAppView onBack={onBack} launchContext="embedded" />;
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -3968,7 +3990,7 @@ function ShareRequestCard({
|
||||
danger
|
||||
className="chat-share-page__message-action-button"
|
||||
loading={isRequestCancellationSaving}
|
||||
icon={<CloseOutlined />}
|
||||
icon={<ShareCloseIcon />}
|
||||
aria-label="취소 처리"
|
||||
title="취소 처리"
|
||||
onClick={() => {
|
||||
@@ -3997,7 +4019,7 @@ function ShareRequestCard({
|
||||
danger
|
||||
className="chat-share-page__message-action-button"
|
||||
loading={isActiveRequestCancellationSaving}
|
||||
icon={<CloseOutlined />}
|
||||
icon={<ShareCloseIcon />}
|
||||
aria-label="취소"
|
||||
title="취소"
|
||||
onClick={() => {
|
||||
@@ -4224,6 +4246,7 @@ export function ChatSharePage() {
|
||||
const requestedRoomSessionIdRef = useRef(requestedRoomSessionId);
|
||||
const skipNextRequestedRoomRefreshRef = useRef(false);
|
||||
const [isLoading, setIsLoading] = useState(() => initialCachedSnapshot == null);
|
||||
const [hasLoadedShareData, setHasLoadedShareData] = useState(initialHasCachedSnapshot);
|
||||
const [, setIsRefreshing] = useState(false);
|
||||
const [isLoadingFullSnapshot, setIsLoadingFullSnapshot] = useState(false);
|
||||
const [isLoadingOlderShareHistory, setIsLoadingOlderShareHistory] = useState(false);
|
||||
@@ -4344,6 +4367,8 @@ export function ChatSharePage() {
|
||||
lastY: number;
|
||||
captureTarget: HTMLDivElement;
|
||||
} | null>(null);
|
||||
const programMinimizedActionTrackingRef = useRef<ShareMinimizedProgramActionTracking | null>(null);
|
||||
const programMinimizedActionClickIgnoreUntilRef = useRef(0);
|
||||
const programMinimizedMovedRef = useRef(false);
|
||||
const minimizedProgramsRef = useRef<ShareMinimizedProgramItem[]>([]);
|
||||
const minimizedProgramPositionByKeyRef = useRef<Record<string, ShareMinimizedProgramItem['position']>>({});
|
||||
@@ -5156,6 +5181,7 @@ export function ChatSharePage() {
|
||||
snapshotRefreshInFlightRoomSessionIdRef.current = '';
|
||||
snapshotRefreshInFlightViewRef.current = null;
|
||||
}
|
||||
setHasLoadedShareData(true);
|
||||
setIsLoading(false);
|
||||
setIsRefreshing(false);
|
||||
|
||||
@@ -5739,6 +5765,19 @@ export function ChatSharePage() {
|
||||
|
||||
const handlePointerMove = (event: PointerEvent) => {
|
||||
const dragState = programMinimizedDragStateRef.current;
|
||||
const actionTracking = programMinimizedActionTrackingRef.current;
|
||||
|
||||
if (actionTracking && actionTracking.pointerId === event.pointerId) {
|
||||
const deltaX = Math.abs(event.clientX - actionTracking.startX);
|
||||
const deltaY = Math.abs(event.clientY - actionTracking.startY);
|
||||
|
||||
if (Math.max(deltaX, deltaY) > SHARE_MINIMIZED_ACTION_TAP_TOLERANCE_PX) {
|
||||
actionTracking.cancelled = true;
|
||||
if (actionTracking.captureTarget.hasPointerCapture(actionTracking.pointerId)) {
|
||||
actionTracking.captureTarget.releasePointerCapture(actionTracking.pointerId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!dragState || dragState.pointerId !== event.pointerId) {
|
||||
return;
|
||||
@@ -5768,8 +5807,12 @@ export function ChatSharePage() {
|
||||
|
||||
const finishPointerDrag = (event: PointerEvent) => {
|
||||
const dragState = programMinimizedDragStateRef.current;
|
||||
const actionTracking = programMinimizedActionTrackingRef.current;
|
||||
|
||||
if (!dragState || dragState.pointerId !== event.pointerId) {
|
||||
if (actionTracking?.pointerId === event.pointerId) {
|
||||
clearProgramMinimizedActionTracking();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -5778,6 +5821,9 @@ export function ChatSharePage() {
|
||||
}
|
||||
|
||||
programMinimizedDragStateRef.current = null;
|
||||
if (actionTracking?.pointerId === event.pointerId) {
|
||||
clearProgramMinimizedActionTracking();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
@@ -5791,6 +5837,7 @@ export function ChatSharePage() {
|
||||
window.removeEventListener('pointermove', handlePointerMove);
|
||||
window.removeEventListener('pointerup', finishPointerDrag);
|
||||
window.removeEventListener('pointercancel', finishPointerDrag);
|
||||
clearProgramMinimizedActionTracking();
|
||||
};
|
||||
}, [minimizedPrograms.length]);
|
||||
|
||||
@@ -6002,11 +6049,42 @@ export function ChatSharePage() {
|
||||
programMinimizedMovedRef.current = false;
|
||||
}, []);
|
||||
|
||||
const handleProgramMinimizedActionPointerDown = useCallback((event: ReactPointerEvent<HTMLElement>) => {
|
||||
const clearProgramMinimizedActionTracking = useCallback(() => {
|
||||
const actionTracking = programMinimizedActionTrackingRef.current;
|
||||
|
||||
if (actionTracking?.captureTarget.hasPointerCapture(actionTracking.pointerId)) {
|
||||
actionTracking.captureTarget.releasePointerCapture(actionTracking.pointerId);
|
||||
}
|
||||
|
||||
programMinimizedActionTrackingRef.current = null;
|
||||
}, []);
|
||||
|
||||
const handleProgramMinimizedActionPointerDown = useCallback((event: ReactPointerEvent<HTMLElement>, action: ShareMinimizedProgramAction, targetKey: string) => {
|
||||
if (event.pointerType === 'mouse' && event.button !== 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const normalizedTargetKey = targetKey.trim();
|
||||
if (!normalizedTargetKey) {
|
||||
return;
|
||||
}
|
||||
|
||||
clearProgramMinimizedDragState();
|
||||
clearProgramMinimizedActionTracking();
|
||||
programMinimizedActionClickIgnoreUntilRef.current = 0;
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
clearProgramMinimizedDragState();
|
||||
}, [clearProgramMinimizedDragState]);
|
||||
event.currentTarget.setPointerCapture(event.pointerId);
|
||||
programMinimizedActionTrackingRef.current = {
|
||||
key: normalizedTargetKey,
|
||||
pointerId: event.pointerId,
|
||||
startX: event.clientX,
|
||||
startY: event.clientY,
|
||||
action,
|
||||
captureTarget: event.currentTarget,
|
||||
cancelled: false,
|
||||
};
|
||||
}, [clearProgramMinimizedDragState, clearProgramMinimizedActionTracking]);
|
||||
|
||||
const runProgramMinimizedActionAfterPointerCycle = useCallback((action: () => void) => {
|
||||
if (typeof window === 'undefined') {
|
||||
@@ -6067,6 +6145,66 @@ export function ChatSharePage() {
|
||||
setMinimizedPrograms((current) => current.filter((item) => item.target.key !== targetKey));
|
||||
}, []);
|
||||
|
||||
const runProgramMinimizedAction = useCallback((targetKey: string, action: ShareMinimizedProgramAction) => {
|
||||
if (action === 'restore') {
|
||||
runProgramMinimizedActionAfterPointerCycle(() => {
|
||||
handleRestoreProgram(targetKey);
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
runProgramMinimizedActionAfterPointerCycle(() => {
|
||||
handleCloseMinimizedProgram(targetKey);
|
||||
});
|
||||
}, [handleRestoreProgram, handleCloseMinimizedProgram, runProgramMinimizedActionAfterPointerCycle]);
|
||||
|
||||
const handleProgramMinimizedActionPointerUp = useCallback((event: ReactPointerEvent<HTMLElement>, action: ShareMinimizedProgramAction, targetKey: string) => {
|
||||
const normalizedTargetKey = targetKey.trim();
|
||||
const tracking = programMinimizedActionTrackingRef.current;
|
||||
|
||||
if (
|
||||
!tracking
|
||||
|| tracking.pointerId !== event.pointerId
|
||||
|| tracking.key !== normalizedTargetKey
|
||||
|| tracking.action !== action
|
||||
|| tracking.cancelled
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
const now = typeof performance !== 'undefined' && typeof performance.now === 'function' ? performance.now() : Date.now();
|
||||
programMinimizedActionClickIgnoreUntilRef.current = now + 500;
|
||||
clearProgramMinimizedActionTracking();
|
||||
runProgramMinimizedAction(normalizedTargetKey, action);
|
||||
}, [runProgramMinimizedAction]);
|
||||
|
||||
const handleProgramMinimizedActionClick = useCallback((event: ReactMouseEvent<HTMLElement>, action: ShareMinimizedProgramAction, targetKey: string) => {
|
||||
if (programMinimizedActionTrackingRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
const now = typeof performance !== 'undefined' && typeof performance.now === 'function' ? performance.now() : Date.now();
|
||||
if (programMinimizedActionClickIgnoreUntilRef.current > now) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
runProgramMinimizedAction(targetKey.trim(), action);
|
||||
}, [runProgramMinimizedAction]);
|
||||
|
||||
const handleProgramMinimizedActionKeyDown = useCallback((event: KeyboardEvent<HTMLElement>, action: ShareMinimizedProgramAction, targetKey: string) => {
|
||||
if (event.key !== 'Enter' && event.key !== ' ') {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
runProgramMinimizedAction(targetKey.trim(), action);
|
||||
}, [runProgramMinimizedAction]);
|
||||
|
||||
const minimizedProgramCards = minimizedPrograms.map((item, index) => (
|
||||
<div
|
||||
key={item.target.key}
|
||||
@@ -6098,13 +6236,14 @@ export function ChatSharePage() {
|
||||
size="small"
|
||||
icon={<AppstoreOutlined />}
|
||||
className="chat-share-page__program-minimized-button"
|
||||
onPointerDown={handleProgramMinimizedActionPointerDown}
|
||||
onPointerDown={(event: ReactPointerEvent<HTMLElement>) => {
|
||||
handleProgramMinimizedActionPointerDown(event, 'restore', item.target.key);
|
||||
}}
|
||||
onPointerUp={(event: ReactPointerEvent<HTMLElement>) => {
|
||||
handleProgramMinimizedActionPointerUp(event, 'restore', item.target.key);
|
||||
}}
|
||||
onClick={(event: ReactMouseEvent<HTMLElement>) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
runProgramMinimizedActionAfterPointerCycle(() => {
|
||||
handleRestoreProgram(item.target.key);
|
||||
});
|
||||
handleProgramMinimizedActionClick(event, 'restore', item.target.key);
|
||||
}}
|
||||
>
|
||||
열기
|
||||
@@ -6113,15 +6252,16 @@ export function ChatSharePage() {
|
||||
type="text"
|
||||
size="small"
|
||||
className="chat-share-page__program-minimized-icon chat-share-page__program-minimized-close"
|
||||
icon={<CloseOutlined />}
|
||||
icon={<ShareCloseIcon />}
|
||||
aria-label="프로그램 닫기"
|
||||
onPointerDown={handleProgramMinimizedActionPointerDown}
|
||||
onPointerDown={(event: ReactPointerEvent<HTMLElement>) => {
|
||||
handleProgramMinimizedActionPointerDown(event, 'close', item.target.key);
|
||||
}}
|
||||
onPointerUp={(event: ReactPointerEvent<HTMLElement>) => {
|
||||
handleProgramMinimizedActionPointerUp(event, 'close', item.target.key);
|
||||
}}
|
||||
onClick={(event: ReactMouseEvent<HTMLElement>) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
runProgramMinimizedActionAfterPointerCycle(() => {
|
||||
handleCloseMinimizedProgram(item.target.key);
|
||||
});
|
||||
handleProgramMinimizedActionClick(event, 'close', item.target.key);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
@@ -6342,6 +6482,7 @@ export function ChatSharePage() {
|
||||
if (!normalizedToken) {
|
||||
setErrorMessage('공유 링크가 없습니다.');
|
||||
setIsLoading(false);
|
||||
setHasLoadedShareData(false);
|
||||
return undefined;
|
||||
}
|
||||
|
||||
@@ -6364,6 +6505,7 @@ export function ChatSharePage() {
|
||||
deferredSnapshotRef.current = null;
|
||||
setSnapshot(cachedSnapshot);
|
||||
setIsLoading(cachedSnapshot == null);
|
||||
setHasLoadedShareData(cachedSnapshot != null);
|
||||
setIsRoomSwitching(false);
|
||||
setRequestedRoomSessionId(restoredRoomSessionId);
|
||||
}, [normalizedToken]);
|
||||
@@ -8209,7 +8351,7 @@ export function ChatSharePage() {
|
||||
type="text"
|
||||
size="small"
|
||||
className="chat-share-page__process-inspector-window-button"
|
||||
icon={<CloseOutlined />}
|
||||
icon={<ShareCloseIcon />}
|
||||
aria-label="상세 과정 닫기"
|
||||
onClick={closeProcessInspector}
|
||||
/>
|
||||
@@ -9607,6 +9749,7 @@ export function ChatSharePage() {
|
||||
|| Boolean(activeProcessInspectorRequestId);
|
||||
|
||||
let tracking: ShareEdgeGestureTracking | null = null;
|
||||
let lastTouch: Touch | null = null;
|
||||
|
||||
const resetTracking = () => {
|
||||
tracking = null;
|
||||
@@ -9620,27 +9763,28 @@ export function ChatSharePage() {
|
||||
return;
|
||||
}
|
||||
|
||||
const centerBandStart = window.innerHeight * SHARE_APPS_EDGE_MIDDLE_BAND_RATIO;
|
||||
const centerBandEnd = window.innerHeight * (1 - SHARE_APPS_EDGE_MIDDLE_BAND_RATIO);
|
||||
|
||||
if (
|
||||
touch.clientX >= window.innerWidth - SHARE_EDGE_NAVIGATION_HOTZONE_PX
|
||||
&& touch.clientY >= centerBandStart
|
||||
&& touch.clientY <= centerBandEnd
|
||||
touch.clientX >= window.innerWidth - SHARE_EDGE_APPS_GESTURE_HOTZONE_PX
|
||||
) {
|
||||
const now = performance.now();
|
||||
event.preventDefault();
|
||||
tracking = {
|
||||
startX: touch.clientX,
|
||||
startY: touch.clientY,
|
||||
startTime: now,
|
||||
direction: 'apps',
|
||||
opened: false,
|
||||
};
|
||||
lastTouch = touch;
|
||||
return;
|
||||
}
|
||||
|
||||
if (touch.clientX <= SHARE_EDGE_NAVIGATION_HOTZONE_PX) {
|
||||
const now = performance.now();
|
||||
tracking = {
|
||||
startX: touch.clientX,
|
||||
startY: touch.clientY,
|
||||
startTime: now,
|
||||
direction: 'back',
|
||||
};
|
||||
return;
|
||||
@@ -9656,41 +9800,71 @@ export function ChatSharePage() {
|
||||
return;
|
||||
}
|
||||
|
||||
lastTouch = touch;
|
||||
|
||||
const deltaX = touch.clientX - tracking.startX;
|
||||
const deltaY = touch.clientY - tracking.startY;
|
||||
|
||||
if (Math.abs(deltaY) > SHARE_EDGE_GESTURE_MAX_VERTICAL_DRIFT_PX) {
|
||||
tracking = null;
|
||||
return;
|
||||
}
|
||||
if (tracking.direction === 'apps') {
|
||||
if (deltaX <= SHARE_EDGE_GESTURE_OPEN_APPS_PX * -1) {
|
||||
if (deltaX <= SHARE_EDGE_GESTURE_MIN_HORIZONTAL_PX * -1) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
if (tracking.direction === 'back') {
|
||||
if (deltaX >= SHARE_EDGE_GESTURE_MIN_HORIZONTAL_PX) {
|
||||
event.preventDefault();
|
||||
if (!tracking.opened) {
|
||||
tracking.opened = true;
|
||||
openShareAppsPanel();
|
||||
}
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (deltaX <= SHARE_EDGE_GESTURE_MIN_HORIZONTAL_PX * -1) {
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
if (!tracking.opened && deltaX <= SHARE_EDGE_GESTURE_OPEN_APPS_PX * -1) {
|
||||
tracking.opened = true;
|
||||
openShareAppsPanel();
|
||||
if (tracking.direction === 'back' && deltaX >= SHARE_EDGE_GESTURE_MIN_HORIZONTAL_PX) {
|
||||
event.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
scrollContainer.addEventListener('touchstart', handleTouchStart, { passive: true, capture: true });
|
||||
const handleTouchEnd = (event: TouchEvent) => {
|
||||
const touch = event.changedTouches[0] ?? lastTouch;
|
||||
|
||||
if (!tracking || !touch) {
|
||||
resetTracking();
|
||||
lastTouch = null;
|
||||
return;
|
||||
}
|
||||
|
||||
if (tracking.direction === 'apps' && !tracking.opened) {
|
||||
const deltaX = touch.clientX - tracking.startX;
|
||||
|
||||
if (deltaX <= SHARE_EDGE_GESTURE_OPEN_APPS_PX * -1) {
|
||||
tracking.opened = true;
|
||||
openShareAppsPanel();
|
||||
}
|
||||
}
|
||||
|
||||
resetTracking();
|
||||
lastTouch = null;
|
||||
};
|
||||
|
||||
const handleTouchCancel = () => {
|
||||
resetTracking();
|
||||
lastTouch = null;
|
||||
};
|
||||
|
||||
scrollContainer.addEventListener('touchstart', handleTouchStart, { passive: false, capture: true });
|
||||
scrollContainer.addEventListener('touchmove', handleTouchMove, { passive: false, capture: true });
|
||||
scrollContainer.addEventListener('touchend', resetTracking, { passive: true, capture: true });
|
||||
scrollContainer.addEventListener('touchcancel', resetTracking, { passive: true, capture: true });
|
||||
scrollContainer.addEventListener('touchend', handleTouchEnd, { passive: true, capture: true });
|
||||
scrollContainer.addEventListener('touchcancel', handleTouchCancel, { passive: true, capture: true });
|
||||
|
||||
return () => {
|
||||
scrollContainer.removeEventListener('touchstart', handleTouchStart, true);
|
||||
scrollContainer.removeEventListener('touchmove', handleTouchMove, true);
|
||||
scrollContainer.removeEventListener('touchend', resetTracking, true);
|
||||
scrollContainer.removeEventListener('touchcancel', resetTracking, true);
|
||||
scrollContainer.removeEventListener('touchend', handleTouchEnd, true);
|
||||
scrollContainer.removeEventListener('touchcancel', handleTouchCancel, true);
|
||||
};
|
||||
}, [
|
||||
activeProcessInspectorRequestId,
|
||||
@@ -9951,7 +10125,7 @@ export function ChatSharePage() {
|
||||
);
|
||||
}
|
||||
|
||||
if (errorMessage || !snapshot) {
|
||||
if (errorMessage || (!snapshot && hasLoadedShareData)) {
|
||||
return (
|
||||
<div className="chat-share-page chat-share-page--centered">
|
||||
<div className="chat-share-page__panel chat-share-page__empty-card">
|
||||
@@ -9962,6 +10136,14 @@ export function ChatSharePage() {
|
||||
);
|
||||
}
|
||||
|
||||
if (!snapshot) {
|
||||
return (
|
||||
<div className="chat-share-page chat-share-page--centered">
|
||||
<Spin size="large" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
@@ -10555,7 +10737,7 @@ export function ChatSharePage() {
|
||||
type="text"
|
||||
size="small"
|
||||
className="app-chat-panel__composer-attachment-remove"
|
||||
icon={<CloseOutlined />}
|
||||
icon={<ShareCloseIcon />}
|
||||
aria-label={`${attachment.name} 첨부 제거`}
|
||||
onClick={() => {
|
||||
setComposerAttachments((current) => current.filter((item) => item.id !== attachment.id));
|
||||
|
||||
@@ -97,6 +97,12 @@
|
||||
rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.apps-library__card--template1 {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(113, 184, 255, 0.24), rgba(96, 138, 255, 0.16)),
|
||||
rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.apps-library__card--the-quest {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 201, 112, 0.24), rgba(104, 198, 255, 0.14)),
|
||||
|
||||
@@ -8,7 +8,13 @@ import { PhotoPrismAppView } from '../photoprism/PhotoPrismAppView';
|
||||
import { PhotoPuzzleAppView } from '../photo-puzzle/PhotoPuzzleAppView';
|
||||
import { TheQuestAppView } from '../the-quest/TheQuestAppView';
|
||||
import { TetrisAppView } from '../tetris/TetrisAppView';
|
||||
import { APP_LIBRARY_ENTRIES, findReadyPlayAppEntryById } from './appsRegistry';
|
||||
import { Template1PlayAppView } from '../template1/Template1PlayAppView';
|
||||
import {
|
||||
getCurrentPlayAppEnvironment,
|
||||
getPlayAppEntries,
|
||||
isPlayAppLaunchableInEnvironment,
|
||||
loadPlayAppEntriesFromServer,
|
||||
} from './appsRegistry';
|
||||
import { buildPlayAppPath } from '../../../../app/main/routes';
|
||||
import { createInstallManifestObjectUrl, swapInstallDocumentMetadata } from '../../../../app/main/pwa/installManifest';
|
||||
|
||||
@@ -30,6 +36,8 @@ function resolvePlayAppInstallThemeColor(appId: string) {
|
||||
return '#d97706';
|
||||
case 'the-quest':
|
||||
return '#7c3aed';
|
||||
case 'template1':
|
||||
return '#2f8dff';
|
||||
case 'tetris':
|
||||
return '#0f172a';
|
||||
default:
|
||||
@@ -44,12 +52,47 @@ export function AppsLibraryView() {
|
||||
const [isCompactViewport, setIsCompactViewport] = useState(() =>
|
||||
typeof window === 'undefined' ? false : window.matchMedia('(max-width: 768px)').matches,
|
||||
);
|
||||
const [playAppEntries, setPlayAppEntries] = useState(() => getPlayAppEntries());
|
||||
const [isLoadingPlayApps, setIsLoadingPlayApps] = useState(false);
|
||||
const activeAppId = searchParams.get('app');
|
||||
const launchContext = searchParams.get('launchContext') === 'embedded' ? 'embedded' : 'direct';
|
||||
const returnTo = normalizeReturnToPath(searchParams.get('returnTo'));
|
||||
const activeAppEntry = findReadyPlayAppEntryById(activeAppId);
|
||||
const environment = getCurrentPlayAppEnvironment();
|
||||
const activeAppEntry = useMemo(() => {
|
||||
const candidate = playAppEntries.find((entry) => entry.id === activeAppId);
|
||||
if (!candidate || !isPlayAppLaunchableInEnvironment(candidate, environment)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const readyCount = useMemo(() => APP_LIBRARY_ENTRIES.filter((entry) => entry.isReady).length, []);
|
||||
return candidate;
|
||||
}, [activeAppId, environment, playAppEntries]);
|
||||
|
||||
const readyCount = useMemo(
|
||||
() => playAppEntries.filter((entry) => isPlayAppLaunchableInEnvironment(entry, environment)).length,
|
||||
[environment, playAppEntries],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
let isDisposed = false;
|
||||
setIsLoadingPlayApps(true);
|
||||
|
||||
void loadPlayAppEntriesFromServer()
|
||||
.then((entries) => {
|
||||
if (!isDisposed) {
|
||||
setPlayAppEntries(entries);
|
||||
}
|
||||
})
|
||||
.catch(() => undefined)
|
||||
.finally(() => {
|
||||
if (!isDisposed) {
|
||||
setIsLoadingPlayApps(false);
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
isDisposed = true;
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window === 'undefined') {
|
||||
@@ -140,25 +183,31 @@ export function AppsLibraryView() {
|
||||
return <TheQuestAppView onBack={closeApp} launchContext={launchContext} />;
|
||||
}
|
||||
|
||||
if (activeAppEntry?.id === 'template1') {
|
||||
return <Template1PlayAppView onBack={closeApp} launchContext={launchContext} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="apps-library" data-testid="apps-library">
|
||||
<header className="apps-library__topbar">
|
||||
<div className="apps-library__title">
|
||||
<strong>앱 보관함</strong>
|
||||
<span>{APP_LIBRARY_ENTRIES.length}개</span>
|
||||
<span>{playAppEntries.length}개</span>
|
||||
</div>
|
||||
<Tag bordered={false} color="gold">
|
||||
실행 가능 {readyCount}
|
||||
{isLoadingPlayApps ? '실행 가능 로딩중' : `실행 가능 ${readyCount}`}
|
||||
</Tag>
|
||||
</header>
|
||||
|
||||
<div className={`apps-library__shelf${isCompactViewport ? ' apps-library__shelf--compact' : ''}`}>
|
||||
{APP_LIBRARY_ENTRIES.map((entry) => (
|
||||
{playAppEntries.map((entry) => (
|
||||
<button
|
||||
key={entry.id}
|
||||
type="button"
|
||||
className={`apps-library__card ${entry.accentClassName}${entry.isReady ? ' apps-library__card--ready' : ''}`}
|
||||
disabled={!entry.isReady}
|
||||
className={`apps-library__card ${
|
||||
entry.accentClassName
|
||||
}${isPlayAppLaunchableInEnvironment(entry, environment) ? ' apps-library__card--ready' : ''}`}
|
||||
disabled={!isPlayAppLaunchableInEnvironment(entry, environment)}
|
||||
data-testid={
|
||||
entry.id === 'e-reader'
|
||||
? 'apps-library-open-e-reader'
|
||||
@@ -170,8 +219,10 @@ export function AppsLibraryView() {
|
||||
? 'apps-library-open-photo-puzzle'
|
||||
: entry.id === 'tetris'
|
||||
? 'apps-library-open-tetris'
|
||||
: entry.id === 'the-quest'
|
||||
? 'apps-library-open-the-quest'
|
||||
: entry.id === 'the-quest'
|
||||
? 'apps-library-open-the-quest'
|
||||
: entry.id === 'template1'
|
||||
? 'apps-library-open-template1'
|
||||
: undefined
|
||||
}
|
||||
onClick={() => openApp(entry.id)}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import {
|
||||
AppstoreOutlined,
|
||||
AppstoreAddOutlined,
|
||||
BellOutlined,
|
||||
BookOutlined,
|
||||
FileImageOutlined,
|
||||
@@ -15,6 +16,19 @@ import type { ReactNode } from 'react';
|
||||
|
||||
export type PlayAppEnvironment = 'preview' | 'test' | 'prod';
|
||||
|
||||
type PlayAppServerRow = {
|
||||
id: string;
|
||||
name: string;
|
||||
accentClassName: string;
|
||||
statusLabel: string;
|
||||
isReady: boolean;
|
||||
iconName: string;
|
||||
usagePriority?: number;
|
||||
supportedEnvironments?: PlayAppEnvironment[];
|
||||
searchKeywords?: string[];
|
||||
searchDescription?: string;
|
||||
};
|
||||
|
||||
export type PlayAppEntry = {
|
||||
id: string;
|
||||
name: string;
|
||||
@@ -28,7 +42,25 @@ export type PlayAppEntry = {
|
||||
searchDescription?: string;
|
||||
};
|
||||
|
||||
export const APP_LIBRARY_ENTRIES: PlayAppEntry[] = [
|
||||
const PLAY_APP_ICON_REGISTRY: Record<string, ReactNode> = {
|
||||
AppstoreOutlined: <AppstoreOutlined />,
|
||||
AppstoreAddOutlined: <AppstoreAddOutlined />,
|
||||
BellOutlined: <BellOutlined />,
|
||||
BookOutlined: <BookOutlined />,
|
||||
FireOutlined: <FireOutlined />,
|
||||
FundProjectionScreenOutlined: <FundProjectionScreenOutlined />,
|
||||
FileImageOutlined: <FileImageOutlined />,
|
||||
PictureOutlined: <PictureOutlined />,
|
||||
RocketOutlined: <RocketOutlined />,
|
||||
SoundOutlined: <SoundOutlined />,
|
||||
StarOutlined: <StarOutlined />,
|
||||
ThunderboltOutlined: <ThunderboltOutlined />,
|
||||
};
|
||||
|
||||
const PLAY_APP_API_PATH = '/api/play-apps';
|
||||
const FALLBACK_ICON = <AppstoreOutlined />;
|
||||
|
||||
const FALLBACK_ENTRIES: PlayAppEntry[] = [
|
||||
{
|
||||
id: 'baseball-ticket-bay',
|
||||
name: '야구-티켓베이',
|
||||
@@ -89,6 +121,18 @@ export const APP_LIBRARY_ENTRIES: PlayAppEntry[] = [
|
||||
searchKeywords: ['the quest', 'rpg', 'mobile rpg', 'phaser', 'quest', 'rpg game', '모바일 rpg'],
|
||||
searchDescription: 'Apps 보관함에서 한국형 모바일 RPG 데모 The Quest를 실행합니다.',
|
||||
},
|
||||
{
|
||||
id: 'template1',
|
||||
name: 'Template1',
|
||||
accentClassName: 'apps-library__card--template1',
|
||||
statusLabel: '템플릿',
|
||||
isReady: true,
|
||||
icon: <AppstoreAddOutlined />,
|
||||
usagePriority: 45,
|
||||
supportedEnvironments: ['preview', 'test'],
|
||||
searchKeywords: ['template1', 'template', '앱 템플릿', '레이아웃', '기본 UI', 'layout'],
|
||||
searchDescription: '다른 앱 개발 시 공통 레이아웃을 빠르게 적용하기 위한 템플릿 화면입니다.',
|
||||
},
|
||||
{
|
||||
id: 'tetris',
|
||||
name: 'Tetris',
|
||||
@@ -108,8 +152,123 @@ export const APP_LIBRARY_ENTRIES: PlayAppEntry[] = [
|
||||
{ id: 'app-vault', name: 'App Vault', accentClassName: 'apps-library__card--vault', statusLabel: '테마', isReady: false, icon: <AppstoreOutlined /> },
|
||||
];
|
||||
|
||||
export function getReadyPlayAppEntries() {
|
||||
return APP_LIBRARY_ENTRIES.filter((entry) => entry.isReady);
|
||||
export const APP_LIBRARY_ENTRIES = FALLBACK_ENTRIES;
|
||||
|
||||
let playAppCache = FALLBACK_ENTRIES;
|
||||
let loadingPromise: Promise<PlayAppEntry[]> | null = null;
|
||||
|
||||
function isObjectValue(value: unknown): value is Record<string, unknown> {
|
||||
return typeof value === 'object' && value !== null;
|
||||
}
|
||||
|
||||
function parseSearchKeywords(value: unknown) {
|
||||
if (!Array.isArray(value)) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return value
|
||||
.map((item) => (typeof item === 'string' ? item.trim() : ''))
|
||||
.filter((item) => item.length > 0);
|
||||
}
|
||||
|
||||
function isPlayEnvironment(value: unknown): value is PlayAppEnvironment {
|
||||
return value === 'preview' || value === 'test' || value === 'prod';
|
||||
}
|
||||
|
||||
function normalizePlayAppServerPayload(payload: unknown): PlayAppServerRow[] {
|
||||
if (!isObjectValue(payload) || !Array.isArray(payload.items)) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return payload.items
|
||||
.map((raw) => {
|
||||
if (!isObjectValue(raw)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const id = typeof raw.id === 'string' ? raw.id.trim() : '';
|
||||
const name = typeof raw.name === 'string' ? raw.name.trim() : '';
|
||||
const accentClassName = typeof raw.accentClassName === 'string' ? raw.accentClassName.trim() : '';
|
||||
const statusLabel = typeof raw.statusLabel === 'string' ? raw.statusLabel.trim() : '';
|
||||
const iconName = typeof raw.iconName === 'string' ? raw.iconName.trim() : '';
|
||||
|
||||
if (!id || !name || !accentClassName) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const rawSupported = Array.isArray(raw.supportedEnvironments) ? raw.supportedEnvironments : [];
|
||||
const supportedEnvironments = rawSupported.filter(isPlayEnvironment);
|
||||
|
||||
return {
|
||||
id,
|
||||
name,
|
||||
accentClassName,
|
||||
statusLabel: statusLabel || '준비',
|
||||
isReady: raw.isReady === true,
|
||||
iconName,
|
||||
usagePriority: typeof raw.usagePriority === 'number' ? raw.usagePriority : undefined,
|
||||
supportedEnvironments,
|
||||
searchKeywords: parseSearchKeywords(raw.searchKeywords),
|
||||
searchDescription: typeof raw.searchDescription === 'string' ? raw.searchDescription.trim() : '',
|
||||
} satisfies PlayAppServerRow;
|
||||
})
|
||||
.filter((item): item is PlayAppServerRow => item !== null);
|
||||
}
|
||||
|
||||
function sortPlayAppEntriesByPriority(entries: PlayAppEntry[]) {
|
||||
return entries.slice().sort((lhs, rhs) => {
|
||||
const lhsPriority = lhs.usagePriority ?? 0;
|
||||
const rhsPriority = rhs.usagePriority ?? 0;
|
||||
|
||||
if (rhsPriority !== lhsPriority) {
|
||||
return rhsPriority - lhsPriority;
|
||||
}
|
||||
|
||||
return lhs.id.localeCompare(rhs.id);
|
||||
});
|
||||
}
|
||||
|
||||
function normalizeSupportedEnvironments(rawEnvironments: PlayAppEnvironment[] | undefined) {
|
||||
if (!rawEnvironments || rawEnvironments.length === 0) {
|
||||
return ['preview'];
|
||||
}
|
||||
|
||||
return rawEnvironments;
|
||||
}
|
||||
|
||||
function getEntryWithIcon(entry: PlayAppServerRow): PlayAppEntry {
|
||||
return {
|
||||
id: entry.id,
|
||||
name: entry.name,
|
||||
accentClassName: entry.accentClassName,
|
||||
statusLabel: entry.statusLabel,
|
||||
isReady: entry.isReady,
|
||||
icon: PLAY_APP_ICON_REGISTRY[entry.iconName] ?? FALLBACK_ICON,
|
||||
usagePriority: entry.usagePriority,
|
||||
supportedEnvironments: normalizeSupportedEnvironments(entry.supportedEnvironments),
|
||||
searchKeywords: entry.searchKeywords,
|
||||
searchDescription: entry.searchDescription,
|
||||
};
|
||||
}
|
||||
|
||||
export function getCurrentPlayAppEnvironment(): PlayAppEnvironment {
|
||||
if (typeof window === 'undefined') {
|
||||
return 'prod';
|
||||
}
|
||||
|
||||
const hostname = window.location.hostname;
|
||||
const isLocalHost =
|
||||
hostname === 'localhost' || hostname === '127.0.0.1' || hostname === '::1' || hostname === '0.0.0.0';
|
||||
|
||||
if (isLocalHost) {
|
||||
return 'test';
|
||||
}
|
||||
|
||||
if (hostname.includes('preview')) {
|
||||
return 'preview';
|
||||
}
|
||||
|
||||
return 'prod';
|
||||
}
|
||||
|
||||
export function getSupportedPlayAppEnvironments(entry: PlayAppEntry): PlayAppEnvironment[] {
|
||||
@@ -124,10 +283,69 @@ export function isPlayAppSupportedInEnvironment(entry: PlayAppEntry, environment
|
||||
return getSupportedPlayAppEnvironments(entry).includes(environment);
|
||||
}
|
||||
|
||||
export function isPlayAppLaunchableInEnvironment(
|
||||
entry: PlayAppEntry,
|
||||
environment: PlayAppEnvironment = getCurrentPlayAppEnvironment(),
|
||||
) {
|
||||
if (!isPlayAppSupportedInEnvironment(entry, environment)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (environment === 'preview') {
|
||||
return true;
|
||||
}
|
||||
|
||||
return entry.isReady;
|
||||
}
|
||||
|
||||
export function getPlayAppEntries() {
|
||||
return playAppCache;
|
||||
}
|
||||
|
||||
export function getReadyPlayAppEntries() {
|
||||
const environment = getCurrentPlayAppEnvironment();
|
||||
return playAppCache.filter((entry) => isPlayAppLaunchableInEnvironment(entry, environment));
|
||||
}
|
||||
|
||||
export function findReadyPlayAppEntryById(appId: string | null | undefined) {
|
||||
if (!appId) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return getReadyPlayAppEntries().find((entry) => entry.id === appId) ?? null;
|
||||
const entry = playAppCache.find((candidate) => candidate.id === appId);
|
||||
if (!entry) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return isPlayAppLaunchableInEnvironment(entry) ? entry : null;
|
||||
}
|
||||
|
||||
export function loadPlayAppEntriesFromServer() {
|
||||
if (typeof window === 'undefined') {
|
||||
return Promise.resolve(playAppCache);
|
||||
}
|
||||
|
||||
if (!loadingPromise) {
|
||||
loadingPromise = fetch(PLAY_APP_API_PATH)
|
||||
.then(async (response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error(`앱 목록 조회 실패: ${response.status}`);
|
||||
}
|
||||
|
||||
const payload = await response.json();
|
||||
const normalizedRows = normalizePlayAppServerPayload(payload).map(getEntryWithIcon);
|
||||
playAppCache = sortPlayAppEntriesByPriority(normalizedRows.length ? normalizedRows : FALLBACK_ENTRIES);
|
||||
|
||||
return playAppCache;
|
||||
})
|
||||
.catch(() => {
|
||||
playAppCache = FALLBACK_ENTRIES;
|
||||
return playAppCache;
|
||||
})
|
||||
.finally(() => {
|
||||
loadingPromise = null;
|
||||
});
|
||||
}
|
||||
|
||||
return loadingPromise;
|
||||
}
|
||||
|
||||
@@ -1004,15 +1004,14 @@
|
||||
}
|
||||
|
||||
.e-reader__book-card strong {
|
||||
display: -webkit-box;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
font-size: 14px;
|
||||
line-height: 1.42;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow-wrap: anywhere;
|
||||
word-break: keep-all;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.e-reader__book-card p,
|
||||
|
||||
398
src/views/play/apps/template1/Template1PlayAppView.css
Normal file
398
src/views/play/apps/template1/Template1PlayAppView.css
Normal file
@@ -0,0 +1,398 @@
|
||||
.template1-app {
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding: 14px;
|
||||
border-radius: 22px;
|
||||
color: #0f172a;
|
||||
background: linear-gradient(180deg, #f8fafc 0%, #f4f7fe 100%);
|
||||
border: 1px solid rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.template1-app__topbar {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
padding: 2px 0;
|
||||
backdrop-filter: blur(6px);
|
||||
background: linear-gradient(180deg, rgba(248, 250, 252, 0.96) 0%, rgba(248, 250, 252, 0.75) 100%);
|
||||
}
|
||||
|
||||
.template1-app__brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.template1-app__badge {
|
||||
width: 36px;
|
||||
min-width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 10px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
color: #0c4a9e;
|
||||
background: #dbeafe;
|
||||
border: 1px solid rgba(37, 99, 235, 0.16);
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
transition: transform 120ms ease, box-shadow 120ms ease;
|
||||
}
|
||||
|
||||
.template1-app__badge:focus-visible {
|
||||
outline: 2px solid #3b82f6;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.template1-app__badge:hover {
|
||||
box-shadow: 0 1px 8px rgba(37, 99, 235, 0.2);
|
||||
}
|
||||
|
||||
.template1-app__badge:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.template1-app__badge .anticon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.template1-app__brand h1 {
|
||||
margin: 0;
|
||||
font-size: clamp(18px, 2vw, 24px);
|
||||
}
|
||||
|
||||
.template1-app__brand p {
|
||||
margin: 4px 0 0;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.template1-app__topbar-action {
|
||||
width: 36px;
|
||||
min-width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 10px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
border: 1px solid rgba(37, 99, 235, 0.16);
|
||||
color: #0c4a9e;
|
||||
background: #dbeafe;
|
||||
cursor: pointer;
|
||||
transition: transform 120ms ease, box-shadow 120ms ease;
|
||||
}
|
||||
|
||||
.template1-app__topbar-action:hover {
|
||||
box-shadow: 0 1px 8px rgba(37, 99, 235, 0.2);
|
||||
}
|
||||
|
||||
.template1-app__topbar-action:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.template1-app__topbar-action .anticon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.template1-app__settings-dropdown {
|
||||
position: absolute;
|
||||
top: 58px;
|
||||
right: 14px;
|
||||
z-index: 30;
|
||||
min-width: 208px;
|
||||
width: min(248px, calc(100% - 28px));
|
||||
padding: 6px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e2e8f0;
|
||||
background: #ffffff;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
|
||||
}
|
||||
|
||||
.template1-app__main {
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.template1-app__scroll-area {
|
||||
min-height: 0;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
scrollbar-gutter: stable;
|
||||
padding-right: 2px;
|
||||
overscroll-behavior: contain;
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
|
||||
.template1-app__screen-transition {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.template1-app__section-head h2 {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.template1-app__section-head p {
|
||||
margin: 4px 0 0;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.template1-app__chips-text {
|
||||
margin: 0;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.template1-app__section-description {
|
||||
margin: 4px 0 12px;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.template1-app__section-head--detail {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.template1-app__section-head--detail small {
|
||||
color: #94a3b8;
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.template1-app__home-list {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.template1-app__home-item {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 16px 18px;
|
||||
min-height: 96px;
|
||||
border-radius: 18px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.28);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(239, 246, 255, 0.88) 100%);
|
||||
color: inherit;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.template1-app__home-item div {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.template1-app__home-item strong {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.template1-app__home-item span,
|
||||
.template1-app__home-item small {
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.template1-app__home-item small {
|
||||
font-size: 11px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.template1-app__detail-shell {
|
||||
display: grid;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.template1-app__cards {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
min-height: 0;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.template1-app__settings-list {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
min-height: 0;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.template1-app__settings-item {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
min-height: 64px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid #dbe4f2;
|
||||
color: inherit;
|
||||
text-align: left;
|
||||
background: #ffffff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.template1-app__settings-item--danger {
|
||||
border-color: #fecaca;
|
||||
background: linear-gradient(180deg, #fff1f2 0%, #fff 100%);
|
||||
}
|
||||
|
||||
.template1-app__settings-item-content {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.template1-app__settings-item-content strong {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.template1-app__settings-item-content span {
|
||||
color: #475569;
|
||||
font-size: 11px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.template1-app__settings-item-description--muted {
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.template1-app__settings-item-icon--danger {
|
||||
background: #fee2e2;
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.template1-app__card {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-height: 84px;
|
||||
padding: 12px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid #dbe4f2;
|
||||
color: inherit;
|
||||
text-align: left;
|
||||
background: #ffffff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.template1-app__card div strong {
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.template1-app__card div span {
|
||||
color: #475569;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.template1-app__card-icon {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 12px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
background: #e2e8f0;
|
||||
}
|
||||
|
||||
.template1-app__card-action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
color: #3b82f6;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.template1-app__title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin: 4px 0 8px;
|
||||
}
|
||||
|
||||
.template1-app__title-row h2 {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 1120px) {
|
||||
.template1-app__cards {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.template1-app {
|
||||
padding: 10px;
|
||||
border-radius: 16px;
|
||||
gap: 9px;
|
||||
}
|
||||
|
||||
.template1-app__brand h1 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.template1-app__brand p {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.template1-app__cards,
|
||||
.template1-app__home-list {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.template1-app__home-item {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.template1-app__section-head--detail {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.template1-app__card {
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
|
||||
.template1-app__card-action {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
434
src/views/play/apps/template1/Template1PlayAppView.tsx
Normal file
434
src/views/play/apps/template1/Template1PlayAppView.tsx
Normal file
@@ -0,0 +1,434 @@
|
||||
import {
|
||||
AppstoreOutlined,
|
||||
AppstoreAddOutlined,
|
||||
BellOutlined,
|
||||
CheckCircleOutlined,
|
||||
CompassOutlined,
|
||||
LogoutOutlined,
|
||||
CloseOutlined,
|
||||
SettingOutlined,
|
||||
ThunderboltOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { useMemo, useState, type ReactNode } from 'react';
|
||||
import './Template1PlayAppView.css';
|
||||
|
||||
type Template1PlayAppViewProps = {
|
||||
onBack: () => void;
|
||||
launchContext?: 'direct' | 'embedded';
|
||||
};
|
||||
|
||||
type Template1SectionId = 'home' | 'projects' | 'resources' | 'automation';
|
||||
|
||||
type Template1Section = {
|
||||
id: Template1SectionId;
|
||||
label: string;
|
||||
description: string;
|
||||
chips: string[];
|
||||
};
|
||||
|
||||
type Template1MenuItem = {
|
||||
title: string;
|
||||
description: string;
|
||||
icon: ReactNode;
|
||||
screen?: Template1SectionId;
|
||||
actionLabel?: string;
|
||||
actionType?: 'navigate' | 'exit' | 'local';
|
||||
settingAction?: 'theme' | 'notifications' | 'reset-state';
|
||||
};
|
||||
|
||||
const TEMPLATE1_SECTIONS: Template1Section[] = [
|
||||
{
|
||||
id: 'home',
|
||||
label: '홈',
|
||||
description: '빠른 네비게이션으로 주요 기능으로 이동',
|
||||
chips: ['요약', '최근 작업', '바로가기'],
|
||||
},
|
||||
{
|
||||
id: 'projects',
|
||||
label: '작업',
|
||||
description: '프로젝트 관리나 문맥 전환 진입점',
|
||||
chips: ['레이아웃', '요청', '검수'],
|
||||
},
|
||||
{
|
||||
id: 'resources',
|
||||
label: '리소스',
|
||||
description: '문서/데이터/관리 화면 모음',
|
||||
chips: ['문서', '리소스', '로그'],
|
||||
},
|
||||
{
|
||||
id: 'automation',
|
||||
label: '자동화',
|
||||
description: '자동화와 상태 확인 흐름',
|
||||
chips: ['플랜', '체크리스트', '실행 이력'],
|
||||
},
|
||||
];
|
||||
|
||||
const TEMPLATE1_MENUS: Record<Template1SectionId, Template1MenuItem[]> = {
|
||||
home: [
|
||||
{
|
||||
title: '오늘 개요',
|
||||
description: '최근 작업 수와 진행 상태를 한 화면에서 확인',
|
||||
icon: <CompassOutlined />,
|
||||
screen: 'home',
|
||||
actionLabel: '열기',
|
||||
actionType: 'navigate',
|
||||
},
|
||||
{
|
||||
title: '요청 보드',
|
||||
description: '채팅/플랜 타입의 빠른 이동',
|
||||
icon: <ThunderboltOutlined />,
|
||||
screen: 'projects',
|
||||
actionLabel: '이동',
|
||||
actionType: 'navigate',
|
||||
},
|
||||
{
|
||||
title: '앱 바코드',
|
||||
description: '새 앱 연결 전에 기본 레이아웃 점검',
|
||||
icon: <AppstoreAddOutlined />,
|
||||
screen: 'projects',
|
||||
actionLabel: '확인',
|
||||
actionType: 'navigate',
|
||||
},
|
||||
],
|
||||
projects: [
|
||||
{
|
||||
title: 'Layout Editor',
|
||||
description: '레이아웃 편집 흐름 컴포넌트',
|
||||
icon: <CompassOutlined />,
|
||||
screen: 'projects',
|
||||
actionLabel: '열기',
|
||||
actionType: 'navigate',
|
||||
},
|
||||
{
|
||||
title: 'Layout Draw',
|
||||
description: '컴포넌트 샘플 배치 화면',
|
||||
icon: <ThunderboltOutlined />,
|
||||
screen: 'projects',
|
||||
actionLabel: '열기',
|
||||
actionType: 'navigate',
|
||||
},
|
||||
{
|
||||
title: '저장된 레이아웃',
|
||||
description: '저장 기록과 재열기 진입점',
|
||||
icon: <CheckCircleOutlined />,
|
||||
screen: 'projects',
|
||||
actionLabel: '열기',
|
||||
actionType: 'navigate',
|
||||
},
|
||||
],
|
||||
resources: [
|
||||
{
|
||||
title: '문서',
|
||||
description: '문서 목록과 상세 진입 구성',
|
||||
icon: <CompassOutlined />,
|
||||
screen: 'resources',
|
||||
actionLabel: '열기',
|
||||
actionType: 'navigate',
|
||||
},
|
||||
{
|
||||
title: '리소스 관리',
|
||||
description: '공유 리소스 목록과 승인 상태',
|
||||
icon: <AppstoreAddOutlined />,
|
||||
screen: 'resources',
|
||||
actionLabel: '열기',
|
||||
actionType: 'navigate',
|
||||
},
|
||||
{
|
||||
title: '활동 로그',
|
||||
description: '최근 변경 이력 요약',
|
||||
icon: <BellOutlined />,
|
||||
screen: 'automation',
|
||||
actionLabel: '열기',
|
||||
actionType: 'navigate',
|
||||
},
|
||||
],
|
||||
automation: [
|
||||
{
|
||||
title: '자동화',
|
||||
description: 'Plan/작업 진행 목록',
|
||||
icon: <AppstoreAddOutlined />,
|
||||
screen: 'automation',
|
||||
actionLabel: '열기',
|
||||
actionType: 'navigate',
|
||||
},
|
||||
{
|
||||
title: '체크리스트',
|
||||
description: '요청 단계 추적',
|
||||
icon: <CheckCircleOutlined />,
|
||||
screen: 'automation',
|
||||
actionLabel: '확인',
|
||||
actionType: 'navigate',
|
||||
},
|
||||
{
|
||||
title: '에러 로그',
|
||||
description: '실패/경고 대응 화면',
|
||||
icon: <CloseOutlined />,
|
||||
screen: 'automation',
|
||||
actionLabel: '확인',
|
||||
actionType: 'navigate',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const settingsItems: Template1MenuItem[] = [
|
||||
{
|
||||
title: '테마',
|
||||
description: '배경/카드 스타일 상태를 확인',
|
||||
icon: <AppstoreOutlined />,
|
||||
actionType: 'local',
|
||||
settingAction: 'theme',
|
||||
},
|
||||
{
|
||||
title: '알림',
|
||||
description: '알림 영역 설정 진입점',
|
||||
icon: <BellOutlined />,
|
||||
actionType: 'local',
|
||||
settingAction: 'notifications',
|
||||
},
|
||||
{
|
||||
title: '상태 초기화',
|
||||
description: '현재 화면을 홈 상태로 복원',
|
||||
icon: <CheckCircleOutlined />,
|
||||
actionType: 'local',
|
||||
settingAction: 'reset-state',
|
||||
},
|
||||
{
|
||||
title: '앱 종료',
|
||||
description: '설정을 닫고 앱 화면을 종료합니다.',
|
||||
icon: <LogoutOutlined />,
|
||||
actionType: 'exit',
|
||||
},
|
||||
];
|
||||
|
||||
type Template1HomeScreenProps = {
|
||||
items: Pick<Template1MenuItem, 'title' | 'description' | 'icon' | 'actionLabel'> & {
|
||||
chips: string[];
|
||||
screen: Template1SectionId;
|
||||
}[];
|
||||
onItemSelect: (item: Template1MenuItem) => void;
|
||||
};
|
||||
|
||||
type Template1SectionScreenProps = {
|
||||
title: string;
|
||||
chips: string[];
|
||||
cards: Template1MenuItem[];
|
||||
onItemSelect: (item: Template1MenuItem) => void;
|
||||
};
|
||||
|
||||
function Template1HomeScreen({ items, onItemSelect }: Template1HomeScreenProps) {
|
||||
return (
|
||||
<>
|
||||
<header className="template1-app__section-head">
|
||||
<h2>콘텐츠 목록</h2>
|
||||
</header>
|
||||
<div className="template1-app__home-list" aria-label="콘텐츠 목록">
|
||||
{items.map((item) => (
|
||||
<button
|
||||
type="button"
|
||||
key={item.title}
|
||||
className="template1-app__home-item"
|
||||
onClick={() => onItemSelect({ ...item, screen: item.screen, actionType: 'navigate' })}
|
||||
>
|
||||
<span className="template1-app__card-icon">{item.icon}</span>
|
||||
<div>
|
||||
<strong>{item.title}</strong>
|
||||
<span>{item.description}</span>
|
||||
<small>{item.chips.join(' · ')}</small>
|
||||
</div>
|
||||
<span className="template1-app__card-action">{item.actionLabel ?? '열기'}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function Template1SectionScreen({ title, chips, cards, onItemSelect }: Template1SectionScreenProps) {
|
||||
return (
|
||||
<>
|
||||
<div className="template1-app__chips-text">{chips.join(' · ')}</div>
|
||||
<div className="template1-app__cards" aria-label={title}>
|
||||
<div className="template1-app__title-row">
|
||||
<h2>{title}</h2>
|
||||
</div>
|
||||
{cards.map((item) => (
|
||||
<button
|
||||
type="button"
|
||||
key={item.title}
|
||||
className="template1-app__card"
|
||||
onClick={() => onItemSelect(item)}
|
||||
>
|
||||
<span className="template1-app__card-icon">{item.icon}</span>
|
||||
<div>
|
||||
<strong>{item.title}</strong>
|
||||
<span>{item.description}</span>
|
||||
</div>
|
||||
<span className="template1-app__card-action">{item.actionLabel ?? '열기'}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function Template1SettingsDropdown({
|
||||
onItemSelect,
|
||||
}: {
|
||||
onItemSelect: (item: Template1MenuItem) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="template1-app__settings-dropdown" role="menu" aria-label="설정 메뉴">
|
||||
<div className="template1-app__settings-list">
|
||||
{settingsItems.map((item) => (
|
||||
<button
|
||||
type="button"
|
||||
key={item.title}
|
||||
className={`template1-app__settings-item${item.actionType === 'exit' ? ' template1-app__settings-item--danger' : ''}`}
|
||||
onClick={() => onItemSelect(item)}
|
||||
>
|
||||
<span
|
||||
className={`template1-app__card-icon template1-app__settings-item-icon${item.actionType === 'exit' ? ' template1-app__settings-item-icon--danger' : ''}`}
|
||||
>
|
||||
{item.icon}
|
||||
</span>
|
||||
<div className="template1-app__settings-item-content">
|
||||
<strong>{item.title}</strong>
|
||||
<span
|
||||
className={item.actionType === 'exit' ? 'template1-app__settings-item-description--muted' : undefined}
|
||||
>
|
||||
{item.description}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Template1PlayAppView({ onBack, launchContext = 'direct' }: Template1PlayAppViewProps) {
|
||||
const [activeSection, setActiveSection] = useState<Template1SectionId>('home');
|
||||
const [isSettingsOpen, setIsSettingsOpen] = useState(false);
|
||||
void launchContext;
|
||||
|
||||
const activeSectionItem = useMemo(
|
||||
() => TEMPLATE1_SECTIONS.find((item) => item.id === activeSection) ?? TEMPLATE1_SECTIONS[0],
|
||||
[activeSection],
|
||||
);
|
||||
|
||||
const menuItems = TEMPLATE1_MENUS[activeSection];
|
||||
|
||||
const homeMenuItems = useMemo(
|
||||
() =>
|
||||
TEMPLATE1_SECTIONS.filter((item) => item.id !== 'home')
|
||||
.map((item) => ({
|
||||
title: item.label,
|
||||
description: item.description,
|
||||
icon:
|
||||
item.id === 'projects' ? <ThunderboltOutlined /> :
|
||||
item.id === 'resources' ? <AppstoreAddOutlined /> :
|
||||
<BellOutlined />,
|
||||
screen: item.id,
|
||||
actionLabel: '열기',
|
||||
chips: item.chips,
|
||||
actionType: 'navigate',
|
||||
})),
|
||||
[],
|
||||
);
|
||||
|
||||
const goSection = (section: Template1SectionId) => {
|
||||
setActiveSection(section);
|
||||
setIsSettingsOpen(false);
|
||||
};
|
||||
|
||||
const openItem = (item: Template1MenuItem) => {
|
||||
if (item.actionType === 'exit') {
|
||||
onBack();
|
||||
setIsSettingsOpen(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (item.settingAction === 'reset-state') {
|
||||
goSection('home');
|
||||
setIsSettingsOpen(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (item.actionType === 'local') {
|
||||
setIsSettingsOpen(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (item.screen) {
|
||||
goSection(item.screen);
|
||||
}
|
||||
};
|
||||
|
||||
const handleHomeIconClick = () => {
|
||||
goSection('home');
|
||||
};
|
||||
|
||||
const renderActiveScreen = () => {
|
||||
if (activeSection === 'home') {
|
||||
return <Template1HomeScreen items={homeMenuItems} onItemSelect={openItem} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Template1SectionScreen
|
||||
title={activeSectionItem.label}
|
||||
chips={activeSectionItem.chips}
|
||||
cards={menuItems}
|
||||
onItemSelect={openItem}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="template1-app">
|
||||
<header className="template1-app__topbar">
|
||||
<div className="template1-app__brand">
|
||||
<button
|
||||
type="button"
|
||||
className="template1-app__badge"
|
||||
aria-label="Template1 홈으로 이동"
|
||||
onClick={handleHomeIconClick}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === 'Enter' || event.key === ' ') {
|
||||
event.preventDefault();
|
||||
handleHomeIconClick();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<AppstoreOutlined />
|
||||
</button>
|
||||
<div>
|
||||
<h1>Template1 앱 레이아웃</h1>
|
||||
<p>다음 앱에 바로 적용 가능한 기본 배치 예시</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="template1-app__topbar-action"
|
||||
aria-label="Template1 설정 열기"
|
||||
aria-expanded={isSettingsOpen}
|
||||
onClick={() => setIsSettingsOpen((value) => !value)}
|
||||
title="설정"
|
||||
>
|
||||
<SettingOutlined />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
{isSettingsOpen ? (
|
||||
<Template1SettingsDropdown onItemSelect={openItem} />
|
||||
) : null}
|
||||
|
||||
<main className="template1-app__main">
|
||||
<div className="template1-app__scroll-area">
|
||||
<div key={`template1-section-${activeSection}-${isSettingsOpen ? 'settings' : 'screen'}`} className="template1-app__screen-transition">
|
||||
{renderActiveScreen()}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user