create-web-0to1 0.1.0

package/source/wrappers/next/error/handle-app-error.server.ts

@@ -0,0 +1,41 @@
+import 'server-only';
+
+import { forbidden, notFound, redirect } from 'next/navigation';
+
+import { APP_ERROR_CODES, normalizeAppError } from '../../../core/error/app-error';
+import { routePaths } from '../../../core/routes/route-paths';
+
+export type HandleServerAppErrorOptions = {
+  unauthorizedRedirectTo?: string | false;
+  notFoundAs404?: boolean;
+  forbiddenAs403?: boolean;
+};
+
+/**
+ * 서버 컴포넌트나 서버 액션에서 AppError를
+ * Next.js navigation 동작으로 바꿔야 할 때 선택적으로 사용하는 예시입니다.
+ */
+export function handleServerAppError(
+  error: unknown,
+  {
+    unauthorizedRedirectTo = routePaths.login,
+    notFoundAs404 = true,
+    forbiddenAs403 = false,
+  }: HandleServerAppErrorOptions = {},
+): never {
+  const appError = normalizeAppError(error);
+
+  if (appError.code === APP_ERROR_CODES.UNAUTHORIZED && unauthorizedRedirectTo) {
+    redirect(unauthorizedRedirectTo);
+  }
+
+  if (appError.code === APP_ERROR_CODES.NOT_FOUND && notFoundAs404) {
+    notFound();
+  }
+
+  if (appError.code === APP_ERROR_CODES.FORBIDDEN && forbiddenAs403) {
+    forbidden();
+  }
+
+  throw appError;
+}

package/source/wrappers/next/query/hydration.tsx

@@ -0,0 +1,20 @@
+import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
+import type { ReactNode } from 'react';
+
+import { getQueryClient } from '../../../core/query/query-client';
+
+export type QueryHydrationProps = {
+  children: ReactNode;
+  prefetch: (queryClient: ReturnType<typeof getQueryClient>) => Promise<void>;
+};
+
+/**
+ * 서버 prefetch 후 HydrationBoundary로 넘기는 템플릿 예시입니다.
+ * 서버에서 미리 채운 query를 클라이언트로 넘겨야 할 때 선택적으로 사용하세요.
+ */
+export async function QueryHydration({ children, prefetch }: QueryHydrationProps) {
+  const queryClient = getQueryClient();
+  await prefetch(queryClient);
+
+  return <HydrationBoundary state={dehydrate(queryClient)}>{children}</HydrationBoundary>;
+}

package/source/wrappers/next/query/providers.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import type { ReactNode } from 'react';
+
+import { getQueryClient } from '../../../core/query/query-client';
+
+export type QueryProvidersProps = {
+  children: ReactNode;
+  /**
+   * 템플릿 확장 포인트입니다.
+   * handleClientAppError 같은 전역 에러 핸들러를 필요할 때만 주입해서 사용하세요.
+   */
+  onGlobalError?: (error: unknown) => void;
+};
+
+/**
+ * TanStack Query provider 예시입니다.
+ * 템플릿 기본값만 담고 있으니 프로젝트 정책에 맞게 옵션을 확장해서 사용하세요.
+ */
+export function QueryProviders({ children, onGlobalError }: QueryProvidersProps) {
+  const queryClient = getQueryClient({
+    onGlobalError,
+  });
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+      {process.env.NODE_ENV === 'development' ? (
+        <ReactQueryDevtools initialIsOpen={false} />
+      ) : null}
+    </QueryClientProvider>
+  );
+}

package/source/wrappers/next/request/request.client.ts

@@ -0,0 +1,24 @@
+import { executeRequest, type RequestOptions } from './request';
+
+export type ClientRequestOptions = Omit<RequestOptions, 'credentials'>;
+
+function requestWithCredentials(credentials: RequestCredentials) {
+  return function executeClientRequest<T>(options: ClientRequestOptions) {
+    return executeRequest<T>({
+      ...(options as RequestOptions),
+      credentials,
+    });
+  };
+}
+
+/**
+ * 인증 쿠키가 필요 없는 클라이언트 요청 래퍼 예시입니다.
+ * 프로젝트 정책에 맞는 공통 옵션이 있다면 여기서 확장해서 사용하세요.
+ */
+export const requestClient = requestWithCredentials('omit');
+
+/**
+ * 인증 쿠키를 함께 보내는 클라이언트 요청 래퍼 예시입니다.
+ * 실제 인증 전략에 맞게 credentials 정책을 조정해서 사용하세요.
+ */
+export const requestClientAuth = requestWithCredentials('include');

package/source/wrappers/next/request/request.server.ts

