Skip to content

Commit 8d3c942

Browse files
Killerwhale-ParkKillerwhale-Park
authored
Merge pull request #34 from sparcs-kaist/dev
Merge Login Page to MainBranch
2 parents e3a00c4 + 08efdce commit 8d3c942

26 files changed

+605
-5
lines changed

‎public/Comment.svg

Lines changed: 10 additions & 0 deletions
Loading

‎public/Dislike.svg

Lines changed: 11 additions & 0 deletions
Loading

‎public/Image.svg

Lines changed: 5 additions & 0 deletions
Loading

‎public/Like.svg

Lines changed: 11 additions & 0 deletions
Loading

‎public/Right_Chevron.svg

Lines changed: 3 additions & 0 deletions
Loading

‎public/setting.svg

Lines changed: 3 additions & 0 deletions
Loading

‎src/app/globals.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,8 @@ body {
2626
background: var(--background);
2727
font-family: Arial, Helvetica, sans-serif;
2828
}
29+
30+
html,
31+
body {
32+
min-height: 100%;
33+
}

‎src/app/layout.tsx

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,15 @@ import "@/i18n";
77

88
export default function RootLayout({ children }: { children: ReactNode }) {
99
const [isLoggedIn, setIsLoggedIn] = useState<boolean | null>(null);
10+
const pathname = typeof window !== "undefined" ? window.location.pathname : "";
1011

1112
useEffect(() => {
13+
// /login 페이지에서는 인증 체크하지 않음
14+
if (pathname === "/login") {
15+
setIsLoggedIn(false);
16+
return;
17+
}
18+
1219
async function checkAuth() {
1320
try {
1421
const res = await fetch("https://newara.dev.sparcs.org/api/me", {
@@ -26,7 +33,19 @@ export default function RootLayout({ children }: { children: ReactNode }) {
2633
}
2734

2835
checkAuth();
29-
}, []);
36+
// eslint-disable-next-line react-hooks/exhaustive-deps
37+
}, [pathname]);
38+
39+
// /login에서는 바로 children 렌더링
40+
if (pathname === "/login") {
41+
return (
42+
<html lang="ko">
43+
<body className="h-screen">
44+
<main className="h-full">{children}</main>
45+
</body>
46+
</html>
47+
);
48+
}
3049

3150
if (isLoggedIn === null) {
3251
return (

‎src/app/login/components/LoginPageButton.tsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
//LoginPageButton.tsx
2+
//로그인 페이지에서 공통적으로 사용되는 버튼 컴포넌트
3+
4+
"use client";
5+
6+
import Link from "next/link";
7+
import { ReactNode } from "react";
8+
9+
interface LoginPageButtonProps {
10+
icon ?: ReactNode | null;
11+
fontSize ?: number; // px 단위
12+
redirectUrl : string;
13+
children : string; // Text inside the button
14+
}
15+
16+
export default function LoginPageButton({
17+
icon = null,
18+
fontSize = 16,
19+
redirectUrl,
20+
children,
21+
}: LoginPageButtonProps) {
22+
return (
23+
<Link
24+
href={redirectUrl}
25+
className={`
26+
inline-flex items-center justify-center gap-2 px-4 py-2
27+
rounded-lg bg-white text-[#ed3a3a] border border-[#dbdbdb]
28+
font-normal transition-shadow duration-300
29+
hover:shadow-[0_2px_6px_0_#d1d5db]
30+
text-[${fontSize}px]
31+
`}
32+
>
33+
{icon && <span>{icon}</span>}
34+
{children}
35+
</Link>
36+
);
37+
}

‎src/app/login/page.tsx

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
'use client'
2+
3+
import Image from 'next/image'
4+
import LoginPageButton from './components/LoginPageButton'
5+
6+
//import image asset
7+
import NewAraLogo from '@/assets/ServiceAra.svg'
8+
import LoginIcon from '@/assets/Icon/login.svg'
9+
10+
export default function LoginPage() {
11+
return (
12+
<div className="flex flex-col lg:flex-row lg:h-full">
13+
<div className="flex flex-col justify-center items-center w-full h-[250px] bg-[#fbf2f1]
14+
lg:w-[30%] lg:h-full lg:min-w-[320px]">
15+
<Image src={NewAraLogo} alt="NewAraLogo" className="h-[82px] w-[154px] mb-[15px]" />
16+
<p className="text-center text-[#ed3a3a] font-semibold text-[21px] lg:text-[32px]">가장 정확한 정보를</p>
17+
<p className="text-center text-[#ed3a3a] font-semibold text-[21px] lg:text-[32px]">가장 신속하게</p>
18+
</div>
19+
<div className="flex flex-col w-full flex-1 bg-white lg:h-full lg:justify-center">
20+
<div className="flex flex-col items-center justify-center px-4 py-12 text-center">
21+
<div className="flex flex-col items-center w-full">
22+
<div className="h-1.5 w-6 bg-red-500 mb-4" />
23+
<h1 className="text-[20px] lg:text-[28px] font-semibold text-gray-800 mb-2">
24+
뉴아라 서비스를 이용하시려면 로그인해주세요.
25+
</h1>
26+
{/* lg 이상: 한 줄로 */}
27+
<p className="hidden lg:block text-base text-gray-600 mb-8">
28+
교직원과 졸업생은 SPARCS SSO에 접속한 뒤 {'<카이스트 통합인증으로 로그인/가입>'}을 선택해주세요.
29+
</p>
30+
{/* lg 미만: 두 줄로 */}
31+
<>
32+
<p className="text-sm text-gray-600 mb-1 lg:hidden">
33+
교직원과 졸업생은 SPARCS SSO에 접속한 뒤
34+
</p>
35+
<p className="text-sm text-gray-600 mb-8 lg:hidden">
36+
{'<카이스트 통합인증으로 로그인/가입>'}을 선택해주세요.
37+
</p>
38+
</>
39+
<LoginPageButton
40+
redirectUrl="/login"
41+
fontSize={18}
42+
icon={<Image src={LoginIcon} alt="로그인 아이콘" />}
43+
>
44+
SPARCS SSO로 로그인
45+
</LoginPageButton>
46+
</div>
47+
</div>
48+
<div className="flex flex-col items-center justify-center px-4 py-12 text-center">
49+
<div className="flex flex-col items-center w-full">
50+
<div className="h-1.5 w-6 bg-red-500 mb-4" />
51+
<h1 className="text-[20px] lg:text-[20px] font-semibold text-gray-800 mb-2">
52+
학생단체/입주업체 공용 계정을 만들고 싶으신가요?
53+
</h1>
54+
{/* lg 이상: 한 줄 */}
55+
<p className="hidden lg:block text-base text-gray-600 mb-8">
56+
공용 이메일로 회원가입을 진행한 후, 아래 버튼을 클릭하여 신청서를 보내주세요.
57+
</p>
58+
{/* lg 미만: 두 줄 */}
59+
<>
60+
<p className="text-sm text-gray-600 mb-1 lg:hidden">
61+
공용 이메일로 회원가입을 진행한 후,
62+
</p>
63+
<p className="text-sm text-gray-600 mb-8 lg:hidden">
64+
아래 버튼을 클릭하여 신청서를 보내주세요.
65+
</p>
66+
</>
67+
<div className="flex flex-col w-[200px] lg:flex-row gap-4 justify-center lg:w-full">
68+
<LoginPageButton redirectUrl="https://bit.ly/sso-signup" fontSize={15}>
69+
공용 이메일로 회원가입
70+
</LoginPageButton>
71+
<LoginPageButton redirectUrl="https://bit.ly/newara-org-signup" fontSize={15}>
72+
학생단체 계정 신청하기
73+
</LoginPageButton>
74+
<LoginPageButton redirectUrl="https://bit.ly/newara-comp-signup" fontSize={15}>
75+
입주업체 계정 신청하기
76+
</LoginPageButton>
77+
</div>
78+
</div>
79+
</div>
80+
</div>
81+
</div>
82+
)
83+
}

0 commit comments

Comments
 (0)