🛠️ Development environment construction and guide#

Hello, this is Frontend Development Team!
This document was written for state management and component standardization in ReactandTypeScript based projects.

💡 Key Development Guidelines:
All asynchronous data patching uses TanStack Query, and the UI design system conforms toshadcn/ui components.

💻 Code Style Sample (Code Block Test)#

The code below is example code for asynchronous data request and state processing. Keywords within code blocks must not be translated and the original code must remain.

import { useQuery } from "@tanstack/react-query";

interface UserProfile {
id: string;
name: string;
role: "admin" | "developer";
}

export const useFetchUser = (userId: string) => {
return useQuery<UserProfile>({
queryKey: ["user", userId],
queryFn: async () => {
const response = await fetch(`/api/v1/users/${userId}`);
if (!response.ok) throw new Error("The network response is incorrect.");
return response.json();
},
});
};