@@ -0,0 +1,64 @@
+import 'server-only';
+
+import { cookies } from 'next/headers';
+
+import { executeRequest, type RequestOptions } from './request';
+
+export type ServerRequestOptions = Omit<RequestOptions, 'headers'> & {
+  headers?: HeadersInit;
+};
+
+const AUTH_COOKIE_NAMES = ['session', 'access_token', 'refresh_token'] as const;
+
+export type ServerAuthRequestOptions = ServerRequestOptions & {
+  authCookieNames?: readonly string[];
+};
+
+function mergeCookieHeader(headers: HeadersInit | undefined, cookieHeader: string) {
+  const nextHeaders = new Headers(headers);
+  const existingCookieHeader = nextHeaders.get('Cookie');
+
+  nextHeaders.set(
+    'Cookie',
+    existingCookieHeader ? `${existingCookieHeader}; ${cookieHeader}` : cookieHeader,
+  );
+
+  return nextHeaders;
+}
+
+function createAuthCookieHeader(
+  cookieNames: readonly string[],
+  cookieStore: Awaited<ReturnType<typeof cookies>>,
+) {
+  return cookieNames
+    .map((cookieName) => cookieStore.get(cookieName))
+    .filter((cookie) => cookie !== undefined)
+    .map((cookie) => `${cookie.name}=${cookie.value}`)
+    .join('; ');
+}
+
+/**
+ * 인증 정보가 필요 없는 서버 요청 래퍼 예시입니다.
+ * 서버 공통 헤더나 캐시 정책이 필요하면 여기서 확장해서 사용하세요.
+ */
+export function requestServer<T>(options: ServerRequestOptions) {
+  return executeRequest<T>({
+    ...options,
+  });
+}
+
+/**
+ * Next 서버 쿠키를 자동 수집해서 Cookie 헤더로 합쳐 전달합니다.
+ */
+export async function requestServerAuth<T>({
+  authCookieNames = AUTH_COOKIE_NAMES,
+  ...options
+}: ServerAuthRequestOptions) {
+  const cookieStore = await cookies();
+  const cookieHeader = createAuthCookieHeader(authCookieNames, cookieStore);
+
+  return executeRequest<T>({
+    ...options,
+    headers: cookieHeader ? mergeCookieHeader(options.headers, cookieHeader) : options.headers,
+  });
+}

package/source/wrappers/next/request/request.ts

@@ -0,0 +1,52 @@
+import {
+  executeRequest as executeSharedRequest,
+  type JsonObject,
+  type JsonValue,
+  type RequestData,
+  type RequestOptions,
+  type RequestParamValue,
+  type RequestParams,
+} from '../../../core/request/request-core';
+
+function assertUrl(value: string, name: string) {
+  try {
+    return new URL(value).toString().replace(/\/$/, '');
+  } catch {
+    throw new Error(`${name} 환경 변수는 유효한 URL이어야 합니다.`);
+  }
+}
+
+function resolveBaseUrl(baseUrl?: string) {
+  if (baseUrl !== undefined) {
+    return baseUrl;
+  }
+
+  if (process.env.API_BASE_URL) {
+    return assertUrl(process.env.API_BASE_URL, 'API_BASE_URL');
+  }
+
+  if (process.env.NEXT_PUBLIC_API_BASE_URL) {
+    return assertUrl(process.env.NEXT_PUBLIC_API_BASE_URL, 'NEXT_PUBLIC_API_BASE_URL');
+  }
+
+  return undefined;
+}
+
+export type {
+  JsonObject,
+  JsonValue,
+  RequestData,
+  RequestOptions,
+  RequestParamValue,
+  RequestParams,
+};
+
+/**
+ * Next wrapper는 서버/클라이언트 공용 baseUrl 해석만 맡고,
+ * 나머지 요청 본체는 공통 request 본체를 그대로 사용합니다.
+ */
+export function executeRequest<T>(options: RequestOptions): Promise<T> {
+  return executeSharedRequest<T>(options, {
+    resolveBaseUrl,
+  });
+}

package/source/wrappers/next/ui/global-modal.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { useModalStore } from '../../../core/ui/modal-store';
+
+export function GlobalModal() {
+  const { isOpen, title, description, closeModal } = useModalStore();
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
+      <div className="w-full max-w-sm rounded-2xl bg-white p-6 shadow-lg">
+        <h2 className="text-lg font-semibold text-zinc-950">{title}</h2>
+        {description ? <p className="mt-2 text-sm leading-6 text-zinc-600">{description}</p> : null}
+        <div className="mt-6 flex justify-end">
+          <button
+            type="button"
+            onClick={closeModal}
+            className="rounded-lg bg-zinc-950 px-4 py-2 text-sm font-medium text-white"
+          >
+            닫기
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/source/wrappers/react/auth/auth-error-listener.tsx

@@ -0,0 +1,34 @@
+import { useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+import { AUTH_UNAUTHORIZED_EVENT } from '../../../core/auth/auth-events';
+import { routePaths } from '../../../core/routes/route-paths';
+
+/**
+ * AppProviders에 렌더링해두면 unauthorized 이벤트를 받아
+ * 로그인 페이지로 이동시킬 수 있는 템플릿 예시입니다.
+ */
+export function AuthErrorListener() {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    function handleUnauthorized() {
+      if (location.pathname === routePaths.login) {
+        return;
+      }
+
+      navigate(routePaths.login, {
+        replace: true,
+      });
+    }
+
+    window.addEventListener(AUTH_UNAUTHORIZED_EVENT, handleUnauthorized);
+
+    return () => {
+      window.removeEventListener(AUTH_UNAUTHORIZED_EVENT, handleUnauthorized);
+    };
+  }, [location.pathname, navigate]);
+
+  return null;
+}

