create-sonamu 0.0.1 → 0.0.2

package/template/src/packages/web/src/admin-common/ApiLogViewer.tsx

@@ -0,0 +1,285 @@
+/** biome-ignore-all lint/suspicious/noExplicitAny: axios 사용 시 타입 추론 어려우므로 허용 */
+
+import { Button, Card, CardContent, CardHeader } from "@sonamu-kit/react-components/components";
+import axios from "axios";
+import { useEffect, useRef, useState } from "react";
+import TrashIcon from "~icons/lucide/trash-2";
+
+type ApiLog = {
+  id: string;
+  method: string;
+  url: string;
+  requestHeaders?: Record<string, any>;
+  requestBody?: any;
+  requestQuery?: Record<string, any>;
+  responseStatus?: number;
+  responseHeaders?: Record<string, any>;
+  responseBody?: any;
+  duration?: number;
+  timestamp: number;
+};
+
+export function ApiLogViewer({ bodyOnly = false }: { bodyOnly?: boolean }) {
+  const [apiLogs, setApiLogs] = useState<ApiLog[]>([]);
+  const requestStartTimes = useRef<Map<string, number>>(new Map());
+
+  // Axios interceptor 설정
+  useEffect(() => {
+    const requestInterceptor = axios.interceptors.request.use(
+      (config) => {
+        const logId = `${Date.now()}-${Math.random()}`;
+        const startTime = Date.now();
+        requestStartTimes.current.set(logId, startTime);
+
+        const log: ApiLog = {
+          id: logId,
+          method: config.method?.toUpperCase() || "GET",
+          url: config.url || "",
+          requestHeaders: config.headers as Record<string, any>,
+          requestBody: config.data,
+          requestQuery: config.params,
+          timestamp: startTime,
+        };
+
+        // FormData는 표시 불가
+        if (config.data instanceof FormData) {
+          log.requestBody = "[FormData]";
+        }
+
+        setApiLogs((prev) => [log, ...prev]);
+        (config as any).__logId = logId;
+
+        return config;
+      },
+      (error) => {
+        return Promise.reject(error);
+      },
+    );
+
+    const responseInterceptor = axios.interceptors.response.use(
+      (response) => {
+        const logId = (response.config as any).__logId;
+        const startTime = requestStartTimes.current.get(logId);
+        const duration = startTime ? Date.now() - startTime : undefined;
+        requestStartTimes.current.delete(logId);
+
+        setApiLogs((prev) =>
+          prev.map((log) =>
+            log.id === logId
+              ? {
+                  ...log,
+                  responseStatus: response.status,
+                  responseHeaders: response.headers as Record<string, any>,
+                  responseBody: response.data,
+                  duration,
+                }
+              : log,
+          ),
+        );
+
+        return response;
+      },
+      (error) => {
+        const logId = (error.config as any)?.__logId;
+        const startTime = logId ? requestStartTimes.current.get(logId) : undefined;
+        const duration = startTime ? Date.now() - startTime : undefined;
+        if (logId) {
+          requestStartTimes.current.delete(logId);
+        }
+
+        if (logId) {
+          setApiLogs((prev) =>
+            prev.map((log) =>
+              log.id === logId
+                ? {
+                    ...log,
+                    responseStatus: error.response?.status,
+                    responseHeaders: error.response?.headers,
+                    responseBody: error.response?.data,
+                    duration,
+                  }
+                : log,
+            ),
+          );
+        }
+
+        return Promise.reject(error);
+      },
+    );
+
+    return () => {
+      axios.interceptors.request.eject(requestInterceptor);
+      axios.interceptors.response.eject(responseInterceptor);
+    };
+  }, []);
+
+  return (
+    <Card className="border-purple-200 bg-purple-50/50 shadow-sm">
+      <CardHeader className="pb-2">
+        <div className="flex justify-between items-center">
+          <div className="text-sm font-semibold text-purple-700">API 로그</div>
+          <Button
+            size="sm"
+            onClick={() => setApiLogs([])}
+            disabled={apiLogs.length === 0}
+            icon={<TrashIcon />}
+          >
+            로그 지우기
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-2">
+        <div
+          style={{
+            maxHeight: "400px",
+            overflowY: "auto",
+            fontFamily: "monospace",
+            fontSize: "12px",
+            backgroundColor: "#1e1e1e",
+            color: "#d4d4d4",
+            padding: "1em",
+            borderRadius: "4px",
+          }}
+        >
+          {apiLogs.length === 0 ? (
+            <div style={{ color: "#808080" }}>API 호출이 없습니다.</div>
+          ) : (
+            apiLogs.map((log) => (
+              <div
+                key={log.id}
+                style={{
+                  marginBottom: "2em",
+                  borderBottom: "1px solid #3e3e3e",
+                  paddingBottom: "1em",
+                }}
+              >
+                <div style={{ marginBottom: "0.5em" }}>
+                  <span style={{ color: "#569cd6", fontWeight: "bold" }}>[{log.method}]</span>{" "}
+                  <span style={{ color: "#4ec9b0" }}>{log.url}</span>
+                  {log.duration !== undefined && (
+                    <span style={{ color: "#808080", marginLeft: "1em" }}>({log.duration}ms)</span>
+                  )}
+                  {log.responseStatus !== undefined && (
+                    <span
+                      style={{
+                        color:
+                          log.responseStatus >= 200 && log.responseStatus < 300
+                            ? "#6a9955"
+                            : log.responseStatus >= 400
+                              ? "#f48771"
+                              : "#dcdcaa",
+                        marginLeft: "1em",
+                        fontWeight: "bold",
+                      }}
+                    >
+                      Status: {log.responseStatus}
+                    </span>
+                  )}
+                </div>
+
+                {!bodyOnly && log.requestHeaders && Object.keys(log.requestHeaders).length > 0 && (
+                  <div style={{ marginBottom: "0.5em" }}>
+                    <div style={{ color: "#9cdcfe", marginBottom: "0.25em" }}>Request Headers:</div>
+                    <pre
+                      style={{
+                        margin: 0,
+                        padding: "0.5em",
+                        backgroundColor: "#252526",
+                        borderRadius: "4px",
+                        overflowX: "auto",
+                      }}
+                    >
+                      {JSON.stringify(log.requestHeaders, null, 2)}
+                    </pre>
+                  </div>
+                )}
+
+                {!bodyOnly && log.requestQuery && Object.keys(log.requestQuery).length > 0 && (
+                  <div style={{ marginBottom: "0.5em" }}>
+                    <div style={{ color: "#9cdcfe", marginBottom: "0.25em" }}>Query Params:</div>
+                    <pre
+                      style={{
+                        margin: 0,
+                        padding: "0.5em",
+                        backgroundColor: "#252526",
+                        borderRadius: "4px",
+                        overflowX: "auto",
+                      }}
+                    >
+                      {JSON.stringify(log.requestQuery, null, 2)}
+                    </pre>
+                  </div>
+                )}
+
+                {!bodyOnly && log.requestBody !== undefined && (
+                  <div style={{ marginBottom: "0.5em" }}>
+                    <div style={{ color: "#9cdcfe", marginBottom: "0.25em" }}>Request Body:</div>
+                    <pre
+                      style={{
+                        margin: 0,
+                        padding: "0.5em",
+                        backgroundColor: "#252526",
+                        borderRadius: "4px",
+                        overflowX: "auto",
+                        whiteSpace: "pre-wrap",
+                        wordBreak: "break-all",
+                      }}
+                    >
+                      {typeof log.requestBody === "string"
+                        ? log.requestBody
+                        : JSON.stringify(log.requestBody, null, 2)}
+                    </pre>
+                  </div>
+                )}
+
+                {!bodyOnly &&
+                  log.responseHeaders &&
+                  Object.keys(log.responseHeaders).length > 0 && (
+                    <div style={{ marginBottom: "0.5em" }}>
+                      <div style={{ color: "#9cdcfe", marginBottom: "0.25em" }}>
+                        Response Headers:
+                      </div>
+                      <pre
+                        style={{
+                          margin: 0,
+                          padding: "0.5em",
+                          backgroundColor: "#252526",
+                          borderRadius: "4px",
+                          overflowX: "auto",
+                        }}
+                      >
+                        {JSON.stringify(log.responseHeaders, null, 2)}
+                      </pre>
+                    </div>
+                  )}
+
+                {log.responseBody !== undefined && (
+                  <div style={{ marginBottom: "0.5em" }}>
+                    <div style={{ color: "#9cdcfe", marginBottom: "0.25em" }}>Response Body:</div>
+                    <pre
+                      style={{
+                        margin: 0,
+                        padding: "0.5em",
+                        backgroundColor: "#252526",
+                        borderRadius: "4px",
+                        overflowX: "auto",
+                        whiteSpace: "pre-wrap",
+                        wordBreak: "break-all",
+                        maxHeight: "200px",
+                        overflowY: "auto",
+                      }}
+                    >
+                      {typeof log.responseBody === "string"
+                        ? log.responseBody
+                        : JSON.stringify(log.responseBody, null, 2)}
+                    </pre>
+                  </div>
+                )}
+              </div>
+            ))
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/template/src/packages/web/src/admin-common/CommonModal.tsx

@@ -0,0 +1,91 @@
+import { Dialog, DialogContent, DialogDescription } from "@sonamu-kit/react-components/components";
+import { atom, useAtom } from "jotai";
+import type React from "react";
+import { useEffect } from "react";
+
+type ExtendedDialogProps = {
+  onCompleted?: (data?: unknown) => void;
+  onControlledOpen?: () => void;
+  onControlledClose?: () => void;
+  className?: string;
+};
+
+export const commonModalAtom = atom<
+  {
+    open: boolean;
+    reactNode: React.ReactNode | null;
+  } & ExtendedDialogProps
+>({
+  open: false,
+  reactNode: null,
+});
+
+export type CommonModalProps = {};
+
+export function CommonModal({}: CommonModalProps) {
+  const [atomValue, setAtomValue] = useAtom(commonModalAtom);
+  const { open, reactNode, onControlledOpen, onControlledClose, className } = atomValue;
+
+  const closeAndClear = () => {
+    if (onControlledClose) {
+      onControlledClose();
+    }
+
+    setAtomValue({
+      open: false,
+      reactNode: null,
+    });
+  };
+
+  useEffect(() => {
+    if (open && onControlledOpen) {
+      onControlledOpen();
+    }
+  }, [open, onControlledOpen]);
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && closeAndClear()}>
+      <DialogContent className={className}>
+        <DialogDescription asChild>{reactNode}</DialogDescription>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export function useCommonModal() {
+  const [atomValue, setAtomValue] = useAtom(commonModalAtom);
+  const { open, reactNode, onCompleted, onControlledClose } = atomValue;
+
+  const openModal = (reactNode: React.ReactNode, props?: ExtendedDialogProps) => {
+    setAtomValue({
+      open: true,
+      reactNode,
+      ...props,
+    });
+  };
+
+  const closeModal = () => {
+    setAtomValue({
+      open: false,
+      reactNode: null,
+    });
+    if (onControlledClose) {
+      onControlledClose();
+    }
+  };
+
+  const doneModal = (data?: unknown) => {
+    closeModal();
+    if (onCompleted) {
+      onCompleted(data);
+    }
+  };
+
+  return {
+    open,
+    reactNode,
+    openModal,
+    closeModal,
+    doneModal,
+  };
+}

package/template/src/packages/web/src/contexts/sonamu-provider.tsx

@@ -0,0 +1,41 @@
+import { SonamuProvider, type SonamuContextValue } from "@sonamu-kit/react-components";
+import type { ReactNode } from "react";
+
+// Temporary type until sd.generated is created
+type EmptyDictionary = Record<string, never>;
+
+export function createSonamuConfig(): SonamuContextValue<EmptyDictionary> {
+  // Auth configuration
+  const auth_config = {
+    user: null,
+    loading: false,
+    login: async (_loginParams: any) => {
+      // TODO: Implement login logic
+      console.log("Login not implemented yet");
+    },
+    logout: async () => {
+      // TODO: Implement logout logic
+      console.log("Logout not implemented yet");
+    },
+    refetch: async () => {
+      // TODO: Implement refetch logic
+    },
+  };
+
+  // Uploader configuration
+  const uploader_config = async (_files: File[]) => {
+    // TODO: Implement file upload logic
+    console.log("File upload not implemented yet");
+    return [];
+  };
+
+  // SD configuration - returns key as-is until i18n is set up
+  const sd_config = (key: string): any => key;
+
+  return { auth: auth_config, uploader: uploader_config, SD: sd_config };
+}
+
+export function SonamuProviderWrapper({ children }: { children: ReactNode }) {
+  const sonamuConfig = createSonamuConfig();
+  return <SonamuProvider<EmptyDictionary> {...sonamuConfig}>{children}</SonamuProvider>;
+}

package/template/src/packages/web/src/entry-client.tsx

@@ -0,0 +1,72 @@
+import { hydrate, QueryClient } from "@tanstack/react-query";
+import { createRouter, RouterProvider } from "@tanstack/react-router";
+import ReactDOM from "react-dom/client";
+import { routeTree } from "./routeTree.gen";
+import "./styles/tailwind.css";
+
+// SSR data types
+declare global {
+  interface Window {
+    // biome-ignore lint/suspicious/noExplicitAny: SSR data needs to be any type
+    __SONAMU_SSR__?: any;
+    __SONAMU_SSR_CONFIG__?: {
+      disableHydrate?: boolean;
+    };
+  }
+}
+
+// Date reviver function for JSON.parse
+// biome-ignore lint/suspicious/noExplicitAny: reviver needs to handle any type
+function dateReviver(_key: string, value: any) {
+  if (typeof value === "string") {
+    const datePattern = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/;
+    if (datePattern.test(value)) {
+      return new Date(value);
+    }
+  }
+  return value;
+}
+
+// Create QueryClient
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 5000,
+      retry: false,
+      refetchOnMount: true,
+    },
+  },
+});
+
+// Restore SSR data
+const dehydratedState = window.__SONAMU_SSR__
+  ? JSON.parse(JSON.stringify(window.__SONAMU_SSR__), dateReviver)
+  : undefined;
+if (dehydratedState) {
+  hydrate(queryClient, dehydratedState);
+}
+
+// Check SSR Config
+const ssrConfig = window.__SONAMU_SSR_CONFIG__;
+
+// Create Router
+const router = createRouter({
+  routeTree,
+  context: { queryClient },
+  defaultPreload: "intent",
+});
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+// Render the app
+const rootElement = document.getElementById("root")!;
+if (!rootElement.innerHTML || ssrConfig?.disableHydrate) {
+  const root = ReactDOM.createRoot(rootElement);
+  root.render(<RouterProvider router={router} />);
+} else {
+  ReactDOM.hydrateRoot(rootElement, <RouterProvider router={router} />);
+}

