dodomProj / dodom_front

DODOM, 은둔형 청년들을 위한 전문 헬핑 플랫폼
0 stars 1 forks source link

질문 컴포넌트(1~5) #22

Closed YUNH7 closed 1 year ago

YUNH7 commented 1 year ago
  1. 질문들을 감쌀 부모 컴포넌트에 font-size 속성 주기
  2. question: 질문, type: textarea 혹은 input의 type값, placeholder, textareaRows: type이 textarea인 경우 높이(줄 수)
    <QuestionInput
    question="상담 가능 시간"
    type="textarea"
    placeholder="상담 가능 시간을 모두 적어주세요!"
    textareaRows={3}
    />
YUNH7 commented 1 year ago

변경하고 싶으신 부분 있으면 편하게 말씀해주세요!!(변수이름, 추가데이터 등) QuestionInput 컴포넌트

  1. onBlur prop 추가(필수) 상태 set 함수 내려주시면 됩니다 onChange로 하면 렌더링이 너무 많아질 것 같아서 onBlur이벤트로 만들었어요

    • state(value) props는 안 내려줘도 될 것 같아서 안만들었는데 필요하시면 말씀해주세요
  2. id prop 추가(필수) input에는 항상 label이 같이 있는게 좋다는 말을 들어서 p요소로 보여주던 question을 label로 바꿨습니다 label이랑 input id로 부여할 값 내려주세요

  3. type prop 필수로 변경 기존에 type이 없고 children이 있으면 input/textarea 없이 children만 보이게 만들었었는데 로직이 지저분하고 불필요한 props가 너무 많아서 "QuestionBlock"로 분리했습니다

  4. placeholderColor prop 추가(선택) 후기 페이지랑 상담신청폼에서 플레이스홀더 색이 다르더라고요 기본값을 상담신청폼의 색(sub3)으로 해놔서 상담신청폼에서는 따로 안주셔도 됩니다

  5. QuestionInput margin-bottom: 2rem; 제거 컴포넌트들을 감싸는 요소에서 display:flex, gap: 0rem;으로 지정해주세요

QuestionBlock 컴포넌트 props로 question과 children 내려주시면 됩니다

<QuestionInput question="2. 상담은 어느 정도 만족하셨나요?">
  <Select />
</QuestionInput>