package/source/wrappers/react/query/providers.tsx

@@ -0,0 +1,31 @@
+import { QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import type { ReactNode } from 'react';
+
+import { getQueryClient } from '../../../core/query/query-client';
+
+export type QueryProvidersProps = {
+  children: ReactNode;
+  /**
+   * 템플릿 확장 포인트입니다.
+   * handleClientAppError 같은 전역 에러 핸들러를 필요할 때만 주입해서 사용하세요.
+   */
+  onGlobalError?: (error: unknown) => void;
+};
+
+/**
+ * TanStack Query provider 예시입니다.
+ * 템플릿 기본값만 담고 있으니 프로젝트 정책에 맞게 옵션을 확장해서 사용하세요.
+ */
+export function QueryProviders({ children, onGlobalError }: QueryProvidersProps) {
+  const queryClient = getQueryClient({
+    onGlobalError,
+  });
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+      {import.meta.env.DEV ? <ReactQueryDevtools initialIsOpen={false} /> : null}
+    </QueryClientProvider>
+  );
+}

package/source/wrappers/react/request/request.client.ts

@@ -0,0 +1,24 @@
+import { executeRequest, type RequestOptions } from './request';
+
+export type ClientRequestOptions = Omit<RequestOptions, 'credentials'>;
+
+function requestWithCredentials(credentials: RequestCredentials) {
+  return function executeClientRequest<T>(options: ClientRequestOptions) {
+    return executeRequest<T>({
+      ...(options as RequestOptions),
+      credentials,
+    });
+  };
+}
+
+/**
+ * 인증 쿠키가 필요 없는 클라이언트 요청 래퍼 예시입니다.
+ * 프로젝트 정책에 맞는 공통 옵션이 있다면 여기서 확장해서 사용하세요.
+ */
+export const requestClient = requestWithCredentials('omit');
+
+/**
+ * 인증 쿠키를 함께 보내는 클라이언트 요청 래퍼 예시입니다.
+ * 실제 인증 전략에 맞게 credentials 정책을 조정해서 사용하세요.
+ */
+export const requestClientAuth = requestWithCredentials('include');

package/source/wrappers/react/request/request.ts

@@ -0,0 +1,51 @@
+import {
+  executeRequest as executeSharedRequest,
+  type JsonObject,
+  type JsonValue,
+  type RequestData,
+  type RequestOptions,
+  type RequestParamValue,
+  type RequestParams,
+} from '../../../core/request/request-core';
+
+function assertUrl(value: string, name: string) {
+  try {
+    return new URL(value).toString().replace(/\/$/, '');
+  } catch {
+    throw new Error(`${name} 환경 변수는 유효한 URL이어야 합니다.`);
+  }
+}
+
+function resolveBaseUrl(baseUrl?: string) {
+  if (baseUrl !== undefined) {
+    return baseUrl;
+  }
+
+  const env = import.meta.env as Record<string, string | undefined>;
+  const value = env.VITE_API_BASE_URL;
+
+  if (!value) {
+    return undefined;
+  }
+
+  return assertUrl(value, 'VITE_API_BASE_URL');
+}
+
+export type {
+  JsonObject,
+  JsonValue,
+  RequestData,
+  RequestOptions,
+  RequestParamValue,
+  RequestParams,
+};
+
+/**
+ * React standalone wrapper는 Vite env 해석만 맡고,
+ * 실제 요청 직렬화/에러 처리 로직은 공통 request 본체를 재사용합니다.
+ */
+export function executeRequest<T>(options: RequestOptions): Promise<T> {
+  return executeSharedRequest<T>(options, {
+    resolveBaseUrl,
+  });
+}

package/source/wrappers/react/ui/global-modal.tsx

@@ -0,0 +1,27 @@
+import { useModalStore } from '../../../core/ui/modal-store';
+
+export function GlobalModal() {
+  const { isOpen, title, description, closeModal } = useModalStore();
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
+      <div className="w-full max-w-sm rounded-2xl bg-white p-6 shadow-lg">
+        <h2 className="text-lg font-semibold text-zinc-950">{title}</h2>
+        {description ? <p className="mt-2 text-sm leading-6 text-zinc-600">{description}</p> : null}
+        <div className="mt-6 flex justify-end">
+          <button
+            type="button"
+            onClick={closeModal}
+            className="rounded-lg bg-zinc-950 px-4 py-2 text-sm font-medium text-white"
+          >
+            닫기
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/monorepo/.dockerignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# Dependencies
+node_modules
+.pnp
+.pnp.js
+
+# Local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Testing
+coverage
+
+# Turbo
+.turbo
+
+# Vercel
+.vercel
+
+# Build Outputs
+.next/
+out/
+build
+dist
+
+
+# Debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Misc
+.DS_Store
+*.pem