css

 

1. CustomTextField.js

       <CustomTextField type="text" name="password" placeholder="Contract code"/>

 

import PropTypes from 'prop-types';
import './CustomTextField.css';

CustomTextField.propTypes = {
  type: PropTypes.string,
  name: PropTypes.string,
  placeholder: PropTypes.string,
  value: PropTypes.string,
};

export default function CustomTextField({ type, name, placeholder, value }) {
  return (
    <div className="input-field">
      <input id={name} type={type} name={name} value={value} required />
      <label htmlFor={name}>{placeholder}</label>
    </div>
  );
}

 

 

/* .input-field 는 클래스 이름이 input-field인 HTML 요소를 선택 */
.input-field {
  /* 선택된 요소의 위치를 상대위치로 설정. */
  position: relative;
  /* 요소의 아래에 1rem의 마진을 추가 */
  margin-bottom: 1rem;
}


.input-field input {
  /* 선택된 input 요소의 너비를 부모 요소의 100%로 설정 */
  width: 100%;

  /* border-bottom: 1px solid #9e9e9e;
  border-top: 1px solid #9e9e9e;
  border-left: 1px solid #9e9e9e;
  border-right: 1px solid #9e9e9e; */

  /* 선택된 input 요소의 테두리를 1픽셀의 실선으로 설정하고 색상을 #ccc로 설정 */
  border: 1px solid #ccc;
  /* 선택된 input 요소의 테두리의 모서리를 8픽셀 반지름을 가진 원으로 설정 */
  border-radius: 8px;
  /* 선택된 input 요소에 대한 아웃라인(테두리)을 제거. 아웃라인은 요소에 포커스 될 때 보여진다.*/
  outline: none;
  /*  선택된 input 요소의 글꼴 크기를 0.9rem으로 설정 */
  font-size: 0.9rem;
  /* 선택된 input 요소에 패딩을 추가. 여기서는 위아래로 1rem, 좌우로는 패딩 없음 */
  padding: 1rem 0;
  /* 선택된 input 요소의 배경을 투명처리 0은 완전투명. 1은 불투명  */
  background: transparent 0.3; /* background: black; */
  /* 선택된 input 요소의 테두리 색상이 변할 때, 0.2초 동안 부드럽게 변하도록 설정 */
  transition: border-color 0.2s;
  /* margin: 8; */
  margin: 0;
  /* 선택된 input 요소에서 커서가 시작되는 지점을 왼쪽에서부터 오른쪽으로 1rem 이동. */
  text-indent: 1rem; 
}


/* .input-field label - 클래스 이름이 input-field인 HTML 요소 내부의 label 요소를 선택 */
.input-field label {
  /* 선택된 label 요소의 위치를 절대 위치로 설정. 
  절대 위치 요소는 가장 가까운 위치 지정된 조상 요소
  (즉, position이 static이 아닌 요소)에 대해 상대적으로 위치가 설정된다. */
  position: absolute;
  /* 선택된 label 요소를 상단으로부터 0.6rem 떨어진 위치에 배치한다 */
  top: 0.8rem;
  /* 선택된 label 요소를 왼쪽으로부터 1rem 떨어진 위치에 배치 */
  left: 1rem;
  /* 선택된 label 요소의 글꼴 크기를 1rem으로 설정 */
  font-size: 1rem;

  background-color: transparent;

  /* 선택된 label 요소에서 위쪽 위치와 글꼴 크기가 변할 때 
  0.2초 동안 부드럽게 변하도록 설정 */
  transition: top 0.3s, font-size 0.3s, background-color 0.3s;

  
  /* transition: top 0.2s, font-size 0.2s; */
  /* 선택된 label 요소의 색상을 #9e9e9e로 설정 */
  color: #9e9e9e;
  /* 선택된 label 요소의 z-index 값을 1로 설정.
   z-index는 겹칠 때 요소의 수직 순서를 결정. 값이 높을수록 위에 배치 */
  z-index: 1;
  padding: 1rem 2;
  
  
}


/* 이는 유효한 값이 입력된 input 요소나 
포커스된 input 요소 바로 다음에 오는 label 요소를 선택 */
.input-field input:valid + label,
.input-field input:focus + label {
  /* 선택된 label 요소를 상단으로부터 -0.5rem만큼 떨어진 위치에 배치. 음수 값은 원래 위치에서 위로 이동 */
  top: -0.5rem;
  /* 선택된 label 요소의 글꼴 크기를 0.7rem으로 설정 */
  font-size: 0.7rem;
  /* 선택된 label 요소를 왼쪽으로부터 1rem만큼 떨어진 위치에 배치 */
  left: 1rem;
  /*  선택된 label 요소의 글자 색상을 검정색으로 설정 */
  color: black;
  /* background-color: white; - 선택된 label 요소의 배경색을 흰색으로 설정 */
  background-color: white;

  padding-left: 3px;
  padding-right: 3px;

  /* transition: top 0.5s, font-size 0.5s; */
  /* transition: top 0.2s, font-size 0.2s background-color 5s; */
  transition: top 0.2s, font-size 0.2s, background-color 0.3s;




}

/* 유효한 값이 입력된 input 요소와 포커스된 input 요소를 선택 */
.input-field input:valid,
.input-field input:focus {
  /* 선택된 input 요소의 테두리를 1픽셀의 검은색 실선으로 설정 */
  border: 1px solid #000000;
}

 

 

2. 버튼

       <CustomButton buttonType="button"  value="Click me" />

import PropTypes from 'prop-types';
import './CustomButton.css';

CustomButton.propTypes = {
  // buttonType: PropTypes.string,
  buttonType: PropTypes.oneOf(['button', 'submit', 'reset']),
  value: PropTypes.string,
  
}

CustomButton.defaultProps = {
  buttonType: 'button',
};

export default function CustomButton({buttonType, value}) {

  if(buttonType === 'submit'){
    return (
      <div className="custom-button-div">
          <button type="submit" id={value} className="custom-button">{value}</button>
      </div>
    );
  }

  
    return (
        <div className="custom-button-div">
            <button type="button" id={value} className="custom-button">{value}</button>
        </div>
    );
  
}

.custom-button-div{
    position: relative;
    width: 100%;
    margin-bottom: 1rem;
}

.custom-button{
    width: 100%;
    font-size: 0.9rem;
    font-weight: 600;
    color: white;
    padding: 1rem 0;
    background-color: black;
    border-radius: 8px;
    border: transparent;
    transition: background-color 0.3s color 0.3s;
    /* border: 1px solid #ccc; */
}

.custom-button:active{
    background-color: #ccc;
    color: black;
    transition: background-color 0.3s color 0.3s;

}

/* .custom-button:hover{
    background-color: white;
} */

 

위의 설정을 완료했다면

 

3. RegisterComponents.css

import CustomTextField from './registerComponents/CustomTextField';
import CustomButton from './registerComponents/CustomButton';
import './registerComponents/RegisterComponent.css'

...
 
 return (
    <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
       <div className='input-container'>
        <CustomTextField type="text" name="password" placeholder="Contract code"/>
        {/* <RegisterForm type="password" name="password2" placeholder="Contract code"/> */}
        {/* <CustomButton buttonType="button" value="contract code verification!!!"/> */}
        <CustomButton buttonType="button"  value="Click me" />
        <CustomTextField type="text" name="password" placeholder="Contract code"/>
        <CustomButton buttonType="button"  value="Click me!" />
       </div>

.input-container {
    display: flex;
    justify-content: space-between;
  }
  
  @media (max-width: 600px) {
    .input-container {
      flex-direction: column;
    }
  }