[Design]회원가입 모달창 디자인 변화

닫기 버튼의 모서리를 5px만큼 둥글게 적용 버튼 호버 시 밝게 적용 가이드 텍스트 밝고 크게 적용 Issues #15
codestates-seb · Sep 17, 2023 · e249471 · e249471
1 parent d475330
commit e249471
Show file tree

Hide file tree

Showing 8 changed files with 129 additions and 71 deletions.
diff --git 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
@@ -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
@@ -4,31 +4,31 @@ import { useGetMemberInfo } from '../../hooks/useGetMemberInfo.ts';
 
 const MemberInfoModal: React.FC<MemberInfoModalProps> = ({ 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 (
-        <ModalBackground>
-            <ModalContainer>
-                <CloseButton onClick={onClose}>&times;</CloseButton>
-                <Title>{titleText}</Title>
-                {memberInfo ? (
-                    <div>
-                        <p>{nameText}{memberInfo.name}</p>
-                        <p>{emailText}{memberInfo.email}</p>
-                        <p>{createdAtText}{memberInfo.createdAt}</p>
-                    </div>
-                ) : (
-                    <div>Data not available</div>
-                )}
-            </ModalContainer>
-        </ModalBackground>
-    );
+  return (
+      <ModalBackground>
+          <ModalContainer>
+              <CloseButton onClick={onClose}>&times;</CloseButton>
+              <Title>{titleText}</Title>
+              {memberInfo ? (
+                  <div>
+                      <Content>{nameText}{memberInfo.name}</Content>
+                      <Content>{emailText}{memberInfo.email}</Content>
+                      <Content>{createdAtText}{memberInfo.createdAt}</Content>
+                  </div>
+              ) : (
+                  <Content>Data not available</Content>
+              )}
+          </ModalContainer>
+      </ModalBackground>
+  );
 };
 
 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
@@ -10,7 +10,8 @@ const strings = {
     codeLabelText: "인증코드",
     nextStepText: "인증 후 다음단계",
     codeHintText: "이메일로 전송된 코드를 입력하세요",
-    termsText: "개인정보 처리방침 및 서비스 이용약관에 동의합니다"
+    termsText: "개인정보 처리방침 및 서비스 이용약관에 동의합니다",
+    agreementError: "동의하지 않으면 진행할 수 없습니다"
 };
 
 // 이메일 인증 모달 컴포넌트
@@ -21,19 +22,23 @@ const EmailVerificationModal: React.FC<EmailVerificationModalProps> = ({ onClose
     const [showAgreementError, setShowAgreementError] = useState(false);
     const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
+    //이메일 입력
     const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         setEmail(event.target.value);
     };
 
+    //인증코드 입력
     const handleVerificationCodeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         setVerificationCode(event.target.value);
     };
 
+    //동의 체크박스
     const handleAgreementChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         setHasAgreed(event.target.checked);
         setShowAgreementError(false); // 알림을 숨깁니다.
     };
 
+    //인증후 다음단계 버튼 클릭 시 요청
     const handleNextStepClick = async () => {
         if (!hasAgreed) {
             setShowAgreementError(true);
@@ -87,7 +92,7 @@ const EmailVerificationModal: React.FC<EmailVerificationModalProps> = ({ onClose
                     <label htmlFor="terms">{strings.termsText}</label>
                 </TermsCheckbox>
 
-                {showAgreementError && <ErrorMessage>동의하지 않으면 진행할 수 없습니다</ErrorMessage>}
+                {showAgreementError && <ErrorMessage>{strings.agreementError}</ErrorMessage>}
                 <SignupButton onClick={handleNextStepClick}>
                     {strings.nextStepText}
                 </SignupButton>
@@ -97,7 +102,7 @@ const EmailVerificationModal: React.FC<EmailVerificationModalProps> = ({ 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
@@ -19,15 +19,18 @@ const EmailSignupModal: React.FC<EmailSignupModalProps> = ({ onClose, onRequestV
   const [isInvalidEmail, setIsInvalidEmail] = useState(false);  
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
+  // 이메일 입력값 변경 핸들러
   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);
@@ -40,11 +43,12 @@ const EmailSignupModal: React.FC<EmailSignupModalProps> = ({ 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<EmailSignupModalProps> = ({ 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 (
     <ModalBackground>
       <ModalContainer>
-        <CloseButton onClick={onClose}>&times;</CloseButton>
+        <CloseButton onClick={onClose}>×</CloseButton>
         <Title>{strings.titleText}</Title>
         <Label>{strings.emailLabelText}</Label>
         <Input type="email" placeholder="이메일을 입력하세요" value={email} onChange={handleEmailChange} />
-        {isInvalidEmail && <ErrorMessage>{strings.invalidEmailText}</ErrorMessage>}
+          {isInvalidEmail && <ErrorMessage>{strings.invalidEmailText}</ErrorMessage>}
         <SignupButton onClick={handleVerificationRequest}>
           {strings.requestVerificationText}
         </SignupButton>
-        {errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
+      {errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
       </ModalContainer>
     </ModalBackground>
-  );
-};
-
+    );
+  };
+    
 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;
-`;
diff --git 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;  // 텍스트 중앙 정렬
 `;