#31/feat/add login and register

next.config.js

@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    output: 'export',
-}
+  // output: 'export',
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

src/app/api/users/register/route.js

@@ -62,7 +62,7 @@ export async function POST(request) {
   /**
    * user 추가
    */
-  if (insertResult.insertedCount !== 1) {
+  if (!insertResult.insertedId) {
     return NextResponse.json(
       {
         code: 11,

src/app/dashboard/page.js

@@ -4,7 +4,7 @@ import DashboardContainer from "@/components/Curations/DashboardContainer/Dashbo
 export default function Dashboard() {
   return (
     <>
-      <Header />
+      <Header status="dashboard" />
       <DashboardContainer />
     </>
   );

src/app/login/page.js

@@ -4,7 +4,7 @@ import LoginContainer from "@/components/Login/LoginContainer/LoginContainer";
 export default function Login() {
   return (
     <>
-      <Header />
+      <Header status="login" />
       <LoginContainer />
     </>
   );

src/app/register/page.js

@@ -0,0 +1,11 @@
+import Header from "@/components/Header/Header";
+import RegisterContainer from "@/components/Login/RegisterContainer/RegisterContainer";
+
+export default function Register() {
+  return (
+    <>
+      <Header status="register" />
+      <RegisterContainer />
+    </>
+  );
+}

src/components/Header/Header.js

@@ -1,15 +1,29 @@
+"use client";
+
 import "./Header.css";
 import Link from "next/link";
+import { useState, useEffect } from "react";
+
+export default function Header({ status }) {
+  const [name, setName] = useState(null);
+
+  useEffect(() => {
+    const sessionName = sessionStorage.getItem("name");
+    setName(sessionName);
+  }, []);
 
-export default function Header() {
   return (
     <div className="header-container">
       <Link href="/dashboard" className="logo">
         XFLIX
       </Link>
-      <Link href="/login" className="login-btn">
-        로그인
-      </Link>
+      {name && status === "dashboard" ? (
+        <div className="">{name}님, 환영합니다!</div>
+      ) : (
+        <Link href="/login" className="login-btn">
+          로그인
+        </Link>
+      )}
     </div>
   );
 }

src/components/Login/LoginContainer/LoginContainer.js

@@ -5,18 +5,57 @@ import PWInput from "../PWInput/PWInput";
 import SubmitButton from "../../SubmitButton/SubmitButton";
 import "./LoginContainer.css";
 
-import React, { useState } from "react";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
 
 export default function LoginContainer() {
   const [IDInputValue, setIDInputValue] = useState("");
   const [PWInputValue, setPWInputValue] = useState("");
+  const [errorMessage, setErrorMessage] = useState("");
+
+  const router = useRouter();
+
+  const handleLogin = async () => {
+    const apiUrl = "/api/users/login"; // 서버 API 엔드포인트 URL
+
+    try {
+      const response = await fetch(apiUrl, {
+        method: "POST",
+        body: JSON.stringify({
+          username: IDInputValue,
+          password: PWInputValue,
+        }),
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        if (data.isLoginSuccess) {
+          // 로그인에 성공하면 dashboard 페이지로 이동
+          router.push("/dashboard");
+          // name 정보를 sessionStorage에 저장
+          sessionStorage.setItem("name", data.name);
+        }
+      } else {
+        const data = await response.json();
+        setErrorMessage(data.message);
+      }
+    } catch (error) {
+      console.error("An error occurred:", error);
+      setErrorMessage("An error occurred while login.");
+    }
+  };
 
   return (
     <div className="login-container">
       <h2 className="login-txt">로그인</h2>
       <IDInput inputValue={IDInputValue} setInputValue={setIDInputValue} />
-      <PWInput inputValue={PWInputValue} setInputValue={setPWInputValue} />
-      <SubmitButton />
+      <PWInput
+        status="original"
+        inputValue={PWInputValue}
+        setInputValue={setPWInputValue}
+      />
+      <SubmitButton onClick={handleLogin} status="login" />
+      {errorMessage && <p>오류: {errorMessage}</p>}
     </div>
   );
 }

src/components/Login/NameInput/NameInput.css

@@ -0,0 +1,12 @@
+.name-txt {
+  font-weight: 400;
+  margin: 0 0 10px 0;
+}
+
+.name-input {
+  border: none;
+  border-bottom: 1px solid #e0e0e0;
+  outline: none;
+  width: 300px;
+  margin-bottom: 50px;
+}

src/components/Login/NameInput/NameInput.js

@@ -0,0 +1,17 @@
+import "./NameInput.css";
+
+export default function NameInput({ inputValue, setInputValue }) {
+  return (
+    <div>
+      <h5 className="name-txt">이름</h5>
+      <input
+        className="name-input"
+        type="text"
+        value={inputValue}
+        onChange={(e) => {
+          setInputValue(e.target.value);
+        }}
+      />
+    </div>
+  );
+}

src/components/Login/PWInput/PWInput.js

@@ -1,9 +1,11 @@
 import "./PWInput.css";
 
-export default function PWInput({ inputValue, setInputValue }) {
+export default function PWInput({ status, inputValue, setInputValue }) {
   return (
     <div>
-      <h5 className="pw-txt">비밀번호</h5>
+      <h5 className="pw-txt">
+        {status === "original" ? "비밀번호" : "비밀번호 확인"}
+      </h5>
       <input
         className="pw-input"
         type="password"

src/components/Login/RegisterContainer/RegisterContainer.css

@@ -0,0 +1,9 @@
+.register-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.register-txt {
+  margin-top: 0;
+}

src/components/Login/RegisterContainer/RegisterContainer.js

@@ -0,0 +1,72 @@
+"use client";
+
+import IDInput from "../IDInput/IDInput";
+import PWInput from "../PWInput/PWInput";
+import NameInput from "../NameInput/NameInput";
+import SubmitButton from "../../SubmitButton/SubmitButton";
+import "./RegisterContainer.css";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+
+export default function RegisterContainer() {
+  const [IDRegisterValue, setIDRegisterValue] = useState("");
+  const [PWRegisterValue, setPWRegisterValue] = useState("");
+  const [PWConfirmValue, setPWConfirmValue] = useState("");
+  const [nameValue, setNameValue] = useState("");
+  const [errorMessage, setErrorMessage] = useState("");
+
+  const router = useRouter();
+
+  const handleRegister = async () => {
+    const apiUrl = "/api/users/register"; // 서버 API 엔드포인트 URL
+
+    try {
+      const response = await fetch(apiUrl, {
+        method: "POST",
+        body: JSON.stringify({
+          name: nameValue,
+          username: IDRegisterValue,
+          password: PWRegisterValue,
+        }),
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        if (data.isRegisterSuccess) {
+          // 회원가입에 성공하면 로그인 페이지로 이동
+          router.push("/login");
+        }
+      } else {
+        const data = await response.json();
+        setErrorMessage(data.message);
+      }
+    } catch (error) {
+      console.error("An error occurred:", error);
+      setErrorMessage("An error occurred while registering.");
+    }
+  };
+
+  return (
+    <div className="register-container">
+      <h2 className="register-txt">회원가입</h2>
+      <IDInput
+        inputValue={IDRegisterValue}
+        setInputValue={setIDRegisterValue}
+      />
+      <PWInput
+        status="original"
+        inputValue={PWRegisterValue}
+        setInputValue={setPWRegisterValue}
+      />
+      <PWInput
+        status="confirm"
+        inputValue={PWConfirmValue}
+        setInputValue={setPWConfirmValue}
+      />
+      <NameInput inputValue={nameValue} setInputValue={setNameValue} />
+      <SubmitButton onClick={handleRegister} status="register" />
+      {errorMessage && <p>오류: {errorMessage}</p>}
+    </div>
+  );
+}

src/components/SubmitButton/SubmitButton.js

@@ -1,10 +1,21 @@
 import "./SubmitButton.css";
-import Link from "next/link";
 
-export default function SubmitButton() {
+export default function SubmitButton({ onClick, status }) {
+  const handleRegister = () => {
+    onClick();
+  };
+
+  const handleLogin = () => {
+    onClick();
+  };
+
   return (
-    <Link href="/dashboard" className="submit-btn">
-      확인
-    </Link>
+    // status를 login과 register로 나눠 onClick 기능과 버튼 레이블을 조건부 렌더링
+    <button
+      onClick={status === "login" ? handleLogin : handleRegister}
+      className="submit-btn"
+    >
+      {status === "login" ? "확인" : "가입"}
+    </button>
   );
 }