auth 모킹 및 스타일 수정 (#14)

tolluset · web-flow · commit 9718ec5dc4ef · 2024-03-17T15:29:27.000+09:00
* feat: add top loader

* chore: add auth mocking

* fix: main page styles
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "dev:mock": "concurrently --kill-others  \"NEXT_PUBLIC_API_MOCKING=enable next dev\" \"pnpx tsx watch ./src/mocks/http.ts\"",
+    "dev:mock": "NEXT_PUBLIC_API_MOCKING=enable next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
@@ -26,6 +26,7 @@
     "clsx": "^2.1.0",
     "next": "14.1.0",
     "next-auth": "^4.24.6",
+    "nextjs-toploader": "^1.6.6",
     "pg": "^8.11.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/activities/features/AddButton.tsx b/src/app/activities/features/AddButton.tsx
@@ -42,7 +42,7 @@ export default function AddButton({
           <AddIcon />
         </Button>
       </PopoverTrigger>
-      <PopoverContent>
+      <PopoverContent avoidCollisions={false}>
         <Form {...form}>
           <form
             action={async (formData) => {
diff --git a/src/app/activities/features/DateController.tsx b/src/app/activities/features/DateController.tsx
@@ -5,6 +5,8 @@ import { Button } from "~/components/ui/button";
 import { Input } from "~/components/ui/input";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
+import { cn } from "~/lib/utils";
+import { isAndroid } from "~/constants/ua";
 
 export default function DateController({ date }: { date: Date }) {
   const router = useRouter();
@@ -30,6 +32,7 @@ export default function DateController({ date }: { date: Date }) {
               type="date"
               value={time(date)}
               onChange={(e) => router.push(`?date=${e.currentTarget.value}`)}
+              className={cn(isAndroid() && "appearance-none")}
             />
           </div>
           <Link href={`/?date=${tomorrow}`}>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import NextTopLoader from "nextjs-toploader";
 import "./globals.css";
 import QueryClientProvider from "~/lib/QueryClientProvider";
 
@@ -16,6 +17,7 @@ export default function RootLayout({
     <html lang="kr">
       <body>
         <main>
+          <NextTopLoader showSpinner={false} />
           <QueryClientProvider>{children}</QueryClientProvider>
         </main>
       </body>
diff --git a/src/app/loading.tsx b/src/app/loading.tsx
diff --git a/src/constants/ua.ts b/src/constants/ua.ts
@@ -0,0 +1,5 @@
+export const isAndroid = () => {
+  if (typeof window !== "undefined") {
+    return /android/i.test(window.navigator.userAgent);
+  }
+};
diff --git a/src/lib/auth.ts b/src/lib/auth.ts
@@ -10,7 +10,7 @@ import PostgresAdapter from "@auth/pg-adapter";
 import { Pool } from "pg";
 import { Adapter } from "next-auth/adapters";
 
-import { DB, GOOGLE } from "~/constants/env";
+import { DB, GOOGLE, IS_API_MOCKING } from "~/constants/env";
 import { redirect } from "next/navigation";
 import { SIGNIN } from "~/constants/route";
 
@@ -63,6 +63,18 @@ export async function auth(
 ) {
   const session = await getServerSession(...args, config);
 
+  if (IS_API_MOCKING) {
+    return {
+      user: {
+        name: "Byonghun Lee",
+        email: "dlqud19@gmail.com",
+        image:
+          "https://lh3.googleusercontent.com/a/ACg8ocK2wO1MZUvKiFPQFO_f99Ryekp_w4I1BPqO8Ardj8Fl=s96-c",
+        id: "3",
+      },
+    };
+  }
+
   if (!session) {
     redirect(SIGNIN);
   }
