Skip to content

Commit 59f532b

Browse files
dasosanndasosann
authored
Feat/login page
Feat/login page
2 parents 6f79615 + 2ed64df commit 59f532b

20 files changed

Lines changed: 1283 additions & 230 deletions

‎app/_components/BubbleDiv.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import Image from "next/image";
2+
import React from "react";
3+
4+
const BubbleDiv = () => {
5+
return (
6+
<div className="relative h-[41.77px] w-[226px]">
7+
<span className="typo-16-600 absolute top-1 left-0 z-20 w-full text-center text-black">
8+
현재 <span className="text-bubble-text-highight">775명 </span>
9+
참여중이에요!
10+
</span>
11+
<Image src="/bubble/bubble.svg" alt="bubble" width={226} height={41.77} />
12+
</div>
13+
);
14+
};
15+
16+
export default BubbleDiv;

‎app/_components/LoginActionSection.tsx‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
"use client";
2+
import BubbleDiv from "@/app/_components/BubbleDiv";
3+
import Button from "@/components/ui/Button";
4+
import { KakaoLoginButton, GoogleLoginButton } from "./SocialButtonList";
5+
import {
6+
Drawer,
7+
DrawerContent,
8+
DrawerTitle,
9+
DrawerTrigger,
10+
} from "@/components/ui/drawer";
11+
12+
export default function ScreenLoginActionSection() {
13+
const handleKakaoLogin = () => {
14+
// window.location.href = "https://backend.comatching.site/oauth2/authorization/kakao";
15+
alert("코매칭 서비스는 10/13일부로 종료되었습니다.");
16+
};
17+
18+
const handleGoogleLogin = () => {
19+
// window.location.href = "https://backend.comatching.site/oauth2/authorization/google";
20+
alert("코매칭 서비스는 10/13일부로 종료되었습니다.");
21+
};
22+
23+
return (
24+
<section className="flex flex-col items-center">
25+
<BubbleDiv />
26+
<KakaoLoginButton
27+
className="mt-[1.6vh] mb-[0.49vh]"
28+
onClick={handleKakaoLogin}
29+
shadow={true}
30+
>
31+
카카오로 빠르게 시작하기
32+
</KakaoLoginButton>
33+
<Drawer>
34+
<div className="typo-14-600 text-color-text-caption2 flex flex-col items-center leading-[1.6]">
35+
<span>또는</span>
36+
<DrawerTrigger asChild>
37+
<button
38+
type="button"
39+
className="all-[unset] cursor-pointer underline"
40+
>
41+
다른 방법으로 로그인
42+
</button>
43+
</DrawerTrigger>
44+
</div>
45+
<DrawerContent
46+
showHandle={false}
47+
className="mx-auto flex h-[44.33vh] w-full flex-col items-center px-4 pt-6 md:max-w-[430px]"
48+
>
49+
<DrawerTitle className="sr-only">다른 로그인 방법</DrawerTitle>
50+
<div className="flex w-full flex-col items-start gap-2">
51+
<span className="typo-20-700 text-bottomsheet-text-title">
52+
로그인/회원가입
53+
</span>
54+
<span className="typo-14-500 text-[#999]">
55+
로그인과 회원가입 수단은 동일합니다.
56+
<br />
57+
원하는 계정으로 시작하세요.
58+
</span>
59+
</div>
60+
<KakaoLoginButton onClick={handleKakaoLogin} className="mt-8 mb-4">
61+
카카오로 시작하기
62+
</KakaoLoginButton>
63+
<GoogleLoginButton className="w-full" onClick={handleGoogleLogin}>
64+
구글로 시작하기
65+
</GoogleLoginButton>
66+
<div className="typo-14-500 text-bottomsheet-text-caption mt-6 flex flex-col items-center">
67+
<span>혹은</span>
68+
<button
69+
type="button"
70+
className="all-[unset] cursor-pointer underline"
71+
>
72+
이메일로 로그인
73+
</button>
74+
</div>
75+
</DrawerContent>
76+
</Drawer>
77+
<span className="typo-12-600 text-footo-text-main mt-[6.75vh] mb-[6.15vh]">
78+
Developed By Team Comatching, Catholic University of Korea
79+
</span>
80+
</section>
81+
);
82+
}

