Merge pull request #84 from Neogasogaeseo/feat/#83

회원가입 정규식 적용 및 스타일 수정
Neogasogaeseo · Jan 16, 2022 · fa6d26b · fa6d26b
2 parents 0669176 + c2db56e
commit fa6d26b
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 29 deletions.
diff --git a/src/assets/icons/ic_profile.svg b/src/assets/icons/ic_profile.svg
diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts
@@ -18,4 +18,5 @@ export { default as icPerson } from './ic_person.svg';
 export { default as icPlusMini } from './ic_plus_mini.svg';
 export { default as icCoralCheck } from './ic_coral_check.svg';
 export { default as icGrayCheck } from './ic_gray_check.svg';
+export { default as icProfile } from './ic_profile.svg';
 export { ReactComponent as IcArrowRight } from './ic_arrow_right.svg';
diff --git a/src/presentation/components/JoinForm/index.tsx b/src/presentation/components/JoinForm/index.tsx
@@ -1,25 +1,38 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   StJoinForm,
   StDetailWrapper,
   StNoticeWrapper,
   StInputWrapper,
   StButton,
   StProfileImg,
-  StButtonGray,
   StPhotoUploadImage,
 } from './style';
 import CommonInput from '@components/common/CommonInput';
 import FileUpload from '@components/common/FileUpload';
-import { imgEmptyJoinProfile } from '@assets/images';
+import { icProfile } from '@assets/icons';
 import { icEmail } from '@assets/icons';
 
 function JoinForm() {
-  const [isConditionMet, setIsConditionMet] = useState(false);
+  const [isConditionMet, setIsConditionMet] = useState({
+    id: false,
+    name: false,
+  });
   const [image, setImage] = useState<File | null>(null);
   const [inputId, setInputId] = useState('');
   const [inputName, setInputName] = useState('');
+
+  useEffect(()=>{
+    const idCheck=/^[a-z|0-9|.|_]+$/;
+    const idStartCheck = /^[^.|^_]/;
+    if(idCheck.test(inputId) && idStartCheck.test(inputId)){
+      setIsConditionMet({...isConditionMet, id:true});
+    } else {
+      setIsConditionMet({ ...isConditionMet, id: false });
+    }
+  },[inputId])
+
   const onChangeId = (value: string) => {
     setInputId(value);
   };
@@ -37,35 +50,33 @@ function JoinForm() {
       </StNoticeWrapper>
       <StDetailWrapper>너가소개서에서 사용되는 이름이에요!</StDetailWrapper>
       <StProfileImg>
-        <FileUpload width="170px" height="170px" setFile={setImage} borderRadius="80px">
-          <StPhotoUploadImage src={imgEmptyJoinProfile} />
+        <FileUpload width="118px" height="118px" setFile={setImage} borderRadius="80px">
+          <StPhotoUploadImage src={icProfile} />
         </FileUpload>
       </StProfileImg>
       <StInputWrapper>
         <p>아이디 입력</p>
         <CommonInput
           width="350px"
-          isConditionMet={isConditionMet}
-          errorMsg="*중복된 아이디입니다."
-          placeholder="neososeo"
+          isConditionMet={isConditionMet.id}
+          errorMsg="*영문, 숫자, 특수문자(._) 4~15자 이내"
+          placeholder="neososeo_team"
           onChange={onChangeId}
+          maxLength={20}
           img={icEmail}
         />
       </StInputWrapper>
       <StInputWrapper>
         <p>사용자 이름 입력</p>
         <CommonInput
           width="350px"
-          isConditionMet={isConditionMet}
+          isConditionMet={isConditionMet.name}
           placeholder="너소서"
           onChange={onChangeName}
         />
       </StInputWrapper>
-      {inputId && inputName ? (
-        <StButton onClick={onClickSubmitUserInfo}>완료</StButton>
-      ) : (
-        <StButtonGray>완료</StButtonGray>
-      )}
+        <StButton type="submit" 
+        onClick={onClickSubmitUserInfo} disabled={ inputId==='' || inputName==='' || !isConditionMet.id}>완료</StButton>
     </StJoinForm>
   );
 }

diff --git a/src/presentation/components/JoinForm/style.ts b/src/presentation/components/JoinForm/style.ts
@@ -38,30 +38,20 @@ export const StButton = styled.button`
   margin-top: 70px;
   width: 350px;
   height: 58px;
-  background-color: ${COLOR.CORAL_MAIN};
+  background-color: ${COLOR.GRAY_3};
   color: white;
   border-radius: 18px;
   font-size: 16px;
+  :not(:disabled) {
+    background-color: ${COLOR.CORAL_MAIN};
+  }
 `;
 
 export const StProfileImg = styled.div`
   display: flex;
   justify-content: center;
 `;
 
-export const StButtonGray = styled.button`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: 70px;
-  width: 350px;
-  height: 58px;
-  background-color: ${COLOR.GRAY_5};
-  color: white;
-  border-radius: 18px;
-  font-size: 16px;
-`;
-
 export const StPhotoUploadImage = styled.img`
   display: flex;
   justify-content: center;