[실험실] 업보트 기능 추가 (git-goods#348)

Co-authored-by: sumi <sumi@sumiui-MacBookAir.local>

Author: sumi-0011

.serena/.gitignore

@@ -0,0 +1 @@
+/cache

.vscode/settings.json

@@ -11,5 +11,5 @@
     }
   ],
   "typescript.tsdk": "node_modules/typescript/lib",
-  "cSpell.words": ["hyesungoh"]
+  "cSpell.words": ["hyesungoh", "supabase"]
 }

CLAUDE.md

@@ -79,10 +79,65 @@ pnpm --filter @gitanimals/ui-panda storybook # Start Storybook
 - Shared utilities from `@gitanimals/util-common`
 
 **State Management:**
-- Server state: Tanstack Query with custom hooks in `src/apis/`
+- Server state: Tanstack Query v5 with `queryOptions` pattern in `src/apis/`
 - Client state: Jotai for atomic state, Zustand for stores
 - Auth state managed through NextAuth.js
 
+**Tanstack Query v5 Best Practices:**
+- Always use `queryOptions` factory pattern for reusable query definitions
+- Group related queryOptions into a single exported object
+- Use `useQuery` directly with queryOptions in components (no custom hooks needed)
+- Example pattern:
+  ```typescript
+  // src/apis/user/queries.ts
+  import { queryOptions } from '@tanstack/react-query';
+
+  export const USER_QUERY_KEYS = {
+    all: ['user'] as const,
+    detail: (userId: string) => ['user', userId] as const,
+    list: () => ['user', 'list'] as const,
+  };
+
+  // Define queryOptions factories
+  const getUserOptions = (userId: string) =>
+    queryOptions({
+      queryKey: USER_QUERY_KEYS.detail(userId),
+      queryFn: () => fetchUser(userId),
+      enabled: !!userId,
+    });
+
+  const getUserListOptions = () =>
+    queryOptions({
+      queryKey: USER_QUERY_KEYS.list(),
+      queryFn: fetchUserList,
+    });
+
+  // Export grouped queryOptions
+  export const userQueryOptions = {
+    getUser: getUserOptions,
+    getUserList: getUserListOptions,
+  };
+
+  // Usage in component
+  import { useQuery } from '@tanstack/react-query';
+  import { userQueryOptions } from '@/apis/user/queries';
+
+  function UserProfile({ userId }: { userId: string }) {
+    const { data: user } = useQuery(userQueryOptions.getUser(userId));
+    const { data: users } = useQuery(userQueryOptions.getUserList());
+    // ...
+  }
+
+  // Usage in Server Components (prefetching)
+  await queryClient.prefetchQuery(userQueryOptions.getUser('123'));
+  ```
+- Benefits:
+  - Type safety with auto-completion
+  - Reusability in components, prefetching, SSR
+  - Easier testing and mocking
+  - Centralized query key management
+  - No need for custom hooks unless adding extra logic
+
 **Styling Approach:**
 - PandaCSS with `styled-system` generation
 - Shadow Panda preset for enhanced component styling

apps/web/package.json

@@ -34,6 +34,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.6",
     "@shadow-panda/style-context": "^0.7.1",
+    "@supabase/supabase-js": "^2.75.0",
     "@suspensive/react": "^2.17.1",
     "@tanstack/react-query": "*",
     "@vercel/analytics": "^1.5.0",

apps/web/src/apis/laboratory/feedback.ts

