Merge pull request #20 from GDSC-Hongik/feature/login

[Feature] 로그인 구현

apps/admin/app/global.css

@@ -1,53 +1,6 @@
 @layer reset, base, tokens, recipes, utilities;
 @import url("@wow-class/ui/styles.css");
-
-@font-face {
-  font-family: "SUIT";
-  font-weight: 200;
-  src: url("/fonts/SUIT-Thin.ttf") format("truetype");
-}
-
-@font-face {
-  font-family: "SUIT";
-  font-weight: 300;
-  src: url("/fonts/SUIT-ExtraLight.ttf") format("truetype");
-}
-
-@font-face {
-  font-family: "SUIT";
-  font-weight: 400;
-  src: url("/fonts/SUIT-Regular.ttf") format("truetype");
-}
-
-@font-face {
-  font-family: "SUIT";
-  font-weight: 500;
-  src: url("/fonts/SUIT-Medium.ttf") format("truetype");
-}
-
-@font-face {
-  font-family: "SUIT";
-  font-weight: 600;
-  src: url("/fonts/SUIT-SemiBold.ttf") format("truetype");
-}
-
-@font-face {
-  font-family: "SUIT";
-  font-weight: 700;
-  src: url("/fonts/SUIT-Bold.ttf") format("truetype");
-}
-
-@font-face {
-  font-family: "SUIT";
-  font-weight: 800;
-  src: url("/fonts/SUIT-ExtraBold.ttf") format("truetype");
-}
-
-@font-face {
-  font-family: "SUIT";
-  font-weight: 900;
-  src: url("/fonts/SUIT-Heavy.ttf") format("truetype");
-}
+@import url("@wow-class/fonts/index.css");
 
 body {
   font-family: "SUIT" !important;

apps/admin/components/Navbar.tsx

@@ -18,13 +18,10 @@ const Navbar = () => {
         <div className={logoTextStyle}>와우클래스 멘토</div>
         <Image
           alt="logo"
+          className={logoImageStyle}
           height={20.5}
           src={logoImageUrl}
           width={42}
-          className={css({
-            width: "42px",
-            height: "20.5px",
-          })}
         />
       </Flex>
       <nav
@@ -72,6 +69,11 @@ const logoTextStyle = css({
   letterSpacing: "-0.24px",
 });
 
+const logoImageStyle = css({
+  width: "42px",
+  height: "20.5px",
+});
+
 const navContainerStyle = css({
   padding: "8px 0px",
   display: "flex",

apps/admin/package.json

@@ -21,6 +21,7 @@
     "@types/react-dom": "^18",
     "@wow-class/eslint-config": "workspace:*",
     "@wow-class/typescript-config": "workspace:*",
+    "@wow-class/fonts": "workspace:*",
     "@wow-class/utils": "workspace:*",
     "eslint": "^8",
     "eslint-config-next": "^14.2.5",

apps/client/apis/dashboardApi.ts

@@ -0,0 +1,29 @@
+import { fetcher } from "@wow-class/utils";
+import { apiPath } from "constants/apiPath";
+import { tags } from "constants/tags";
+import { cookies } from "next/headers";
+import type { DashboardApiResponseDto } from "types/dtos/auth";
+
+export const dashboardApi = {
+  getDashboardInfo: async () => {
+    const cookieStore = cookies();
+    const accessToken = cookieStore.get("accessToken")?.value;
+
+    // NOTE: middleware에서 호출하기 위해서 별도로 헤더 주입
+    const response = await fetcher.get<DashboardApiResponseDto>(
+      apiPath.dashboard,
+      {
+        next: { tags: [tags.dashboard] },
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      }
+    );
+
+    const memberRole = response.data?.member.role;
+    const currentRecruitmentOpen =
+      response.data?.currentRecruitmentRound?.period.open || false;
+
+    return { memberRole, currentRecruitmentOpen };
+  },
+};

apps/client/app/(afterLogin)/my-study/my-homework/page.tsx

@@ -1,5 +1,5 @@
-const MyHomework = () => {
+const MyHomeworkPage = () => {
   return <div>MyHomework</div>;
 };
 
-export default MyHomework;
+export default MyHomeworkPage;

apps/client/app/(afterLogin)/my-study/page.tsx

@@ -1,5 +1,5 @@
-const MyStudy = () => {
+const MyStudyPage = () => {
   return <div>MyStudy</div>;
 };
 
-export default MyStudy;
+export default MyStudyPage;

apps/client/app/(afterLogin)/study-apply/page.tsx

@@ -1,5 +1,5 @@
-const StudyApply = () => {
+const StudyApplyPage = () => {
   return <div>StudyApply</div>;
 };
 
-export default StudyApply;
+export default StudyApplyPage;

apps/client/app/(beforeLogin)/(auth-error)/auth-error-after-recruitment/page.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { css } from "@styled-system/css";
+import { Text } from "@wow-class/ui";
+import { routePath } from "constants/routePath";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import Button from "wowds-ui/Button";
+
+const AuthErrorAfterRecruitmentPage = () => {
+  const router = useRouter();
+
+  const handleClickNavigateHome = () => {
+    router.push(routePath.landing);
+  };
+
+  return (
+    <main className={mainContentStyle}>
+      <Image
+        alt="avatar-image"
+        className={avatarImageStyle}
+        height={200}
+        src="/images/avatar.svg"
+        width={200}
+      />
+      <Text as="h1" className={headingStyle} typo="display2">
+        GDSC Hongik 정회원만 이용 가능해요.
+      </Text>
+      <p className={descriptionStyle}>
+        GDSC Hongik 정회원 모집 기간이 아니에요!
+        <br />
+        모집 기간에 합류 후 이용해주세요.
+      </p>
+      <div className={buttonContainerStyle}>
+        <Button aria-label="홈으로 이동" onClick={handleClickNavigateHome}>
+          홈으로 이동
+        </Button>
+      </div>
+    </main>
+  );
+};
+
+export default AuthErrorAfterRecruitmentPage;
+
+const mainContentStyle = css({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  width: "100vw",
+  height: "100vh",
+  textAlign: "center",
+});
+
+const avatarImageStyle = css({
+  width: "200px",
+  height: "200px",
+  marginBottom: "48px",
+});
+
+const headingStyle = css({
+  marginBottom: "16px",
+});
+
+const descriptionStyle = css({
+  fontSize: "18px",
+  fontWeight: 500,
+  lineHeight: "160%",
+  letterSpacing: "-0.18px",
+  color: "sub",
+  marginBottom: "48px",
+});
+
+const buttonContainerStyle = css({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  gap: "12px",
+  width: "100%",
+});

apps/client/app/(beforeLogin)/(auth-error)/auth-error-during-recruitment/page.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { css } from "@styled-system/css";
+import { Text } from "@wow-class/ui";
+import { routePath } from "constants/routePath";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import Button from "wowds-ui/Button";
+
+const AuthErrorDuringRecruitmentPage = () => {
+  const router = useRouter();
+
+  const handleClickNavigateHome = () => {
+    router.push(routePath.landing);
+  };
+
+  const handleClickNavigateOnboarding = () => {
+    router.push(routePath.onboarding);
+  };
+
+  return (
+    <main className={mainContentStyle}>
+      <Image
+        alt="avatar-image"
+        className={avatarImageStyle}
+        height={200}
+        src="/images/avatar.svg"
+        width={200}
+      />
+      <Text as="h1" className={headingStyle} typo="display2">
+        GDSC Hongik 정회원만 이용 가능해요.
+      </Text>
+      <p className={descriptionStyle}>
+        이번 학기 GDSC Hongik 정회원 모집 중이에요.
+        <br />
+        아래 버튼을 눌러 가입할 수 있어요!
+      </p>
+      <div className={buttonContainerStyle}>
+        <Button aria-label="홈으로 이동" onClick={handleClickNavigateHome}>
+          홈으로 이동
+        </Button>
+        <Button
+          aria-label="GDSC Hongik 가입하기"
+          variant="outline"
+          onClick={handleClickNavigateOnboarding}
+        >
+          GDSC Hongik 가입하기
+        </Button>
+      </div>
+    </main>
+  );
+};
+
+export default AuthErrorDuringRecruitmentPage;
+
+const mainContentStyle = css({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  width: "100vw",
+  height: "100vh",
+  textAlign: "center",
+});
+
+const avatarImageStyle = css({
+  width: "200px",
+  height: "200px",
+  marginBottom: "48px",
+});
+
+const headingStyle = css({
+  marginBottom: "16px",
+});
+
+const descriptionStyle = css({
+  fontSize: "18px",
+  fontWeight: 500,
+  lineHeight: "160%",
+  letterSpacing: "-0.18px",
+  color: "sub",
+  marginBottom: "48px",
+});
+
+const buttonContainerStyle = css({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  gap: "12px",
+  width: "100%",
+});

apps/client/app/(beforeLogin)/auth/_components/LoginButton.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { baseUrl } from "constants/environment";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { color } from "wowds-tokens";
+import Button from "wowds-ui/Button";
+
+const LoginButton = () => {
+  const router = useRouter();
+
+  const handleClickLogin = () => {
+    router.push(`${baseUrl}/oauth2/authorization/github`);
+  };
+
+  return (
+    <Button
+      icon={githubLogoIcon}
+      style={{ backgroundColor: `${color.github}` }}
+      onClick={handleClickLogin}
+    >
+      GitHub 로그인
+    </Button>
+  );
+};
+
+export default LoginButton;
+
+const githubLogoIcon = (
+  <Image
+    alt="github-logo"
+    height={18}
+    src="/images/github-logo.svg"
+    width={18}
+  />
+);