merge develop -> feat/myPage (#35)

.eslintrc.json

@@ -15,6 +15,7 @@
   ],
   "ignorePatterns": ["next.config.mjs"],
   "rules": {
+    "react/require-default-props": "off",
     "react/react-in-jsx-scope": "off",
     "react/jsx-filename-extension": [1, { "extensions": [".ts", ".tsx"] }],
     "react/jsx-props-no-spreading": "off",

package.json

@@ -8,7 +8,7 @@
     "start": "next start",
     "lint": "next lint",
     "prepare": "husky",
-    "stylelint": "stylelint '**/*.scss' --fix"
+    "stylelint": "stylelint **/*.scss --fix"
   },
   "dependencies": {
     "@tanstack/react-query": "^5.37.1",

src/app/(auth)/signin/SignInPage.module.scss

@@ -0,0 +1,20 @@
+@import "@/styles/_index";
+@import "@/styles/_media";
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 100%;
+
+  label {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    width: 100%;
+  }
+
+  .button {
+    width: auto;
+  }
+}

src/app/(auth)/signin/page.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { signIn } from "next-auth/react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import Button from "@/components/Button/Button";
+import styles from "./SignInPage.module.scss";
+
+type FormData = {
+  email: string;
+  password: string;
+};
+
+export default function SignInPage() {
+  const [isDisabled, setDisabled] = useState(false);
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<FormData>();
+  const router = useRouter();
+
+  const onSubmit = async (data: FormData) => {
+    const result = await signIn("credentials", {
+      redirect: false,
+      email: data.email,
+      password: data.password,
+    });
+
+    if (result?.ok) {
+      router.push("/");
+    } else {
+      console.log("로그인 실패");
+    }
+  };
+
+  useEffect(() => {
+    if (errors.email || errors.password) {
+      setDisabled(true);
+    } else {
+      setDisabled(false);
+    }
+  }, [errors.email, errors.password]);
+
+  return (
+    <div>
+      <form
+        className={styles.container}
+        onSubmit={handleSubmit(onSubmit)}
+      >
+        <label htmlFor='email'>
+          email
+          <input
+            id='email'
+            type='email'
+            {...register("email", { required: "이메일을 입력해주세요." })}
+          />
+          {errors.email && <p>{errors.email.message}</p>}
+        </label>
+        <label htmlFor='password'>
+          password
+          <input
+            id='password'
+            type='password'
+            {...register("password", { required: "비밀번호를 입력해주세요." })}
+          />
+          {errors.password && <p>{errors.password.message}</p>}
+        </label>
+        <Button
+          styleType='primary'
+          disabled={isDisabled}
+          className={styles.button}
+          type='submit'
+        >
+          SignIn
+        </Button>
+      </form>
+    </div>
+  );
+}

src/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,62 @@
+import { NextAuthOptions, User } from "next-auth";
+import NextAuth from "next-auth/next";
+import Credentials from "next-auth/providers/credentials";
+
+export const authOptions: NextAuthOptions = {
+  providers: [
+    Credentials({
+      name: "SignIn",
+      credentials: {
+        email: { label: "email", type: "email", placeholder: "user@email.com" },
+        password: { label: "password", type: "password", placeholder: "password" },
+      },
+      async authorize(credentials) {
+        const result = await fetch(`${process.env.BASE_URL}/auth/signIn`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ email: credentials?.email, password: credentials?.password }),
+        });
+        const data = await result.json();
+        const user = data?.user;
+
+        if (!user) {
+          throw new Error("로그인 실패: 계정 정보를 다시 확인해주세요.");
+        }
+
+        return {
+          ...user,
+          accessToken: data.accessToken,
+        };
+      },
+    }),
+  ],
+  callbacks: {
+    async jwt({ token, user }) {
+      console.log(user);
+      if (user) {
+        // eslint-disable-next-line no-param-reassign
+        token.accessToken = user?.accessToken;
+        // eslint-disable-next-line no-param-reassign
+        token.user = user;
+      }
+      return token;
+    },
+    async session({ session, token }) {
+      // eslint-disable-next-line no-param-reassign
+      session.accessToken = token.accessToken as string;
+      // eslint-disable-next-line no-param-reassign
+      session.user = token.user as User;
+      return session;
+    },
+  },
+  pages: {
+    signIn: "/signin",
+  },
+  secret: process.env.SECRET,
+};
+
+const handler = NextAuth(authOptions);
+
+export { handler as GET, handler as POST };