content
+
-
-
-
-
- );
-}
diff --git a/src/features/auth/api/auth-api.ts b/src/features/auth/api/auth-api.ts
new file mode 100644
index 0000000..f4043e5
--- /dev/null
+++ b/src/features/auth/api/auth-api.ts
@@ -0,0 +1,33 @@
+import type { AuthUser } from "@/stores/auth-store";
+
+export type SignInInput = {
+ email: string;
+ password: string;
+};
+
+export type SignInResponse = {
+ token: string;
+ user: AuthUser;
+};
+
+export async function signInRequest(
+ input: SignInInput,
+): Promise
+
+ ),
+};
diff --git a/src/features/dashboard/components/MetricCard.tsx b/src/features/dashboard/components/MetricCard.tsx
new file mode 100644
index 0000000..fa6f7a2
--- /dev/null
+++ b/src/features/dashboard/components/MetricCard.tsx
@@ -0,0 +1,18 @@
+import { Card } from "@/shared/ui/card";
+
+export function MetricCard({
+ label,
+ value,
+}: {
+ label: string;
+ value: string | number;
+}) {
+ return (
+ {label}
++ {value} +
+최근 프로젝트
+
+ {recentProjects.map((project) => (
+
+
+
+ ))}
+
+
+ + {project.name} +
+{project.owner}
++ 대시보드 데이터를 불러오지 못했습니다. +
+ ); + } + + const projects = query.data ?? []; + const counts = getProjectStatusCounts(projects); + + return ( +
+
+ 대시보드
++ 실무형 React 템플릿의 핵심 흐름을 압축한 화면입니다. +
+
+
+
+
+
+
+ {project.name}
+
+
+ {project.description}
+-
+
- 담당자 +
- {project.owner} +
- 마감일 +
- + {formatDate(project.dueDate)} + +
+
+
+
+
+
+ );
+}
diff --git a/src/features/projects/components/ProjectStatusBadge.stories.tsx b/src/features/projects/components/ProjectStatusBadge.stories.tsx
new file mode 100644
index 0000000..df95228
--- /dev/null
+++ b/src/features/projects/components/ProjectStatusBadge.stories.tsx
@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { ProjectStatusBadge } from "./ProjectStatusBadge";
+
+const meta = {
+ title: "Features/Projects/ProjectStatusBadge",
+ component: ProjectStatusBadge,
+ tags: ["autodocs"],
+ args: { status: "active" },
+ argTypes: {
+ status: {
+ control: "inline-radio",
+ options: ["active", "paused", "completed"],
+ },
+ },
+} satisfies Meta
+
+
+ onFiltersChange({ ...filters, search: event.target.value })
+ }
+ placeholder="프로젝트 또는 담당자 검색"
+ />
+
+
+
+
+
+
+
+
+
+
+
+ ),
+};
diff --git a/src/features/projects/components/ProjectStatusBadge.tsx b/src/features/projects/components/ProjectStatusBadge.tsx
new file mode 100644
index 0000000..2a68220
--- /dev/null
+++ b/src/features/projects/components/ProjectStatusBadge.tsx
@@ -0,0 +1,17 @@
+import type { ProjectStatus } from "@/features/projects/model/project-types";
+import { Badge } from "@/shared/ui/badge";
+
+const statusMeta: Record<
+ ProjectStatus,
+ { label: string; variant: "info" | "warning" | "success" }
+> = {
+ active: { label: "진행 중", variant: "info" },
+ paused: { label: "일시 중지", variant: "warning" },
+ completed: { label: "완료", variant: "success" },
+};
+
+export function ProjectStatusBadge({ status }: { status: ProjectStatus }) {
+ const meta = statusMeta[status];
+
+ return
+
+
+
+ + {project.name} +
+{project.description}
+-
+
- 담당자 +
- {project.owner} +
- 마감일 +
- {formatDate(project.dueDate)} +
- 최근 수정 +
- + {formatDate(project.updatedAt.slice(0, 10))} + +
+
+
+
+
+
+
+
+
+
+ 프로젝트
++ 서버 상태, 필터링, mutation 흐름을 확인하는 예제입니다. +
+
+ 조건에 맞는 프로젝트가 없습니다.
+
+ ) : (
+
+ {visibleProjects.map((project) => (
+
+ )}
+
+
+ 설정
++ Zustand가 담당하는 클라이언트 UI 상태 예제입니다. +
+
+
+
+
+ + {densityDescriptions[density]} +
+
+
+ + 이 설정은 브라우저에 저장됩니다. +
+ +로그인
+
+
+
+
+
+
+
+
+ {sidebarOpen ? (
+
+ ) : null}
+
+
+ );
+}
diff --git a/src/layouts/ThemeToggle.stories.tsx b/src/layouts/ThemeToggle.stories.tsx
new file mode 100644
index 0000000..f3e1527
--- /dev/null
+++ b/src/layouts/ThemeToggle.stories.tsx
@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { ThemeToggle } from "./ThemeToggle";
+
+const meta = {
+ title: "Layouts/ThemeToggle",
+ component: ThemeToggle,
+ tags: ["autodocs"],
+} satisfies Meta
+
+
+
+
+
+
+
+
+
+ React Sample Dashboard
+
+ 로그인
++ 데모 인증입니다. 아무 이메일과 비밀번호로 로그인할 수 있습니다. +
+ ++ Error +
+문제가 발생했습니다.
++ {message} +
+ ++ 404 +
+페이지를 찾을 수 없습니다.
++ 요청한 주소가 존재하지 않거나 이동되었습니다. +
+ + 대시보드로 이동 + +
-
- );
- },
-});
+import type { RouterContext } from "@/app/router-context";
+import { ErrorPage } from "@/pages/errors/ErrorPage";
+import { NotFoundPage } from "@/pages/errors/NotFoundPage";
-function RootComponent() {
- return (
- <>
- This is the notFoundComponent configured on root route
- Start Over -
-
-
-
- );
-}
diff --git a/src/routes/_defaultLayout/about/index.tsx b/src/routes/_defaultLayout/about/index.tsx
deleted file mode 100644
index c39d886..0000000
--- a/src/routes/_defaultLayout/about/index.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-
-export const Route = createFileRoute("/_defaultLayout/about/")({
- component: () => Hello /_defaultLayout/aboutus/!
,
-});
diff --git a/src/routes/_defaultLayout/index.tsx b/src/routes/_defaultLayout/index.tsx
deleted file mode 100644
index fccfb43..0000000
--- a/src/routes/_defaultLayout/index.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-import ModalExample from "@/components/modal/ModalExample";
-export const Route = createFileRoute("/_defaultLayout/")({
- component: DefaultHome,
-});
-
-function DefaultHome() {
- return (
- <>
-
-
-
- );
-}
diff --git a/src/routes/signin.tsx b/src/routes/signin.tsx
new file mode 100644
index 0000000..e55deaf
--- /dev/null
+++ b/src/routes/signin.tsx
@@ -0,0 +1,14 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { z } from "zod";
+
+import { SignInPage } from "@/pages/auth/SignInPage";
+
+const signInSearchSchema = z.object({
+ // 보호 라우트에서 넘어올 때 원래 목적지를 담는다.
+ redirect: z.string().optional(),
+});
+
+export const Route = createFileRoute("/signin")({
+ validateSearch: signInSearchSchema,
+ component: SignInPage,
+});
diff --git a/src/shared/config/env.ts b/src/shared/config/env.ts
new file mode 100644
index 0000000..165bf31
--- /dev/null
+++ b/src/shared/config/env.ts
@@ -0,0 +1,19 @@
+import { z } from "zod";
+
+/**
+ * 애플리케이션 환경변수 스키마.
+ * Vite는 `VITE_` 접두사가 붙은 값만 클라이언트로 노출하므로 그 값만 검증한다.
+ * 잘못된 값이면 부팅 시점에 즉시 실패시켜 런타임 중 조용한 오류를 막는다.
+ */
+const envSchema = z.object({
+ VITE_API_BASE_URL: z.url().default("http://localhost:3000"),
+ // "false" 문자열일 때만 목킹을 끈다(기본값은 켜짐).
+ VITE_ENABLE_MOCKS: z
+ .enum(["true", "false"])
+ .default("true")
+ .transform((value) => value === "true"),
+});
+
+export type Env = z.infer
- 
-
-
-
-
- - Sign in -
-retry: {String(retry)}
;
+}
+
+describe("renderWithProviders", () => {
+ it("QueryClientProvider를 포함해 컴포넌트를 렌더링한다", () => {
+ renderWithProviders({label}
;
+ }
+
+ const { rerender } = renderWithProviders(
+ Neutral
+ Success
+ Warning
+ Info
+
+ ),
+};
diff --git a/src/shared/ui/badge.tsx b/src/shared/ui/badge.tsx
new file mode 100644
index 0000000..6adc631
--- /dev/null
+++ b/src/shared/ui/badge.tsx
@@ -0,0 +1,30 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type { HTMLAttributes } from "react";
+
+import { cn } from "@/shared/lib/cn";
+
+const badgeVariants = cva(
+ "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
+ {
+ variants: {
+ variant: {
+ neutral: "bg-slate-100 text-slate-700",
+ success: "bg-emerald-100 text-emerald-700",
+ warning: "bg-amber-100 text-amber-800",
+ info: "bg-sky-100 text-sky-700",
+ },
+ },
+ defaultVariants: {
+ variant: "neutral",
+ },
+ },
+);
+
+export type BadgeProps = HTMLAttributes
+
+
+
+
+
+ ),
+};
+
+// 인터랙션 테스트: 클릭 시 onClick 핸들러가 호출되는지 검증한다.
+export const Clickable: Story = {
+ args: { children: "Click me", onClick: fn() },
+ play: async ({ args, canvasElement }) => {
+ const canvas = within(canvasElement);
+ await userEvent.click(canvas.getByRole("button", { name: "Click me" }));
+ await expect(args.onClick).toHaveBeenCalledOnce();
+ },
+};
+
+// 모든 size를 한눈에 비교한다.
+export const AllSizes: Story = {
+ render: () => (
+
+
+
+
+
+ ),
+};
diff --git a/src/shared/ui/button.tsx b/src/shared/ui/button.tsx
new file mode 100644
index 0000000..5ad68d3
--- /dev/null
+++ b/src/shared/ui/button.tsx
@@ -0,0 +1,55 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import type { ButtonHTMLAttributes } from "react";
+
+import { cn } from "@/shared/lib/cn";
+
+const buttonVariants = cva(
+ "inline-flex h-10 items-center justify-center gap-2 rounded-md px-4 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50 compact:h-9 compact:px-3 compact:text-xs",
+ {
+ variants: {
+ variant: {
+ primary:
+ "bg-slate-950 text-white hover:bg-slate-800 focus-visible:outline-slate-950 dark:bg-slate-100 dark:text-slate-950 dark:hover:bg-white dark:focus-visible:outline-slate-300",
+ secondary:
+ "bg-slate-100 text-slate-950 hover:bg-slate-200 focus-visible:outline-slate-400 dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700 dark:focus-visible:outline-slate-500",
+ ghost:
+ "text-slate-700 hover:bg-slate-100 focus-visible:outline-slate-400 dark:text-slate-200 dark:hover:bg-slate-800 dark:focus-visible:outline-slate-500",
+ danger:
+ "bg-red-600 text-white hover:bg-red-700 focus-visible:outline-red-600",
+ },
+ size: {
+ sm: "h-8 px-3 text-xs compact:h-7 compact:px-2.5",
+ md: "h-10 px-4",
+ lg: "h-11 px-5 compact:h-10 compact:px-4",
+ icon: "size-10 p-0 compact:size-9",
+ },
+ },
+ defaultVariants: {
+ variant: "primary",
+ size: "md",
+ },
+ },
+);
+
+export type ButtonProps = ButtonHTMLAttributes+ 기본 카드 컨테이너입니다. 내부 콘텐츠는 자유롭게 구성합니다. +
+
+ Active
+
+
+
+ + Acme Redesign +
++ 12 tasks remaining +
+
+
+
+
+
+
+
+
+ ),
+};
diff --git a/src/shared/ui/input.tsx b/src/shared/ui/input.tsx
new file mode 100644
index 0000000..facf611
--- /dev/null
+++ b/src/shared/ui/input.tsx
@@ -0,0 +1,18 @@
+import type { InputHTMLAttributes } from "react";
+
+import { cn } from "@/shared/lib/cn";
+
+export function Input({
+ className,
+ ...props
+}: InputHTMLAttributes
+
+
+
+ ),
+};
diff --git a/src/shared/ui/label.tsx b/src/shared/ui/label.tsx
new file mode 100644
index 0000000..6e21ddd
--- /dev/null
+++ b/src/shared/ui/label.tsx
@@ -0,0 +1,18 @@
+import type { LabelHTMLAttributes } from "react";
+
+import { cn } from "@/shared/lib/cn";
+
+export function Label({
+ className,
+ ...props
+}: LabelHTMLAttributes
+
+
+
+ ),
+};
diff --git a/src/shared/ui/select.tsx b/src/shared/ui/select.tsx
new file mode 100644
index 0000000..dd01984
--- /dev/null
+++ b/src/shared/ui/select.tsx
@@ -0,0 +1,18 @@
+import type { SelectHTMLAttributes } from "react";
+
+import { cn } from "@/shared/lib/cn";
+
+export function Select({
+ className,
+ ...props
+}: SelectHTMLAttributes
+
+
+
+
+
+
+
+
+ ),
+};
diff --git a/src/shared/ui/toast.test.tsx b/src/shared/ui/toast.test.tsx
new file mode 100644
index 0000000..d5cd749
--- /dev/null
+++ b/src/shared/ui/toast.test.tsx
@@ -0,0 +1,46 @@
+import { act, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+
+import { toast, useToastStore } from "@/stores/toast-store";
+
+import { Toaster } from "./toast";
+
+describe("Toaster", () => {
+ beforeEach(() => {
+ useToastStore.getState().clear();
+ });
+
+ afterEach(() => {
+ useToastStore.getState().clear();
+ });
+
+ it("토스트가 없으면 아무것도 렌더하지 않는다", () => {
+ const { container } = render(
+ {toast.title}
+
+
+ );
+}
+
+/**
+ * 전역 토스트 렌더러. AppProviders에 한 번 마운트하고,
+ * toast.success/error/info 헬퍼로 어디서든 알림을 띄운다.
+ */
+export function Toaster() {
+ const toasts = useToastStore((state) => state.toasts);
+
+ if (toasts.length === 0) {
+ return null;
+ }
+
+ return (
+
+ {toasts.map((toast) => (
+
+ );
+}
diff --git a/src/stores/auth-store.ts b/src/stores/auth-store.ts
new file mode 100644
index 0000000..6d8d132
--- /dev/null
+++ b/src/stores/auth-store.ts
@@ -0,0 +1,36 @@
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+
+export type AuthUser = {
+ email: string;
+};
+
+type AuthState = {
+ token: string | null;
+ user: AuthUser | null;
+ isAuthenticated: boolean;
+ signIn: (payload: { token: string; user: AuthUser }) => void;
+ signOut: () => void;
+};
+
+export const useAuthStore = create