공통 컴포넌트 스타일 수정사항

[hyunjin0910]

AppLayout

• 가로 width 375px보다 커야할지도. 모바일에서 작게 보인다

Button

• type마다 height 고정 및 높이 키우기

Input

• focus 시 primary 컬러로
• 에러를 prop으로 받아서 input 창이 빨간색으로 되는 건?
• width를 조정

[hyunjin0910]

CheckBox

• id Wrapper에 적용 필요

interface CheckBoxInterface {
  id?: string | number;
  text?: string;
  isChecked?: boolean;
  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
}

const CheckBox: React.FC<CheckBoxInterface> = ({
  id,
  text,
  isChecked,
  onChange,
}) => {
  return (
    <Wrapper key={id}>
      <StyledInput type="checkbox" checked={isChecked} onChange={onChange} />
      <p>{text}</p>
    </Wrapper>
  );
};

[dahye1013]

button, input Size 정의 필요

[dahye1013]

button default - height - 38px
button large - 48px

input default - height - 38px
input large - 48px

block 일 때는 꽉차게 display: block 기준으로 작업하면 width는 따로 옵션으로 설정하지 않아도 될 것 같아요. 필요하다면 font 사이즈만 페이지단에서 핸들링하면 될 것 같습니당!

---

참고
https://getbootstrap.com/docs/4.0/components/buttons/

[dahye1013]

font-size를 브라우저 기준 default 16px -> 10px로 수정하고, rem으로 작업하면 좋을 것 같아요!

[sa02045]

10px은 작지않을까요? 16px 기본값 그대로 쓰는게 좋아보입니다.

참고사이트 첨부합니다. https://www.learnui.design/blog/mobile-desktop-website-font-size-guidelines.html