package/template/src/packages/web/src/entry-server.generated.tsx

@@ -0,0 +1,58 @@
+import { dehydrate, QueryClient } from "@tanstack/react-query";
+import { createMemoryHistory, createRouter, RouterProvider } from "@tanstack/react-router";
+import { Suspense } from "react";
+import { renderToString } from "react-dom/server";
+import { routeTree } from "./routeTree.gen";
+
+export type PreloadedData = {
+  queryKey: any[];
+  data: any;
+};
+
+export async function render(url: string, preloadedData: PreloadedData[] = []) {
+  // QueryClient 생성
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 5000,
+        retry: false,
+      },
+    },
+  });
+
+  // Preloaded 데이터를 queryClient에 직접 주입
+  for (const { queryKey, data } of preloadedData) {
+    queryClient.setQueryData(queryKey, data);
+  }
+
+  // Dehydrate
+  const dehydratedState = dehydrate(queryClient);
+
+  // SSR용 메모리 히스토리 생성
+  const memoryHistory = createMemoryHistory({
+    initialEntries: [url],
+  });
+
+  // Router 생성 (SSR 모드)
+  const router = createRouter({
+    routeTree,
+    context: { queryClient },
+    history: memoryHistory,
+    defaultPreload: "intent",
+  });
+
+  // 라우터 초기화: SSR에서 반드시 await router.load() 호출 필요
+  await router.load();
+
+  // RouterProvider만 렌더링 (Suspense로 래핑 - hydration mismatch 방지)
+  const appHtml = renderToString(
+    <Suspense fallback={null}>
+      <RouterProvider router={router} />
+    </Suspense>,
+  );
+
+  return {
+    html: appHtml,
+    dehydratedState,
+  };
+}

