Skip to content

Commit

Permalink
[Feat] 브랜치 병합
Browse files Browse the repository at this point in the history 
- 로그인/로그아웃 관련 기능 갱신으로 인한 브랜치 병합

Issues #14
  • Loading branch information
@novice1993
novice1993 committed Sep 6, 2023
2 parents b45d674 + c24e9c9 commit 8ce617f
Show file tree
Hide file tree
Showing 6 changed files with 232 additions and 30 deletions.
27 changes: 19 additions & 8 deletions client/src/components/Logins/OAuthLogin.tsx
View file
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
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
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;
`;
Loading

0 comments on commit 8ce617f

Please sign in to comment.