create-harness-cli 0.1.0

package/templates/presets/react-fe/reference/auth-http/axiosInstance.ts

@@ -0,0 +1,103 @@
+/**
+ * 단일 axios 인스턴스 — 모든 HTTP 호출은 이 인스턴스를 통한다.
+ * (규칙: 50-auth-http. 새 인스턴스 생성·axios 직접 호출 금지)
+ *
+ * - access token은 메모리에만 보관 (localStorage 금지)
+ * - 요청 인터셉터가 Authorization 헤더 자동 첨부
+ * - 401 시 refresh 1회 시도 (refreshPromise로 동시 요청 중복 제거) 후 원 요청 재시도
+ * - refresh까지 실패하면 'auth:logout' 이벤트만 발행 — 라우팅은 인증 훅의 책임
+ */
+import axios from 'axios'
+import type { AxiosError, InternalAxiosRequestConfig } from 'axios'
+
+export const axiosInstance = axios.create({
+    baseURL: import.meta.env.VITE_API_URL,
+    headers: {
+        'Content-Type': 'application/json',
+    },
+    withCredentials: true,
+})
+
+let currentAccessToken: string | null = null
+
+export const setAccessToken = (token: string | null) => {
+    currentAccessToken = token
+}
+
+export const getAccessToken = () => currentAccessToken
+
+// 요청 인터셉터: 토큰을 Authorization 헤더에 자동 첨부 (refresh 요청 제외)
+axiosInstance.interceptors.request.use(
+    (config: InternalAxiosRequestConfig) => {
+        const isRefreshRequest = (config.url ?? '').includes('/auth/refresh')
+        if (currentAccessToken && config.headers && !isRefreshRequest) {
+            config.headers.Authorization = `Bearer ${currentAccessToken}`
+        }
+        return config
+    },
+    (error) => Promise.reject(error),
+)
+
+interface IRefreshResponse {
+    data: {
+        accessToken: string
+    }
+}
+
+// 동시에 만료된 요청 N개가 refresh를 N번 부르지 않도록 중복 제거
+let refreshPromise: Promise<string> | null = null
+
+const refreshAccessToken = (): Promise<string> => {
+    if (refreshPromise) return refreshPromise
+
+    refreshPromise = axiosInstance
+        .post<IRefreshResponse>('/auth/refresh')
+        .then((response) => {
+            const token = response.data.data.accessToken
+            setAccessToken(token)
+            return token
+        })
+        .finally(() => {
+            refreshPromise = null
+        })
+
+    return refreshPromise
+}
+
+// 응답 인터셉터: 401 → refresh 1회 → 원 요청 재시도, 실패 시 로그아웃 이벤트
+axiosInstance.interceptors.response.use(
+    (response) => response,
+    async (error: AxiosError) => {
+        const originalRequest = error.config as InternalAxiosRequestConfig & {
+            _retry?: boolean
+        }
+
+        const requestUrl = originalRequest?.url ?? ''
+        const isAuthRequest =
+            requestUrl.includes('/auth/login') ||
+            requestUrl.includes('/auth/refresh') ||
+            requestUrl.includes('/auth/logout')
+
+        if (
+            error.response?.status === 401 &&
+            originalRequest &&
+            !originalRequest._retry &&
+            !isAuthRequest &&
+            currentAccessToken !== null
+        ) {
+            originalRequest._retry = true
+            try {
+                const token = await refreshAccessToken()
+                if (originalRequest.headers) {
+                    originalRequest.headers.Authorization = `Bearer ${token}`
+                }
+                return axiosInstance(originalRequest)
+            } catch {
+                setAccessToken(null)
+                window.dispatchEvent(new CustomEvent('auth:logout'))
+            }
+        }
+
+        return Promise.reject(error)
+    },
+)

package/templates/presets/react-fe/reference/data-fetching/alertDialogStore.ts

@@ -0,0 +1,30 @@
+/**
+ * 전역 클라이언트 상태(Zustand) 참조 구현 — 확인 버튼 단일 액션 알림 다이얼로그.
+ * (규칙: 20-data-fetching 상태 4분류 — "애플리케이션 상태"에 해당)
+ *
+ * 서버 캐시(TanStack Query 데이터)를 이런 스토어에 복사하지 않는다.
+ */
+import { create } from 'zustand'
+
+interface IAlertDialogState {
+    isOpen: boolean
+    title: string
+    message: string
+    onConfirm: (() => void) | null
+    open: (params: {
+        title: string
+        message: string
+        onConfirm?: () => void
+    }) => void
+    close: () => void
+}
+
+export const useAlertDialogStore = create<IAlertDialogState>((set) => ({
+    isOpen: false,
+    title: '',
+    message: '',
+    onConfirm: null,
+    open: ({ title, message, onConfirm }) =>
+        set({ isOpen: true, title, message, onConfirm: onConfirm ?? null }),
+    close: () => set({ isOpen: false, title: '', message: '', onConfirm: null }),
+}))

