diff --git a/next.config.js b/next.config.js index 8e81e6a..3991af4 100644 --- a/next.config.js +++ b/next.config.js @@ -1,6 +1,6 @@ /** @type {import('next').NextConfig} */ const nextConfig = { - output: 'export', -} + // output: 'export', +}; -module.exports = nextConfig +module.exports = nextConfig; diff --git a/src/app/api/users/register/route.js b/src/app/api/users/register/route.js index 33f4492..7b9b678 100644 --- a/src/app/api/users/register/route.js +++ b/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, diff --git a/src/app/dashboard/page.js b/src/app/dashboard/page.js index 258bce4..8b6d24a 100644 --- a/src/app/dashboard/page.js +++ b/src/app/dashboard/page.js @@ -4,7 +4,7 @@ import DashboardContainer from "@/components/Curations/DashboardContainer/Dashbo export default function Dashboard() { return ( <> -
+
); diff --git a/src/app/login/page.js b/src/app/login/page.js index 9dde1a3..6dfcff8 100644 --- a/src/app/login/page.js +++ b/src/app/login/page.js @@ -4,7 +4,7 @@ import LoginContainer from "@/components/Login/LoginContainer/LoginContainer"; export default function Login() { return ( <> -
+
); diff --git a/src/app/register/page.js b/src/app/register/page.js new file mode 100644 index 0000000..33ebaec --- /dev/null +++ b/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 ( + <> +
+ + + ); +} diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index 53c52c8..45f18f9 100644 --- a/src/components/Header/Header.js +++ b/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 (
XFLIX - - 로그인 - + {name && status === "dashboard" ? ( +
{name}님, 환영합니다!
+ ) : ( + + 로그인 + + )}
); } diff --git a/src/components/Login/LoginContainer/LoginContainer.js b/src/components/Login/LoginContainer/LoginContainer.js index df23698..0d2b2f1 100644 --- a/src/components/Login/LoginContainer/LoginContainer.js +++ b/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 (

로그인

- - + + + {errorMessage &&

오류: {errorMessage}

}
); } diff --git a/src/components/Login/NameInput/NameInput.css b/src/components/Login/NameInput/NameInput.css new file mode 100644 index 0000000..6789807 --- /dev/null +++ b/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; +} diff --git a/src/components/Login/NameInput/NameInput.js b/src/components/Login/NameInput/NameInput.js new file mode 100644 index 0000000..1b6e708 --- /dev/null +++ b/src/components/Login/NameInput/NameInput.js @@ -0,0 +1,17 @@ +import "./NameInput.css"; + +export default function NameInput({ inputValue, setInputValue }) { + return ( +
+
이름
+ { + setInputValue(e.target.value); + }} + /> +
+ ); +} diff --git a/src/components/Login/PWInput/PWInput.js b/src/components/Login/PWInput/PWInput.js index ef77851..fb00d8e 100644 --- a/src/components/Login/PWInput/PWInput.js +++ b/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 (
-
비밀번호
+
+ {status === "original" ? "비밀번호" : "비밀번호 확인"} +
{ + 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 ( +
+

회원가입

+ + + + + + {errorMessage &&

오류: {errorMessage}

} +
+ ); +} diff --git a/src/components/SubmitButton/SubmitButton.js b/src/components/SubmitButton/SubmitButton.js index 1d1445b..87dd611 100644 --- a/src/components/SubmitButton/SubmitButton.js +++ b/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 ( - - 확인 - + // status를 login과 register로 나눠 onClick 기능과 버튼 레이블을 조건부 렌더링 + ); }