From ebf463b55888705fb745250218e5179fe3aa6ea4 Mon Sep 17 00:00:00 2001 From: nuagenic Date: Fri, 1 Sep 2023 01:50:43 +0900 Subject: [PATCH 01/13] feat: Add Register file structure --- src/app/register/page.js | 11 ++++++ .../Login/LoginContainer/LoginContainer.js | 2 +- src/components/Login/NameInput/NameInput.css | 12 ++++++ src/components/Login/NameInput/NameInput.js | 17 +++++++++ src/components/Login/PWInput/PWInput.js | 6 ++- .../RegisterContainer/RegisterContainer.css | 9 +++++ .../RegisterContainer/RegisterContainer.js | 38 +++++++++++++++++++ src/components/SubmitButton/SubmitButton.js | 4 +- 8 files changed, 94 insertions(+), 5 deletions(-) create mode 100644 src/app/register/page.js create mode 100644 src/components/Login/NameInput/NameInput.css create mode 100644 src/components/Login/NameInput/NameInput.js create mode 100644 src/components/Login/RegisterContainer/RegisterContainer.css create mode 100644 src/components/Login/RegisterContainer/RegisterContainer.js diff --git a/src/app/register/page.js b/src/app/register/page.js new file mode 100644 index 0000000..8edadff --- /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/Login/LoginContainer/LoginContainer.js b/src/components/Login/LoginContainer/LoginContainer.js index df23698..6ea2e2e 100644 --- a/src/components/Login/LoginContainer/LoginContainer.js +++ b/src/components/Login/LoginContainer/LoginContainer.js @@ -16,7 +16,7 @@ export default function LoginContainer() {

로그인

- + ); } 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" ? "비밀번호" : "비밀번호 확인"} +
+

회원가입

