import { create } from 'zustand';

const useAuthStore = create((set) => ({
  token: localStorage.getItem('token') || null,
  setToken: (token) => {
    if (token) {
      localStorage.setItem('token', token);
    } else {
      localStorage.removeItem('token');
    }
    set({ token });
  },
}));

export default useAuthStore;

// ... imports
import { AuthProvider } from 'better-react-auth';
import useAuthStore from './store/authStore';
import apiClient from './api/client';

function App() {
  const { setToken } = useAuthStore();

  const login = async (credentials) => {
    const { data } = await apiClient.post('/login', credentials);
    setToken(data.token);
  };

  const logout = () => {
    setToken(null);
  };
  
  // ...
  return (
    <AuthProvider authClient={{ login, logout, register: ... }}>
      {/* 라우터 컴포넌트가 위치할 곳 */}
    </AuthProvider>
  );
}

import { createRootRoute, Outlet } from '@tanstack/react-router';
import { useAuth } from 'better-react-auth';

export const Route = createRootRoute({
  component: () => {
    const { user } = useAuth(); // 인증 상태 확인
    return (
      <>
        {/* 네비게이션 바 등 공통 UI */}
        <hr />
        <Outlet />
      </>
    );
  },
});

import { createFileRoute, redirect } from '@tanstack/react-router';

export const Route = createFileRoute('/memos')({
  beforeLoad: ({ context, location }) => {
    // context.auth는 AuthProvider에서 주입된 상태입니다.
    if (!context.auth.isAuthenticated) {
      throw redirect({
        to: '/login',
        search: {
          redirect: location.href,
        },
      });
    }
  },
  component: MemosPage,
});

function MemosPage() {
  // 메모 페이지 컴포넌트
  return <div>메모 페이지</div>;
}

// ... MemosPage 컴포넌트 내부
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import apiClient from '../api/client';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';

// API 호출 함수
const fetchMemos = async () => (await apiClient.get('/memos')).data;
const addMemo = async (newMemo) => (await apiClient.post('/memos', newMemo)).data;
const deleteMemo = async (id) => (await apiClient.delete(`/memos/${id}`)).data;

function MemosPage() {
  const queryClient = useQueryClient();

  // 데이터 조회
  const { data: memos, isLoading } = useQuery({ 
    queryKey: ['memos'], 
    queryFn: fetchMemos 
  });

  // 데이터 추가 (Mutation)
  const mutation = useMutation({
    mutationFn: addMemo,
    onSuccess: () => {
      // 성공 시 'memos' 쿼리를 무효화하여 자동으로 데이터를 다시 불러옵니다.
      queryClient.invalidateQueries({ queryKey: ['memos'] });
    },
  });

  // ... (삭제, 수정 Mutation도 유사하게 구현)

  if (isLoading) return <div>로딩 중...</div>;

  return (
    <Card className="w-[350px]">
      <CardHeader>
        <CardTitle>내 메모장</CardTitle>
      </CardHeader>
      <CardContent>
        <form onSubmit={...}>
          <Input placeholder="새 메모..." />
          <Button type="submit">추가</Button>
        </form>
        {/* memos.map(...)을 통해 메모 목록 렌더링 */}
      </CardContent>
    </Card>
  );
}

// ... main.go
    // React 정적 파일 서빙 경로를 'dist'로 변경합니다.
    router.Static("/assets", "./frontend/dist/assets") // Vite는 보통 assets 폴더를 사용합니다.
    router.StaticFile("/", "./frontend/dist/index.html")
    router.StaticFile("/favicon.ico", "./frontend/dist/favicon.ico")

    // 클라이언트 사이드 라우팅을 위한 대체 경로 설정
    router.NoRoute(func(c *gin.Context) {
        c.File("./frontend/dist/index.html")
    })
// ...