Feat: 학습용 데모 및 로또/React Query 기능 추가

package.json
- 개발/실행 스크립트 및 의존성(react, next, react-query 등) 추가/업데이트

package-lock.json
- 종속성 락 파일 갱신

AGENTS.md
- 프로젝트 가이드, 코딩 컨벤션 및 AI 멘토 프롬프트 문서 추가

db.json
- json-server용 샘플 유저 데이터 추가

next.config.ts
- 불필요한 설정 제거

.tsconfig.json
- 경로/JSX 설정 및 형식 정리

.src/app/layout.tsx
- QueryProvider 적용으로 React Query 전역 Provider 추가

src/app/page.tsx
- 새 홈 페이지 컴포넌트 추가

src/app/lotto/page.tsx
- 로또 기능 라우트 추가

src/app/api/lotto/route.ts
- 외부 로또 API를 프록시하는 Next.js API 라우트 추가 (CORS 우회, 디버그 옵션 포함)

src/app/react-query/*, src/app/zustand/*
- React Query 및 Zustand 예제 페이지(목록/상세/생성/로딩) 추가

src/app/globals.css
- Tailwind 기반 전역 스타일 및 테마 변수 확장 (다크 모드 포함)

src/providers/QueryProvider.tsx
- React Query Provider 및 Devtools 추가

src/lib/getQueryClient.ts
- 서버/클라이언트용 QueryClient 생성 유틸 추가

src/lib/utils.ts
- 클래스 병합 유틸 추가 (cn)

src/lib/useDialogDragResize.ts
- Radix Dialog용 드래그/리사이즈 훅 추가

src/components/ui/*.tsx
- shadcn 스타일 UI 컴포넌트들(버튼, 카드, 배지, dialog, table, pagination, skeleton 등) 추가

src/features/react-query-demo/**
- React Query 데모: API 래퍼, 훅(useUsers, useUser, useCreateUser), 컴포넌트(UserList, UserDetail, UserDashboard, UserCreateForm), 타입, 스토어 추가
- 서버 프리패치/하이드레이션 패턴 포함

src/features/lotto/**
- 로또 기능: API 래퍼, payload 파서(다양한 포맷 정규화), hooks, store(Zustand), 컴포넌트(LottoDashboard, LottoTable, RecommendationsDialog), 추천 알고리즘 및 유틸(번호 생성, mock 데이터) 추가

src/features/zustand/**
- Zustand 예제 스토어 및 컴포넌트 추가

.src/components.json
- shadcn 구성 파일 추가

.idea/*
- IDE 설정(inspection, vcs mapping) 추가

여러 파일(주로 새로 추가된 라이브러리 관련 파일)
- 프로젝트 초기 설정과 데모 실행을 위한 구성 및 의존성 추가
This commit is contained in:
2026-01-16 14:43:52 +09:00
parent 87146bf3a9
commit e4f8c3cd25
58 changed files with 6149 additions and 578 deletions

View File

@@ -0,0 +1,28 @@
"use client";
// React Query는 브라우저 캐시를 다루므로 클라이언트 컴포넌트에서 사용합니다.
import { useQuery } from "@tanstack/react-query"; // 서버 상태를 캐싱/동기화하는 훅입니다.
import { getUsers } from "@/features/react-query-demo/api/userApi"; // 실제 API 호출 함수입니다.
import { User } from "@/features/react-query-demo/types"; // 타입 안정성을 위한 User 타입입니다.
import { userKeys } from "@/features/react-query-demo/api/queryKeys"; // 캐시 키 설계 규칙을 모은 객체입니다.
/**
* useUsers
* @description 사용자 목록을 가져오는 React Query 훅입니다.
* @returns 사용자 목록과 상태(isLoading/isError 등)를 반환합니다.
*/
export function useUsers() {
return useQuery<User[]>({
// queryKey는 캐싱의 기준이므로 목록용 키를 명확히 분리합니다.
queryKey: userKeys.lists(),
// queryFn은 실제 데이터를 가져오는 함수입니다.
queryFn: getUsers,
// 목록 데이터는 1분 동안 신선하다고 보고 재요청을 줄입니다.
staleTime: 1000 * 60 * 1,
// 창 포커스 복귀 시 자동 재요청을 끕니다(학습용으로 흐름을 단순화).
refetchOnWindowFocus: false,
// 네트워크 오류 시 한 번만 재시도합니다.
retry: 1,
});
}