feat: browse 페이지에 로그인 기능 추가

Author: fetiu

src/pages/browse/[userId].tsx

@@ -1,11 +1,9 @@
-import {
-  GetServerSideProps,
+import type {
   GetStaticPaths,
   GetStaticProps,
-  InferGetServerSidePropsType,
   InferGetStaticPropsType,
 } from 'next';
-import { createServerSideHelpers } from '@trpc/react-query/server';
+import { useState, useEffect, useCallback } from 'react';
 import { api } from '~/utils/api';
 import { formatDistanceToNow } from 'date-fns';
 import styled from '@emotion/styled';
@@ -45,11 +43,80 @@ const FileCard = styled('div')({
 const BrowsePage = ({
   userId,
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
-  const { data: filesData } = api.s3.listUserFiles.useQuery(
-    { userId },
-    { enabled: userId !== undefined }
+  const [token, setToken] = useState<string | null>(null);
+  const utils = api.useContext();
+
+  const { data: currentUser } = api.account.getCurrentUser.useQuery(undefined, {
+    enabled: !!token,
+  });
+
+  const signInMutation = api.account.signIn.useMutation({
+    onSuccess: (data) => {
+      setToken(data.token);
+      localStorage.setItem('authToken', data.token);
+      void utils.s3.listUserFiles.invalidate();
+    },
+  });
+
+  const { data: filesData, error: filesError } = api.s3.listUserFiles.useQuery(
+    undefined,
+    { enabled: !!token }
   );
 
+  const handleLogin = useCallback(async () => {
+    const email = window.prompt('Email:');
+    if (!email) return;
+
+    const password = window.prompt('Password:');
+    if (!password) return;
+
+    void signInMutation.mutate({ email, password });
+  }, [signInMutation]);
+
+  // Check for stored token on mount
+  useEffect(() => {
+    const storedToken = localStorage.getItem('authToken');
+    if (storedToken) {
+      if (!currentUser || currentUser.name === userId) {
+        setToken(storedToken);
+      } else {
+        localStorage.removeItem('authToken');
+      }
+    } else if (!signInMutation.isPending && !signInMutation.error) {
+      void handleLogin();
+    }
+  }, [currentUser, userId, handleLogin, signInMutation]);
+
+  if (signInMutation.error) {
+    return (
+      <Container>
+        <Title>Login Failed</Title>
+        <div className="text-center text-red-500">
+          Please refresh to try again.
+        </div>
+      </Container>
+    );
+  }
+
+  if (!token || !currentUser) {
+    return (
+      <Container>
+        <Title>Waiting for authentication...</Title>
+      </Container>
+    );
+  }
+
+  if (currentUser.name !== userId) {
+    return (
+      <Container>
+        <Title>Access Denied</Title>
+        <div className="text-center text-red-500">
+          You cannot access files that do not belong to you.
+        </div>
+      </Container>
+    );
+  }
+
   return (
     <Container>
       <Title>My Files</Title>
@@ -74,6 +141,11 @@ const BrowsePage = ({
         {filesData?.files.length === 0 && (
           <div className="text-center text-gray-500">No files found</div>
         )}
+        {filesError && (
+          <div className="text-center text-red-500">
+            Error loading files. Please try again later.
+          </div>
+        )}
       </Grid>
     </Container>
   );

src/server/api/routers/s3.ts

@@ -6,10 +6,9 @@ import { env } from '~/env.js';
 import {
   createTRPCRouter,
   protectedProcedure,
-  publicProcedure,
 } from '~/server/api/trpc';
 export const s3Router = createTRPCRouter({
-  listUserFiles: publicProcedure
+  listUserFiles: protectedProcedure
     .meta({
       openapi: {
         method: 'GET',
@@ -19,7 +18,7 @@ export const s3Router = createTRPCRouter({
         description: 'Returns list of files uploaded by the current user',
       },
     })
-    .input(z.object({ userId: z.string() }))
+    .input(z.void())
     .output(
       z.object({
         files: z.array(
@@ -33,10 +32,13 @@ export const s3Router = createTRPCRouter({
         ),
       })
     )
-    .query(async ({ ctx, input: { userId } }) => {
+    .query(async ({ ctx }) => {
+      // Use the authenticated user's name from the session
+      const userName = ctx.session.user.name;
+
       const response = await ctx.s3.listObjectsV2({
         Bucket: env.BUCKET_NAME,
-        Prefix: `${userId}/`, // Only list objects that are in the user's folder
+        Prefix: `${userName}/`, // Only list objects that are in the user's folder
       });
 
       return {

src/utils/api.ts

@@ -40,6 +40,11 @@ export const api = createTRPCNext<AppRouter>({
            */
           transformer: superjson,
           url: `${getBaseUrl()}/api/trpc`,
+          headers() {
+            // Add auth token to all requests
+            const token = localStorage.getItem("authToken");
+            return token ? { Authorization: `Bearer ${token}` } : {};
+          },
         }),
       ],
     };