create-sonamu 0.0.8 → 0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-sonamu",
-  "version": "0.0.8",
+  "version": "0.1.0",
   "description": "Create a new Sonamu project",
   "keywords": [
     "sonamu",

package/template/src/packages/api/package.json

@@ -38,7 +38,7 @@
     "knex": "^3.1.0",
     "pg": "^8.16.3",
     "radashi": "^12.2.0",
-    "sonamu": "^0.7.49",
+    "sonamu": "^0.7.50",
     "zod": "^4.1.12"
   },
   "devDependencies": {

package/template/src/packages/web/package.json

@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@sonamu-kit/react-components": "^0.1.7",
+    "@sonamu-kit/react-components": "^0.1.8",
     "@tanstack/react-query": "^5.90.12",
     "@tanstack/react-router": "1.143.11",
     "axios": "^1.13.2",

package/template/src/packages/web/src/App.tsx

@@ -1,16 +1,42 @@
-import { type ReactNode, Suspense } from "react";
+import { SidebarProvider } from "@sonamu-kit/react-components/components";
+import { useRouterState } from "@tanstack/react-router";
+import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
+import { type ReactNode, Suspense, useEffect } from "react";
+import Sidebar from "./components/Sidebar";
+import { setLocale } from "./i18n/sd.generated";
 
 interface AppProps {
   children?: ReactNode;
 }
 
+// 사이드바를 숨길 경로 목록
+// TODO: 로그인/회원가입 페이지 추가 시 여기에 추가
+const hideSidebarPaths = ["/login", "/admin/login", "/signup"];
+
 function App({ children }: AppProps) {
+  useEffect(() => {
+    // 브라우저 locale 감지
+    const browserLocale = navigator.language.split("-")[0];
+    if (["ko", "en"].includes(browserLocale)) {
+      setLocale(browserLocale as "ko" | "en");
+    }
+  }, []);
+
+  const pathname = useRouterState({ select: (s) => s.location.pathname });
+  const showSidebar = !hideSidebarPaths.includes(pathname);
+
   return (
-    <div className="min-h-screen bg-gray-50">
-      <div className="max-w-7xl mx-auto">
-        <Suspense fallback={<div>Loading...</div>}>{children}</Suspense>
-      </div>
-    </div>
+    <>
+      <SidebarProvider className="h-screen">
+        <div className="flex h-screen md:flex-row flex-col w-full">
+          {showSidebar && <Sidebar />}
+          <div className="flex-1 p-8 md:p-4 bg-white overflow-auto">
+            <Suspense fallback={<div>Loading...</div>}>{children}</Suspense>
+          </div>
+        </div>
+      </SidebarProvider>
+      {import.meta.env.DEV && <TanStackRouterDevtools initialIsOpen={false} />}
+    </>
   );
 }
 

package/template/src/packages/web/src/components/Sidebar.tsx

@@ -0,0 +1,107 @@
+import {
+  Button,
+  Sidebar as SidebarComponent,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenu,
+} from "@sonamu-kit/react-components/components";
+import { Link, useRouterState } from "@tanstack/react-router";
+import type React from "react";
+import { useSonamuContext } from "@/contexts/sonamu-provider";
+import { SD } from "@/i18n/sd.generated";
+import HomeIcon from "~icons/lucide/home";
+import LogOutIcon from "~icons/lucide/log-out";
+// TODO: 필요한 아이콘 추가
+// import UsersIcon from "~icons/lucide/users";
+// import SettingsIcon from "~icons/lucide/settings";
+
+interface SidebarProps {
+  className?: string;
+}
+
+interface MenuItemProps {
+  title: string;
+  path: string;
+  icon?: React.FC<React.SVGProps<SVGSVGElement>>;
+}
+
+// 관리자용 메뉴
+const adminMenuItems: MenuItemProps[] = [
+  { title: "Dashboard", path: "/admin", icon: HomeIcon },
+  // TODO: 엔티티 추가 시 메뉴 추가
+  // { title: "Users", path: "/admin/users", icon: UsersIcon },
+  // { title: "Settings", path: "/admin/settings", icon: SettingsIcon },
+];
+
+// 일반 사용자용 메뉴
+const userMenuItems: MenuItemProps[] = [
+  { title: "Home", path: "/", icon: HomeIcon },
+  // TODO: 사용자용 메뉴 추가
+  // { title: "Profile", path: "/profile", icon: UserIcon },
+];
+
+export default function Sidebar({ className }: SidebarProps) {
+  const pathname = useRouterState({ select: (s) => s.location.pathname });
+  const { auth } = useSonamuContext();
+  const { user, logout } = auth;
+
+  // 경로에 따라 메뉴 및 타이틀 분기
+  const isAdmin = pathname.startsWith("/admin");
+  const menuItems = isAdmin ? adminMenuItems : userMenuItems;
+  const title = isAdmin ? "Admin" : "Sonamu App";
+
+  const isActive = (path: string) => {
+    if (path === "/admin" || path === "/") {
+      return pathname === path || pathname === `${path}/`;
+    }
+    return pathname.startsWith(path);
+  };
+
+  return (
+    <SidebarComponent collapsible="none" className={`h-screen sticky top-0 ${className || ""}`}>
+      {/* Header */}
+      <SidebarHeader className="border-b border-sidebar-border px-4 py-4">
+        <div className="flex items-center gap-2">
+          <span className="text-base font-semibold">{title}</span>
+        </div>
+        {user && (
+          <div className="text-sm text-sidebar-foreground/70 mt-1">
+            {user.username ?? user.email ?? "User"}
+          </div>
+        )}
+      </SidebarHeader>
+
+      {/* Menu Content */}
+      <SidebarContent className="flex-1 overflow-y-auto">
+        <SidebarGroup className="px-2 py-2">
+          <SidebarMenu>
+            {menuItems.map((item) => (
+              <SidebarMenuItem key={item.path}>
+                <SidebarMenuButton asChild isActive={isActive(item.path)}>
+                  <Link to={item.path} className="!no-underline">
+                    {item.icon && <item.icon className="size-4" />}
+                    <span>{item.title}</span>
+                  </Link>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            ))}
+          </SidebarMenu>
+        </SidebarGroup>
+      </SidebarContent>
+
+      {/* Footer */}
+      {user && (
+        <SidebarFooter className="border-t border-sidebar-border px-4 py-3">
+          <Button variant="destructive" onClick={logout} className="w-full">
+            <LogOutIcon className="size-4 mr-2" />
+            {SD("common.logout")}
+          </Button>
+        </SidebarFooter>
+      )}
+    </SidebarComponent>
+  );
+}

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

@@ -1,10 +1,21 @@
-import { SonamuProvider, type SonamuContextValue } from "@sonamu-kit/react-components";
+import {
+  type SonamuContextValue,
+  type SonamuFile,
+  SonamuProvider,
+  useSonamuBaseContext,
+} from "@sonamu-kit/react-components";
 import type { ReactNode } from "react";
+import type { MergedDictionary } from "@/i18n/sd.generated";
+import { SD } from "@/i18n/sd.generated";
 
-// Temporary type until sd.generated is created
-type EmptyDictionary = Record<string, never>;
+// TODO: User 엔티티 추가 후 아래 타입들을 지정하세요
+// - UserSubsetSS: 세션에 저장되는 User 타입 (예: import type { UserSubsetSS } from "@/services/sonamu.generated")
+// - UserLoginParams: 로그인 파라미터 타입 (예: import type { UserLoginParams } from "@/services/user/user.types")
+export function useSonamuContext() {
+  return useSonamuBaseContext<MergedDictionary, any, any>();
+}
 
-export function createSonamuConfig(): SonamuContextValue<EmptyDictionary> {
+export function createSonamuConfig(): SonamuContextValue<MergedDictionary, any, any> {
   // Auth configuration
   const auth_config = {
     user: null,
@@ -23,16 +34,19 @@ export function createSonamuConfig(): SonamuContextValue<EmptyDictionary> {
   };
 
   // Uploader configuration
-  const uploader_config = async (_files: File[]) => {
+  const uploader_config = async (files: File[]): Promise<SonamuFile[]> => {
     // TODO: Implement file upload logic
+    if (files.length === 0) {
+      return [];
+    }
+
     console.log("File upload not implemented yet");
     return [];
   };
 
-  // SD configuration - returns a function until i18n is set up
-  // Components like Pagination call SD("key")(args), so we must return a function
-  const sd_config = (key: string): any => {
-    return (..._args: any[]) => key;
+  // SD configuration
+  const sd_config = <K extends keyof MergedDictionary>(key: K) => {
+    return SD(key as string);
   };
 
   return { auth: auth_config, uploader: uploader_config, SD: sd_config };
@@ -40,5 +54,9 @@ export function createSonamuConfig(): SonamuContextValue<EmptyDictionary> {
 
 export function SonamuProviderWrapper({ children }: { children: ReactNode }) {
   const sonamuConfig = createSonamuConfig();
-  return <SonamuProvider<EmptyDictionary> {...sonamuConfig}>{children}</SonamuProvider>;
+  return (
+    <SonamuProvider<MergedDictionary, any, any> {...sonamuConfig}>
+      {children}
+    </SonamuProvider>
+  );
 }

package/template/src/packages/web/src/i18n/sd.generated.ts

@@ -0,0 +1,41 @@
+// 자동 생성 파일 - sonamu sync로 갱신됨
+// 초기 빈 상태 - sonamu dev 실행 시 실제 내용으로 대체됩니다.
+
+const DEFAULT_LOCALE = "ko" as const;
+const SUPPORTED_LOCALES = ["ko", "en"] as const;
+let _currentLocale: (typeof SUPPORTED_LOCALES)[number] = DEFAULT_LOCALE;
+
+export function setLocale(locale: (typeof SUPPORTED_LOCALES)[number]) {
+  _currentLocale = locale;
+}
+
+export function getCurrentLocale(): (typeof SUPPORTED_LOCALES)[number] {
+  return _currentLocale;
+}
+
+// 초기 빈 dictionary
+const dictionaries: Record<string, Record<string, string | ((...args: any[]) => string)>> = {
+  ko: {
+    "common.logout": "로그아웃",
+  },
+  en: {
+    "common.logout": "Logout",
+  },
+};
+
+// react-components의 Dictionary 타입과 호환되는 타입
+export type MergedDictionary = Record<string, string | ((...args: any[]) => string)>;
+export type DictKey = string;
+
+/**
+ * Sonamu Dictionary 함수
+ * locale에 맞는 번역 텍스트를 반환합니다.
+ */
+export function SD<K extends DictKey>(key: K): string {
+  const dict = dictionaries[_currentLocale] ?? dictionaries[DEFAULT_LOCALE];
+  const value = dict?.[key] ?? key;
+  if (typeof value === "function") {
+    return value();
+  }
+  return value;
+}

package/template/src/packages/web/src/routeTree.gen.ts

@@ -5,6 +5,7 @@
 
 import { Route as rootRoute } from './routes/__root'
 import { Route as IndexRoute } from './routes/index'
+import { Route as AdminIndexRoute } from './routes/admin/index'
 
 const IndexRouteWithChildren = IndexRoute.update({
   id: '/',
@@ -12,7 +13,16 @@ const IndexRouteWithChildren = IndexRoute.update({
   getParentRoute: () => rootRoute,
 } as any)
 
-export const routeTree = rootRoute.addChildren([IndexRouteWithChildren])
+const AdminIndexRouteWithChildren = AdminIndexRoute.update({
+  id: '/admin/',
+  path: '/admin/',
+  getParentRoute: () => rootRoute,
+} as any)
+
+export const routeTree = rootRoute.addChildren([
+  IndexRouteWithChildren,
+  AdminIndexRouteWithChildren,
+])
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
@@ -23,5 +33,12 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexRouteWithChildren
       parentRoute: typeof rootRoute
     }
+    '/admin/': {
+      id: '/admin/'
+      path: '/admin/'
+      fullPath: '/admin/'
+      preLoaderRoute: typeof AdminIndexRouteWithChildren
+      parentRoute: typeof rootRoute
+    }
   }
 }

package/template/src/packages/web/src/routes/admin/index.tsx

@@ -0,0 +1,24 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/admin/")({
+  component: AdminDashboard,
+});
+
+function AdminDashboard() {
+  return (
+    <div>
+      <h1 className="text-2xl font-bold mb-4">Admin Dashboard</h1>
+      <p className="text-gray-600">Welcome to the admin panel. Start building your application.</p>
+      
+      {/* TODO: 대시보드 위젯 추가 */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-8">
+        <div className="p-6 bg-gray-50 rounded-lg border">
+          <h3 className="font-semibold mb-2">Quick Start</h3>
+          <p className="text-sm text-gray-600">
+            Add entities with <code className="bg-gray-200 px-1 rounded">sonamu entity add</code>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/src/packages/web/src/routes/index.tsx

@@ -6,9 +6,16 @@ export const Route = createFileRoute("/")({
 
 function HomePage() {
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen">
-      <h1 className="text-4xl font-bold mb-4">Welcome to Sonamu</h1>
-      <p className="text-gray-600">Start building your application</p>
+    <div>
+      <h1 className="text-2xl font-bold mb-4">Welcome to Sonamu</h1>
+      <p className="text-gray-600">Start building your application.</p>
+      
+      {/* TODO: 사용자용 콘텐츠 추가 */}
+      <div className="mt-8">
+        <p className="text-sm text-gray-500">
+          This is the user-facing home page. Customize it as needed.
+        </p>
+      </div>
     </div>
   );
 }

package/template/src/packages/web/src/services/sonamu.shared.ts

@@ -0,0 +1,22 @@
+// 자동 생성 파일 - sonamu sync로 갱신됨
+// 초기 빈 상태 - sonamu dev 실행 시 실제 내용으로 대체됩니다.
+
+/**
+ * ISO 8601 및 타임존 포맷의 날짜 문자열을 Date 객체로 변환하는 reviver
+ */
+export function dateReviver(_key: string, value: any): any {
+  if (typeof value === "string") {
+    // ISO 8601 형식: 2024-01-15T09:30:00.000Z 또는 2024-01-15T09:30:00+09:00
+    const isoRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(:\d{2}(\.\d{1,3})?)?(Z|[+-]\d{2}:\d{2})?$/;
+    // Timezone 포맷: 2024-01-15 09:30:00+09:00
+    const timezoneRegex = /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}[+-]\d{2}:\d{2}$/;
+
+    if (
+      (isoRegex.test(value) || timezoneRegex.test(value)) &&
+      new Date(value).toString() !== "Invalid Date"
+    ) {
+      return new Date(value);
+    }
+  }
+  return value;
+}