Skip to content
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

[FE]회원가입 기능 구현 #61

Merged
merged 8 commits into from
Sep 6, 2023
Merged

[FE]회원가입 기능 구현 #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
400c5ce
[Feat]이메일 유효성 검사 추가
Sep 6, 2023
dd05133
[Feat]OAuth로그인 모달 페이지
Sep 6, 2023
dc156cc
[Fix]뒤로가기 기능 롤백
Sep 6, 2023
9af3881
[Feat]이메일 props에 저장
Sep 6, 2023
4911901
[Feat] 약관 동의 체크리스트 구현
Sep 6, 2023
ba9bd1f
[Feat]비밀번호설정 구현
Sep 6, 2023
1c1b1db
[Feat]비밀번호 확인 및 환영 모달 구현
Sep 6, 2023
b7d1754
Merge branch 'dev-client' into dev-client#8/signuplogin
sirloinbh Sep 6, 2023
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
27 changes: 19 additions & 8 deletions client/src/components/Logins/OAuthLogin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// client/src/components/Logins/OAuthLogin.tsx
import styled from 'styled-components';
import googleLogo from '../../asset/images/GoogleLogo.svg';
import kakaoLogo from '../../asset/images/KakaoLogo.svg';
Expand All @@ -16,7 +17,7 @@ const OAuthLoginModal: React.FC<LoginModalProps> = ({ onClose, onEmailLoginClick
// 구글 로그인 핸들러
const handleGoogleLogin = async () => {
try {
const response = await axios.post('http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/oauth2/authorization/google');
const response = await axios.post('/oauth2/authorization/google');
if (response.status === 200) {
console.log("Successfully logged in with Google!");
onClose();
Expand All @@ -31,7 +32,7 @@ const OAuthLoginModal: React.FC<LoginModalProps> = ({ onClose, onEmailLoginClick
// 카카오 로그인 핸들러
const handleKakaoLogin = async () => {
try {
const response = await axios.post('http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/oauth2/authorization/kakao');
const response = await axios.post('/oauth2/authorization/kakao');
if (response.status === 200) {
console.log("Successfully logged in with Kakao!");
onClose();
Expand Down Expand Up @@ -84,12 +85,14 @@ const OrText = styled.span`
color: grey;
`;

//제목 "로그인"
const Title = styled.h2`
margin-bottom: 20px;
font-size: 1.6rem;
font-weight: 400;
`;

//배경 어둡게
const ModalBackground = styled.div`
display: flex;
justify-content: center;
Expand All @@ -102,6 +105,7 @@ const ModalBackground = styled.div`
background-color: rgba(0, 0, 0, 0.5);
`;

//모달 창 CSS
const ModalContainer = styled.div`
position: relative;
background-color: white;
Expand All @@ -113,6 +117,7 @@ const ModalContainer = styled.div`
align-items: center;
`;

//닫기 버튼
const CloseButton = styled.button`
position: absolute;
top: 10px;
Expand All @@ -123,6 +128,7 @@ const CloseButton = styled.button`
cursor: pointer;
`;

//OAuth 버튼
const OAuthButton = styled.button`
margin: 10px 0;
padding: 10px 20px;
Expand All @@ -140,13 +146,22 @@ const GoogleButton = styled(OAuthButton)``;

const KakaoButton = styled(OAuthButton)``;

//구글과 카카오 로고 이미지 크기
const LogoImage = styled.img`
margin-right: 30px;
width: 60px;
height: auto;
`;
//


const EmailButtonsContainer = styled.div`
display: flex;
justify-content: space-around;
width: 100%;
margin: 5px 0;
`;

//이메일로 회원가입하기, 이메일로 로그인하기 버튼
const EmailButton = styled.button`
margin: 5px 0;
padding: 10px 20px;
Expand All @@ -156,8 +171,4 @@ const EmailButton = styled.button`
cursor: pointer;
`;

const LogoImage = styled.img`
margin-right: 30px;
width: 60px;
height: auto;
`;

34 changes: 31 additions & 3 deletions client/src/components/Signups/EmailCertify.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// /client/src/components/Signups/EmailCertify.tsx
import axios from 'axios';
import React, { useState } from 'react';
import styled from 'styled-components';
Expand All @@ -13,11 +14,15 @@ const strings = {
};

// 이메일 인증 모달 컴포넌트
const EmailVerificationModal: React.FC<EmailVerificationModalProps> = ({ onClose, onNextStep }) => {
const EmailVerificationModal: React.FC<EmailVerificationModalProps> = ({ onClose, onNextStep, initialEmail }) => {
// 이메일 및 인증코드에 대한 상태를 선언합니다.
const [email, setEmail] = useState('[email protected]');
const [email, setEmail] = useState(initialEmail);
const [verificationCode, setVerificationCode] = useState('');

// 동의 상태와 알림 상태를 선언합니다.
const [hasAgreed, setHasAgreed] = useState(false);
const [showAgreementError, setShowAgreementError] = useState(false);

// 이메일 입력값을 처리하는 함수
const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setEmail(event.target.value);
Expand All @@ -28,8 +33,20 @@ const EmailVerificationModal: React.FC<EmailVerificationModalProps> = ({ onClose
setVerificationCode(event.target.value);
};

// 체크박스의 변경을 감지하는 핸들러
const handleAgreementChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setHasAgreed(event.target.checked);
setShowAgreementError(false); // 알림을 숨깁니다.
};

// 다음 단계 버튼 클릭시 이메일 인증을 처리하는 함수
const handleNextStepClick = async () => {
// 동의 확인
if (!hasAgreed) {
setShowAgreementError(true); // 알림을 표시합니다.
return;
}

try {
const response = await axios.post('http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/email/confirm', { email, code: verificationCode });
if (response.status === 200) {
Expand All @@ -53,9 +70,11 @@ const EmailVerificationModal: React.FC<EmailVerificationModalProps> = ({ onClose
<Input type="text" placeholder={strings.codeHintText} value={verificationCode} onChange={handleVerificationCodeChange} />
<HintText>{strings.codeHintText}</HintText>
<TermsCheckbox>
<input type="checkbox" id="terms" />
<input type="checkbox" id="terms" onChange={handleAgreementChange} />
<label htmlFor="terms">{strings.termsText}</label>
</TermsCheckbox>

{showAgreementError && <ErrorMessage>동의하지 않으면 진행할 수 없습니다</ErrorMessage>}
<SignupButton onClick={handleNextStepClick}>
{strings.nextStepText}
</SignupButton>
Expand All @@ -70,6 +89,7 @@ export default EmailVerificationModal;
type EmailVerificationModalProps = {
onClose: () => void;
onNextStep: () => void;
initialEmail: string; // 추가된 부분
};

// 모달의 배경 스타일
Expand Down Expand Up @@ -162,3 +182,11 @@ const TermsCheckbox = styled.div`
font-size: 0.9rem;
}
`;

// 오류 메시지 스타일을 추가합니다.
const ErrorMessage = styled.p`
color: red;
margin-top: 5px;
margin-bottom: 10px;
font-size: 0.8rem;
`;
40 changes: 35 additions & 5 deletions client/src/components/Signups/EmailSignup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// client/src/components/Signups/EmailSignup.tsx
import axios from 'axios';
import styled from 'styled-components';
import React, { useState } from 'react';
Expand All @@ -6,25 +7,37 @@ import React, { useState } from 'react';
const strings = {
titleText: "이메일로 회원가입",
emailLabelText: "이메일",
requestVerificationText: "이메일 인증요청"
requestVerificationText: "이메일 인증요청",
invalidEmailText: "유효하지 않은 이메일입니다"
};

const EmailSignupModal: React.FC<EmailSignupModalProps> = ({ onClose, onRequestVerification }) => {
// 사용자가 입력한 이메일 상태
const [email, setEmail] = useState('');
const [isInvalidEmail, setIsInvalidEmail] = useState(false); // 이메일 유효성 상태

// 이메일 입력 핸들러
const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setEmail(event.target.value);
setIsInvalidEmail(false);
};

//이메일 유효성 검사
const validateEmail = (email: string) => {
return email.includes('@') && email.includes('.com');
};

// 이메일 인증 요청 핸들러
const handleVerificationRequest = async () => {
if (!validateEmail(email)) {
setIsInvalidEmail(true);
return;
}

try {
// 백엔드 배포 주소로 입력받은 이메일 전송
const response = await axios.post('http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/email/send', { email });
if (response.status === 200) {
onRequestVerification();
onRequestVerification(email);
} else {
console.error('Error sending verification email');
}
Expand All @@ -40,6 +53,7 @@ const EmailSignupModal: React.FC<EmailSignupModalProps> = ({ onClose, onRequestV
<Title>{strings.titleText}</Title>
<Label>{strings.emailLabelText}</Label>
<Input type="email" placeholder="이메일을 입력하세요" value={email} onChange={handleEmailChange} />
{isInvalidEmail && <ErrorMessage>{strings.invalidEmailText}</ErrorMessage>}
<SignupButton onClick={handleVerificationRequest}>
{strings.requestVerificationText}
</SignupButton>
Expand All @@ -53,10 +67,11 @@ export default EmailSignupModal;
// 프롭 타입 정의
type EmailSignupModalProps = {
onClose: () => void;
onRequestVerification: () => void;
onRequestVerification: (email: string) => void;
};

// 스타일 컴포넌트 정의

//모달 배경
const ModalBackground = styled.div`
display: flex;
justify-content: center;
Expand All @@ -69,6 +84,7 @@ const ModalBackground = styled.div`
background-color: rgba(0, 0, 0, 0.5);
`;

//모달 컨테이너
const ModalContainer = styled.div`
position: relative;
background-color: white;
Expand All @@ -80,6 +96,8 @@ const ModalContainer = styled.div`
align-items: center;
`;


//닫기 버튼
const CloseButton = styled.button`
position: absolute;
top: 10px;
Expand All @@ -90,16 +108,19 @@ const CloseButton = styled.button`
cursor: pointer;
`;

//제목 :이메일로 회원가입
const Title = styled.h2`
margin-bottom: 20px;
font-size: 1.6rem;
`;

//라벨 : 이메일
const Label = styled.label`
align-self: flex-start;
margin-top: 10px;
`;

//이메일 입력창
const Input = styled.input`
width: 100%;
padding: 10px;
Expand All @@ -108,6 +129,7 @@ const Input = styled.input`
border-radius: 5px;
`;

//이메일 인증요청 버튼
const SignupButton = styled.button`
width: 100%;
padding: 10px;
Expand All @@ -118,3 +140,11 @@ const SignupButton = styled.button`
border-radius: 5px;
cursor: pointer;
`;

// 오류 메시지 스타일
const ErrorMessage = styled.p`
color: red;
margin-top: 5px;
margin-bottom: 10px;
font-size: 0.8rem;
`;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

end of line 지켜주세요~!

Loading