Add files via upload

jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./*"]
+    }
+  }
+}

next.config.js

@@ -0,0 +1,9 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    experimental: {
+      appDir: true,
+    },
+  }
+
+  module.exports = nextConfig
+

package.json

@@ -0,0 +1,22 @@
+{
+  "name": "next-auth-firebase",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@tosspayments/payment-sdk": "^1.7.0",
+    "autoprefixer": "10.4.14",
+    "encoding": "^0.1.13",
+    "firebase": "^9.23.0",
+    "next": "13.4.7",
+    "postcss": "8.4.24",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "tailwindcss": "3.3.2"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/app/about/page.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const page = () => {
+  return (
+    <div className='p-4'>About Page</div>
+  )
+}
+
+export default page

src/app/components/Navbar.jsx

@@ -0,0 +1,69 @@
+import React, { useState, useEffect } from "react";
+import Link from "next/link";
+import { UserAuth } from "../context/AuthContext";
+
+const Navbar = () => {
+  const { user, googleSignIn, logOut } = UserAuth();
+  const [loading, setLoading] = useState(true);
+
+  const handleSignIn = async () => {
+    try {
+      await googleSignIn();
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const handleSignOut = async () => {
+    try {
+      await logOut();
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  useEffect(() => {
+    const checkAuthentication = async () => {
+      await new Promise((resolve) => setTimeout(resolve, 50));
+      setLoading(false);
+    };
+    checkAuthentication();
+  }, [user]);
+
+  return (
+    <div className="h-20 w-full border-b-2 flex items-center justify-between p-2">
+      <ul className="flex">
+
+
+      </ul>
+
+      {loading ? null : !user ? (
+        <ul className="flex">
+
+
+        </ul>
+      ) : (
+        <div style={{ position: 'relative', zIndex: 1, height: '60px', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+
+          <p className="cursor-pointer" onClick={handleSignOut}>
+           Blue Pill
+          </p>
+
+
+
+
+
+
+
+
+
+
+
+
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Navbar;

src/app/components/Spinner.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import Image from "next/image";
+import loader from "./spinner.gif";
+
+const Spinner = () => {
+  return (
+    <div className="w-full h-screen flex items-center justify-center">
+      <Image src={loader} alt="loading.." />
+    </div>
+  );
+};
+
+export default Spinner;

src/app/context/AuthContext.js

@@ -0,0 +1,42 @@
+"use client";
+
+import { useContext, createContext, useState, useEffect } from "react";
+import {
+  signInWithPopup,
+  signOut,
+  onAuthStateChanged,
+  GoogleAuthProvider,
+} from "firebase/auth";
+import { auth } from "../firebase";
+
+const AuthContext = createContext();
+
+export const AuthContextProvider = ({ children }) => {
+  const [user, setUser] = useState(null);
+
+  const googleSignIn = () => {
+    const provider = new GoogleAuthProvider();
+    signInWithPopup(auth, provider);
+  };
+
+  const logOut = () => {
+    signOut(auth);
+  };
+
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
+      setUser(currentUser);
+    });
+    return () => unsubscribe();
+  }, [user]);
+
+  return (
+    <AuthContext.Provider value={{ user, googleSignIn, logOut }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const UserAuth = () => {
+  return useContext(AuthContext);
+};

src/app/firebase.js

@@ -0,0 +1,20 @@
+// Import the functions you need from the SDKs you need
+import { initializeApp } from "firebase/app";
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+import { getAuth } from "firebase/auth";
+
+// Your web app's Firebase configuration
+const firebaseConfig = {
+  apiKey: "AIzaSyDqUKdZ-26nb5iEn3MI91RBSVJ6I7Bf84I",
+  authDomain: "eunseo--seol.firebaseapp.com",
+  projectId: "eunseo--seol",
+  storageBucket: "eunseo--seol.appspot.com",
+  messagingSenderId: "234269355000",
+  appId: "1:234269355000:web:418b191d3984705112440d",
+  measurementId: "G-PKWT5L1ZEY"
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+export const auth = getAuth(app);

src/app/globals.css

@@ -0,0 +1,27 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}

src/app/head.js

@@ -0,0 +1,10 @@
+export default function Head() {
+    return (
+      <>
+        <title></title>
+        <meta content="width=device-width, initial-scale=1" name="viewport" />
+        <link rel="icon" href="/favicon.ico" />
+      </>
+    )
+  }
+

src/app/layout.js

@@ -0,0 +1,22 @@
+"use client";
+import Navbar from "./components/Navbar";
+import "./globals.css";
+import { Inter } from "next/font/google";
+import { AuthContextProvider } from "./context/AuthContext";
+
+const inter = Inter({ subsets: ["latin"] });
+
+
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <AuthContextProvider>
+          {children}
+
+        </AuthContextProvider>
+      </body>
+    </html>
+  );
+}

src/app/page.js

@@ -0,0 +1,61 @@
+"use client";
+import React, { useState, useEffect } from "react";
+
+export default function Page() {
+  const [isMobile, setIsMobile] = useState(false);
+  const [storeUrl, setStoreUrl] = useState("");
+
+  const hoverStyle = {
+    maxWidth: '150px',
+    marginBottom: '20px',
+  };
+  const mobileHoverStyle = {
+    maxWidth: '80px',
+    marginBottom: '10px',
+  };
+
+  useEffect(() => {
+    const userAgent = navigator.userAgent.toLowerCase();
+    const isAppleDevice = /iphone|ipad|ipod|macintosh/.test(userAgent);
+
+    if (isAppleDevice) {
+      setStoreUrl("https://apps.apple.com/us/app/edith-space-assistant/id6450296741");
+    } else {
+      setStoreUrl("https://play.google.com/store/apps/details?id=com.openai.chatgpt&hl=en_US");
+    }
+
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 768); // Consider below 768px as mobile
+    };
+
+    window.addEventListener('resize', handleResize);
+    handleResize();
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  const imageStyle = isMobile ? mobileHoverStyle : hoverStyle;
+
+  return (
+    <div style={{ position: 'relative', width: '100vw', height: '100vh' }}>
+      <video autoPlay loop muted playsInline style={{ position: 'fixed', top: 0, left: 0, width: '100vw', height: '100vh', objectFit: 'cover', zIndex: -1 }}>
+        <source src="/background.mp4" type="video/mp4" />
+      </video>
+
+      <div style={{ position: 'relative', zIndex: 1, width: '100%', paddingTop: '20px', paddingBottom: '100px', height: 'calc(100vh - 20px)', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+        <main className="p-4" style={{ height: '100vh' }}>
+          <div style={{ position: 'relative', zIndex: 1, paddingBottom: '40px', height: '100vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', marginTop: '-50px' }}>
+            <a href={storeUrl}>
+              <img src="/book.png" alt="Book" style={imageStyle} />
+            </a>
+            <h1 style={{ fontSize: isMobile ? '16px' : '48px', fontWeight: 'bold', color: 'white' }}>
+              E.D.I.T.H
+            </h1>
+            <h1 style={{ fontSize: isMobile ? '16px' : '48px', fontWeight: 'bold', color: 'white' }}>
+              Even Dead I'm The Hero
+            </h1>
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}

src/app/payments/complete/page.js

@@ -0,0 +1,33 @@
+
+
+export default async function Page({ searchParams }) {
+  const secretKey = "test_sk_jZ61JOxRQVEgBEdMnag8W0X9bAqw";
+
+  const basicToken = Buffer.from(`${secretKey}:`, `utf-8`).toString("base64");
+
+  const url = `https://api.tosspayments.com/v1/payments/orders/${searchParams.orderId}`;
+  const payments = await fetch(url, {
+    headers: {
+      Authorization: `Basic ${basicToken}`,
+      "Content-Type": "application/json",
+    },
+  }).then((res) => res.json());
+
+  const { card } = payments;
+ return (
+    <div style={{ position: 'relative', width: '100vw', height: '100vh', overflow: 'hidden' }}>
+      <video autoPlay loop muted style={{ position: 'fixed', top: 0, left: 0, width: '100vw', height: '100vh', objectFit: 'cover', zIndex: -1 }}>
+        <source src="/background.mov" type="video/mp4" />
+      </video>
+
+      <div style={{ position: 'relative', zIndex: 1, width: '100%', paddingTop: '20px', height: 'calc(100vh - 20px)', overflowY: 'scroll', display: 'flex', flexDirection: 'column', alignItems: 'flex-start', alignItems: 'center' }}>
+        <img src="/book0.png" alt="Book" style={{ maxWidth: '400px', marginBottom: '40px' }} />
+        <img src="/book1.png" alt="Book" style={{ maxWidth: '400px', marginBottom: '40px' }} />
+        <img src="/book2.png" alt="Book" style={{ maxWidth: '400px', marginBottom: '40px' }} />
+        <img src="/book3.png" alt="Book" style={{ maxWidth: '400px', marginBottom: '40px' }} />
+        <img src="/book4.png" alt="Book" style={{ maxWidth: '400px', marginBottom: '40px' }} />
+        <img src="/book5.png" alt="Book" style={{ maxWidth: '400px', marginBottom: '40px' }} />
+      </div>
+    </div>
+  );
+}