Feat/login page

app/_components/BubbleDiv.tsx

@@ -0,0 +1,16 @@
+import Image from "next/image";
+import React from "react";
+
+const BubbleDiv = () => {
+  return (
+    <div className="relative h-[41.77px] w-[226px]">
+      <span className="typo-16-600 absolute top-1 left-0 z-20 w-full text-center text-black">
+        현재 <span className="text-bubble-text-highight">775명 </span>
+        참여중이에요!
+      </span>
+      <Image src="/bubble/bubble.svg" alt="bubble" width={226} height={41.77} />
+    </div>
+  );
+};
+
+export default BubbleDiv;

app/_components/LoginActionSection.tsx

@@ -0,0 +1,82 @@
+"use client";
+import BubbleDiv from "@/app/_components/BubbleDiv";
+import Button from "@/components/ui/Button";
+import { KakaoLoginButton, GoogleLoginButton } from "./SocialButtonList";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
+
+export default function ScreenLoginActionSection() {
+  const handleKakaoLogin = () => {
+    // window.location.href = "https://backend.comatching.site/oauth2/authorization/kakao";
+    alert("코매칭 서비스는 10/13일부로 종료되었습니다.");
+  };
+
+  const handleGoogleLogin = () => {
+    // window.location.href = "https://backend.comatching.site/oauth2/authorization/google";
+    alert("코매칭 서비스는 10/13일부로 종료되었습니다.");
+  };
+
+  return (
+    <section className="flex flex-col items-center">
+      <BubbleDiv />
+      <KakaoLoginButton
+        className="mt-[1.6vh] mb-[0.49vh]"
+        onClick={handleKakaoLogin}
+        shadow={true}
+      >
+        카카오로 빠르게 시작하기
+      </KakaoLoginButton>
+      <Drawer>
+        <div className="typo-14-600 text-color-text-caption2 flex flex-col items-center leading-[1.6]">
+          <span>또는</span>
+          <DrawerTrigger asChild>
+            <button
+              type="button"
+              className="all-[unset] cursor-pointer underline"
+            >
+              다른 방법으로 로그인
+            </button>
+          </DrawerTrigger>
+        </div>
+        <DrawerContent
+          showHandle={false}
+          className="mx-auto flex h-[44.33vh] w-full flex-col items-center px-4 pt-6 md:max-w-[430px]"
+        >
+          <DrawerTitle className="sr-only">다른 로그인 방법</DrawerTitle>
+          <div className="flex w-full flex-col items-start gap-2">
+            <span className="typo-20-700 text-bottomsheet-text-title">
+              로그인/회원가입
+            </span>
+            <span className="typo-14-500 text-[#999]">
+              로그인과 회원가입 수단은 동일합니다.
+              <br />
+              원하는 계정으로 시작하세요.
+            </span>
+          </div>
+          <KakaoLoginButton onClick={handleKakaoLogin} className="mt-8 mb-4">
+            카카오로 시작하기
+          </KakaoLoginButton>
+          <GoogleLoginButton className="w-full" onClick={handleGoogleLogin}>
+            구글로 시작하기
+          </GoogleLoginButton>
+          <div className="typo-14-500 text-bottomsheet-text-caption mt-6 flex flex-col items-center">
+            <span>혹은</span>
+            <button
+              type="button"
+              className="all-[unset] cursor-pointer underline"
+            >
+              이메일로 로그인
+            </button>
+          </div>
+        </DrawerContent>
+      </Drawer>
+      <span className="typo-12-600 text-footo-text-main mt-[6.75vh] mb-[6.15vh]">
+        Developed By Team Comatching, Catholic University of Korea
+      </span>
+    </section>
+  );
+}

app/_components/LoginLogoSection.tsx

