Refactor login Page

client/src/app/[locale]/(routes)/login/page.tsx

@@ -0,0 +1,203 @@
+"use client";
+
+import React from "react";
+import Image from "next/image";
+import { useTranslations } from "next-intl";
+import { Typography, Button, Link, TextField } from "@mui/material";
+
+// Constants
+import { DefaultButtonColor, LoginLinkColor } from "@/app/[locale]/constants";
+
+interface SSOButtonProps {
+  image: string;
+  backgroundColor: string;
+  text: string;
+}
+
+const SSOButton: React.FC<SSOButtonProps> = ({
+  image,
+  backgroundColor,
+  text,
+}) => {
+  const imageSrc = `/sso/${image}.svg`;
+
+  return (
+    <Button
+      variant="contained"
+      style={{
+        backgroundColor: backgroundColor,
+        color: "black",
+        borderRadius: "5px",
+        width: "280px",
+        height: "50px",
+        display: "flex",
+        alignItems: "center",
+        padding: "8px",
+        justifyContent: "flex-start",
+        paddingLeft: "20px",
+        marginBottom: "7%",
+      }}
+      startIcon={<Image src={imageSrc} alt="SSO Icon" width="45" height="45" />}
+    >
+      <Typography style={{ fontSize: "1rem", flex: 1, textTransform: "none" }}>
+        {text}
+      </Typography>
+    </Button>
+  );
+};
+
+const LoginPage = () => {
+  const t = useTranslations("LoginPage");
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        backgroundColor: "#438EF3",
+        height: "100vh",
+        color: "white",
+      }}
+    >
+      {/* Language Select */}
+      <div
+        style={{
+          display: "flex",
+          marginTop: "15%",
+          alignSelf: "flex-end",
+          marginRight: "5%",
+        }}
+      >
+        <Typography color="#CCCCCC">
+          <Link
+            underline="none"
+            color={t("lang") === "korean" ? "white" : "inherit"}
+            href="/kr/login"
+          >
+            한국어
+          </Link>
+          {" | "}
+          <Link
+            underline="none"
+            color={t("lang") === "english" ? "white" : "inherit"}
+            href="/en/login"
+          >
+            English
+          </Link>
+        </Typography>
+      </div>
+
+      {/* Title */}
+      <Typography
+        style={{
+          fontSize: "1.6rem",
+          fontWeight: "bold",
+          marginTop: "20%",
+        }}
+      >
+        {t("login_title")}
+      </Typography>
+      <Image
+        src={`/sso/${t("login_logo")}.svg`}
+        alt="LoginEnglishTitle"
+        width={280}
+        height={65}
+      />
+
+      {/* Body */}
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          marginTop: "20%",
+          width: "100%",
+          height: "70%",
+          borderRadius: "50px 50px 0 0",
+          backgroundColor: "white",
+        }}
+      >
+        {/* Manual Login */}
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            marginTop: "12%",
+            width: "70%",
+          }}
+        >
+          <TextField
+            label={t("email_text")}
+            variant="outlined"
+            fullWidth
+            style={{ marginBottom: "10px" }}
+          />
+          <TextField
+            label={t("password_text")}
+            variant="outlined"
+            fullWidth
+            style={{ marginBottom: "20px" }}
+          />
+          <Button
+            style={{
+              width: "160px",
+              height: "40px",
+              borderRadius: "25px",
+              backgroundColor: DefaultButtonColor,
+              color: "inherit"
+            }}
+          >
+            {t("login_button")}
+          </Button>
+        </div>
+
+        {/* SSO Button Group */}
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            marginTop: "10%",
+          }}
+        >
+          <SSOButton
+            image="kakao"
+            text={t("kakao_login")}
+            backgroundColor="#FDDC3F"
+          />
+          <SSOButton
+            image="google"
+            text={t("google_login")}
+            backgroundColor="white"
+          />
+        </div>
+
+        {/* Registration Row */}
+        <div
+          style={{
+            width: "220px",
+            display: "flex",
+            justifyContent: "center",
+            textAlign: "center",
+            marginTop: "5%",
+            fontSize: "1rem",
+            color: LoginLinkColor,
+            textDecoration: "none",
+          }}
+        >
+          <a href="/register" style={{ marginRight: "20px" }}>
+            Register
+          </a>
+          <div>{"|"}</div>
+          <a href="/login" style={{ marginLeft: "20px" }}>
+            Login
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LoginPage;

client/src/app/[locale]/constants.tsx

@@ -1,3 +1,3 @@
 export const BackgroundColor= "#FFFFFF"
 export const LoginLinkColor = "#979797";
-export const DefaultButtonColor = "#438ef3";
+export const DefaultButtonColor = "#438EF3";

client/src/app/[locale]/globals.css

@@ -12,8 +12,6 @@
 @media (prefers-color-scheme: dark) {
   :root {
     --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
   }
 }
 

client/src/app/[locale]/layout.tsx

@@ -1,25 +1,28 @@
-import {NextIntlClientProvider} from 'next-intl';
-import {notFound} from 'next/navigation';
- 
+import { NextIntlClientProvider } from "next-intl";
+import { notFound } from "next/navigation";
+
 export function generateStaticParams() {
-  return [{locale: 'en'}, {locale: 'de'}];
+  return [{ locale: "en" }, { locale: "kr" }];
 }
-
-export default async function LocaleLayout({children, params: {locale}}: any) {
+
+export default async function LocaleLayout({
+  children,
+  params: { locale },
+}: any) {
   let messages;
   try {
     messages = (await import(`../../messages/${locale}.json`)).default;
   } catch (error) {
     notFound();
   }
- 
+
   return (
     <html lang={locale}>
-      <body>
+      <body style={{ margin: 0 }}>
         <NextIntlClientProvider locale={locale} messages={messages}>
           {children}
         </NextIntlClientProvider>
       </body>
     </html>
   );
-}
+}

client/src/messages/en.json

@@ -1,4 +1,14 @@
 {
+  "LoginPage": {
+    "lang": "english",
+    "login_title": "Friend for Trip,",
+    "login_logo": "LoginEnglishTitle",
+    "email_text": "Email",
+    "password_text": "Password",
+    "login_button": "Login",
+    "kakao_login": "Login with KakaoTalk",
+    "google_login": "Login with Google"
+  },
   "TripCreation": {
     "welcome": "Welcome to PocketMate!",
     "welcome_sub": "Let's make a travel note",