Feat: user API 테스트 페이지 개발

1. API요청 및 응답 정상 반영되는 것 확인 2. 비밀번호 찾기 질문 조회 API 개발 Resolve: #127
DuckOriDuck · May 10, 2024 · 1721392 · 1721392
1 parent 11715a3
commit 1721392
Show file tree

Hide file tree

Showing 8 changed files with 139 additions and 26 deletions.
diff --git a/src/front/src/App.jsx b/src/front/src/App.jsx
@@ -8,6 +8,7 @@ import Test from "./routes/Test";
 import ChatBox from "./components/ChatBox";
 import MyPage from "./routes/Mypage";
 import UserPage from "./routes/UserPage";
+import PasswordFind from "./routes/PasswordFind";
 
 
 
@@ -24,6 +25,10 @@ const router = createBrowserRouter([
         path: "/signup",
         element: <Signup></Signup>
       },
+      {
+        path: "/findPassword",
+        element: <PasswordFind></PasswordFind>
+      },
       {
         path: "/chat",
         element: <ChatBox></ChatBox>

diff --git a/src/front/src/routes/PasswordFind.jsx b/src/front/src/routes/PasswordFind.jsx
@@ -1,4 +1,4 @@
-import { useContext } from "react";
+import { useState, useContext, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { GlobalContext } from "..";
 import { Link } from "react-router-dom";
@@ -12,46 +12,98 @@ import {
     SelectTrigger,
     SelectValue,
 } from "@/components/ui/select"
+import { changePassword, fetchPasswordQuestions } from "@/utils/API";
+import { getPasswordQuestionItems } from "@/utils/Items";
+import { correctRegxEmail, correctRegxPwd } from "@/utils/common";
+import { changePasswordReqParam } from "@/utils/Parameter";
+import { Label } from "@radix-ui/react-label";
 
 const PasswordFind = () => {
     //라우팅 네비게이터
     const nevigate = useNavigate();
+
+    //비밀번호 찾기 질문 Items
+    const [passwordQuestions, setPasswordQuestions] = useState([]);
+    //Email 주소
+    const [email, setEmail] = useState("");
+    //선택한 비밀번호 찾기 질문
+    const [selectQuestion, setSelectQuestion] = useState(null);
+    //입력한 비밀번호 찾기 질문 응답
+    const [passwordQuestionAnswer, setPasswordQuestionAnswer] = useState("");
+    //새로운 비밀번호
+    const [newPassword, setNewPassword] = useState("");
+
+    useEffect(() =>{
+        fetchPasswordQuestions()
+        .then(resultQuestions =>{
+            setPasswordQuestions(getPasswordQuestionItems(resultQuestions));
+        })
+    },[]);
 
-    const mainpage = () =>{
-        setLogin(true);
-        nevigate("/login");
+    const findPassword = () =>{
+        if(!correctRegxEmail(email)){
+            alert("이메일을 확인해주세요");
+            return ;
+        }
+
+        if(selectQuestion === null){
+            alert("비밀번호 찾기 질문을 선택해주세요");
+            return ;
+        }
+
+        if(passwordQuestionAnswer === ""){
+            alert("비밀번호 찾기 응답을 입력해주세요");
+            return ;
+        }
+
+        if(!correctRegxPwd(newPassword)){
+            alert("비밀번호 형식이 올바르지 않습니다.");
+            return ;
+        }
+
+        const reqParam = changePasswordReqParam(email, selectQuestion, passwordQuestionAnswer, newPassword);
+
+        changePassword(reqParam)
+        .then((response) => {
+            alert(response + "\n 다시 로그인해주세요!");
+            nevigate("/");
+        })
+        .catch((err) =>{
+            alert("비밀번호 변경에 실패했습니다.");
+        });
     }
 
 
     return (
         <main id="login-wrap" className="flex flex-col min-h-screen items-center">
             <section className="flex flex-col items-center w-500 py-20 px-10 mt-60 bg-white border">
                 <h1>1INKED 1N</h1>
-                <h3>비밀번호 찾기</h3>
+                <h3>비밀번호 변경</h3>
                 <LabelSection asChild label="Email">
-                    <Input id="tBox_email" type="email" placeholder="Email Address"></Input>
+                    <Input onChange={ev => setEmail(ev.target.value)} type="email" placeholder="Email Address"></Input>
                 </LabelSection>
 
                 <LabelSection asChild label="Password recovery Question" className="mt-4">
-                    <Select>
+                    <Select onValueChange={val => setSelectQuestion(val)}>
                         <SelectTrigger>
                             <SelectValue placeholder="Question List" />
                         </SelectTrigger>
                         <SelectContent>
-                            <SelectItem value="elementry-school">내가 태어난 초등학교는</SelectItem>
-                            <SelectItem value="child-nickname">내 어릴적 별명은?</SelectItem>
-                            <SelectItem value="first-love">내 첫사랑 이름은?</SelectItem>
+                            {
+                                passwordQuestions
+                            }
                         </SelectContent>
                     </Select>
 
-                    <Input id="tBox_pwd" type="input" placeholder="your answer"></Input>
+                    <Input onChange={ev => setPasswordQuestionAnswer(ev.target.value)} type="input" placeholder="your answer"></Input>
+                </LabelSection>
 
+                <LabelSection asChild label="new Password" className="mt-4">
+                    <Input onChange={ev => setNewPassword(ev.target.value)} type="password" placeholder="enter new password"></Input>
                 </LabelSection>
 
                 {/* 버튼은 onClick 콜백 동작 불가 */}
-                <Button asChild className="bg-[#6866EB] mt-4 w-full hover:bg-violet-600">
-                    <div onClick={mainpage}>비밀번호 찾기</div>
-                </Button>
+                <Button onClick={findPassword} className="bg-[#6866EB] mt-4 w-full hover:bg-violet-600">비밀번호 변경</Button>
             </section>
         </main>
     );

diff --git a/src/front/src/routes/Signup.jsx b/src/front/src/routes/Signup.jsx
@@ -1,4 +1,4 @@
-import { useContext, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { GlobalContext } from "..";
 import { Link } from "react-router-dom";
@@ -7,8 +7,9 @@ import { Input } from "@/components/ui/input";
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectGroup } from "@/components/ui/select";
 import LabelSection from "@/components/Layout/LabelSection";
 import { correctRegxEmail, correctRegxPwd } from "@/utils/common";
-import { signup } from "@/utils/API";
+import { fetchPasswordQuestions, signup } from "@/utils/API";
 import { signupReqParam } from "@/utils/Parameter";
+import { getPasswordQuestionItems } from "@/utils/Items";
 
 const Signup = () =>{
     //라우팅 네비게이터
@@ -23,6 +24,13 @@ const Signup = () =>{
     const [pwdConfirm, setPwdConfirm] = useState("");
     const [pwdQAnswer, setPwdQAnswer] = useState("");
 
+    useEffect(() =>{
+        fetchPasswordQuestions()
+        .then(resultQuestions =>{
+            setPasswordQuestions(getPasswordQuestionItems(resultQuestions));
+        })
+    },[]);
+
     //메서드
     const doSignup = () =>{
         if(!username){
@@ -57,8 +65,6 @@ const Signup = () =>{
 
         const reqParam = signupReqParam(username, email, pwd, pwdQId, pwdQAnswer);
 
-        console.log(reqParam);
-
         // signup API 호출
 
         signup(reqParam)
@@ -100,7 +106,7 @@ const Signup = () =>{
                         <SelectContent>
                             <SelectGroup>
                                 {
-                                    passwordQuestions.map(passwordQuestion => <SelectItem key={passwordQuestion.passwordQuestionId} value={passwordQuestion.passwordQuestionId}>{passwordQuestion.passwordQuestion}</SelectItem>)
+                                    passwordQuestions   
                                 }
                             </SelectGroup>
                         </SelectContent>

diff --git a/src/front/src/routes/Test.jsx b/src/front/src/routes/Test.jsx
@@ -1,6 +1,7 @@
 import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card";
 import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 import { GenerateLiElUUID } from "@/utils/common";
 import { Link } from "react-router-dom";
 import ArticleDialog from "@/components/ArticleDialog";
@@ -17,9 +18,14 @@ import ChatBox from "@/components/ChatBox";
 import FollowInfo from "@/components/FollowInfo";
 import MyResumes from "@/components/MyResumes";
 import UserPage from "./UserPage";
+import { fetchUserProfile, saveProfile, withdraw } from "@/utils/API";
+import { saveProfileReqParam, withdrawReqParam } from "@/utils/Parameter";
 
 
 const Test =  () => {
+    const email = "[email protected]";
+    const [file, setFile] = useState(null);
+
     const resource = {
         btnText: "생성",
         clickCallback: () =>{
@@ -29,8 +35,35 @@ const Test =  () => {
         initFn: () => {}
     }
 
+    const userProfileDemo = () =>{
+
+        fetchUserProfile(email)
+        .then((data) => {console.log(data)});
+    }
+
+    const userWithdraw = (bool) =>{
+        const reqParam = withdrawReqParam("[email protected]", "Dlxogml!135", bool);
+
+        withdraw(reqParam)
+        .then(data => console.log(data));
+    }
+
+    const saveUserProfile = () =>{
+        const reqParam = saveProfileReqParam(email, "123","서울","ㄷㅈ매럊믇ㄹ",file);
+
+        saveProfile(reqParam)
+        .then(response => console.log(response));
+    }
+
     return (
-        <UserPage></UserPage>
+        <div>
+            <Button onClick={userProfileDemo}>유저 프로필 조회</Button>
+            <Button onClick={() =>userWithdraw(true)}>회원 탈퇴 API true</Button>
+            <Button onClick={() =>userWithdraw(false)}>회원 탈퇴 API false</Button>
+
+            <Input type="file" onChange={ev =>setFile(ev.target.files[0])}></Input>
+            <Button onClick={saveUserProfile}>유저 프로필 저장</Button>
+        </div>
     );
 };
 

diff --git a/src/front/src/utils/Items.jsx b/src/front/src/utils/Items.jsx
@@ -0,0 +1,11 @@
+import { SelectItem } from "@/components/ui/select"
+
+/**
+ * 
+ * @param {{id: String, question: String}[]} questions 
+ * @returns 
+ */
+export const getPasswordQuestionItems = (questions) =>{
+    const questionSelectItems = questions.map(item => (<SelectItem key={item.id} value={item.id}>{item.question}</SelectItem>));
+    return questionSelectItems;
+}
diff --git a/src/front/src/utils/Parameter.js b/src/front/src/utils/Parameter.js
@@ -18,8 +18,9 @@ export const signupReqParam = (realName, email, password, passwordQuestionId, pa
     return reqParam;
 }
 
-export const changePasswordReqParam = () =>{
-    const reqParam = {}
+export const changePasswordReqParam = (email, passwordQuestionId, passwordQuestionAnswer, newPassword) =>{
+    const reqParam = {};
+
     reqParam.email = email;
     reqParam.passwordQuestionId = passwordQuestionId;
     reqParam.passwordQuestionAnswer = passwordQuestionAnswer;
@@ -46,7 +47,7 @@ export const saveProfileReqParam = (email, identity, location, description, file
     reqFormData.append('description', description);
     reqFormData.append('file', file);
 
-    return reqParam;
+    return reqFormData;
 }
 
 /**

diff --git a/src/main/java/com/example/oneinkedoneproject/dto/SignupUserRequestDto.java b/src/main/java/com/example/oneinkedoneproject/dto/SignupUserRequestDto.java
@@ -19,13 +19,14 @@ public class SignupUserRequestDto {
 	private String passwordQuestionId;
 	private String passwordQuestionAnswer;
 
-	public User toEntity(PasswordQuestion pwdQuestion, String endcodePassword){
+	public User toEntity(PasswordQuestion pwdQuestion, String encodePassword){
 		return	User.builder()
 			.id(GenerateIdUtils.generateUserId())
 			.realname(realName)
 			.email(email)
-			.password(endcodePassword)
+			.password(encodePassword)
 			.passwordQuestion(pwdQuestion)
+			.passwordAnswer(passwordQuestionAnswer)
 			.grade(Grade.ROLE_BASIC)
 			.withdraw(false)
 			.build();

diff --git a/src/main/java/com/example/oneinkedoneproject/dto/WithdrawUserRequestDto.java b/src/main/java/com/example/oneinkedoneproject/dto/WithdrawUserRequestDto.java
@@ -8,5 +8,9 @@
 public class WithdrawUserRequestDto {
     private String email;
     private String password;
-    private Boolean isWithdraw;
+    private boolean isWithdraw;
+
+    public boolean getIsWithdraw(){
+        return this.isWithdraw;
+    }
 }