Skip to content

Revert "Revert "[Fix] 회원가입 스낵바 추가 구현"" #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
hyungchunKim wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

Revert "Revert "[Fix] 회원가입 스낵바 추가 구현"" #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions five-guys-project/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion five-guys-project/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,9 @@
"react-arborist": "^3.2.0",
"react-cookie": "^6.1.1",
"react-dom": "^18.2.0",
"react-toastify": "^9.1.3",
"react-redux": "^8.1.2",
"react-router-dom": "^6.16.0",
"redux": "^4.2.1",
"styled-components": "^6.0.8"
},
"devDependencies": {
Expand Down
132 changes: 77 additions & 55 deletions five-guys-project/src/components/Signup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@ import React, { useState } from 'react';
import debounce from '../utils/debounce';
import axios from 'axios';
import styled from 'styled-components';
import ToggleHandler from '../utils/ToggleHandler';
import {toast, ToastContainer} from "react-toastify";
import { useNavigate } from 'react-router-dom';

const Signup = () => {

Expand Down Expand Up @@ -47,6 +50,8 @@ const Signup = () => {
formCheckPasswordMessage: ""
});

const navigate = useNavigate();

const emailRegexp = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
const passwordRegexp = /^(?=.*[0-9])(?=.*[a-z])[0-9a-z]{4,12}$/;
const nicknameRegexp = /^[A-Za-z0-9가-힣_()]{4,12}$/;
Expand Down Expand Up @@ -119,67 +124,85 @@ const Signup = () => {
})
.then(function (res) {
console.log(res);
alert("회원가입이 완료되었습니다.");
toast.success(<h3>회원가입이 완료되었습니다.<br/>로그인 하세요😎</h3>, {
position: "top-right",
autoClose: 1000
});
setTimeout(() => {
navigate("/");
}, 1000);
})
.catch(function (error) {
console.log(error);
alert(error);
console.log(error.response.data.message);
toast.error(error.response.data.message + "😭", {
position: "top-right",
autoClose: 1000
});

});
};

return (
<Form>
<Input
placeholder='이메일'
type='email'
onChange={isValidEmail}
color={isValid.isValidEmail}
/>
<InputMessage
color={isValid.isValidEmail}
>
{message.formEmailMessage}
</InputMessage>
<Input
placeholder='닉네임'
type='nickname'
onChange={isValidNickname}
color={isValid.isValidNickname}
/>
<InputMessage
color={isValid.isValidNickname}
>
{message.formNicknameMessage}
</InputMessage>
<Input
placeholder='비밀번호'
type='password'
onChange={isValidPassword}
color={isValid.isValidPassword}
/>
<InputMessage
color={isValid.isValidPassword}
>
{message.formPasswordMessage}
</InputMessage>
<Input
placeholder='비밀번호 확인'
type='password'
onChange={CheckPassword}
color={isValid.isValidCheckPassword}
/>
<InputMessage
color={isValid.isValidCheckPassword}
>
{message.formCheckPasswordMessage}
</InputMessage>
<Submit
// disabled= {!(isValid.isValidEmail && isValid.isValidPassword && isValid.isValidNickname && message.formCheckPasswordMessage === "서로 다른 비밀번호 입니다!")}
onClick={onSubmit}
>
회원 가입
</Submit>
</Form>
<SignupContainer>
<ToastContainer/>
<ToggleDiv>
<ToggleHandler/>
</ToggleDiv>
<SignupHeader>FiveGuys IDE</SignupHeader>
<Form>
<Input
placeholder='이메일'
type='email'
onChange={isValidEmail}
color={isValid.isValidEmail}
/>
<InputMessage
color={isValid.isValidEmail}
>
{message.formEmailMessage}
</InputMessage>
<Input
placeholder='닉네임'
type='nickname'
onChange={isValidNickname}
color={isValid.isValidNickname}
/>
<InputMessage
color={isValid.isValidNickname}
>
{message.formNicknameMessage}
</InputMessage>
<Input
placeholder='비밀번호'
type='password'
onChange={isValidPassword}
color={isValid.isValidPassword}
/>
<InputMessage
color={isValid.isValidPassword}
>
{message.formPasswordMessage}
</InputMessage>
<Input
placeholder='비밀번호 확인'
type='checkpassword'
onChange={CheckPassword}
color={isValid.isValidCheckPassword}
/>
<InputMessage
color={isValid.isValidCheckPassword}
>
{message.formCheckPasswordMessage}
</InputMessage>
<Submit
onClick={onSubmit}
disabled= {!(isValid.isValidEmail && isValid.isValidPassword && isValid.isValidNickname || message.formCheckPasswordMessage === "서로 다른 비밀번호 입니다!")}
>
회원 가입
</Submit>
</Form>
</SignupContainer>
);
};

Expand Down Expand Up @@ -232,4 +255,3 @@ const Submit = styled.button`
font-size: 1.25rem;
cursor: pointer;
`

39 changes: 39 additions & 0 deletions five-guys-project/src/utils/Toast.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

interface Props {
text: string;
type: string;
}

const autoClose = 1000;

export const notify = ({ type, text }: Props) => {
switch (type) {
case "Success":
toast.success(text);
break;
case "Error":
toast.error(text);
break;
}
};

const Toast = () => {
return (
<ToastContainer
position="top-center"
autoClose={autoClose}
hideProgressBar
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnFocusLoss={false}
draggable
pauseOnHover={false}
theme="light"
/>
);
};

export default Toast;