@@ -0,0 +1,21 @@
+import Image from "next/image";
+
+export default function ScreenLoginLogoSection() {
+  return (
+    <section className="mt-[13.3vh] flex w-full flex-col items-start gap-3">
+      <Image
+        src="/logo/comatching-logo.svg"
+        alt="comatching-logo"
+        width={96}
+        height={16}
+      />
+      <div className="typo-26-700 text-color-text-black">
+        반갑습니다
+        <br />
+        코매칭이라면 당신은
+        <br />
+        이미 커플입니다
+      </div>
+    </section>
+  );
+}

app/_components/ScreenLoginPage.tsx

@@ -0,0 +1,11 @@
+import ScreenLoginLogoSection from "./LoginLogoSection";
+import ScreenLoginActionSection from "./LoginActionSection";
+
+export default function ScreenLoginPage() {
+  return (
+    <main className="flex h-full flex-col items-center justify-between px-4">
+      <ScreenLoginLogoSection />
+      <ScreenLoginActionSection />
+    </main>
+  );
+}

app/_components/SocialButtonList.tsx

@@ -0,0 +1,48 @@
+import Image from "next/image";
+import Button from "@/components/ui/Button";
+import { cn } from "@/lib/utils";
+
+type SocialButtonProps = React.ComponentProps<typeof Button> & {
+  children?: React.ReactNode;
+};
+
+export function KakaoLoginButton({
+  children = "카카오로 시작하기",
+  ...props
+}: SocialButtonProps) {
+  return (
+    <Button
+      {...props}
+      className={cn(
+        "typo-20-600 flex w-full items-center gap-6 bg-[#FEE500] text-black",
+        props.className,
+      )}
+    >
+      <Image
+        src="/sns/kakao.svg"
+        alt="카카오 로그인"
+        width={22.73}
+        height={21}
+      />
+      {children}
+    </Button>
+  );
+}
+
+export function GoogleLoginButton({
+  children = "구글로 시작하기",
+  ...props
+}: SocialButtonProps) {
+  return (
+    <Button
+      {...props}
+      className={cn(
+        "typo-20-600 flex w-full items-center gap-6 border bg-white text-[#797479]",
+        props.className,
+      )}
+    >
+      <Image src="/sns/google.svg" alt="구글 로그인" width={20} height={20} />
+      {children}
+    </Button>
+  );
+}

app/layout.tsx

@@ -2,6 +2,9 @@
 import localFont from "next/font/local";
 import "./globals.css";
 import Blur from "@/components/common/Blur";
+import { QueryProvider } from "@/providers/query-provider";
+import { ServiceStatusProvider } from "@/providers/service-status-provider";
+import { getInitialMaintenanceStatus } from "@/lib/status";
 
 const pretendard = localFont({
   src: "./fonts/PretendardVariable.woff2",
@@ -31,20 +34,28 @@
   },
 };
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const initialMaintenanceMode = await getInitialMaintenanceStatus();
+
   return (
     <html lang="ko" className={pretendard.variable}>
       <body
         className={`${pretendard.className} flex justify-center bg-white antialiased`}
       >
-        <div className="bg-background-app-base relative min-h-dvh w-full overflow-x-hidden px-4 text-black md:max-w-[430px] md:shadow-lg">
+        {/* <QueryProvider> */}
+        {/* <ServiceStatusProvider */}
+        {/* initialMaintenanceMode={initialMaintenanceMode} */}
+        {/* > */}
+        <div className="bg-background-app-base relative min-h-dvh w-full overflow-x-hidden text-black md:max-w-[430px] md:shadow-lg">
           <Blur />
           {children}
         </div>
+        {/* </ServiceStatusProvider> */}
+        {/* </QueryProvider> */}
       </body>
     </html>
   );

app/page.tsx

@@ -1,10 +1,5 @@
-import Blur from "@/components/common/Blur";
-import Button from "@/components/ui/Button";
+import ScreenLoginPage from "@/app/_components/ScreenLoginPage";
 
 export default function Home() {
-  return (
-    <main>
-      <Button fixed={true}>안녕하세요</Button>
-    </main>
-  );
+  return <ScreenLoginPage />;
 }