Merge pull request #64 from jphacks/feature/login-ui

[add]ログイン画面のUI
jphacks · Oct 30, 2021 · 89d9f16 · 89d9f16
2 parents f7a9b46 + 27c7f2e
commit 89d9f16
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 8 deletions.
diff --git a/packages/front/public/discussion.png b/packages/front/public/discussion.png
diff --git a/packages/front/public/ellipse.svg b/packages/front/public/ellipse.svg
diff --git a/packages/front/public/icons/g-logo.png b/packages/front/public/icons/g-logo.png
diff --git a/packages/front/public/logo_black.png b/packages/front/public/logo_black.png
diff --git a/packages/front/src/pages/login.tsx b/packages/front/src/pages/login.tsx
@@ -1,8 +1,14 @@
 import React, { useEffect, FC, useReducer } from "react"
 import { useRouter } from "next/router"
+// import Image from "next/image"
 import authReducer from "@reducers/authReducer"
 import { useAuth } from "@hooks/useAuth"
 import { authUseCase } from "@useCase"
+import { useWindowSize } from "@hooks/useWindowSize"
+import dynamic from "next/dynamic"
+const Image = dynamic(() => import("next/image"), {
+  ssr: false,
+})
 
 const Login: FC = () => {
   const router = useRouter()
@@ -11,6 +17,7 @@ const Login: FC = () => {
     authReducer.initialState,
   )
   const user = useAuth()
+  const { width, height } = useWindowSize()
 
   useEffect(() => {
     user && router.push("/dashboard")
@@ -26,14 +33,69 @@ const Login: FC = () => {
   }
 
   return (
-    <div>
-      <button
-        onClick={logIn}
-        className="px-4 py-2 text-center text-black border-2 border-gray-400 border-opacity-25 rounded bg-blue-50 hover:bg-gray-200"
-      >
-        googleアカウントでログイン
-      </button>
-    </div>
+    <>
+      <div className="fixed z-0 -top-52 -left-40">
+        <Image
+          src="/ellipse.svg"
+          width={width * 0.4}
+          height={width * 0.35}
+          className="z-0 w-full object-fit"
+        />
+      </div>
+      <div className="fixed z-0 transform rotate-90 -bottom-52 -left-40">
+        <Image
+          src="/ellipse.svg"
+          width={width * 0.4}
+          height={width * 0.35}
+          className="z-0 w-full object-fit"
+        />
+      </div>
+      <div className="fixed z-0 transform rotate-90 top-1/4 -right-44">
+        <Image
+          src="/ellipse.svg"
+          width={width * 0.4}
+          height={width * 0.35}
+          className="z-0 w-full object-fit"
+        />
+      </div>
+      <div className="relative flex-col h-screen px-10">
+        <div className="z-10 h-2/5">
+          <h1 className="pt-24 text-4xl font-medium text-gray-600 pl-28 font-monob">
+            あなたの音声を付箋に。
+          </h1>
+          <div className="relative z-10 pl-72">
+            <Image
+              src="/logo_black.png"
+              width={400}
+              height={160}
+              className="w-full object-fit"
+            />
+          </div>
+        </div>
+        <div className="relative h-3/5" style={{ width: "70%" }}>
+          <Image
+            src="/discussion.png"
+            width={width * 0.7}
+            height={height * 0.6}
+            className="w-full object-fit"
+          />
+        </div>
+        <button
+          onClick={logIn}
+          className="absolute py-2 pl-3 pr-8 text-center text-blue-500 bg-white border-2 border-blue-400 rounded-full hover:bg-gray-200 border-opacity-15 top-1/2 right-32"
+        >
+          <div className="flex items-center">
+            <Image
+              src="/icons/g-logo.png"
+              width={30}
+              height={30}
+              className="w-full object-fit"
+            />
+            <p className="pl-2">Googleアカウントでログイン</p>
+          </div>
+        </button>
+      </div>
+    </>
   )
 }