package/templates/presets/react-fe/reference/data-fetching/api.ts

@@ -0,0 +1,11 @@
+/**
+ * 모든 API 응답이 통과하는 공통 래퍼 타입.
+ * 컴포넌트에 백엔드 원시 응답 형태가 새어나가지 않게 한다. (규칙: 20-data-fetching)
+ *
+ * TODO: 백엔드의 실제 응답 봉투 형태에 맞게 필드를 조정하세요.
+ */
+export interface IApiResponse<TData> {
+    code: number
+    message: string
+    data: TData
+}

package/templates/presets/react-fe/reference/data-fetching/exampleApi.ts

@@ -0,0 +1,46 @@
+/**
+ * 3계층 데이터 패턴의 1층: 원시 API 호출. (규칙: 20-data-fetching)
+ * - axiosInstance만 사용, IApiResponse<T> 언래핑까지 담당
+ * - 이 파일은 폴더 밖에서 직접 import 금지 (index.ts 공개 API로만)
+ *
+ * "Example" 도메인은 이 패턴을 모방하기 위한 참조 구현입니다.
+ * 실제 도메인을 추가할 때 이 폴더 구조(Api / QueryKeys / index)를 복사하세요.
+ */
+import type { IApiResponse } from '../../types/api'
+import { axiosInstance } from '../../utils/axiosInstance'
+
+export interface IExampleItem {
+    id: string
+    name: string
+    isActive: boolean
+}
+
+// 페이지네이션 형태는 도메인마다 다를 수 있어 모듈 안에 둔다
+// (types/api.ts 가 기존 프로젝트 파일과 충돌해도 이 모듈은 컴파일된다)
+export interface IPaginatedData<TItem> {
+    items: TItem[]
+    page: number
+    pageSize: number
+    totalCount: number
+}
+
+export interface IExampleFilters {
+    keyword?: string
+    page?: number
+}
+
+export async function getExampleList(
+    filters: IExampleFilters,
+): Promise<IPaginatedData<IExampleItem>> {
+    const response = await axiosInstance.get<
+        IApiResponse<IPaginatedData<IExampleItem>>
+    >('/examples', { params: filters })
+    return response.data.data
+}
+
+export async function getExampleDetail(id: string): Promise<IExampleItem> {
+    const response = await axiosInstance.get<IApiResponse<IExampleItem>>(
+        `/examples/${encodeURIComponent(id)}`,
+    )
+    return response.data.data
+}

package/templates/presets/react-fe/reference/data-fetching/exampleQueryKeys.ts

@@ -0,0 +1,14 @@
+/**
+ * 3계층 데이터 패턴의 2층: queryKey 팩토리. (규칙: 20-data-fetching)
+ * 계층적 키 — 상위 키로 무효화하면 하위가 전부 무효화된다.
+ */
+import type { IExampleFilters } from './exampleApi'
+
+export const exampleQueryKeys = {
+    all: ['example'] as const,
+    lists: () => [...exampleQueryKeys.all, 'list'] as const,
+    list: (filters: IExampleFilters) =>
+        [...exampleQueryKeys.lists(), filters] as const,
+    details: () => [...exampleQueryKeys.all, 'detail'] as const,
+    detail: (id: string) => [...exampleQueryKeys.details(), id] as const,
+}

package/templates/presets/react-fe/reference/data-fetching/index.ts

@@ -0,0 +1,25 @@
+/**
+ * 3계층 데이터 패턴의 3층: 공개 API. (규칙: 20-data-fetching)
+ * 컴포넌트·훅은 이 파일이 export하는 것만 쓴다. 내부 파일 deep import 금지.
+ */
+import { useQuery } from '@tanstack/react-query'
+
+import { getExampleDetail, getExampleList } from './exampleApi'
+import type { IExampleFilters } from './exampleApi'
+import { exampleQueryKeys } from './exampleQueryKeys'
+
+export type { IExampleFilters, IExampleItem } from './exampleApi'
+export { exampleQueryKeys } from './exampleQueryKeys'
+
+export const useExampleListQuery = (filters: IExampleFilters) =>
+    useQuery({
+        queryKey: exampleQueryKeys.list(filters),
+        queryFn: () => getExampleList(filters),
+    })
+
+export const useExampleDetailQuery = (id: string) =>
+    useQuery({
+        queryKey: exampleQueryKeys.detail(id),
+        queryFn: () => getExampleDetail(id),
+        enabled: id.length > 0,
+    })