package/template/src/packages/web/src/i18n/en.ts

@@ -0,0 +1,63 @@
+// Simple plural helper - will be replaced by sonamu.shared after sync
+function plural(count: number, singular: string, _plural: string): string {
+  return count === 1 ? singular : _plural;
+}
+
+/**
+ * Project EN Dictionary
+ */
+export default {
+  "common.all": "All",
+  "common.backToList": "Back to List",
+  "common.cancel": "Cancel",
+  "common.close": "Close",
+  "common.confirm": "Confirm",
+  "common.create": "Create",
+  "common.createdAt": "Created At",
+  "common.delete": "Delete",
+  "common.edit": "Edit",
+  "common.login": "Login",
+  "common.logout": "Logout",
+  "common.manage": "Manage",
+  "common.results": (count: number) =>
+    plural(count, `${count} result`, `${count} results`),
+  "common.save": "Save",
+  "common.search": "Search",
+  "common.searchPlaceholder": "Search...",
+  "common.searchType": "Search Type",
+  "common.sort": "Sort",
+  "confirm.delete": "Are you sure you want to delete?",
+  "confirm.save": "Do you want to save?",
+  "dashboard.title": "Dashboard",
+  "dashboard.welcome": "Welcome!",
+  "delete.confirm.description":
+    "This action cannot be undone. This will permanently delete this item.",
+  "delete.confirm.title": "Are you sure?",
+  "entity.create": (name: string) => `Create ${name}`,
+  "entity.edit": (name: string, id: number) => `Edit ${name} (#${id})`,
+  "entity.list": (name: string) => `${name} List`,
+  "entity.listManage": (name: string) => `Manage ${name} List`,
+  "error.badRequest": "Bad Request",
+  "error.duplicateRow": "Duplicate data",
+  "error.forbidden": "Permission denied",
+  "error.internalServerError": "Internal server error",
+  "error.notFound": "Not found",
+  "error.unauthorized": "Authentication required",
+  notFound: (name: string, id: number) => `${name} ID ${id} not found`,
+  "validation.email": "Invalid email format",
+  "validation.maxLength": (field: string, max: number) =>
+    `${field} must be at most ${max} characters`,
+  "validation.minLength": (field: string, min: number) =>
+    `${field} must be at least ${min} characters`,
+  "validation.required": (field: string) => `${field} is required`,
+  "validation.url": "Invalid URL format",
+  // components
+  "component.asyncSelect.loading": "Loading...",
+  "component.asyncSelect.noOptions": "No options",
+  "component.asyncSelect.noResults": "No results",
+  "component.asyncSelect.selectPlaceholder": "Select",
+  "component.datePicker.pickDate": "Pick a date",
+  "component.datePicker.placeholder": "Pick a date",
+  "component.fileInput.browseFiles": "Browse Files",
+  "component.fileInput.dropZone": "Drag and drop files here or click to upload",
+};

