Merge pull request #14 from Garodden/feature/page_signup

Feature/page signup

src/front/src/routes/Signup.jsx

@@ -1,6 +1,107 @@
+import { useContext, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { GlobalContext } from "..";
+import { Link } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+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";
+
 const Signup = () =>{
+    //라우팅 네비게이터
+    const nevigate = useNavigate();
+
+    const [passwordQuestions, setPasswordQuestions] = useState([]);
+    const [pwdQVal, setPwdQVal] = useState();
+    // 유저정보
+    const [email, setEmail] = useState("");
+    const [username, setUsername] = useState("");
+    const [pwd, setPwd] = useState("");
+    const [pwdConfirm, setPwdConfirm] = useState("");
+
+    //메서드
+    const doSignup = () =>{
+        if(!username){
+            alert("유저명을 입력해주세요");
+            return ;
+        }
+
+        if(!email){
+            alert("이메일을 입력해주세요");
+            return ;
+        }
+
+        if(!pwd || !pwdConfirm || pwd != pwdConfirm){
+            alert("비밀번호, 비밀번호 입력을 확인해주세요");
+            return ;
+        }
+
+        if(!correctRegxEmail(tBox_email.value)){
+            alert("이메일 형식이 올바르지 않습니다.");
+            return ;
+        }
+
+        if(!correctRegxPwd(tBox_password.value)){
+            alert("비밀번호는 영어 대문자,소문자,특수기호,숫자를 반드시 포함한 8 ~ 16자리 문자여야합니다.");
+            return ;
+        }
+
+        if(!pwdQVal){
+            alert("비밀번호 찾기 질문을 선택해주세요.");
+            return ;
+        }
+
+        // signup API 호출
+        nevigate("/");
+    }
+
     return (
-        <div></div>
+        <main className="flex flex-col min-h-screen items-center">
+            <section className="w-500 py-16 px-10 mt-16 bg-white border">
+                <h1 className="logo text-center">logo</h1>
+                <h2 className="mt-4 text-center font-bold text-xl">가입을 통해 자소서 첨삭과 전문가 매칭 서비스를 누려보세요</h2>
+                <LabelSection label="Username" asChild className="mt-4">
+                        <Input placeholder="Enter your username" onChange={(ev) => setUsername(ev.target.value)}></Input>
+                </LabelSection>
+                <LabelSection asChild label="이메일" className="mt-2">
+                    <Input type="email" placeholder="이메일을 입력해주세요." onChange={(ev) => setEmail(ev.target.value)}></Input>
+                </LabelSection>
+                <LabelSection asChild label="비밀번호" className="mt-2">
+                    <Input type="password" placeholder="비밀번호를 입력해주세요." onChange={(ev) => setPwd(ev.target.value)}></Input>
+                </LabelSection>
+                <LabelSection asChild label="비밀번호확인" className="mt-2">
+                    <Input type="password" placeholder="비밀번호를 입력해주세요." onChange={(ev) => setPwdConfirm(ev.target.value)}></Input>
+                </LabelSection>
+                <LabelSection asChild label="비밀번호 찾기 질문" className="mt-2">
+                    <Select onValueChange={setPwdQVal}>
+                        <SelectTrigger>
+                            <SelectValue placeholder="선택"></SelectValue>
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectGroup>
+                                {
+                                    passwordQuestions.map(passwordQuestion => <SelectItem key={passwordQuestion.passwordQuestionId} value={passwordQuestion.passwordQuestionId}>{passwordQuestion.passwordQuestion}</SelectItem>)
+                                }
+                            </SelectGroup>
+                        </SelectContent>
+                    </Select>
+                </LabelSection>
+                <Button asChild className="text-white bg-[#6866EB] mt-4 w-full hover:bg-violet-600">
+                    <div onClick={doSignup}>
+                        Signup
+                    </div>
+                </Button>
+                <div className="flex gap-2 mt-4 w-full items-center">
+                    <div className="border h-0 border-black/65 grow"></div>
+                    <span>또는</span>
+                    <div className="border h-0 border-black/65 grow"></div>
+                </div>
+                <div className="flex justify-center">
+                    <Link to="/findPassword" className="text-black/65">비밀번호를 잊으셨나요?</Link>
+                </div>
+            </section>
+        </main>
     );
 };
 

src/front/src/utils/common.js

@@ -0,0 +1,31 @@
+/**
+ * @brief 이메일 정규식 형태가 일치하는지 확인합니다.
+ * The email couldn't start or finish with a dot
+ * The email shouldn't contain spaces into the string
+ * The email shouldn't contain special chars (<:, *,ecc)
+ * The email could contain dots in the middle of mail address before the @
+ * The email could contain a double doman ( '.de.org' or similar rarity)
+ * @param {String} inputString 
+ * @returns boolean
+ */
+export function correctRegxEmail(inputString){
+    const emailRegx = new RegExp(/^((?!\.)[\w\-_.]*[^.])(@\w+)(\.\w+(\.\w+)?[^.\W])$/gm);
+    return emailRegx.test(inputString)
+}
+
+/**
+ * @brief 비밀번호 정규식 형태가 일치하는지 확인합니다.
+ * 형태는
+ * password must contain 1 number (0-9)
+ * password must contain 1 uppercase letters
+ * password must contain 1 lowercase letters
+ * password must contain 1 non-alpha numeric number
+ * password is 8-16 characters with no space
+ * @param {String} inputString 
+ * @returns boolean
+ */
+export function correctRegxPwd(inputString){
+    const pwdRegx = new RegExp(/^(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[^\w\d\s:])([^\s]){8,16}$/gm);
+    return pwdRegx.test(inputString);
+}
+