Merge pull request #41 from rlarlduf20/#40-auth

#40 auth
rlarlduf20 · Jan 22, 2024 · b1a9ad2 · b1a9ad2
2 parents cfe5063 + c3f2b68
commit b1a9ad2
Show file tree

Hide file tree

Showing 10 changed files with 110 additions and 2 deletions.
diff --git a/public/images/sign/kakao_login_btn.png b/public/images/sign/kakao_login_btn.png
diff --git a/public/images/sign/naver_login_btn.png b/public/images/sign/naver_login_btn.png
diff --git a/public/images/sign/signIn-logo.png b/public/images/sign/signIn-logo.png
diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx
@@ -26,12 +26,12 @@ const RootLayout = async ({
       <body>
         <AuthSessionProvider>
           <Header />
-          <main className="w-inner mx-auto">
+          <main className="w-inner h-[calc(100vh-80px)] mx-auto">
             {children}
             {addAlbumModal}
             {addMateModal}
           </main>
-          <Footer />
+          {/* <Footer /> */}
         </AuthSessionProvider>
       </body>
     </html>

diff --git a/src/app/(main)/signIn/error/page.tsx b/src/app/(main)/signIn/error/page.tsx
@@ -0,0 +1,12 @@
+import SignButton from "@/components/SignButton";
+
+const SignError = () => {
+  return (
+    <section>
+      <p>오류가 발생했습니다. 다시 로그인 해주세요.</p>
+      <SignButton />
+    </section>
+  );
+};
+
+export default SignError;
diff --git a/src/app/(main)/signIn/page.tsx b/src/app/(main)/signIn/page.tsx
@@ -0,0 +1,7 @@
+import SignInSection from "@/templates/SignInSection";
+
+const SignIn = () => {
+  return <SignInSection />;
+};
+
+export default SignIn;
diff --git a/src/app/api/auth/[...nextauth]/route.ts b/src/app/api/auth/[...nextauth]/route.ts
@@ -17,6 +17,10 @@ export const authOptions = {
       clientSecret: process.env.NAVER_CLIENT_SECRET ?? "",
     }),
   ],
+  pages: {
+    signIn: "/signIn",
+    error: "/signIn/error",
+  },
   callbacks: {
     async signIn({ user, account }: any) {
       let userData = {

diff --git a/src/middleware.ts b/src/middleware.ts
@@ -0,0 +1,38 @@
+import { getToken } from "next-auth/jwt";
+import { NextRequest, NextResponse } from "next/server";
+
+const withAuthList = ["/browse", "/album", "/addAlbum", "/addMate"];
+const withOutAuthList = ["/signIn"];
+
+const withAuth = async (req: NextRequest, token: boolean) => {
+  const url = req.nextUrl.clone();
+
+  if (!token) {
+    url.pathname = "/signIn";
+
+    return NextResponse.redirect(url);
+  }
+};
+
+const withOutAuth = async (req: NextRequest, token: boolean) => {
+  const url = req.nextUrl.clone();
+
+  if (token) {
+    return NextResponse.redirect(url.origin);
+  }
+};
+
+export default async function middleware(req: NextRequest) {
+  const token = await getToken({ req });
+  const pathname = req.nextUrl.pathname;
+
+  const isWithAuth = withAuthList.includes(pathname);
+  const isWithOutAuth = withOutAuthList.includes(pathname);
+
+  if (isWithAuth) return withAuth(req, !!token);
+  if (isWithOutAuth) return withOutAuth(req, !!token);
+}
+
+export const config = {
+  matcher: [...withAuthList, ...withOutAuthList],
+};
diff --git a/src/templates/SignInSection/SignInBox.tsx b/src/templates/SignInSection/SignInBox.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import Image from "next/image";
+import KakaoLoginBtn from "../../../public/images/sign/kakao_login_btn.png";
+import NaverLoginBtn from "../../../public/images/sign/naver_login_btn.png";
+import { signIn } from "next-auth/react";
+
+const SignInBox = () => {
+  return (
+    <div>
+      <Image
+        src={KakaoLoginBtn}
+        alt="카카오 로그인"
+        className="mb-[15px] cursor-pointer"
+        width={330}
+        onClick={() => signIn("kakao")}
+      />
+
+      <Image
+        src={NaverLoginBtn}
+        alt="네이버 로그인"
+        className="cursor-pointer"
+        width={330}
+        onClick={() => signIn("naver")}
+      />
+    </div>
+  );
+};
+
+export default SignInBox;
diff --git a/src/templates/SignInSection/index.tsx b/src/templates/SignInSection/index.tsx
@@ -0,0 +1,17 @@
+import Image from "next/image";
+import SignInLogo from "../../../public/images/sign/signIn-logo.png";
+import SignInBox from "./SignInBox";
+
+const SignInSection = () => {
+  return (
+    <section className="w-full h-full flex flex-col items-center justify-center gap-[55px] mt-[-80px]">
+      <div className="text-center">
+        <Image src={SignInLogo} alt="로고" />
+        <p className="text-[24px]">로그인</p>
+      </div>
+      <SignInBox />
+    </section>
+  );
+};
+
+export default SignInSection;