diff --git a/client/src/components/Logins/EmailLogin.tsx b/client/src/components/Logins/EmailLogin.tsx index 549b24cc..89b1ac52 100644 --- a/client/src/components/Logins/EmailLogin.tsx +++ b/client/src/components/Logins/EmailLogin.tsx @@ -118,6 +118,7 @@ const CloseButton = styled.button` border: 1px solid lightgray; font-size: 1.5rem; cursor: pointer; + border-radius: 5px; `; const Title = styled.h2` diff --git a/client/src/components/Logins/OAuthLogin.tsx b/client/src/components/Logins/OAuthLogin.tsx index 96fb0ea0..82dee16b 100644 --- a/client/src/components/Logins/OAuthLogin.tsx +++ b/client/src/components/Logins/OAuthLogin.tsx @@ -92,6 +92,7 @@ const CloseButton = styled.button` border: 1px solid lightgray; font-size: 1.5rem; cursor: pointer; + border-radius: 5px; `; //제목 스타일 diff --git a/client/src/components/Profile/memberInfoModal.tsx b/client/src/components/Profile/memberInfoModal.tsx index a69fd4e9..cdab12e5 100644 --- a/client/src/components/Profile/memberInfoModal.tsx +++ b/client/src/components/Profile/memberInfoModal.tsx @@ -4,31 +4,31 @@ import { useGetMemberInfo } from '../../hooks/useGetMemberInfo.ts'; const MemberInfoModal: React.FC = ({ onClose }) => { - // memberId 값을 useGetMemberInfo 훅에 전달하여 회원 정보를 가져옵니다. - const { data: memberInfo } = useGetMemberInfo(); + // memberId 값을 useGetMemberInfo 훅에 전달하여 회원 정보를 가져옵니다. + const { data: memberInfo } = useGetMemberInfo(); - const titleText = "회원정보"; - const nameText = "이름: "; - const emailText = "이메일: "; - const createdAtText = "회원 가입 일시: "; + const titleText = "회원정보"; + const nameText = "이름: "; + const emailText = "이메일: "; + const createdAtText = "회원 가입 일시: "; - return ( - - - × - {titleText} - {memberInfo ? ( -
-

{nameText}{memberInfo.name}

-

{emailText}{memberInfo.email}

-

{createdAtText}{memberInfo.createdAt}

-
- ) : ( -
Data not available
- )} - - - ); + return ( + + + × + {titleText} + {memberInfo ? ( +
+ {nameText}{memberInfo.name} + {emailText}{memberInfo.email} + {createdAtText}{memberInfo.createdAt} +
+ ) : ( + Data not available + )} + + + ); }; interface MemberInfoModalProps { @@ -80,4 +80,12 @@ const CloseButton = styled.button` cursor: pointer; `; +const Content = styled.p` + margin: 15px 0; // 간격 조정 + font-size: 1.1rem; // 폰트 크기 증가 + line-height: 1.5; + color: #555; // 색상 변경 + text-align: center; // 텍스트 중앙 정렬 +`; + export default MemberInfoModal; diff --git a/client/src/components/Signups/EmailCertify.tsx b/client/src/components/Signups/EmailCertify.tsx index d2a7f218..6219ee45 100644 --- a/client/src/components/Signups/EmailCertify.tsx +++ b/client/src/components/Signups/EmailCertify.tsx @@ -10,7 +10,8 @@ const strings = { codeLabelText: "인증코드", nextStepText: "인증 후 다음단계", codeHintText: "이메일로 전송된 코드를 입력하세요", - termsText: "개인정보 처리방침 및 서비스 이용약관에 동의합니다" + termsText: "개인정보 처리방침 및 서비스 이용약관에 동의합니다", + agreementError: "동의하지 않으면 진행할 수 없습니다" }; // 이메일 인증 모달 컴포넌트 @@ -21,19 +22,23 @@ const EmailVerificationModal: React.FC = ({ onClose const [showAgreementError, setShowAgreementError] = useState(false); const [errorMessage, setErrorMessage] = useState(null); + //이메일 입력 const handleEmailChange = (event: React.ChangeEvent) => { setEmail(event.target.value); }; + //인증코드 입력 const handleVerificationCodeChange = (event: React.ChangeEvent) => { setVerificationCode(event.target.value); }; + //동의 체크박스 const handleAgreementChange = (event: React.ChangeEvent) => { setHasAgreed(event.target.checked); setShowAgreementError(false); // 알림을 숨깁니다. }; + //인증후 다음단계 버튼 클릭 시 요청 const handleNextStepClick = async () => { if (!hasAgreed) { setShowAgreementError(true); @@ -87,7 +92,7 @@ const EmailVerificationModal: React.FC = ({ onClose - {showAgreementError && 동의하지 않으면 진행할 수 없습니다} + {showAgreementError && {strings.agreementError}} {strings.nextStepText} @@ -97,7 +102,7 @@ const EmailVerificationModal: React.FC = ({ onClose ); }; - export default EmailVerificationModal; +export default EmailVerificationModal; // 이메일 인증 모달의 Props 타입 @@ -139,6 +144,7 @@ const CloseButton = styled.button` top: 10px; right: 10px; background: #FFFFFF; + border-radius: 5px; // 모서리를 5px만큼 둥글게 함 border: 1px solid lightgray; font-size: 1.5rem; cursor: pointer; @@ -175,11 +181,16 @@ const SignupButton = styled.button` border: none; border-radius: 5px; cursor: pointer; + + //호버 시 밝게 + &:hover { + background-color: rgba(47, 79, 79, 0.8); + } `; // 힌트 텍스트의 스타일 const HintText = styled.p` - color: red; + color: #e22926; font-size: 0.8rem; margin-top: 5px; `; @@ -201,7 +212,7 @@ const TermsCheckbox = styled.div` // 오류 메시지 스타일을 추가합니다. const ErrorMessage = styled.p` - color: red; + color: #e22926; margin-top: 5px; margin-bottom: 10px; font-size: 0.8rem; diff --git a/client/src/components/Signups/EmailSignup.tsx b/client/src/components/Signups/EmailSignup.tsx index ed986ea0..36a4b88a 100644 --- a/client/src/components/Signups/EmailSignup.tsx +++ b/client/src/components/Signups/EmailSignup.tsx @@ -19,15 +19,18 @@ const EmailSignupModal: React.FC = ({ onClose, onRequestV const [isInvalidEmail, setIsInvalidEmail] = useState(false); const [errorMessage, setErrorMessage] = useState(null); + // 이메일 입력값 변경 핸들러 const handleEmailChange = (event: React.ChangeEvent) => { setEmail(event.target.value); setIsInvalidEmail(false); }; + // 이메일 유효성 검사 함수 const validateEmail = (email: string) => { return email.includes('@') && email.includes('.com'); }; + // 이메일 인증 요청 핸들러 const handleVerificationRequest = async () => { if (!validateEmail(email)) { setIsInvalidEmail(true); @@ -40,11 +43,12 @@ const EmailSignupModal: React.FC = ({ onClose, onRequestV { email }, { validateStatus: function (status) { - return status >= 200 && status < 600; // Reject only if status code is greater than or equal to 600 + return status >= 200 && status < 600; // 상태 코드가 600 이상인 경우만 거부 } } ); + // 응답 상태에 따른 처리 if (response.status === 200) { dispatch(setEmailForVerification(email)); onRequestVerification(email); @@ -53,46 +57,45 @@ const EmailSignupModal: React.FC = ({ onClose, onRequestV } else if (response.status === 500) { setErrorMessage(JSON.stringify(response.data)); } else { - console.error('Error sending verification email'); + console.error('이메일 인증 발송 중 오류 발생'); } } catch (error) { if (axios.isAxiosError(error)) { - console.error('Error sending verification email:', error); + console.error('이메일 인증 발송 중 오류:', error); if (error.response) { - console.error('Detailed server response:', error.response.data); + console.error('상세한 서버 응답:', error.response.data); } } else { - console.error('An unknown error occurred:', error); + console.error('알 수 없는 오류 발생:', error); } } }; - return ( - × + × {strings.titleText} - {isInvalidEmail && {strings.invalidEmailText}} + {isInvalidEmail && {strings.invalidEmailText}} {strings.requestVerificationText} - {errorMessage && {errorMessage}} + {errorMessage && {errorMessage}} - ); -}; - + ); + }; + export default EmailSignupModal; - + +//변수 타입 정의 type EmailSignupModalProps = { - onClose: () => void; - onRequestVerification: (email: string) => void; +onClose: () => void; +onRequestVerification: (email: string) => void; }; - //모달 배경 const ModalBackground = styled.div` display: flex; @@ -129,12 +132,15 @@ const CloseButton = styled.button` border: 1px solid lightgray; font-size: 1.5rem; cursor: pointer; + border-radius: 5px; `; //제목 :이메일로 회원가입 const Title = styled.h2` margin-bottom: 20px; font-size: 1.6rem; + font-weight:400; + `; //라벨 : 이메일 @@ -152,6 +158,14 @@ const Input = styled.input` border-radius: 5px; `; +// 오류 메시지 스타일 +const ErrorMessage = styled.p` + color: #e22926; + margin-top: 5px; + margin-bottom: 10px; + font-size: 0.8rem; +`; + //이메일 인증요청 버튼 const SignupButton = styled.button` width: 100%; @@ -162,12 +176,10 @@ const SignupButton = styled.button` border: none; border-radius: 5px; cursor: pointer; + + //호버 시 밝게 + &:hover { + background-color: rgba(47, 79, 79, 0.8); + } `; -// 오류 메시지 스타일 -const ErrorMessage = styled.p` - color: red; - margin-top: 5px; - margin-bottom: 10px; - font-size: 0.8rem; -`; \ No newline at end of file diff --git a/client/src/components/Signups/Guide.tsx b/client/src/components/Signups/Guide.tsx index fc61d50e..4ce9c5fc 100644 --- a/client/src/components/Signups/Guide.tsx +++ b/client/src/components/Signups/Guide.tsx @@ -4,7 +4,7 @@ import styled from 'styled-components'; const STRINGS = { GUIDE_TITLE: "StockHolm 가이드", LOGIN_GUIDE: "로그인을 하면 다양한 기능을 활용할 수 있습니다.", - CASH_GUIDE: "프로필 버튼 - 현금 탭을 가면 현금을 충전할 수 있습니다." + CASH_GUIDE: "프로필 버튼 - 현금 탭을 으로 이동하면 현금을 충전할 수 있습니다." }; const GuideModal: React.FC<{ onClose: () => void }> = ({ onClose }) => { @@ -62,10 +62,13 @@ const CloseButton = styled.button` border: 1px solid lightgray; font-size: 1.5rem; cursor: pointer; + border-radius: 5px; `; const Content = styled.p` - margin: 10px 0; - font-size: 1rem; - line-height: 1.4; + margin: 15px 0; // 간격 조정 + font-size: 1.1rem; // 폰트 크기 증가 + line-height: 1.5; + color: #555; // 색상 변경 + text-align: center; // 텍스트 중앙 정렬 `; diff --git a/client/src/components/Signups/Password.tsx b/client/src/components/Signups/Password.tsx index 25ec5b01..96dad1ed 100644 --- a/client/src/components/Signups/Password.tsx +++ b/client/src/components/Signups/Password.tsx @@ -2,7 +2,6 @@ import axios from 'axios'; import React, { useState } from 'react'; import styled from 'styled-components'; - import { useDispatch } from 'react-redux'; import { setMemberInfo } from '../../reducer/member/memberInfoSlice'; @@ -17,34 +16,41 @@ const strings = { }; const PasswordSettingModal: React.FC = ({ onClose, onNext, email }) => { - const dispatch = useDispatch(); + const [password, setPassword] = useState(''); const [confirmPassword, setConfirmPassword] = useState(''); const [name, setName] = useState(''); const [passwordError, setPasswordError] = useState(''); const [confirmPasswordError, setConfirmPasswordError] = useState(''); + const dispatch = useDispatch(); + //비밀번호 입력창 const handlePasswordChange = (e: React.ChangeEvent) => { setPassword(e.target.value); }; + //비밀번호 확인 입력창 const handleConfirmPasswordChange = (e: React.ChangeEvent) => { setConfirmPassword(e.target.value); }; + //이름 입력창 const handleNameChange = (e: React.ChangeEvent) => { setName(e.target.value); }; + //비밀번호 유효성 검사 const isValidPassword = (password: string) => { const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&#])[A-Za-z\d@$!%*?&#]{8,16}$/; return passwordRegex.test(password); }; - // 일반적인 오류 메시지 상태 추가 - const [generalError, setGeneralError] = useState(''); + // 일반적인 오류 메시지 상태 추가 + const [generalError, setGeneralError] = useState(''); const handleConfirmClick = async () => { + + //비밀번호 유효성 에러 메시지 if (!isValidPassword(password)) { setPasswordError(strings.passwordError); return; @@ -52,6 +58,7 @@ const PasswordSettingModal: React.FC = ({ onClose, on setPasswordError(''); } + //비밀번호 확인 유효성 에러 메시지 if (password !== confirmPassword) { setConfirmPasswordError(strings.passwordMismatch); return; @@ -117,7 +124,7 @@ const PasswordSettingModal: React.FC = ({ onClose, on - {generalError && {generalError}} {/* 일반 오류 메시지 표시 */} + {generalError && {generalError}} {strings.confirmButtonText} @@ -125,12 +132,13 @@ const PasswordSettingModal: React.FC = ({ onClose, on ); }; +export default PasswordSettingModal; + interface PasswordSettingModalProps { onClose: () => void; onNext: () => void; email: string; } -export default PasswordSettingModal; // 모달 배경 스타일 const ModalBackground = styled.div` @@ -171,6 +179,7 @@ const CloseButton = styled.button` top: 10px; right: 10px; background: #FFFFFF; + border-radius:5px; border: 1px solid lightgray; font-size: 1.5rem; cursor: pointer; @@ -191,6 +200,14 @@ const Input = styled.input` border-radius: 5px; `; +//에러 버튼 스타일 +const ErrorMessage = styled.p` + color: #e22926; + margin-top: 5px; + margin-bottom: 10px; + font-size: 0.8rem; +`; + // 확인 버튼 스타일 const ConfirmButton = styled.button` width: 100%; @@ -201,11 +218,10 @@ const ConfirmButton = styled.button` border: none; border-radius: 5px; cursor: pointer; + + //호버 시 밝게 + &:hover { + background-color: rgba(47, 79, 79, 0.8); + } `; -const ErrorMessage = styled.p` - color: red; - margin-top: 5px; - margin-bottom: 10px; - font-size: 0.8rem; -`; \ No newline at end of file diff --git a/client/src/components/Signups/Welcome.tsx b/client/src/components/Signups/Welcome.tsx index a20ca6f2..e6fbb265 100644 --- a/client/src/components/Signups/Welcome.tsx +++ b/client/src/components/Signups/Welcome.tsx @@ -9,7 +9,8 @@ const START_TEXT = "시작하기"; const JOINED_DATE_TEXT = "가입일: "; const Welcome: React.FC = ({ onClose }) => { - // Access the memberInfo state from the Redux store + + //스토어에서 유저정보 불러오기 const memberInfo = useSelector((state: RootState) => state.memberInfo.memberInfo); return ( @@ -30,13 +31,13 @@ interface WelcomeProps { onClose: () => void; } -// State type definition +// 유저 정보 변수 타입 interface MemberInfo { email: string; name: string; password: string; confirmPassword: string; - createdAt: string; // Assuming createdAt is a string in the format "YYYY-MM-DD" or similar + createdAt: string; } interface RootState { @@ -80,7 +81,7 @@ const Subtitle = styled.h3` margin-bottom: 20px; font-size: 1.2rem; font-weight: 300; - color: gray; + color: slategray; `; const Logo = styled.img` @@ -99,4 +100,9 @@ const ConfirmButton = styled.button` border: none; border-radius: 5px; cursor: pointer; + + //호버 시 밝게 + &:hover { + background-color: rgba(47, 79, 79, 0.8); + } `;