package/template/src/packages/web/src/i18n/ko.ts

@@ -0,0 +1,61 @@
+// Simple josa helper - will be replaced by sonamu.shared after sync
+function josa(word: string, _type: string): string {
+  return word;
+}
+
+/**
+ * Project KO Dictionary
+ */
+export default {
+  "common.all": "전체",
+  "common.backToList": "목록으로",
+  "common.cancel": "취소",
+  "common.close": "닫기",
+  "common.confirm": "확인",
+  "common.create": "생성",
+  "common.createdAt": "등록",
+  "common.delete": "삭제",
+  "common.edit": "수정",
+  "common.login": "로그인",
+  "common.logout": "로그아웃",
+  "common.manage": "관리",
+  "common.results": (count: number) => `${count}개 결과`,
+  "common.save": "저장",
+  "common.search": "검색",
+  "common.searchPlaceholder": "검색...",
+  "common.searchType": "검색 유형",
+  "common.sort": "정렬",
+  "confirm.delete": "정말 삭제하시겠습니까?",
+  "confirm.save": "저장하시겠습니까?",
+  "dashboard.title": "대시보드",
+  "dashboard.welcome": "환영합니다!",
+  "delete.confirm.description": "이 작업은 취소할 수 없습니다. 항목이 영구적으로 삭제됩니다.",
+  "delete.confirm.title": "정말 삭제하시겠습니까?",
+  "entity.create": (name: string) => `${name} 생성`,
+  "entity.edit": (name: string, id: number) => `${name} 수정 (#${id})`,
+  "entity.list": (name: string) => `${name} 목록`,
+  "entity.listManage": (name: string) => `${name} 목록 관리`,
+  "error.badRequest": "잘못된 요청입니다",
+  "error.duplicateRow": "중복된 데이터입니다",
+  "error.forbidden": "권한이 없습니다",
+  "error.internalServerError": "서버 오류가 발생했습니다",
+  "error.notFound": "찾을 수 없습니다",
+  "error.unauthorized": "인증이 필요합니다",
+  notFound: (name: string, id: number) => `존재하지 않는 ${name} ID ${id}`,
+  "validation.email": "올바른 이메일 형식이 아닙니다",
+  "validation.maxLength": (field: string, max: number) =>
+    `${field}은(는) 최대 ${max}자까지 입력할 수 있습니다`,
+  "validation.minLength": (field: string, min: number) =>
+    `${field}은(는) 최소 ${min}자 이상이어야 합니다`,
+  "validation.required": (field: string) => `${josa(field, "은는")} 필수입니다`,
+  "validation.url": "올바른 URL 형식이 아닙니다",
+  // components
+  "component.asyncSelect.loading": "로딩 중...",
+  "component.asyncSelect.noOptions": "옵션이 없습니다",
+  "component.asyncSelect.noResults": "결과가 없습니다",
+  "component.asyncSelect.selectPlaceholder": "선택하세요",
+  "component.datePicker.pickDate": "날짜 선택",
+  "component.datePicker.placeholder": "날짜 선택",
+  "component.fileInput.browseFiles": "파일 선택",
+  "component.fileInput.dropZone": "파일을 드래그하여 업로드하거나 클릭하세요",
+};