+ + + + + +
+ ); +} diff --git a/src/components/SubmitButton/SubmitButton.js b/src/components/SubmitButton/SubmitButton.js index 1d1445b..35e1da1 100644 --- a/src/components/SubmitButton/SubmitButton.js +++ b/src/components/SubmitButton/SubmitButton.js @@ -1,10 +1,10 @@ import "./SubmitButton.css"; import Link from "next/link"; -export default function SubmitButton() { +export default function SubmitButton(status) { return ( - 확인 + {status === "submit" ? "확인" : "가입"} ); } From e02a799bdfb8b09df4996d5383869d0b8616ec9a Mon Sep 17 00:00:00 2001 From: nuagenic Date: Fri, 1 Sep 2023 01:58:42 +0900 Subject: [PATCH 02/13] =?UTF-8?q?Fix:=20Add=20status=20to=20'SubmitButton'?= =?UTF-8?q?=20Component=20in=20'LoginContainer'(to=20show=20'=ED=99=95?= =?UTF-8?q?=EC=9D=B8'=20instead=20of=20'=EA=B0=80=EC=9E=85')?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Login/LoginContainer/LoginContainer.js | 6 +++++- src/components/SubmitButton/SubmitButton.js | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/Login/LoginContainer/LoginContainer.js b/src/components/Login/LoginContainer/LoginContainer.js index 6ea2e2e..37abc54 100644 --- a/src/components/Login/LoginContainer/LoginContainer.js +++ b/src/components/Login/LoginContainer/LoginContainer.js @@ -15,7 +15,11 @@ export default function LoginContainer() {

로그인

- +
); diff --git a/src/components/SubmitButton/SubmitButton.js b/src/components/SubmitButton/SubmitButton.js index 35e1da1..71e47f4 100644 --- a/src/components/SubmitButton/SubmitButton.js +++ b/src/components/SubmitButton/SubmitButton.js @@ -1,7 +1,7 @@ import "./SubmitButton.css"; import Link from "next/link"; -export default function SubmitButton(status) { +export default function SubmitButton({ status }) { return ( {status === "submit" ? "확인" : "가입"} From 465ffcb92c66dea4b15919e7d8e101cbff44220f Mon Sep 17 00:00:00 2001 From: nuagenic Date: Fri, 1 Sep 2023 23:26:33 +0900 Subject: [PATCH 03/13] feat: Try to add register feature in 'RegisterContainer.js' (not working yet) --- .../RegisterContainer/RegisterContainer.js | 58 ++++++++++++++++++- src/components/SubmitButton/SubmitButton.js | 5 +- 2 files changed, 59 insertions(+), 4 deletions(-) diff --git a/src/components/Login/RegisterContainer/RegisterContainer.js b/src/components/Login/RegisterContainer/RegisterContainer.js index f48bad3..6f70b92 100644 --- a/src/components/Login/RegisterContainer/RegisterContainer.js +++ b/src/components/Login/RegisterContainer/RegisterContainer.js @@ -7,12 +7,66 @@ import SubmitButton from "../../SubmitButton/SubmitButton"; import "./RegisterContainer.css"; import React, { 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 [registerSuccess, setRegisterSuccess] = useState(false); + const [errorMessage, setErrorMessage] = useState(""); + + const router = useRouter(); + + const handleRegister = async () => { + console.log("hi"); + const apiUrl = "/api/users/register"; // 서버 API 엔드포인트 URL + + try { + const response = await fetch(apiUrl, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + name: nameValue, + username: IDRegisterValue, + password: PWRegisterValue, + }), + }); + + if (response.ok) { + const data = await response.json(); + if (data.isRegisterSuccess) { + setRegisterSuccess(true); + } + } else { + const data = await response.json(); + setErrorMessage(data.message); + } + } catch (error) { + console.error("An error occurred:", error); + setErrorMessage("An error occurred while registering."); + } + }; + + // '가입' 버튼의 Action을 회원가입 성공 여부에 따라 제어하는 함수 + const handleButtonAction = async () => { + if (registerSuccess === true) { + // 성공한 경우 다른 페이지로 이동 + router.push("/login"); + } else { + // 아직 작업을 실행하지 않은 경우 + try { + await handleRegister(); // 회원가입 요청 완료를 기다림 + setRegisterSuccess(true); + } catch (error) { + // 오류 처리 + console.error("An error occurred:", error); + } + } + }; return (
@@ -32,7 +86,9 @@ export default function RegisterContainer() { setInputValue={setPWConfirmValue} /> - + + {registerSuccess &&

회원가입이 성공적으로 완료되었습니다.

} + {errorMessage &&

오류: {errorMessage}

}
); } diff --git a/src/components/SubmitButton/SubmitButton.js b/src/components/SubmitButton/SubmitButton.js index 71e47f4..15c06ce 100644 --- a/src/components/SubmitButton/SubmitButton.js +++ b/src/components/SubmitButton/SubmitButton.js @@ -1,10 +1,9 @@ import "./SubmitButton.css"; -import Link from "next/link"; export default function SubmitButton({ status }) { return ( - + ); } From db48891f5b8956fa8c69ae5d6bd3c7a3fc2dc9e7 Mon Sep 17 00:00:00 2001 From: nuagenic Date: Thu, 7 Sep 2023 21:20:57 +0900 Subject: [PATCH 04/13] feat: Comment out 'outport: 'export'' in 'next.config.js' --- next.config.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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; From 1f1eb71a37f2589fea96e5bf4d2918e61e8c2199 Mon Sep 17 00:00:00 2001 From: nuagenic Date: Thu, 7 Sep 2023 22:20:53 +0900 Subject: [PATCH 05/13] fix: Change structure of 'handleRegister()' and 'SubmitButton' --- .../RegisterContainer/RegisterContainer.js | 24 +++---------------- src/components/SubmitButton/SubmitButton.js | 8 +++++-- 2 files changed, 9 insertions(+), 23 deletions(-) diff --git a/src/components/Login/RegisterContainer/RegisterContainer.js b/src/components/Login/RegisterContainer/RegisterContainer.js index 6f70b92..90a2634 100644 --- a/src/components/Login/RegisterContainer/RegisterContainer.js +++ b/src/components/Login/RegisterContainer/RegisterContainer.js @@ -14,7 +14,6 @@ export default function RegisterContainer() { const [PWRegisterValue, setPWRegisterValue] = useState(""); const [PWConfirmValue, setPWConfirmValue] = useState(""); const [nameValue, setNameValue] = useState(""); - const [registerSuccess, setRegisterSuccess] = useState(false); const [errorMessage, setErrorMessage] = useState(""); const router = useRouter(); @@ -39,7 +38,8 @@ export default function RegisterContainer() { if (response.ok) { const data = await response.json(); if (data.isRegisterSuccess) { - setRegisterSuccess(true); + // 회원가입에 성공하면 로그인 페이지로 이동 + router.push("/login"); } } else { const data = await response.json(); @@ -51,23 +51,6 @@ export default function RegisterContainer() { } }; - // '가입' 버튼의 Action을 회원가입 성공 여부에 따라 제어하는 함수 - const handleButtonAction = async () => { - if (registerSuccess === true) { - // 성공한 경우 다른 페이지로 이동 - router.push("/login"); - } else { - // 아직 작업을 실행하지 않은 경우 - try { - await handleRegister(); // 회원가입 요청 완료를 기다림 - setRegisterSuccess(true); - } catch (error) { - // 오류 처리 - console.error("An error occurred:", error); - } - } - }; - return (

회원가입

@@ -86,8 +69,7 @@ export default function RegisterContainer() { setInputValue={setPWConfirmValue} /> - - {registerSuccess &&

회원가입이 성공적으로 완료되었습니다.

} + {errorMessage &&

오류: {errorMessage}

}
); diff --git a/src/components/SubmitButton/SubmitButton.js b/src/components/SubmitButton/SubmitButton.js index 15c06ce..7687917 100644 --- a/src/components/SubmitButton/SubmitButton.js +++ b/src/components/SubmitButton/SubmitButton.js @@ -1,8 +1,12 @@ import "./SubmitButton.css"; -export default function SubmitButton({ status }) { +export default function SubmitButton({ onClick, status }) { + const handleRegister = () => { + onClick(); + }; + return ( - ); From 4d10d9ee1b2c17020001e9abd730244724af1d99 Mon Sep 17 00:00:00 2001 From: nuagenic Date: Fri, 8 Sep 2023 13:36:56 +0900 Subject: [PATCH 06/13] refact: Delete response header from 'RegisterContainer.js' --- src/components/Login/RegisterContainer/RegisterContainer.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/Login/RegisterContainer/RegisterContainer.js b/src/components/Login/RegisterContainer/RegisterContainer.js index 90a2634..c86a653 100644 --- a/src/components/Login/RegisterContainer/RegisterContainer.js +++ b/src/components/Login/RegisterContainer/RegisterContainer.js @@ -25,9 +25,6 @@ export default function RegisterContainer() { try { const response = await fetch(apiUrl, { method: "POST", - headers: { - "Content-Type": "application/json", - }, body: JSON.stringify({ name: nameValue, username: IDRegisterValue, From 8ac9dc83c2c0ed8c37fa83030009c176ee8fe489 Mon Sep 17 00:00:00 2001 From: nuagenic Date: Fri, 8 Sep 2023 13:41:55 +0900 Subject: [PATCH 07/13] refact: erase 'import React' from 'RegisterContainer.js' --- src/components/Login/RegisterContainer/RegisterContainer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Login/RegisterContainer/RegisterContainer.js b/src/components/Login/RegisterContainer/RegisterContainer.js index c86a653..ead567b 100644 --- a/src/components/Login/RegisterContainer/RegisterContainer.js +++ b/src/components/Login/RegisterContainer/RegisterContainer.js @@ -6,7 +6,7 @@ import NameInput from "../NameInput/NameInput"; import SubmitButton from "../../SubmitButton/SubmitButton"; import "./RegisterContainer.css"; -import React, { useState } from "react"; +import { useState } from "react"; import { useRouter } from "next/navigation"; export default function RegisterContainer() { From 5972882211f65d22b1fead98b29b5bf46f817108 Mon Sep 17 00:00:00 2001 From: nuagenic Date: Fri, 8 Sep 2023 13:49:10 +0900 Subject: [PATCH 08/13] feat: Add login process in 'LoginContainer.js' --- .../Login/LoginContainer/LoginContainer.js | 36 ++++++++++++++++++- 1 file changed, 35 insertions(+), 1 deletion(-) diff --git a/src/components/Login/LoginContainer/LoginContainer.js b/src/components/Login/LoginContainer/LoginContainer.js index 37abc54..72b720b 100644 --- a/src/components/Login/LoginContainer/LoginContainer.js +++ b/src/components/Login/LoginContainer/LoginContainer.js @@ -5,11 +5,45 @@ 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 (
From 9b114f5888c79553336f5c7abaf616a445c6260b Mon Sep 17 00:00:00 2001 From: nuagenic Date: Fri, 8 Sep 2023 13:54:20 +0900 Subject: [PATCH 09/13] feat: Add handleLogin function in 'SubmitButton.js' --- .../Login/LoginContainer/LoginContainer.js | 2 +- src/components/SubmitButton/SubmitButton.js | 12 ++++++++++-- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/components/Login/LoginContainer/LoginContainer.js b/src/components/Login/LoginContainer/LoginContainer.js index 72b720b..df59812 100644 --- a/src/components/Login/LoginContainer/LoginContainer.js +++ b/src/components/Login/LoginContainer/LoginContainer.js @@ -54,7 +54,7 @@ export default function LoginContainer() { inputValue={PWInputValue} setInputValue={setPWInputValue} /> - +
); } diff --git a/src/components/SubmitButton/SubmitButton.js b/src/components/SubmitButton/SubmitButton.js index 7687917..87dd611 100644 --- a/src/components/SubmitButton/SubmitButton.js +++ b/src/components/SubmitButton/SubmitButton.js @@ -5,9 +5,17 @@ export default function SubmitButton({ onClick, status }) { onClick(); }; + const handleLogin = () => { + onClick(); + }; + return ( - ); } From bef73ee8fd39b91eefe6f7638187033cbbcc1bcd Mon Sep 17 00:00:00 2001 From: nuagenic Date: Fri, 8 Sep 2023 13:59:00 +0900 Subject: [PATCH 10/13] feat: Render errorMessage in 'LoginContainer.js' --- src/components/Login/LoginContainer/LoginContainer.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Login/LoginContainer/LoginContainer.js b/src/components/Login/LoginContainer/LoginContainer.js index df59812..0d2b2f1 100644 --- a/src/components/Login/LoginContainer/LoginContainer.js +++ b/src/components/Login/LoginContainer/LoginContainer.js @@ -55,6 +55,7 @@ export default function LoginContainer() { setInputValue={setPWInputValue} /> + {errorMessage &&

오류: {errorMessage}

} ); } From 59fb1b3dc210e6846e969bc8eb9dae32d9b209bf Mon Sep 17 00:00:00 2001 From: nuagenic Date: Fri, 8 Sep 2023 17:25:31 +0900 Subject: [PATCH 11/13] fix: Erase console.log in 'RegisterContainer.js' --- src/components/Login/RegisterContainer/RegisterContainer.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Login/RegisterContainer/RegisterContainer.js b/src/components/Login/RegisterContainer/RegisterContainer.js index ead567b..cab637e 100644 --- a/src/components/Login/RegisterContainer/RegisterContainer.js +++ b/src/components/Login/RegisterContainer/RegisterContainer.js @@ -19,7 +19,6 @@ export default function RegisterContainer() { const router = useRouter(); const handleRegister = async () => { - console.log("hi"); const apiUrl = "/api/users/register"; // 서버 API 엔드포인트 URL try { From 0540c2238caf22f5cb304942c914944b028325fb Mon Sep 17 00:00:00 2001 From: nuagenic Date: Fri, 8 Sep 2023 17:48:39 +0900 Subject: [PATCH 12/13] feat: Add status props in 'Header.js' --- src/app/dashboard/page.js | 2 +- src/app/login/page.js | 2 +- src/app/register/page.js | 2 +- src/components/Header/Header.js | 22 ++++++++++++++++++---- 4 files changed, 21 insertions(+), 7 deletions(-) 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 index 8edadff..33ebaec 100644 --- a/src/app/register/page.js +++ b/src/app/register/page.js @@ -4,7 +4,7 @@ import RegisterContainer from "@/components/Login/RegisterContainer/RegisterCont 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}님, 환영합니다!
+ ) : ( + + 로그인 + + )}
); } From f671eba88ad69df7f567a804da345d9513286ee4 Mon Sep 17 00:00:00 2001 From: designDefined Date: Tue, 12 Sep 2023 20:13:46 +0900 Subject: [PATCH 13/13] fix: Fix register router sending wrong error --- src/app/api/users/register/route.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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,