@@ -0,0 +1,130 @@
+import { supabase } from '@/lib/supabase/client';
+
+export interface LaboratoryUpvote {
+  id: string;
+  user_id: string;
+  username: string;
+  laboratory_id: string;
+  description: string | null;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface CreateUpvoteRequest {
+  user_id: string;
+  username: string;
+  laboratory_id: string;
+}
+
+export interface CheckUpvoteResponse {
+  hasUpvoted: boolean;
+  upvote?: LaboratoryUpvote;
+}
+
+/**
+ * Create or update laboratory upvote
+ */
+export async function createOrUpdateUpvote(request: CreateUpvoteRequest): Promise<LaboratoryUpvote> {
+  // Check if upvote already exists for this user + laboratory combination
+  const { data: existingUpvote, error: checkError } = await supabase
+    .from('laboratory_feedback')
+    .select('*')
+    .eq('user_id', request.user_id)
+    .eq('laboratory_id', request.laboratory_id)
+    .maybeSingle();
+
+  if (checkError) {
+    throw new Error(`Failed to check existing upvote: ${checkError.message}`);
+  }
+
+  // If upvote exists, update timestamp
+  if (existingUpvote) {
+    const typedUpvote = existingUpvote as LaboratoryUpvote;
+    const { data, error } = await supabase
+      .from('laboratory_feedback')
+      .update({
+        updated_at: new Date().toISOString(),
+      })
+      .eq('id', typedUpvote.id)
+      .select()
+      .single();
+
+    if (error || !data) {
+      throw new Error(`Failed to update upvote: ${error?.message ?? 'No data returned'}`);
+    }
+
+    return data as LaboratoryUpvote;
+  }
+
+  // Otherwise, create new upvote
+  const { data, error } = await supabase
+    .from('laboratory_feedback')
+    .insert({
+      user_id: request.user_id,
+      username: request.username,
+      laboratory_id: request.laboratory_id,
+      description: null,
+    })
+    .select()
+    .single();
+
+  if (error || !data) {
+    throw new Error(`Failed to create upvote: ${error?.message ?? 'No data returned'}`);
+  }
+
+  return data as LaboratoryUpvote;
+}
+
+/**
+ * Check if user has already upvoted for a specific laboratory
+ */
+export async function checkUserUpvote(userId: string, laboratoryId: string): Promise<CheckUpvoteResponse> {
+  const { data, error } = await supabase
+    .from('laboratory_feedback')
+    .select('*')
+    .eq('user_id', userId)
+    .eq('laboratory_id', laboratoryId)
+    .maybeSingle();
+
+  if (error) {
+    throw new Error(`Failed to check user upvote: ${error.message}`);
+  }
+
+  return {
+    hasUpvoted: !!data,
+    upvote: data ? (data as LaboratoryUpvote) : undefined,
+  };
+}
+
+/**
+ * Get all laboratory upvotes for a specific laboratory
+ */
+export async function getAllUpvotes(laboratoryId: string): Promise<LaboratoryUpvote[]> {
+  const { data, error } = await supabase
+    .from('laboratory_feedback')
+    .select('*')
+    .eq('laboratory_id', laboratoryId)
+    .order('created_at', { ascending: false });
+
+  if (error || !data) {
+    throw new Error(`Failed to get upvotes: ${error?.message ?? 'No data returned'}`);
+  }
+
+  return data as LaboratoryUpvote[];
+}
+
+/**
+ * Get upvote count for a specific laboratory
+ */
+export async function getUpvoteCount(laboratoryId: string): Promise<number> {
+  const { count, error } = await supabase
+    .from('laboratory_feedback')
+    .select('*', { count: 'exact', head: true })
+    .eq('laboratory_id', laboratoryId);
+
+  if (error) {
+    throw new Error(`Failed to get upvote count: ${error.message}`);
+  }
+
+  return count ?? 0;
+}

apps/web/src/apis/laboratory/useLaboratoryFeedback.ts

@@ -0,0 +1,46 @@
+import { queryOptions } from '@tanstack/react-query';
+
+import { checkUserUpvote, getAllUpvotes, getUpvoteCount } from './feedback';
+
+export const LABORATORY_FEEDBACK_QUERY_KEYS = {
+  all: ['laboratory-upvote'] as const,
+  byLab: (laboratoryId: string) => ['laboratory-upvote', 'lab', laboratoryId] as const,
+  count: (laboratoryId: string) => ['laboratory-upvote', 'count', laboratoryId] as const,
+  userCheck: (userId: string, laboratoryId: string) => ['laboratory-upvote', 'user', userId, 'lab', laboratoryId] as const,
+};
+
+/**
+ * Query options for checking if user has upvoted for a specific laboratory
+ */
+const checkUserUpvoteOptions = (userId: string, laboratoryId: string) =>
+  queryOptions({
+    queryKey: LABORATORY_FEEDBACK_QUERY_KEYS.userCheck(userId, laboratoryId),
+    queryFn: () => checkUserUpvote(userId, laboratoryId),
+    enabled: !!userId && !!laboratoryId,
+  });
+
+/**
+ * Query options for getting all laboratory upvotes for a specific laboratory
+ */
+const getAllUpvotesOptions = (laboratoryId: string) =>
+  queryOptions({
+    queryKey: LABORATORY_FEEDBACK_QUERY_KEYS.byLab(laboratoryId),
+    queryFn: () => getAllUpvotes(laboratoryId),
+    enabled: !!laboratoryId,
+  });
+
+/**
+ * Query options for getting upvote count for a specific laboratory
+ */
+const getUpvoteCountOptions = (laboratoryId: string) =>
+  queryOptions({
+    queryKey: LABORATORY_FEEDBACK_QUERY_KEYS.count(laboratoryId),
+    queryFn: () => getUpvoteCount(laboratoryId),
+    enabled: !!laboratoryId,
+  });
+
+export const upvoteQueryOptions = {
+  checkUserUpvote: checkUserUpvoteOptions,
+  getAllUpvotes: getAllUpvotesOptions,
+  getUpvoteCount: getUpvoteCountOptions,
+};