‎app/_components/LoginLogoSection.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import Image from "next/image";
2+
3+
export default function ScreenLoginLogoSection() {
4+
return (
5+
<section className="mt-[13.3vh] flex w-full flex-col items-start gap-3">
6+
<Image
7+
src="/logo/comatching-logo.svg"
8+
alt="comatching-logo"
9+
width={96}
10+
height={16}
11+
/>
12+
<div className="typo-26-700 text-color-text-black">
13+
반갑습니다
14+
<br />
15+
코매칭이라면 당신은
16+
<br />
17+
이미 커플입니다
18+
</div>
19+
</section>
20+
);
21+
}

‎app/_components/ScreenLoginPage.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import ScreenLoginLogoSection from "./LoginLogoSection";
2+
import ScreenLoginActionSection from "./LoginActionSection";
3+
4+
export default function ScreenLoginPage() {
5+
return (
6+
<main className="flex h-full flex-col items-center justify-between px-4">
7+
<ScreenLoginLogoSection />
8+
<ScreenLoginActionSection />
9+
</main>
10+
);
11+
}

‎app/_components/SocialButtonList.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import Image from "next/image";
2+
import Button from "@/components/ui/Button";
3+
import { cn } from "@/lib/utils";
4+
5+
type SocialButtonProps = React.ComponentProps<typeof Button> & {
6+
children?: React.ReactNode;
7+
};
8+
9+
export function KakaoLoginButton({
10+
children = "카카오로 시작하기",
11+
...props
12+
}: SocialButtonProps) {
13+
return (
14+
<Button
15+
{...props}
16+
className={cn(
17+
"typo-20-600 flex w-full items-center gap-6 bg-[#FEE500] text-black",
18+
props.className,
19+
)}
20+
>
21+
<Image
22+
src="/sns/kakao.svg"
23+
alt="카카오 로그인"
24+
width={22.73}
25+
height={21}
26+
/>
27+
{children}
28+
</Button>
29+
);
30+
}
31+
32+
export function GoogleLoginButton({
33+
children = "구글로 시작하기",
34+
...props
35+
}: SocialButtonProps) {
36+
return (
37+
<Button
38+
{...props}
39+
className={cn(
40+
"typo-20-600 flex w-full items-center gap-6 border bg-white text-[#797479]",
41+
props.className,
42+
)}
43+
>
44+
<Image src="/sns/google.svg" alt="구글 로그인" width={20} height={20} />
45+
{children}
46+
</Button>
47+
);
48+
}

‎app/layout.tsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ import type { Metadata } from "next";
22
import localFont from "next/font/local";
33
import "./globals.css";
44
import Blur from "@/components/common/Blur";
5+
import { QueryProvider } from "@/providers/query-provider";
6+
import { ServiceStatusProvider } from "@/providers/service-status-provider";
7+
import { getInitialMaintenanceStatus } from "@/lib/status";
58

69
const pretendard = localFont({
710
src: "./fonts/PretendardVariable.woff2",
@@ -31,20 +34,28 @@ export const metadata: Metadata = {
3134
},
3235
};
3336

34-
export default function RootLayout({
37+
export default async function RootLayout({
3538
children,
3639
}: Readonly<{
3740
children: React.ReactNode;
3841
}>) {
42+
const initialMaintenanceMode = await getInitialMaintenanceStatus();
43+
3944
return (
4045
<html lang="ko" className={pretendard.variable}>
4146
<body
4247
className={`${pretendard.className} flex justify-center bg-white antialiased`}
4348
>
44-
<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">
49+
{/* <QueryProvider> */}
50+
{/* <ServiceStatusProvider */}
51+
{/* initialMaintenanceMode={initialMaintenanceMode} */}
52+
{/* > */}
53+
<div className="bg-background-app-base relative min-h-dvh w-full overflow-x-hidden text-black md:max-w-[430px] md:shadow-lg">
4554
<Blur />
4655
{children}
4756
</div>
57+
{/* </ServiceStatusProvider> */}
58+
{/* </QueryProvider> */}
4859
</body>
4960
</html>
5061
);

‎app/page.tsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
1-
import Blur from "@/components/common/Blur";
2-
import Button from "@/components/ui/Button";
1+
import ScreenLoginPage from "@/app/_components/ScreenLoginPage";
32

43
export default function Home() {
5-
return (
6-
<main>
7-
<Button fixed={true}>안녕하세요</Button>
8-
</main>
9-
);
4+
return <ScreenLoginPage />;
105
}

0 commit comments

Comments
 (0)